diff --git a/.cursor/rules/project.mdc b/.cursor/rules/project.mdc
index b4b99bb5834..7e86f01780b 100644
--- a/.cursor/rules/project.mdc
+++ b/.cursor/rules/project.mdc
@@ -12,7 +12,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 ## Tech Stack
 
 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
-- **Frontend**: React 18, Vite, Semi Design UI (@douyinfe/semi-ui)
+- **Frontend**: React 18, Vite, Hero UI (@heroui/react) with compatibility wrappers
 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
 - **Cache**: Redis (go-redis) + in-memory cache
 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)
diff --git a/.gitignore b/.gitignore
index c17652a21a3..3e0f152379f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,6 +22,12 @@ tiktoken_cache
 web/bun.lock
 plans
 .claude
+.playwright-mcp
+*.png
+*.jpg
+*.jpeg
+!web/public/**/*.png
+!web/public/**/*.jpg
 
 electron/node_modules
 electron/dist
diff --git a/AGENTS.md b/AGENTS.md
index cd1756d5566..acc88c20cb1 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -7,7 +7,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 ## Tech Stack
 
 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
-- **Frontend**: React 18, Vite, Semi Design UI (@douyinfe/semi-ui)
+- **Frontend**: React 18, Vite, Hero UI (@heroui/react) with compatibility wrappers
 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
 - **Cache**: Redis (go-redis) + in-memory cache
 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)
diff --git a/CLAUDE.md b/CLAUDE.md
index f0385a574bc..3b576e48199 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -7,7 +7,7 @@ This is an AI API gateway/proxy built with Go. It aggregates 40+ upstream AI pro
 ## Tech Stack
 
 - **Backend**: Go 1.22+, Gin web framework, GORM v2 ORM
-- **Frontend**: React 18, Vite, Semi Design UI (@douyinfe/semi-ui)
+- **Frontend**: React 18, Vite, Hero UI (@heroui/react) with compatibility wrappers
 - **Databases**: SQLite, MySQL, PostgreSQL (all three must be supported)
 - **Cache**: Redis (go-redis) + in-memory cache
 - **Auth**: JWT, WebAuthn/Passkeys, OAuth (GitHub, Discord, OIDC, etc.)
diff --git a/TODO.md b/TODO.md
new file mode 100644
index 00000000000..73bf409cd8a
--- /dev/null
+++ b/TODO.md
@@ -0,0 +1,337 @@
+# TODO
+
+## HeroUI Migration
+
+- [x] Start local dev environment at `http://localhost:5173/`.
+- [x] Refresh current Semi compatibility wrapper inventory.
+- [x] Continue migrating low-risk settings containers away from `@/components/ui/semi`.
+- [x] Re-scan remaining Semi wrapper imports after each migration batch.
+- [x] Verify frontend build or targeted lint before handoff.
+- [x] Migrate second low-risk batch: `ParamOverrideEntry`, `ThinkingContent`, `ImageUrlInput`, `ModelPricingCombined`, `ChatsSetting`.
+- [x] Migrate third low-risk settings batch: `DashboardSetting`, `ModelDeploymentSetting`, `OperationSetting`.
+- [x] Migrate personal settings batch: `PreferencesSettings`, `EmailBindModal`, `WeChatBindModal`, `ChangePasswordModal`, `PersonalSetting`.
+- [x] Migrate fifth low-risk batch: `AccountDeleteModal`, `UserInfoHeader`, and native language selector cleanup in `PreferencesSettings`.
+- [x] Migrate playground batch: `ConfigManager`, `CustomRequestEditor`.
+- [x] Migrate SSE viewer: `SSEViewer`.
+- [x] Migrate playground controls: `ParameterControl`, `SettingsPanel`.
+- [x] Complete playground direct migration: `DebugPanel`, `ChatArea`, `MessageContent`, `pages/Playground/index.jsx`.
+- [x] Remove playground Semi token references: `CodeViewer`, `CustomInputRender`.
+- [x] Complete settings direct migration: settings files now import Hero compatibility entrypoints instead of `@/components/ui/semi*`.
+- [x] Remove settings Semi token references.
+- [x] Complete table direct migration: table files now import Hero compatibility entrypoints instead of `@/components/ui/semi*`.
+- [x] Remove table and table-hook Semi token references.
+- [x] Complete other business migration: `topup` and `helpers` now import Hero compatibility entrypoints.
+- [x] Remove all remaining Semi token references.
+- [x] Delete unused deep typography shims under `web/src/components/ui/semi/lib/es/typography/`.
+- [x] Start true HeroUI cleanup: `SubscriptionPlansCard` no longer uses `HeroCompat` and now uses HeroUI `Card.Content`, `Chip`, `Separator`, native select, and lightweight skeletons.
+- [x] Continue pricing cleanup: `PricingCardSkeleton`, `PricingCardView`, and `FilterModalFooter` moved away from old Skeleton/Tag/Button props.
+- [x] Fix console layout root causes: Console pages hide footer, main content scrolls, Console routes remount by path/search, settings tabs use controlled native buttons.
+- [x] Rewrite Operation/SettingsHeaderNavModules + SettingsSidebarModulesAdmin to native HeroUI v3 (CSS Grid, native Switch+Control+Thumb, Button isPending).
+- [x] Fix semi.js Spin/Switch/Col/Form/Banner compat bugs that were silently breaking page layouts (collapsed grids, invisible toggles, missing banner descriptions, infinite re-render loops).
+- [x] Stabilize useTableFilterForm api ref to fix infinite update loop on /console/token.
+- [x] Map semi-icons string sizes (small/default/large) to numeric pixels (fixed giant warning triangle on /console/models).
+- [x] Rewrite Operation tab batch (SettingsCheckin, SettingsCreditLimit, SettingsLog, SettingsSensitiveWords, SettingsMonitoring, HttpStatusCodeRulesInput) to native HeroUI v3.
+- [x] Rewrite Dashboard tab (SettingsDataDashboard) and Drawing tab (SettingsDrawing) to native HeroUI v3.
+- [x] Rewrite RateLimit tab (SettingsRequestRateLimit) to native HeroUI v3.
+- [x] Rewrite Payment tab batch (SettingsGeneralPayment, SettingsPaymentGateway easy-pay, SettingsPaymentGatewayStripe) to native HeroUI v3.
+- [x] Rewrite Model tab batch (SettingGlobalModel, SettingGeminiModel, SettingClaudeModel, SettingGrokModel) and Model Deployment (SettingModelDeployment) to native HeroUI v3.
+- [x] Rewrite Operation/SettingsGeneral (额度展示类型 + currency exchange combined control) to native HeroUI v3.
+- [x] Rewrite ModelHeader / ModelEndpoints / ModelBasicInfo (model-pricing detail subviews) to native HeroUI v3 + lucide.
+- [x] Rewrite ChannelsTabs / ModelsTabs to native pill-style tabs with action menus and ConfirmDialog instead of Semi Tabs/Dropdown/Modal.confirm.
+- [x] Rewrite SelectionNotification: replace Semi Notification with a fixed bottom-anchored bar.
+- [x] Rewrite small modals to native v3 Modal: BatchTagModal, ConfirmationDialog (model-deployments), SyncWizardModal, MissingModelsModal, EditVendorModal, PricingFilterModal.
+- [x] Rewrite channels/index, models/index, subscriptions/index to drop Banner/Modal compat (use Tailwind warning panels + ConfirmDialog).
+- [x] Rewrite AutoGroupList (Ratio/components) to native HTML datalist + lucide buttons + window.confirm.
+- [x] Rewrite GroupTable (Ratio/components) to native inputs + Tailwind + lucide.
+- [x] Rewrite ModelDetailSideSheet to a native fixed-position aside panel with backdrop.
+- [x] Rewrite PrefillGroupManagement to a native fixed left-side panel + ConfirmDialog.
+- [x] Rewrite Codex/SingleModel/EditDeployment modals to native HeroUI v3 Modal anatomy.
+- [x] Rewrite GroupGroupRatioRules + GroupSpecialUsableRules (Ratio/components) to native datalist + lucide buttons + window.confirm.
+- [x] Rewrite AddUserModal (table/users) to a native fixed left-side panel.
+- [x] Rewrite ModelsActions to drop Modal/Popover/RadioGroup compat (uses ConfirmDialog, custom HoverPopover, Button isPending).
+- [x] Inline Tag/Avatar/Typography/Toast wrappers in helpers/render.jsx and helpers/utils.jsx (removes 2 high-fanout HeroCompat imports — 6 files dropped from compat in one shot).
+- [x] Rewrite ModelPricingTable (model-pricing detail) to native HTML table + Tailwind chips.
+- [x] Rewrite ChannelsActions (batch operations) to ConfirmDialog + ClickDropdown + lucide ChevronDown.
+- [x] Rewrite UsersColumnDefs to native chips + HoverPanel + ClickMenu (drops Space/Tag/Progress/Popover/Typography/Dropdown/IconMore from compat in one shot).
+- [x] Rewrite SubscriptionsColumnDefs to native chips + HoverPanel + ConfirmDialog (drops Modal/Tag/Typography/Popover/Divider/Space from compat).
+- [x] Extract HoverPanel and ClickMenu shared components (`web/src/components/common/ui/HoverPanel.jsx`, `ClickMenu.jsx`) so future column defs can reuse without duplicating.
+- [x] Rewrite ModelsColumnDefs to native StringTag/ConfirmDialog/CopyableText (drops Space/Tag/Typography/Modal from compat).
+- [x] Rewrite Ratio/ModelRatioSettings (8 JSON textareas + reset model ratio confirm) to native textarea + Switch + ConfirmDialog (drops Form/Col/Row/Spin/Popconfirm/Space from compat).
+- [x] Rewrite PricingTableColumns to native chips + lucide HelpCircle (drops Tag/Space/IconHelpCircle from compat).
+- [x] Rewrite ChannelUpstreamUpdateModal to native v3 Modal anatomy + custom pill-style tabs + native checkbox grid + ConfirmDialog (drops Modal/Checkbox/Empty/Tabs/Typography/IconSearch/Illustrations from compat).
+- [x] Rewrite UpstreamConflictModal (model conflict resolution table) to native HTML table with sticky-left model column, per-column header checkboxes (with `indeterminate` ref), HoverPanel for diff content, and a simple Pager (drops Modal/Table/Checkbox/Empty/Tag/Popover/Typography/Illustrations from compat).
+- [x] Rewrite EditPrefillGroupModal (left-side panel) to native fixed aside + custom TagInput (Backspace removal, comma/Enter commit, click X to remove tag) + native select for type (drops SideSheet/Form/Tag/Spin/Avatar/Row/Col + Form.TagInput from compat).
+- [x] Rewrite UserBindingManagementModal to native v3 Modal anatomy + Spinner + ConfirmDialog (drops Modal/Spin/Typography/Checkbox/Tag/IconLink/IconMail/IconDelete/IconGithubLogo from compat).
+- [x] Rewrite UserSubscriptionsModal to right-side panel + native select + ConfirmDialog (keeps CardTable for now; drops SideSheet/Modal/Empty/Tag/Typography/Space/IconPlusCircle/Illustrations).
+- [x] Rewrite CheckinCalendar with custom MonthCalendar (7-col grid, prev/next/today nav, today pill, dateRender callback) + ConfirmDialog-style Modal for Turnstile (drops Calendar/Spin/Collapsible/Avatar/Typography/Modal from compat).
+- [x] Rewrite EditRedemptionModal (left/right side panel) to native fixed aside + custom NumberField with prefix slot + native datetime-local input + ConfirmDialog for post-create download (drops SideSheet/Modal/Form/Spin/Tag/Typography/Avatar/Row/Col/InputNumber/IconCreditCard/IconSave/IconClose/IconGift from compat).
+- [x] Rewrite ChannelSelectorModal (settings) to v3 Modal + native HTML table with HighlightText (mark element), HeaderCheckbox (indeterminate ref), simple per-page pager + page size select (drops Modal/Table/Space/Highlight/Tag/IconSearch from compat).
+- [x] Rewrite SettingsPaymentGatewayCreem (Payment tab) to native HeroUI v3: 3-col grid + product table with v3 Modal for add/edit (drops Form/Avatar/Typography/Tag/Modal/Table/InputNumber/IconCoinMoneyStroked from compat).
+- [x] Rewrite SettingsFAQ (Dashboard tab) to native HTML table + HeaderCheckbox + ConfirmDialog + v3 Modal for add/edit (drops Space/Table/Form/Typography/Empty/Divider/Modal/Illustrations from compat).
+- [x] Rewrite SettingsPaymentGatewayWaffoPancake (Payment tab) to native v3 Switch+Field grid (3+3+2+2+2 column layout, multi-environment webhook keys, sandbox toggle) (drops Banner/Col/Form/Row/Spin from compat).
+- [x] Rewrite SettingsUptimeKuma (Dashboard tab) to native HTML table + HeaderCheckbox + ConfirmDialog + v3 Modal (drops Space/Table/Form/Typography/Empty/Divider/Modal/Illustrations from compat).
+- [x] Rewrite SettingsAPIInfo (Dashboard tab) to native HTML table + custom ColorChip/ColorDot palette + HeaderCheckbox + ConfirmDialog + v3 Modal (drops Space/Table/Form/Typography/Empty/Divider/Avatar/Modal/Tag/Illustrations from compat).
+- [x] Rewrite SettingsAnnouncements (Dashboard tab) to native HTML table + TypeChip + datetime-local input + 2 v3 Modals (edit + content fullscreen) + ConfirmDialog (drops Space/Table/Form/Typography/Empty/Divider/Modal/Tag/TextArea/Illustrations from compat).
+- [x] Rewrite TaskLogsColumnDefs (task logs columns) and MjLogsColumnDefs (Midjourney logs columns) to native ColorTag/ProgressBar/EllipsisText/UserChip helpers with 16-color palette and lucide icon prefixes (drops Progress/Tag/Typography/Avatar/Space from compat across both files).
+- [x] Rewrite TokensColumnDefs (tokens columns) to native Chip/ProgressBar/HoverPanel/ClickMenu/ConfirmDialog primitives with show-hide token key cell, vendor avatar pills, split chat menu, and inline copy popover (drops Dropdown/Space/SplitButtonGroup/Tag/AvatarGroup/Avatar/Progress/Popover/Typography/Modal + IconTreeTriangleDown/IconCopy/IconEyeOpened/IconEyeClosed from compat).
+- [x] Rewrite UsageLogsColumnDefs (usage logs columns) to native ColorTag/UserChip/EllipsisText/HoverPanel primitives with channel-affinity sparkles overlay, stream-status alert overlay, model-mapped popover, cache-summary subtitle, and segment-style detail summary (drops Avatar/Space/Tag/Popover/Typography + IconHelpCircle from compat).
+- [x] Rewrite tokens/index (FluentRead detection notice) without HeroCompat: Notification.info popup is replaced by a controlled top-right `FluentNoticePanel` (HeroUI Button + native `<select>` for parity with CCSwitchModal), Notification.close lifecycle becomes plain React state, and Toast/showInfo helpers replace the leftover Toast.success / Notification.close calls (drops Notification/Space/Toast/Typography + Select compat usage from the file).
+- [x] Rewrite PricingTable (model-pricing detail table view) to native HTML table without HeroCompat: native thead + tbody, optional row-selection column with HeaderCheckbox + indeterminate ref, sticky-right anchoring honoured for the price column outside compact mode, mobile path delegates to shared CardTable; pagination uses HeroUI Button + native page-size select with rolling page slicing driven by `currentPage`/`pageSize` from `useModelPricingData` (drops Table compat from PricingTable.jsx — last surface in the model-pricing area still on HeroCompat).
+
+## Current Hotspots
+
+- `settings`: largest remaining page-level area, especially form-heavy settings pages.
+- `table`: many modals and column definition files still use compatibility wrappers.
+- `playground`: smaller but still has `Typography`, `Tabs`, `Dropdown`, `Collapse`, and token remnants.
+
+## Next Migration Candidates
+
+- `web/src/components/settings/{DashboardSetting,ModelDeploymentSetting,OperationSetting}.jsx`: low-risk container files that mainly depend on `Spin`.
+- `web/src/pages/Setting/{Drawing,Performance,RateLimit}/...`: form pages still use `Form`, `Row`, `Col`, `Spin`, and `Tag`.
+- `web/src/components/table/{channels,models}/...`: high-impact table and modal area, but should be migrated in smaller batches.
+
+## Latest Inventory
+
+- Wrapper imports: `other 3` (Hero compatibility bridge files only).
+- Playground wrapper imports: `0`.
+- Playground Semi token references: `0`.
+- Settings wrapper imports: `0`.
+- Settings Semi token references: `0`.
+- Table wrapper imports: `0`.
+- Table Semi token references: `0`.
+- Business wrapper imports: `0`.
+- Semi token references: `0`.
+- Semi token references: `playground 4`, `settings 16`, `table 31`, `hooks 1`, `other 5`.
+
+## Verification
+
+- `bun run build`: passed.
+- `curl -I http://localhost:5173/`: returned `200 OK`.
+- `npx -y react-doctor@latest . --verbose --diff`: completed with existing project findings; score `75 / 100`, with 21 errors and 521 warnings across the broader changed tree.
+- `bun run build` after second migration batch: passed.
+- `bun run build` after third migration batch: passed.
+- `bun run build` after personal settings batch: passed.
+- `bun run build` after fifth migration batch: passed.
+- `bun run build` after playground batch: passed.
+- `bun run build` after SSE viewer migration: passed.
+- `bun run build` after playground controls migration: passed.
+- `bun run build` after completing playground migration: passed.
+- `bun run build` after settings migration: passed.
+- `curl -I http://localhost:5173/` after settings migration: returned `200 OK`.
+- `bun run build` after table migration: passed.
+- `curl -I http://localhost:5173/` after table migration: returned `200 OK`.
+- `bun run build` after other migration: passed.
+- `bun run build` after deleting unused shims: passed.
+- `curl -I http://localhost:5173/` after final cleanup: returned `200 OK`.
+- `bun run build` after `SubscriptionPlansCard` HeroUI cleanup: passed.
+- `bun run build` after pricing card cleanup: passed.
+- Console route/sidebar and settings tab navigation verified with Playwright.
+- After Operation/Dashboard/Drawing/RateLimit/Payment/Model/General rewrites: 88 files still importing HeroCompat (down from 106), `bun run build` passes, all settings tabs render correctly with Playwright (Operation/Models/Model Deployment/Payment/Stripe verified).
+- After table modal/index/tabs rewrites: 72 files still importing HeroCompat (down from 85), `bun run build` passes, /console/models tabs + 新增供应商 modal verified, /console/channel tabs verified, /console/subscription verified.
+- After ModelDetailSideSheet / GroupTable / PrefillGroupManagement / CodexOAuth / SingleModelSelect / EditDeployment rewrites: 66 files still importing HeroCompat, `bun run build` passes, /pricing renders, /console/setting?tab=ratio (分组相关设置) renders, /console/models 预填组管理 modal renders.
+- After GroupGroupRatioRules / GroupSpecialUsableRules / AddUserModal / ModelsActions / helpers (utils + render) rewrites: 60 files still importing HeroCompat (down from 106 originally), `bun run build` passes, /console (dashboard with renderModelTag), /console/token (renderGroup tag) verified.
+- After ChannelsActions / ModelPricingTable / UsersColumnDefs / SubscriptionsColumnDefs rewrites: 56 files still importing HeroCompat (down ~47% from 106 originally). `bun run build` passes. /console/channel and /console/user (with custom HoverPanel popovers) and /console/subscription verified.
+- After extracting HoverPanel + ClickMenu shared components, rewriting ModelsColumnDefs and ModelRatioSettings: 54 files still importing HeroCompat (down ~49% from 106 originally). `bun run build` passes. /console/setting?tab=ratio (手动编辑 mode) and /console/models verified.
+- After PricingTableColumns / ChannelUpstreamUpdateModal / UpstreamConflictModal / EditPrefillGroupModal rewrites: 50 files still importing HeroCompat (53% complete). `bun run build` passes. /console/models 预填组管理 → 新建组 modal verified to open with new TagInput / select / textarea form.
+- After UserBindingManagementModal / UserSubscriptionsModal / CheckinCalendar (custom MonthCalendar) rewrites: 47 files still importing HeroCompat (~56% complete). `bun run build` passes. /console/personal renders correctly.
+- After EditRedemptionModal / ChannelSelectorModal / SettingsPaymentGatewayCreem rewrites: 44 files still importing HeroCompat (~58% complete). `bun run build` passes. /console/setting?tab=payment → Creem 设置 verified.
+- After SettingsFAQ + SettingsPaymentGatewayWaffoPancake rewrites: 42 files still importing HeroCompat (~60% complete). `bun run build` passes. /console/setting?tab=dashboard with FAQ panel verified.
+- After SettingsUptimeKuma + SettingsAPIInfo + SettingsAnnouncements rewrites (3 of the 4 dashboard CRUD tables follow same pattern): 39 files still importing HeroCompat (~63% complete). `bun run build` passes. /console/setting?tab=dashboard verified — all 3 inline panels (Announcements/FAQ/UptimeKuma/APIInfo) render with new HTML tables, pagination, switch toggles.
+- After TaskLogsColumnDefs + MjLogsColumnDefs rewrites: 37 files still importing HeroCompat (~65% complete). `bun run build` passes. /console/task and /console/midjourney render correctly.
+- After TokensColumnDefs rewrite: 36 files still importing HeroCompat (~66% complete). `bun run build` passes. /console/token renders with new token key show/hide + copy menu + chat split menu + delete confirm.
+- After UsageLogsColumnDefs rewrite: 35 files still importing HeroCompat (~67% complete). `bun run build` passes. /console/log renders with new ColorTag/UserChip/EllipsisText/HoverPanel primitives; HMR reloaded both UsageLogsTable and TokensTable cleanly.
+- After tokens/index FluentNoticePanel rewrite: 34 files still importing HeroCompat (~68% complete). `bun run build` passes. /console/token loads without errors; FluentRead notice is now a controlled top-right panel that auto-shows when the `#fluent-new-api-container` MutationObserver fires and dismisses cleanly via either `setFluentNoticeOpen(false)` or the local `不再提醒` suppression flag.
+- After PricingTable rewrite: 33 files still importing HeroCompat (~69% complete). `bun run build` passes. /pricing 表格视图 verified: header checkbox + column headers (模型名称 / 供应商 / 描述 / 标签 / 计费类型 / 可用端点类型 / 模型价格) render with native `<table>`; empty-state Inbox card centred; no new console errors.
+
+## Console Style Migration from heroui-pro/template-dashboard
+
+- [x] Strip body radial-gradient background; body now matches template's flat `var(--background)`.
+- [x] Bring DashboardHeader greeting in line with template navbar title (`text-xl font-semibold text-foreground` + `truncate`).
+- [x] Replace literal grays in dashboard panels with semantic HeroUI tokens (`text-foreground`, `text-muted`, `text-primary`, `border-border`, `bg-surface-secondary`).
+- [x] Drop `!font-bold` on API route label in `ApiInfoPanel`; use template's `font-semibold` weight instead.
+- [x] Add `tabular-nums` + semantic color to KPI numbers in `StatsCards` to match template KPI styling.
+- [x] `bun run build` passed after style migration.
+
+### Sidebar (follow-up after first round of feedback)
+- [x] Drop `sidebar-shell` glassmorphism + heavy box-shadow + backdrop-blur; sidebar now uses flat `bg-background border-r border-border` like template.
+- [x] Replace uppercase tracking-wide section headers with quiet `text-xs text-muted` labels.
+- [x] Menu items: `rounded-2xl` → `rounded-md`, `font-semibold` → `font-medium`, slate colors → semantic `text-foreground`/`text-muted`, primary tinted active state → `bg-surface-secondary`.
+- [x] Add template-style header block (avatar + display name + role) at top of sidebar.
+- [x] Simplify collapse button (drop bordered/backdrop-blur styling, use ghost variant).
+
+## Header Navbar Rebuild (feature/header-navbar-rebuild)
+
+- [x] Adopt `@heroui-pro/react` `Navbar` as the headerbar root: `Navbar.Header`, `Navbar.Brand`, `Navbar.Content`, `Navbar.Spacer`, `Navbar.Item`, `Navbar.MenuToggle`, `Navbar.Menu`, `Navbar.MenuItem`.
+- [x] Wire `navigate` prop to `react-router` so `Navbar.Item` performs client-side navigation and external links open in a new tab.
+- [x] Refactor `Navigation.jsx` to render desktop nav links via `Navbar.Item` with `isCurrent` derived from `useLocation()`.
+- [x] Add `MobileNavMenu.jsx` rendering `Navbar.Menu` / `Navbar.MenuItem` for non-console mobile routes; the existing `MobileMenuButton` (sidebar drawer trigger) still owns the console-mobile case.
+- [x] Convert `ActionButtons.jsx` to a fragment so `Navbar.Content` (the new flex parent) controls spacing.
+- [x] Add `Navbar.MenuToggle` only on non-console routes (md:hidden) so the hamburger never overlaps the sidebar drawer trigger.
+- [x] Localize new strings `主导航` and `打开菜单` across `zh-CN`, `zh-TW`, `en`, `fr`, `ja`, `ru`, `vi`.
+- [x] `bun run build` passes after the rebuild.
+
+### Follow-ups
+- [ ] Manual QA pass on responsive breakpoints (xs/sm/md), console + non-console routes, and the mobile menu open/close animation while the sidebar drawer is also available.
+- [ ] Verify `hideOnScroll` is intentionally off — current layout pins the header inside `Sidebar.Provider`'s flex column, so sticky/scroll-hide does not apply.
+
+### Next steps
+- [ ] Visual QA all `/console` sub-pages in light + dark themes; capture before/after.
+- [ ] Consider centering page content with `max-w-7xl mx-auto` like template (currently console pages stretch full width).
+- [x] Audit remaining literal `text-gray-*` / `text-slate-*` usages elsewhere under `/console` (channels/user/log/topup/setting tables) and replace with semantic tokens in a follow-up pass.
+
+## Console Literal Color Audit (4 commits)
+
+Standardized literal slate/gray ramps across the entire `/console` surface to
+the HeroUI semantic tokens (`bg-background`, `bg-surface-secondary`,
+`text-foreground`, `text-muted`, `border-border`, `bg-border`,
+`bg-foreground text-background` for active pills, `border-border bg-background
+... focus:border-primary` for inline inputs, `bg-muted` for neutral status
+dots).
+
+Patterns standardized:
+- `bg-white/95 ... dark:bg-slate-950/95` → `bg-background/95 backdrop-blur`
+- `border-slate-200/80 dark:border-white/10` → `border-border`
+- `bg-slate-100/200 dark:bg-slate-800/900` → `bg-surface-secondary`
+- `bg-slate-100 text-slate-400 dark:bg-slate-800 dark:text-slate-500`
+  → `bg-surface-secondary text-muted`
+- `text-slate-500/600 dark:text-slate-300/400` → `text-muted`
+- `text-slate-700/800/900 dark:text-slate-100/200` → `text-foreground`
+- `bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900`
+  → `bg-foreground text-background`
+- `bg-white text-slate-700 dark:bg-slate-900 dark:text-slate-200` (chips,
+  table cells, inline pills) → `bg-background text-foreground`
+- `border-slate-200 bg-white ... focus:border-sky-400 dark:border-slate-700
+  dark:bg-slate-900` (inline selects, datetime inputs, single-line editors)
+  → `border-border bg-background ... focus:border-primary`
+- `text-gray-400/500/600/700/900` → `text-muted` / `text-foreground`
+- `bg-gray-50 / bg-gray-50/50` → `bg-surface-secondary` / `bg-surface-secondary/50`
+- `border-gray-100/200/300` → `border-border`
+- `hover:bg-gray-50` / `hover:bg-slate-100 dark:hover:bg-slate-800` →
+  `hover:bg-surface-secondary`
+
+Commits:
+
+1. `refactor(console): swap literal slate/gray tones for semantic tokens`
+   - TokensColumnDefs (TONE_CLASSES grey/black/white, CopyableLine hover,
+     ProgressBar, VendorAvatar, quota usage capsule).
+   - helpers/dashboard.jsx renderMonitorList (illustration tile, monitor
+     row hover, name/uptime/status, divider, uptime track + tabular-nums).
+
+2. `refactor(console): swap literal slate/gray tones for semantic tokens
+   (table + common/ui)`
+   - Column defs: UsersColumnDefs, ChannelsColumnDefs (IO.NET tooltip),
+     SubscriptionsColumnDefs, DeploymentsColumnDefs, MjLogsColumnDefs (and
+     MjLogsActions), UsageLogsColumnDefs.
+   - Shared common/ui: CardPro, CardTable, ColumnSelectorDialog,
+     ConfirmDialog, HoverPanel, TableEmptyState, RenderUtils,
+     TableFilterForm (FilterInput / FilterSelect / FilterDateRange).
+
+3. `refactor(console): swap literal slate/gray tones for semantic tokens
+   (topup + common)`
+   - Topup: InvitationCard, RechargeCard, SubscriptionPlansCard,
+     index (Creem confirm modal), PaymentConfirmModal,
+     SubscriptionPurchaseModal, TopupHistoryModal, TransferModal.
+   - Common: DocumentRenderer, MarkdownRenderer.PreCode,
+     RiskAcknowledgementModal, SecureVerificationModal, ChannelKeyDisplay,
+     ClickMenu, ColumnSelectorDialog, JSONEditor, SelectableButtonGroup.
+
+4. `refactor(console): swap literal slate/gray tones for semantic tokens
+   (table modals + settings + setup)` — 76 jsx files
+   - Side panels: AddUserModal, EditPrefillGroupModal,
+     PrefillGroupManagement, EditRedemptionModal, ModelDetailSideSheet,
+     UserSubscriptionsModal.
+   - Tabs / dropdowns / actions: ChannelsActions, ChannelsTabs,
+     ModelsActions, ModelsTabs, SelectionNotification.
+   - Table modals: BatchTagModal, ChannelUpstreamUpdateModal,
+     CodexOAuthModal, EditChannelModal (14 inline literals), EditTagModal,
+     SingleModelSelectModal, mj-logs ContentModal, AudioPreviewModal,
+     task-logs ContentModal, CopyTokensModal, EditTokenModal,
+     CCSwitchModal, EditModelModal, EditVendorModal, MissingModelsModal,
+     SyncWizardModal, UpstreamConflictModal, AddEditSubscriptionModal,
+     ChannelAffinityUsageCacheModal, ColumnSelectorModal,
+     ParamOverrideModal, UserInfoModal, ConfirmationDialog,
+     EditDeploymentModal, ExtendDurationModal, UpdateConfigModal,
+     ViewDetailsModal, ViewLogsModal, EditUserModal,
+     UserBindingManagementModal, ChannelSelectorModal.
+   - Pricing: PricingSidebar, PricingVendorIntro, SearchActions,
+     PricingFilterModal, ModelPricingTable, PricingCardSkeleton,
+     PricingCardView, PricingTable, PricingTableColumns.
+   - Other: ModelsColumnDefs, TaskLogsColumnDefs, tokens/index
+     (FluentNoticePanel + native model select), UsageLogsTable
+     (expanded-row grid).
+   - Settings personal: AccountManagement, CheckinCalendar,
+     NotificationSettings, PreferencesSettings, TwoFASetting,
+     UserInfoHeader, AccountDeleteModal, ChangePasswordModal,
+     EmailBindModal, WeChatBindModal.
+   - Setup wizard: AdminStep, CompleteStep, DatabaseStep, UsageModeStep.
+   - pages/Setting: SettingsAPIInfo, SettingsAnnouncements, SettingsFAQ,
+     SettingsUptimeKuma, SettingsPaymentGatewayCreem, ModelPricingEditor,
+     Setting/index (sidebar tabs).
+
+Verification: `bun run build` passes after every commit.
+`/components/table` and `/pages/Setting` now have zero literal slate/gray
+classes; `/components/settings`, `/components/topup`, `/components/setup`
+also clean.
+
+Out of scope (still uses literals — not part of /console):
+`playground/*`, `layout/headerbar/*`, `layout/Footer`, `layout/NoticeModal`,
+`auth/*`, `pages/Home`, `pages/About`, `pages/NotFound`, `pages/Forbidden`,
+`dashboard/modals/SearchModal`, `model-deployments/DeploymentAccessGuard`,
+`common/ErrorBoundary`, `ui/semi.js` (compat shim).
+
+## /console Dashboard Cards → HeroUI Pro Widget (feature/widget-dashboard-cards)
+
+Replace every `Card` based panel under `/console` (the dashboard) with the
+HeroUI Pro `Widget` component (`@heroui-pro/react`) so the surface gets the
+characteristic gray outer shell + elevated white content area + subtle inner
+shadow defined by `widget.css`.
+
+- [x] StatsCards (top 4 KPI tiles: 账户数据 / 使用统计 / 资源消耗 / 性能指标) →
+  `Widget` + `Widget.Header` (renders the existing icon+text from
+  `createSectionTitle`) + `Widget.Content`. Tightened content padding from
+  default `p-4` to `p-3`, dropped value font size from `text-lg` to
+  `text-base`, added `min-w-0` to label cluster and `shrink-0` to the
+  trailing button / sparkline so the 充值 button no longer clips against
+  `$200.00` inside the narrower Widget content area.
+- [x] ChartsPanel (模型数据分析) → `Widget` + responsive `Widget.Header`
+  (`min-h-12 flex-col … lg:flex-row`) so the inline `Tabs.List` strip fits
+  next to `Widget.Title`. `whitespace-nowrap` + `shrink-0` icon prevents
+  CJK title characters from stacking when the column is narrow.
+- [x] ApiInfoPanel (API信息) → `Widget` with `Widget.Title` + scrollable
+  `Widget.Content className='p-0'` for the existing `ScrollableContainer`
+  list / `EmptyState`.
+- [x] AnnouncementsPanel (系统公告) → `Widget` with responsive header
+  (icon + title + 最新20条 chip on one row, then `Widget.Legend` /
+  `Widget.LegendItem` for the status colors). Dot colors are mapped through
+  a small `LEGEND_COLOR_MAP` so the existing `grey/blue/green/orange/red`
+  swatch keys keep working with `Widget.LegendItem` (which expects a CSS
+  color string).
+- [x] FaqPanel (常见问答) → `Widget` + `Widget.Title` + scrollable
+  `Widget.Content className='p-0'` for the `Accordion`/empty state.
+- [x] UptimePanel (服务可用性) → `Widget` + `Widget.Header` (refresh button
+  on the right) + `Widget.Content className='p-0'` for the
+  `Tabs`/`ScrollableContainer` and `Widget.Footer` for the legend.
+
+### Notes
+
+- All headers use a `whitespace-nowrap` flex cluster around the lucide icon
+  + `Widget.Title` to keep the title text on one line at narrow widths.
+- `Widget.LegendItem` requires an explicit `color` CSS string, so semantic
+  legend keys are translated via a local color map only in
+  `AnnouncementsPanel`. `UptimePanel` already stores hex strings on the
+  `UPTIME_STATUS_MAP` constant, so it passes them through directly.
+- `Widget.Header` defaults to `h-8` and `align-items: center`. Headers that
+  carry inline tabs or a wrapping legend (`ChartsPanel`, `AnnouncementsPanel`)
+  override to `h-auto min-h-12 flex-col items-start … lg:flex-row
+  lg:items-center` so the row can grow vertically on small viewports.
+- `widget.css` is already pulled in via `@import '@heroui-pro/react/css';`
+  in `web/src/index.css`, so no extra CSS plumbing was required.
+
+### Verification
+
+- `bunx prettier --check` (touched dashboard files): passed.
+- `bunx eslint` (touched dashboard files): passed (no warnings, no errors).
+- Manual screenshot QA at `/console`: stats cards, model analytics chart,
+  API info panel, announcements panel, FAQ panel, and uptime panel all
+  render with the Widget surface (gray outer shell + elevated white
+  content area + subtle shadow) and remain functional.
diff --git a/web/bun.lock b/web/bun.lock
index da3c1e452a9..dd84716a350 100644
--- a/web/bun.lock
+++ b/web/bun.lock
@@ -1,18 +1,26 @@
 {
   "lockfileVersion": 1,
+  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "react-template",
       "dependencies": {
-        "@douyinfe/semi-icons": "^2.63.1",
-        "@douyinfe/semi-ui": "^2.69.1",
+        "@gravity-ui/icons": "^2.18.0",
+        "@heroui-pro/react": "^1.0.0-beta.1",
+        "@heroui/react": ">=3.0.0",
+        "@heroui/styles": ">=3.0.0",
         "@lobehub/icons": "^2.0.0",
+        "@number-flow/react": ">=0.5.0",
         "@visactor/react-vchart": "~1.8.8",
         "@visactor/vchart": "~1.8.8",
-        "@visactor/vchart-semi-theme": "~1.8.8",
         "axios": "1.15.0",
         "clsx": "^2.1.1",
         "dayjs": "^1.11.11",
+        "embla-carousel": ">=8.6.0",
+        "embla-carousel-react": ">=8.6.0",
+        "geist": "^1.7.0",
+        "heroui-native": "^1.0.2",
+        "heroui-native-pro": "^1.0.0-beta.1",
         "history": "^5.3.0",
         "i18next": "^23.16.8",
         "i18next-browser-languagedetector": "^7.2.0",
@@ -20,32 +28,38 @@
         "lucide-react": "^0.511.0",
         "marked": "^4.1.1",
         "mermaid": "^11.6.0",
+        "motion": ">=12.12.0",
         "qrcode.react": "^4.2.0",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
+        "react": "^19.1.0",
+        "react-aria-components": ">=1.17.0",
+        "react-dom": "^19.1.0",
         "react-dropzone": "^14.2.3",
         "react-fireworks": "^1.0.4",
         "react-i18next": "^13.0.0",
         "react-icons": "^5.5.0",
         "react-markdown": "^10.1.0",
+        "react-resizable-panels": ">=4.10.0",
         "react-router-dom": "^6.3.0",
         "react-telegram-login": "^1.1.2",
-        "react-toastify": "^9.0.8",
         "react-turnstile": "^1.0.5",
+        "recharts": ">=2.0.0",
         "rehype-highlight": "^7.0.2",
         "rehype-katex": "^7.0.1",
         "remark-breaks": "^4.0.0",
         "remark-gfm": "^4.0.1",
         "remark-math": "^6.0.0",
         "sse.js": "^2.6.0",
+        "tailwind-merge": ">=3.4.0",
+        "tailwind-variants": ">=3.2.0",
         "unist-util-visit": "^5.0.0",
         "use-debounce": "^10.0.4",
       },
       "devDependencies": {
-        "@douyinfe/vite-plugin-semi": "^2.74.0-alpha.6",
         "@so1ve/prettier-config": "^3.1.0",
+        "@tailwindcss/postcss": "^4.1.5",
         "@vitejs/plugin-react": "^4.2.1",
         "autoprefixer": "^10.4.21",
+        "bcryptjs": "^3.0.3",
         "code-inspector-plugin": "^1.3.3",
         "eslint": "8.57.0",
         "eslint-plugin-header": "^3.1.1",
@@ -53,13 +67,24 @@
         "i18next-cli": "^1.10.3",
         "postcss": "^8.5.3",
         "prettier": "^3.0.0",
-        "tailwindcss": "^3",
+        "tailwindcss": "^4.1.5",
         "typescript": "4.4.2",
         "vite": "^5.2.0",
       },
     },
   },
+  "trustedDependencies": [
+    "heroui-pro",
+    "@heroui-pro/react",
+    "heroui-native-pro",
+  ],
   "packages": {
+    "@adobe/react-spectrum": ["@adobe/react-spectrum@3.47.0", "", { "dependencies": { "@internationalized/date": "^3.12.1", "@react-types/shared": "^3.34.0", "@spectrum-icons/ui": "^3.7.0", "@spectrum-icons/workflow": "^4.3.0", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "clsx": "^2.0.0", "react-aria": "3.48.0", "react-aria-components": "1.17.0", "react-stately": "3.46.0", "react-transition-group": "^4.4.5", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-EDQuMzz0kUeiMUUlxoeLFQyyxOXaAC7qlBw2PYOUfFLYd87xcV7VVV0JxiYx8zGk1IIY3UgQHgXrS1fv7CgezQ=="],
+
+    "@adobe/react-spectrum-ui": ["@adobe/react-spectrum-ui@1.2.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" } }, "sha512-wcrbEE2O/9WnEn6avBnaVRRx88S5PLFsPLr4wffzlbMfXeQsy+RMQwaJd3cbzrn18/j04Isit7f7Emfn0dhrJA=="],
+
+    "@adobe/react-spectrum-workflow": ["@adobe/react-spectrum-workflow@2.3.5", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0" } }, "sha512-b53VIPwPWKb/T5gzE3qs+QlGP5gVrw/LnWV3xMksDU+CRl3rzOKUwxIGiZO8ICyYh1WiyqY4myGlPU/nAynBUg=="],
+
     "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
 
     "@ampproject/remapping": ["@ampproject/remapping@2.3.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw=="],
@@ -92,32 +117,116 @@
 
     "@babel/generator": ["@babel/generator@7.26.3", "", { "dependencies": { "@babel/parser": "^7.26.3", "@babel/types": "^7.26.3", "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25", "jsesc": "^3.0.2" } }, "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ=="],
 
+    "@babel/helper-annotate-as-pure": ["@babel/helper-annotate-as-pure@7.27.3", "", { "dependencies": { "@babel/types": "^7.27.3" } }, "sha512-fXSwMQqitTGeHLBC08Eq5yXz2m37E4pJX1qAU1+2cNedz/ifv/bVXft90VeSav5nFO61EcNgwr0aJxbyPaWBPg=="],
+
     "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.25.9", "", { "dependencies": { "@babel/compat-data": "^7.25.9", "@babel/helper-validator-option": "^7.25.9", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-j9Db8Suy6yV/VHa4qzrj9yZfZxhLWQdVnRlXxmKLYlhWUVB1sB2G5sxuWYXk/whHD9iW76PmNzxZ4UCnTQTVEQ=="],
 
+    "@babel/helper-create-class-features-plugin": ["@babel/helper-create-class-features-plugin@7.28.6", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-member-expression-to-functions": "^7.28.5", "@babel/helper-optimise-call-expression": "^7.27.1", "@babel/helper-replace-supers": "^7.28.6", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1", "@babel/traverse": "^7.28.6", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-dTOdvsjnG3xNT9Y0AUg1wAl38y+4Rl4sf9caSQZOXdNqVn+H+HbbJ4IyyHaIqNR6SW9oJpA/RuRjsjCw2IdIow=="],
+
+    "@babel/helper-create-regexp-features-plugin": ["@babel/helper-create-regexp-features-plugin@7.28.5", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "regexpu-core": "^6.3.1", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-N1EhvLtHzOvj7QQOUCCS3NrPJP8c5W6ZXCHDn7Yialuy1iu4r5EmIYkXlKNqT99Ciw+W0mDqWoR6HWMZlFP3hw=="],
+
     "@babel/helper-define-polyfill-provider": ["@babel/helper-define-polyfill-provider@0.6.4", "", { "dependencies": { "@babel/helper-compilation-targets": "^7.22.6", "@babel/helper-plugin-utils": "^7.22.5", "debug": "^4.1.1", "lodash.debounce": "^4.0.8", "resolve": "^1.14.2" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, "sha512-jljfR1rGnXXNWnmQg2K3+bvhkxB51Rl32QRaOTuwwjviGrHzIbSc8+x9CpraDtbT7mfyjXObULP4w/adunNwAw=="],
 
+    "@babel/helper-globals": ["@babel/helper-globals@7.28.0", "", {}, "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw=="],
+
+    "@babel/helper-member-expression-to-functions": ["@babel/helper-member-expression-to-functions@7.28.5", "", { "dependencies": { "@babel/traverse": "^7.28.5", "@babel/types": "^7.28.5" } }, "sha512-cwM7SBRZcPCLgl8a7cY0soT1SptSzAlMH39vwiRpOQkJlh53r5hdHwLSCZpQdVLT39sZt+CRpNwYG4Y2v77atg=="],
+
     "@babel/helper-module-imports": ["@babel/helper-module-imports@7.25.9", "", { "dependencies": { "@babel/traverse": "^7.25.9", "@babel/types": "^7.25.9" } }, "sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw=="],
 
     "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.26.0", "", { "dependencies": { "@babel/helper-module-imports": "^7.25.9", "@babel/helper-validator-identifier": "^7.25.9", "@babel/traverse": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-xO+xu6B5K2czEnQye6BHA7DolFFmS3LB7stHZFaOLb1pAwO1HWLS8fXA+eh0A2yIvltPVmx3eNNDBJA2SLHXFw=="],
 
+    "@babel/helper-optimise-call-expression": ["@babel/helper-optimise-call-expression@7.27.1", "", { "dependencies": { "@babel/types": "^7.27.1" } }, "sha512-URMGH08NzYFhubNSGJrpUEphGKQwMQYBySzat5cAByY1/YgIRkULnIy3tAMeszlL/so2HbeilYloUmSpd7GdVw=="],
+
     "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.25.9", "", {}, "sha512-kSMlyUVdWe25rEsRGviIgOWnoT/nfABVWlqt9N19/dIPWViAOW2s9wznP5tURbs/IDuNk4gPy3YdYRgH3uxhBw=="],
 
+    "@babel/helper-remap-async-to-generator": ["@babel/helper-remap-async-to-generator@7.27.1", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.1", "@babel/helper-wrap-function": "^7.27.1", "@babel/traverse": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-7fiA521aVw8lSPeI4ZOD3vRFkoqkJcS+z4hFo82bFSH/2tNd6eJ5qCVMS5OzDmZh/kaHQeBaeyxK6wljcPtveA=="],
+
+    "@babel/helper-replace-supers": ["@babel/helper-replace-supers@7.28.6", "", { "dependencies": { "@babel/helper-member-expression-to-functions": "^7.28.5", "@babel/helper-optimise-call-expression": "^7.27.1", "@babel/traverse": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-mq8e+laIk94/yFec3DxSjCRD2Z0TAjhVbEJY3UQrlwVo15Lmt7C2wAUbK4bjnTs4APkwsYLTahXRraQXhb1WCg=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers": ["@babel/helper-skip-transparent-expression-wrappers@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-Tub4ZKEXqbPjXgWLl2+3JpQAYBJ8+ikpQ2Ocj/q/r0LwE3UhENh7EUabyHjz2kCEsrRY83ew2DQdHluuiDQFzg=="],
+
     "@babel/helper-string-parser": ["@babel/helper-string-parser@7.25.9", "", {}, "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA=="],
 
     "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.25.9", "", {}, "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ=="],
 
     "@babel/helper-validator-option": ["@babel/helper-validator-option@7.25.9", "", {}, "sha512-e/zv1co8pp55dNdEcCynfj9X7nyUKUXoUEwfXqaZt0omVOmDe9oOTdKStH4GmAw6zxMFs50ZayuMfHDKlO7Tfw=="],
 
+    "@babel/helper-wrap-function": ["@babel/helper-wrap-function@7.28.6", "", { "dependencies": { "@babel/template": "^7.28.6", "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-z+PwLziMNBeSQJonizz2AGnndLsP2DeGHIxDAn+wdHOGuo4Fo1x1HBPPXeE9TAOPHNNWQKCSlA2VZyYyyibDnQ=="],
+
     "@babel/helpers": ["@babel/helpers@7.26.0", "", { "dependencies": { "@babel/template": "^7.25.9", "@babel/types": "^7.26.0" } }, "sha512-tbhNuIxNcVb21pInl3ZSjksLCvgdZy9KwJ8brv993QtIVKJBBkYXz4q4ZbAv31GdnC+R90np23L5FbEBlthAEw=="],
 
     "@babel/parser": ["@babel/parser@7.26.3", "", { "dependencies": { "@babel/types": "^7.26.3" }, "bin": "./bin/babel-parser.js" }, "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA=="],
 
+    "@babel/plugin-proposal-export-default-from": ["@babel/plugin-proposal-export-default-from@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-hjlsMBl1aJc5lp8MoCDEZCiYzlgdRAShOjAfRw6X+GlpLpUPU7c3XNLsKFZbQk/1cRzBlJ7CXg3xJAJMrFa1Uw=="],
+
+    "@babel/plugin-syntax-dynamic-import": ["@babel/plugin-syntax-dynamic-import@7.8.3", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ=="],
+
+    "@babel/plugin-syntax-export-default-from": ["@babel/plugin-syntax-export-default-from@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-Svlx1fjJFnNz0LZeUaybRukSxZI3KkpApUmIRzEdXC5k8ErTOz0OD0kNrICi5Vc3GlpP5ZCeRyRO+mfWTSz+iQ=="],
+
+    "@babel/plugin-syntax-flow": ["@babel/plugin-syntax-flow@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-D+OrJumc9McXNEBI/JmFnc/0uCM2/Y3PEBG3gfV3QIYkKv5pvnpzFrl1kYCrcHJP8nOeFB/SHi1IHz29pNGuew=="],
+
+    "@babel/plugin-syntax-jsx": ["@babel/plugin-syntax-jsx@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-wgEmr06G6sIpqr8YDwA2dSRTE3bJ+V0IfpzfSY3Lfgd7YWOaAdlykvJi13ZKBt8cZHfgH1IXN+CL656W3uUa4w=="],
+
+    "@babel/plugin-syntax-nullish-coalescing-operator": ["@babel/plugin-syntax-nullish-coalescing-operator@7.8.3", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ=="],
+
+    "@babel/plugin-syntax-optional-chaining": ["@babel/plugin-syntax-optional-chaining@7.8.3", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.8.0" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg=="],
+
+    "@babel/plugin-syntax-typescript": ["@babel/plugin-syntax-typescript@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-+nDNmQye7nlnuuHDboPbGm00Vqg3oO8niRRL27/4LYHUsHYh0zJ1xWOz0uRwNFmM1Avzk8wZbc6rdiYhomzv/A=="],
+
+    "@babel/plugin-transform-arrow-functions": ["@babel/plugin-transform-arrow-functions@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-8Z4TGic6xW70FKThA5HYEKKyBpOOsucTOD1DjU3fZxDg+K3zBJcXMFnt/4yQiZnf5+MiOMSXQ9PaEK/Ilh1DeA=="],
+
+    "@babel/plugin-transform-async-generator-functions": ["@babel/plugin-transform-async-generator-functions@7.29.0", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6", "@babel/helper-remap-async-to-generator": "^7.27.1", "@babel/traverse": "^7.29.0" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-va0VdWro4zlBr2JsXC+ofCPB2iG12wPtVGTWFx2WLDOM3nYQZZIGP82qku2eW/JR83sD+k2k+CsNtyEbUqhU6w=="],
+
+    "@babel/plugin-transform-async-to-generator": ["@babel/plugin-transform-async-to-generator@7.28.6", "", { "dependencies": { "@babel/helper-module-imports": "^7.28.6", "@babel/helper-plugin-utils": "^7.28.6", "@babel/helper-remap-async-to-generator": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-ilTRcmbuXjsMmcZ3HASTe4caH5Tpo93PkTxF9oG2VZsSWsahydmcEHhix9Ik122RcTnZnUzPbmux4wh1swfv7g=="],
+
+    "@babel/plugin-transform-block-scoping": ["@babel/plugin-transform-block-scoping@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-tt/7wOtBmwHPNMPu7ax4pdPz6shjFrmHDghvNC+FG9Qvj7D6mJcoRQIF5dy4njmxR941l6rgtvfSB2zX3VlUIw=="],
+
+    "@babel/plugin-transform-class-properties": ["@babel/plugin-transform-class-properties@7.28.6", "", { "dependencies": { "@babel/helper-create-class-features-plugin": "^7.28.6", "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-dY2wS3I2G7D697VHndN91TJr8/AAfXQNt5ynCTI/MpxMsSzHp+52uNivYT5wCPax3whc47DR8Ba7cmlQMg24bw=="],
+
+    "@babel/plugin-transform-classes": ["@babel/plugin-transform-classes@7.28.6", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-compilation-targets": "^7.28.6", "@babel/helper-globals": "^7.28.0", "@babel/helper-plugin-utils": "^7.28.6", "@babel/helper-replace-supers": "^7.28.6", "@babel/traverse": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-EF5KONAqC5zAqT783iMGuM2ZtmEBy+mJMOKl2BCvPZ2lVrwvXnB6o+OBWCS+CoeCCpVRF2sA2RBKUxvT8tQT5Q=="],
+
+    "@babel/plugin-transform-destructuring": ["@babel/plugin-transform-destructuring@7.28.5", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1", "@babel/traverse": "^7.28.5" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-Kl9Bc6D0zTUcFUvkNuQh4eGXPKKNDOJQXVyyM4ZAQPMveniJdxi8XMJwLo+xSoW3MIq81bD33lcUe9kZpl0MCw=="],
+
+    "@babel/plugin-transform-flow-strip-types": ["@babel/plugin-transform-flow-strip-types@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1", "@babel/plugin-syntax-flow": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-G5eDKsu50udECw7DL2AcsysXiQyB7Nfg521t2OAJ4tbfTJ27doHLeF/vlI1NZGlLdbb/v+ibvtL1YBQqYOwJGg=="],
+
+    "@babel/plugin-transform-for-of": ["@babel/plugin-transform-for-of@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-BfbWFFEJFQzLCQ5N8VocnCtA8J1CLkNTe2Ms2wocj75dd6VpiqS5Z5quTYcUoo4Yq+DN0rtikODccuv7RU81sw=="],
+
+    "@babel/plugin-transform-modules-commonjs": ["@babel/plugin-transform-modules-commonjs@7.28.6", "", { "dependencies": { "@babel/helper-module-transforms": "^7.28.6", "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-jppVbf8IV9iWWwWTQIxJMAJCWBuuKx71475wHwYytrRGQ2CWiDvYlADQno3tcYpS/T2UUWFQp3nVtYfK/YBQrA=="],
+
+    "@babel/plugin-transform-named-capturing-groups-regex": ["@babel/plugin-transform-named-capturing-groups-regex@7.29.0", "", { "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.28.5", "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-1CZQA5KNAD6ZYQLPw7oi5ewtDNxH/2vuCh+6SmvgDfhumForvs8a1o9n0UrEoBD8HU4djO2yWngTQlXl1NDVEQ=="],
+
+    "@babel/plugin-transform-nullish-coalescing-operator": ["@babel/plugin-transform-nullish-coalescing-operator@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-3wKbRgmzYbw24mDJXT7N+ADXw8BC/imU9yo9c9X9NKaLF1fW+e5H1U5QjMUBe4Qo4Ox/o++IyUkl1sVCLgevKg=="],
+
+    "@babel/plugin-transform-optional-catch-binding": ["@babel/plugin-transform-optional-catch-binding@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-R8ja/Pyrv0OGAvAXQhSTmWyPJPml+0TMqXlO5w+AsMEiwb2fg3WkOvob7UxFSL3OIttFSGSRFKQsOhJ/X6HQdQ=="],
+
+    "@babel/plugin-transform-optional-chaining": ["@babel/plugin-transform-optional-chaining@7.28.6", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-A4zobikRGJTsX9uqVFdafzGkqD30t26ck2LmOzAuLL8b2x6k3TIqRiT2xVvA9fNmFeTX484VpsdgmKNA0bS23w=="],
+
+    "@babel/plugin-transform-private-methods": ["@babel/plugin-transform-private-methods@7.28.6", "", { "dependencies": { "@babel/helper-create-class-features-plugin": "^7.28.6", "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-piiuapX9CRv7+0st8lmuUlRSmX6mBcVeNQ1b4AYzJxfCMuBfB0vBXDiGSmm03pKJw1v6cZ8KSeM+oUnM6yAExg=="],
+
+    "@babel/plugin-transform-private-property-in-object": ["@babel/plugin-transform-private-property-in-object@7.28.6", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-create-class-features-plugin": "^7.28.6", "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-b97jvNSOb5+ehyQmBpmhOCiUC5oVK4PMnpRvO7+ymFBoqYjeDHIU9jnrNUuwHOiL9RpGDoKBpSViarV+BU+eVA=="],
+
+    "@babel/plugin-transform-react-display-name": ["@babel/plugin-transform-react-display-name@7.28.0", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-D6Eujc2zMxKjfa4Zxl4GHMsmhKKZ9VpcqIchJLvwTxad9zWIYulwYItBovpDOoNLISpcZSXoDJ5gaGbQUDqViA=="],
+
+    "@babel/plugin-transform-react-jsx": ["@babel/plugin-transform-react-jsx@7.28.6", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-module-imports": "^7.28.6", "@babel/helper-plugin-utils": "^7.28.6", "@babel/plugin-syntax-jsx": "^7.28.6", "@babel/types": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-61bxqhiRfAACulXSLd/GxqmAedUSrRZIu/cbaT18T1CetkTmtDN15it7i80ru4DVqRK1WMxQhXs+Lf9kajm5Ow=="],
+
     "@babel/plugin-transform-react-jsx-self": ["@babel/plugin-transform-react-jsx-self@7.25.9", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-y8quW6p0WHkEhmErnfe58r7x0A70uKphQm8Sp8cV7tjNQwK56sNVK0M73LK3WuYmsuyrftut4xAkjjgU0twaMg=="],
 
     "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.25.9", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.25.9" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-+iqjT8xmXhhYv4/uiYd8FNQsraMFZIfxVSqxxVSZP0WbbSAWvBXAul0m/zu+7Vv4O/3WtApy9pmaTMiumEZgfg=="],
 
+    "@babel/plugin-transform-regenerator": ["@babel/plugin-transform-regenerator@7.29.0", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-FijqlqMA7DmRdg/aINBSs04y8XNTYw/lr1gJ2WsmBnnaNw1iS43EPkJW+zK7z65auG3AWRFXWj+NcTQwYptUog=="],
+
     "@babel/plugin-transform-runtime": ["@babel/plugin-transform-runtime@7.27.1", "", { "dependencies": { "@babel/helper-module-imports": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1", "babel-plugin-polyfill-corejs2": "^0.4.10", "babel-plugin-polyfill-corejs3": "^0.11.0", "babel-plugin-polyfill-regenerator": "^0.6.1", "semver": "^6.3.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-TqGF3desVsTcp3WrJGj4HfKokfCXCLcHpt4PJF0D8/iT6LPd9RS82Upw3KPeyr6B22Lfd3DO8MVrmp0oRkUDdw=="],
 
+    "@babel/plugin-transform-shorthand-properties": ["@babel/plugin-transform-shorthand-properties@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-N/wH1vcn4oYawbJ13Y/FxcQrWk63jhfNa7jef0ih7PHSIHX2LB7GWE1rkPrOnka9kwMxb6hMl19p7lidA+EHmQ=="],
+
+    "@babel/plugin-transform-template-literals": ["@babel/plugin-transform-template-literals@7.27.1", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-fBJKiV7F2DxZUkg5EtHKXQdbsbURW3DZKQUWphDum0uRP6eHGGa/He9mc0mypL680pb+e/lDIthRohlv8NCHkg=="],
+
+    "@babel/plugin-transform-typescript": ["@babel/plugin-transform-typescript@7.28.6", "", { "dependencies": { "@babel/helper-annotate-as-pure": "^7.27.3", "@babel/helper-create-class-features-plugin": "^7.28.6", "@babel/helper-plugin-utils": "^7.28.6", "@babel/helper-skip-transparent-expression-wrappers": "^7.27.1", "@babel/plugin-syntax-typescript": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-0YWL2RFxOqEm9Efk5PvreamxPME8OyY0wM5wh5lHjF+VtVhdneCWGzZeSqzOfiobVqQaNCd2z0tQvnI9DaPWPw=="],
+
+    "@babel/plugin-transform-unicode-regex": ["@babel/plugin-transform-unicode-regex@7.27.1", "", { "dependencies": { "@babel/helper-create-regexp-features-plugin": "^7.27.1", "@babel/helper-plugin-utils": "^7.27.1" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-xvINq24TRojDuyt6JGtHmkVkrfVV3FPT16uytxImLeBZqW3/H52yN+kM1MGuyPkIQxrzKwPHs5U/MP3qKyzkGw=="],
+
+    "@babel/preset-typescript": ["@babel/preset-typescript@7.28.5", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.27.1", "@babel/helper-validator-option": "^7.27.1", "@babel/plugin-syntax-jsx": "^7.27.1", "@babel/plugin-transform-modules-commonjs": "^7.27.1", "@babel/plugin-transform-typescript": "^7.28.5" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-+bQy5WOI2V6LJZpPVxY+yp66XdZ2yifu0Mc1aP5CQKgjn4QM5IN2i5fAZ4xKop47pr8rpVhiAeu+nDQa12C8+g=="],
+
     "@babel/runtime": ["@babel/runtime@7.26.0", "", { "dependencies": { "regenerator-runtime": "^0.14.0" } }, "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw=="],
 
     "@babel/template": ["@babel/template@7.25.9", "", { "dependencies": { "@babel/code-frame": "^7.25.9", "@babel/parser": "^7.25.9", "@babel/types": "^7.25.9" } }, "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg=="],
@@ -138,6 +247,10 @@
 
     "@chevrotain/utils": ["@chevrotain/utils@11.0.3", "", {}, "sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ=="],
 
+    "@clack/core": ["@clack/core@1.1.0", "", { "dependencies": { "sisteransi": "^1.0.5" } }, "sha512-SVcm4Dqm2ukn64/8Gub2wnlA5nS2iWJyCkdNHcvNHPIeBTGojpdJ+9cZKwLfmqy7irD4N5qLteSilJlE0WLAtA=="],
+
+    "@clack/prompts": ["@clack/prompts@1.1.0", "", { "dependencies": { "@clack/core": "1.1.0", "sisteransi": "^1.0.5" } }, "sha512-pkqbPGtohJAvm4Dphs2M8xE29ggupihHdy1x84HNojZuMtFsHiUlRvqD24tM2+XmI+61LlfNceM3Wr7U5QES5g=="],
+
     "@code-inspector/core": ["@code-inspector/core@1.3.3", "", { "dependencies": { "@vue/compiler-dom": "^3.5.13", "chalk": "^4.1.1", "dotenv": "^16.1.4", "launch-ide": "1.3.0", "portfinder": "^1.0.28" } }, "sha512-1SUCY/XiJ3LuA9TPfS9i7/cUcmdLsgB0chuDcP96ixB2tvYojzgCrglP7CHUGZa1dtWuRLuCiDzkclLetpV4ew=="],
 
     "@code-inspector/esbuild": ["@code-inspector/esbuild@1.3.3", "", { "dependencies": { "@code-inspector/core": "1.3.3" } }, "sha512-GzX5LQbvh9DXINSUyWymG8Y7u5Tq4oJAnnrCoRiYxQvKBUuu2qVMzpZHIA2iDGxvazgZvr2OK+Sh/We4LutViA=="],
@@ -156,29 +269,13 @@
 
     "@dnd-kit/modifiers": ["@dnd-kit/modifiers@9.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-ybiLc66qRGuZoC20wdSSG6pDXFikui/dCNGthxv4Ndy8ylErY0N3KVxY2bgo7AWwIbxDmXDg3ylAFmnrjcbVvw=="],
 
-    "@dnd-kit/sortable": ["@dnd-kit/sortable@7.0.2", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.0", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.0.7", "react": ">=16.8.0" } }, "sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA=="],
+    "@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
 
     "@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
 
-    "@douyinfe/semi-animation": ["@douyinfe/semi-animation@2.72.2", "", { "dependencies": { "bezier-easing": "^2.1.0" } }, "sha512-MM2We1Nzvqa6uOrrWurUR+r5klOtOucpBHSjN13plVfZrd1VW8aIlwAyvqEntjOutOoVgnVwkeJHN1P56UV6dQ=="],
-
-    "@douyinfe/semi-animation-react": ["@douyinfe/semi-animation-react@2.72.2", "", { "dependencies": { "@douyinfe/semi-animation": "2.72.2", "@douyinfe/semi-animation-styled": "2.72.2", "classnames": "^2.2.6" } }, "sha512-Iz2mDHDg8Gbur4pzqAyptkA6SK3LB5coGm5r/hevVNWif8Q7gDH9/UR/E9PAx1zORwlxov7BJxUMhrmgaHx7uw=="],
+    "@egjs/hammerjs": ["@egjs/hammerjs@2.0.17", "", { "dependencies": { "@types/hammerjs": "^2.0.36" } }, "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A=="],
 
-    "@douyinfe/semi-animation-styled": ["@douyinfe/semi-animation-styled@2.72.2", "", {}, "sha512-RKiHV71nWqpp/FiLDLNyw2CNrkR9W7qNnF/zkRosxRs5t4qRCtukdDaTNruuD2exekmCuejs+ClQi4AAwgkIYw=="],
-
-    "@douyinfe/semi-foundation": ["@douyinfe/semi-foundation@2.72.2", "", { "dependencies": { "@douyinfe/semi-animation": "2.72.2", "@douyinfe/semi-json-viewer-core": "2.72.2", "@mdx-js/mdx": "^3.0.1", "async-validator": "^3.5.0", "classnames": "^2.2.6", "date-fns": "^2.29.3", "date-fns-tz": "^1.3.8", "fast-copy": "^3.0.1 ", "lodash": "^4.17.21", "lottie-web": "^5.12.2", "memoize-one": "^5.2.1", "prismjs": "^1.29.0", "remark-gfm": "^4.0.0", "scroll-into-view-if-needed": "^2.2.24" } }, "sha512-pIJIz5rrayVyx2Dk4ntCifet5ZL9bEeTRSnauQtKRxq15ZqT10IETeUha235NAXZr+qA8YGhY+v9dhCXM9SMNA=="],
-
-    "@douyinfe/semi-icons": ["@douyinfe/semi-icons@2.72.2", "", { "dependencies": { "classnames": "^2.2.6" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-Jbq/U+/R+UWQyp6Wz19ZnSSwDob0f2m/7ZfXBLUgRGGaYrtDTW+RNY1yp7Y4JEvYIcYThPzrNa8WDga7eK//Ng=="],
-
-    "@douyinfe/semi-illustrations": ["@douyinfe/semi-illustrations@2.72.2", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-Rp1JBcZaEFyIJ+LYfESIp4Xf0rv4h6Es+XOVHtjzuZLD+cSmlhf8zT8WJpLT/9RA16YUFKXTNUFDMjTc/VQKTQ=="],
-
-    "@douyinfe/semi-json-viewer-core": ["@douyinfe/semi-json-viewer-core@2.72.2", "", { "dependencies": { "jsonc-parser": "^3.3.1" } }, "sha512-h87OKEgvWAzqu9XBmc1Y0v6+QiETFFZx5wJbEqMSXuPx3EpW8Q6oYiKKSyaaLNcVC6ytBB2Jf71GFvM8HpcuSg=="],
-
-    "@douyinfe/semi-theme-default": ["@douyinfe/semi-theme-default@2.72.2", "", {}, "sha512-XaMXl9hPtgNF0h8SIptJQSUzQdk78wB5AlAAnOIY0i+27S/3CT5WGBCj27wZqgz/FZcT8xK1sG29B0oXdRhgew=="],
-
-    "@douyinfe/semi-ui": ["@douyinfe/semi-ui@2.72.2", "", { "dependencies": { "@dnd-kit/core": "^6.0.8", "@dnd-kit/sortable": "^7.0.2", "@dnd-kit/utilities": "^3.2.1", "@douyinfe/semi-animation": "2.72.2", "@douyinfe/semi-animation-react": "2.72.2", "@douyinfe/semi-foundation": "2.72.2", "@douyinfe/semi-icons": "2.72.2", "@douyinfe/semi-illustrations": "2.72.2", "@douyinfe/semi-theme-default": "2.72.2", "async-validator": "^3.5.0", "classnames": "^2.2.6", "copy-text-to-clipboard": "^2.1.1", "date-fns": "^2.29.3", "date-fns-tz": "^1.3.8", "fast-copy": "^3.0.1 ", "jsonc-parser": "^3.3.1", "lodash": "^4.17.21", "prop-types": "^15.7.2", "react-resizable": "^3.0.5", "react-window": "^1.8.2", "scroll-into-view-if-needed": "^2.2.24", "utility-types": "^3.10.0" }, "peerDependencies": { "react": ">=16.0.0", "react-dom": ">=16.0.0" } }, "sha512-okV/9mwSjsGEw5iBOGt2Z/cNIp/VQmgFjQRgwzagoXPmXU5NVSUyxYLdgQXUZXa6po4ZmVZB5IZpyddGGUeDiA=="],
-
-    "@douyinfe/vite-plugin-semi": ["@douyinfe/vite-plugin-semi@2.74.0-alpha.6", "", { "dependencies": { "sass": "^1.85.1" }, "peerDependencies": { "vite": "5.1.0" } }, "sha512-juyKSG0onVBG29FLdGPBA0yHT9Kh7P8e0FDtwhp0DuMk6drd45bDQZuU171gzx0ahv9rJaojnD6CgcBiggtQ3A=="],
+    "@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
 
     "@emoji-mart/data": ["@emoji-mart/data@1.2.1", "", {}, "sha512-no2pQMWiBy6gpBEiqGeU77/bFejDqUTRY7KX+0+iur13op3bqUsXdnwoZs6Xb1zbv0gAj5VvS1PWoUUckSr5Dw=="],
 
@@ -272,8 +369,26 @@
 
     "@floating-ui/utils": ["@floating-ui/utils@0.2.9", "", {}, "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="],
 
+    "@formatjs/ecma402-abstract": ["@formatjs/ecma402-abstract@2.3.6", "", { "dependencies": { "@formatjs/fast-memoize": "2.2.7", "@formatjs/intl-localematcher": "0.6.2", "decimal.js": "^10.4.3", "tslib": "^2.8.0" } }, "sha512-HJnTFeRM2kVFVr5gr5kH1XP6K0JcJtE7Lzvtr3FS/so5f1kpsqqqxy5JF+FRaO6H2qmcMfAUIox7AJteieRtVw=="],
+
+    "@formatjs/fast-memoize": ["@formatjs/fast-memoize@2.2.7", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-Yabmi9nSvyOMrlSeGGWDiH7rf3a7sIwplbvo/dlz9WCIjzIQAfy1RMf4S0X3yG724n5Ghu2GmEl5NJIV6O9sZQ=="],
+
+    "@formatjs/icu-messageformat-parser": ["@formatjs/icu-messageformat-parser@2.11.4", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/icu-skeleton-parser": "1.8.16", "tslib": "^2.8.0" } }, "sha512-7kR78cRrPNB4fjGFZg3Rmj5aah8rQj9KPzuLsmcSn4ipLXQvC04keycTI1F7kJYDwIXtT2+7IDEto842CfZBtw=="],
+
+    "@formatjs/icu-skeleton-parser": ["@formatjs/icu-skeleton-parser@1.8.16", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "tslib": "^2.8.0" } }, "sha512-H13E9Xl+PxBd8D5/6TVUluSpxGNvFSlN/b3coUp0e0JpuWXXnQDiavIpY3NnvSp4xhEMoXyyBvVfdFX8jglOHQ=="],
+
+    "@formatjs/intl-localematcher": ["@formatjs/intl-localematcher@0.6.2", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-XOMO2Hupl0wdd172Y06h6kLpBz6Dv+J4okPLl4LPtzbr8f66WbIoy4ev98EBuZ6ZK4h5ydTN6XneT4QVpD7cdA=="],
+
     "@giscus/react": ["@giscus/react@3.1.0", "", { "dependencies": { "giscus": "^1.6.0" }, "peerDependencies": { "react": "^16 || ^17 || ^18 || ^19", "react-dom": "^16 || ^17 || ^18 || ^19" } }, "sha512-0TCO2TvL43+oOdyVVGHDItwxD1UMKP2ZYpT6gXmhFOqfAJtZxTzJ9hkn34iAF/b6YzyJ4Um89QIt9z/ajmAEeg=="],
 
+    "@gravity-ui/icons": ["@gravity-ui/icons@2.18.0", "", { "dependencies": { "tslib": "^2.8.1" }, "peerDependencies": { "react": "*" }, "optionalPeers": ["react"] }, "sha512-JoRc/4Ch9GLaufZfpGd2ePRRisMXEjMI+r3y8kPKyYIAdQZz07jpIXEgsft1gvBxjSht2MS2uu5+vfhe1WP0ow=="],
+
+    "@heroui-pro/react": ["@heroui-pro/react@1.0.0-beta.1", "", { "dependencies": { "chalk": "5.6.2", "heroui-pro": "^1.0.0-alpha.1" } }, "sha512-UHzJfyQrn+rI9aM/b4adyfA8v+ivYYeO+C+IDK3jHq9813Keet3ie0ACpJBvZYyZW+/wfkCr4of1+zk/l2tyZg=="],
+
+    "@heroui/react": ["@heroui/react@3.0.3", "", { "dependencies": { "@heroui/styles": "3.0.3", "@radix-ui/react-avatar": "1.1.11", "@react-aria/i18n": "3.13.0", "@react-aria/ssr": "3.10.0", "@react-aria/utils": "3.34.0", "@react-stately/utils": "3.12.0", "@react-types/color": "3.2.0", "@react-types/shared": "3.34.0", "input-otp": "1.4.2", "react-aria-components": "1.17.0", "tailwind-merge": "3.4.0", "tailwind-variants": "3.2.2" }, "peerDependencies": { "react": ">=19.0.0", "react-dom": ">=19.0.0", "tailwindcss": ">=4.0.0" } }, "sha512-UJPOxg3IbS5KtI2GLP7S56KrSBn/r4xQyntCVpnPzgoT7JuciB4dq7IhckuDNHcrdIPO45JrKHGJz2hiYxaRGg=="],
+
+    "@heroui/styles": ["@heroui/styles@3.0.3", "", { "dependencies": { "tailwind-variants": "3.2.2", "tw-animate-css": "1.4.0" }, "peerDependencies": { "tailwindcss": ">=4.0.0" } }, "sha512-DtN5QWfLVxy6DSDNgtUuHVU/h4G+dfoDHHxGVZRW6plCEh1Rc5Yc7YW7b8JBiYCknSRx/fqLXpas3Fe5Q5XJSw=="],
+
     "@humanwhocodes/config-array": ["@humanwhocodes/config-array@0.11.14", "", { "dependencies": { "@humanwhocodes/object-schema": "^2.0.2", "debug": "^4.3.1", "minimatch": "^3.0.5" } }, "sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg=="],
 
     "@humanwhocodes/module-importer": ["@humanwhocodes/module-importer@1.0.1", "", {}, "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA=="],
@@ -284,6 +399,56 @@
 
     "@iconify/utils": ["@iconify/utils@2.3.0", "", { "dependencies": { "@antfu/install-pkg": "^1.0.0", "@antfu/utils": "^8.1.0", "@iconify/types": "^2.0.0", "debug": "^4.4.0", "globals": "^15.14.0", "kolorist": "^1.8.0", "local-pkg": "^1.0.0", "mlly": "^1.7.4" } }, "sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA=="],
 
+    "@img/colour": ["@img/colour@1.1.0", "", {}, "sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ=="],
+
+    "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
+
+    "@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.2.4" }, "os": "darwin", "cpu": "x64" }, "sha512-YNEFAF/4KQ/PeW0N+r+aVVsoIY0/qxxikF2SWdp+NRkmMB7y9LBZAVqQ4yhGCm/H3H270OSykqmQMKLBhBJDEw=="],
+
+    "@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-zqjjo7RatFfFoP0MkQ51jfuFZBnVE2pRiaydKJ1G/rHZvnsrHAOcQALIi9sA5co5xenQdTugCvtb1cuf78Vf4g=="],
+
+    "@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-1IOd5xfVhlGwX+zXv2N93k0yMONvUlANylbJw1eTah8K/Jtpi15KC+WSiaX/nBmbm2HxRM1gZ0nSdjSsrZbGKg=="],
+
+    "@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A=="],
+
+    "@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw=="],
+
+    "@img/sharp-libvips-linux-ppc64": ["@img/sharp-libvips-linux-ppc64@1.2.4", "", { "os": "linux", "cpu": "ppc64" }, "sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA=="],
+
+    "@img/sharp-libvips-linux-riscv64": ["@img/sharp-libvips-linux-riscv64@1.2.4", "", { "os": "linux", "cpu": "none" }, "sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA=="],
+
+    "@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.2.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ=="],
+
+    "@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw=="],
+
+    "@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw=="],
+
+    "@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg=="],
+
+    "@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.2.4" }, "os": "linux", "cpu": "arm" }, "sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw=="],
+
+    "@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg=="],
+
+    "@img/sharp-linux-ppc64": ["@img/sharp-linux-ppc64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-ppc64": "1.2.4" }, "os": "linux", "cpu": "ppc64" }, "sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA=="],
+
+    "@img/sharp-linux-riscv64": ["@img/sharp-linux-riscv64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-riscv64": "1.2.4" }, "os": "linux", "cpu": "none" }, "sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw=="],
+
+    "@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.2.4" }, "os": "linux", "cpu": "s390x" }, "sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg=="],
+
+    "@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ=="],
+
+    "@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.2.4" }, "os": "linux", "cpu": "arm64" }, "sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg=="],
+
+    "@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.2.4" }, "os": "linux", "cpu": "x64" }, "sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q=="],
+
+    "@img/sharp-wasm32": ["@img/sharp-wasm32@0.34.5", "", { "dependencies": { "@emnapi/runtime": "^1.7.0" }, "cpu": "none" }, "sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw=="],
+
+    "@img/sharp-win32-arm64": ["@img/sharp-win32-arm64@0.34.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-WQ3AgWCWYSb2yt+IG8mnC6Jdk9Whs7O0gxphblsLvdhSpSTtmu69ZG1Gkb6NuvxsNACwiPV6cNSZNzt0KPsw7g=="],
+
+    "@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.34.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-FV9m/7NmeCmSHDD5j4+4pNI8Cp3aW+JvLoXcTUo0IqyjSfAZJ8dIUmijx1qaJsIiU+Hosw6xM5KijAWRJCSgNg=="],
+
+    "@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.34.5", "", { "os": "win32", "cpu": "x64" }, "sha512-+29YMsqY2/9eFEiW93eqWnuLcWcufowXewwSNIT6UwZdUUCrM3oFjMWH/Z6/TMmb4hlFenmfAVbpWeup2jryCw=="],
+
     "@inquirer/ansi": ["@inquirer/ansi@1.0.1", "", {}, "sha512-yqq0aJW/5XPhi5xOAL1xRCpe1eh8UFVgYFpFsjEqmIR8rKLyP+HINvFXwUaxYICflJrVlxnp7lLN6As735kVpw=="],
 
     "@inquirer/checkbox": ["@inquirer/checkbox@4.3.0", "", { "dependencies": { "@inquirer/ansi": "^1.0.1", "@inquirer/core": "^10.3.0", "@inquirer/figures": "^1.0.14", "@inquirer/type": "^3.0.9", "yoctocolors-cjs": "^2.1.2" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-5+Q3PKH35YsnoPTh75LucALdAxom6xh5D1oeY561x4cqBuH24ZFVyFREPe14xgnrtmGu3EEt1dIi60wRVSnGCw=="],
@@ -316,21 +481,41 @@
 
     "@inquirer/type": ["@inquirer/type@3.0.9", "", { "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-QPaNt/nmE2bLGQa9b7wwyRJoLZ7pN6rcyXvzU0YCmivmJyq1BVo94G98tStRWkoD1RgDX5C+dPlhhHzNdu/W/w=="],
 
+    "@internationalized/date": ["@internationalized/date@3.12.1", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-6IedsVWXyq4P9Tj+TxuU8WGWM70hYLl12nbYU8jkikVpa6WXapFazPUcHUMDMoWftIDE2ILDkFFte6W2nFCkRQ=="],
+
+    "@internationalized/message": ["@internationalized/message@3.1.9", "", { "dependencies": { "@swc/helpers": "^0.5.0", "intl-messageformat": "^10.1.0" } }, "sha512-x03MSVTaB/4JHtW1VAYaY/2cCuBrHbWM6ZvlgpKdnSdW28tZbqpR673RJrVJyXWRw1bpgYN89Tz7ohX5tgNgPA=="],
+
+    "@internationalized/number": ["@internationalized/number@3.6.6", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-iFgmQaXHE0vytNfpLZWOC2mEJCBRzcUxt53Xf/yCXG93lRvqas237i3r7X4RKMwO3txiyZD4mQjKAByFv6UGSQ=="],
+
+    "@internationalized/string": ["@internationalized/string@3.2.8", "", { "dependencies": { "@swc/helpers": "^0.5.0" } }, "sha512-NdbMQUSfXLYIQol5VyMtinm9pZDciiMfN7RtmSuSB78io1hqwJ0naYfxyW6vgxWBkzWymQa/3uLDlbfmshtCaA=="],
+
     "@isaacs/balanced-match": ["@isaacs/balanced-match@4.0.1", "", {}, "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ=="],
 
     "@isaacs/brace-expansion": ["@isaacs/brace-expansion@5.0.0", "", { "dependencies": { "@isaacs/balanced-match": "^4.0.1" } }, "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA=="],
 
     "@isaacs/cliui": ["@isaacs/cliui@8.0.2", "", { "dependencies": { "string-width": "^5.1.2", "string-width-cjs": "npm:string-width@^4.2.0", "strip-ansi": "^7.0.1", "strip-ansi-cjs": "npm:strip-ansi@^6.0.1", "wrap-ansi": "^8.1.0", "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0" } }, "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA=="],
 
-    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
+    "@isaacs/fs-minipass": ["@isaacs/fs-minipass@4.0.1", "", { "dependencies": { "minipass": "^7.0.4" } }, "sha512-wgm9Ehl2jpeqP3zw/7mo3kRHFp5MEDhqAdwy1fTGkHAwnkGOVsgpvQhL8B5n1qlb01jV3n/bI0ZfZp5lWA1k4w=="],
+
+    "@isaacs/ttlcache": ["@isaacs/ttlcache@1.4.1", "", {}, "sha512-RQgQ4uQ+pLbqXfOmieB91ejmLwvSgv9nLx6sT6sD83s7umBypgg+OIBOBbEUiJXrfpnp9j0mRhYYdzp9uqq3lA=="],
+
+    "@jest/schemas": ["@jest/schemas@29.6.3", "", { "dependencies": { "@sinclair/typebox": "^0.27.8" } }, "sha512-mo5j5X+jIZmJQveBKeS/clAueipV7KgiX1vMgCxam1RNYiqE1w62n0/tJJnHtjW8ZHcQco5gY85jA3mi0L+nSA=="],
+
+    "@jest/types": ["@jest/types@29.6.3", "", { "dependencies": { "@jest/schemas": "^29.6.3", "@types/istanbul-lib-coverage": "^2.0.0", "@types/istanbul-reports": "^3.0.0", "@types/node": "*", "@types/yargs": "^17.0.8", "chalk": "^4.0.0" } }, "sha512-u3UPsIilWKOM3F9CXtrG8LEJmNxwoCQC/XVj4IKYXvvpx7QIi/Kg1LI5uDmDpKlac62NUtX7eLjRh+jVZcLOzw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
 
     "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
 
     "@jridgewell/set-array": ["@jridgewell/set-array@1.2.1", "", {}, "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A=="],
 
-    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+    "@jridgewell/source-map": ["@jridgewell/source-map@0.3.11", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.25" } }, "sha512-ZMp1V8ZFcPG5dIWnQLr3NSI1MiCU7UETdS/A0G8V/XWHvJv3ZsFqutJn1Y5RPmAPX6F3BiE397OqveU/9NCuIA=="],
 
-    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
     "@lit-labs/ssr-dom-shim": ["@lit-labs/ssr-dom-shim@1.3.0", "", {}, "sha512-nQIWonJ6eFAvUUrSlwyHDm/aE8PBDu5kRpL0vHMg6K8fK3Diq1xdPjTnsJSwxABhaZ+5eBi1btQB5ShUTKo4nQ=="],
 
@@ -350,12 +535,32 @@
 
     "@mermaid-js/parser": ["@mermaid-js/parser@0.4.0", "", { "dependencies": { "langium": "3.3.1" } }, "sha512-wla8XOWvQAwuqy+gxiZqY+c7FokraOTHRWMsbB4AgRx9Sy7zKslNyejy7E+a77qHfey5GXw/ik3IXv/NHMJgaA=="],
 
+    "@next/env": ["@next/env@16.2.4", "", {}, "sha512-dKkkOzOSwFYe5RX6y26fZgkSpVAlIOJKQHIiydQcrWH6y/97+RceSOAdjZ14Qa3zLduVUy0TXcn+EiM6t4rPgw=="],
+
+    "@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@16.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-OXTFFox5EKN1Ym08vfrz+OXxmCcEjT4SFMbNRsWZE99dMqt2Kcusl5MqPXcW232RYkMLQTy0hqgAMEsfEd/l2A=="],
+
+    "@next/swc-darwin-x64": ["@next/swc-darwin-x64@16.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-XhpVnUfmYWvD3YrXu55XdcAkQtOnvaI6wtQa8fuF5fGoKoxIUZ0kWPtcOfqJEWngFF/lOS9l3+O9CcownhiQxQ=="],
+
+    "@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@16.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-Mx/tjlNA3G8kg14QvuGAJ4xBwPk1tUHq56JxZ8CXnZwz1Etz714soCEzGQQzVMz4bEnGPowzkV6Xrp6wAkEWOQ=="],
+
+    "@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@16.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-iVMMp14514u7Nup2umQS03nT/bN9HurK8ufylC3FZNykrwjtx7V1A7+4kvhbDSCeonTVqV3Txnv0Lu+m2oDXNg=="],
+
+    "@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@16.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-EZOvm1aQWgnI/N/xcWOlnS3RQBk0VtVav5Zo7n4p0A7UKyTDx047k8opDbXgBpHl4CulRqRfbw3QrX2w5UOXMQ=="],
+
+    "@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@16.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-h9FxsngCm9cTBf71AR4fGznDEDx1hS7+kSEiIRjq5kO1oXWm07DxVGZjCvk0SGx7TSjlUqhI8oOyz7NfwAdPoA=="],
+
+    "@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@16.2.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-3NdJV5OXMSOeJYijX+bjaLge3mJBlh4ybydbT4GFoB/2hAojWHtMhl3CYlYoMrjPuodp0nzFVi4Tj2+WaMg+Ow=="],
+
+    "@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@16.2.4", "", { "os": "win32", "cpu": "x64" }, "sha512-kMVGgsqhO5YTYODD9IPGGhA6iprWidQckK3LmPeW08PIFENRmgfb4MjXHO+p//d+ts2rpjvK5gXWzXSMrPl9cw=="],
+
     "@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
 
     "@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
 
     "@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
 
+    "@number-flow/react": ["@number-flow/react@0.6.0", "", { "dependencies": { "esm-env": "^1.1.4", "number-flow": "0.6.0" }, "peerDependencies": { "react": "^18 || ^19", "react-dom": "^18 || ^19" } }, "sha512-77Yfc9+zkV2UDSP8phhZzxJGuwxi/Tt1TikmipL+1r3e9GFKEYDZ1XwInj67NoSt3OnOB0KLvvcl3lfPZgBHVQ=="],
+
     "@parcel/watcher": ["@parcel/watcher@2.5.1", "", { "dependencies": { "detect-libc": "^1.0.3", "is-glob": "^4.0.3", "micromatch": "^4.0.5", "node-addon-api": "^7.0.0" }, "optionalDependencies": { "@parcel/watcher-android-arm64": "2.5.1", "@parcel/watcher-darwin-arm64": "2.5.1", "@parcel/watcher-darwin-x64": "2.5.1", "@parcel/watcher-freebsd-x64": "2.5.1", "@parcel/watcher-linux-arm-glibc": "2.5.1", "@parcel/watcher-linux-arm-musl": "2.5.1", "@parcel/watcher-linux-arm64-glibc": "2.5.1", "@parcel/watcher-linux-arm64-musl": "2.5.1", "@parcel/watcher-linux-x64-glibc": "2.5.1", "@parcel/watcher-linux-x64-musl": "2.5.1", "@parcel/watcher-win32-arm64": "2.5.1", "@parcel/watcher-win32-ia32": "2.5.1", "@parcel/watcher-win32-x64": "2.5.1" } }, "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg=="],
 
     "@parcel/watcher-android-arm64": ["@parcel/watcher-android-arm64@2.5.1", "", { "os": "android", "cpu": "arm64" }, "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA=="],
@@ -384,15 +589,15 @@
 
     "@parcel/watcher-win32-x64": ["@parcel/watcher-win32-x64@2.5.1", "", { "os": "win32", "cpu": "x64" }, "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA=="],
 
-    "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="],
-
     "@radix-ui/primitive": ["@radix-ui/primitive@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" } }, "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA=="],
 
     "@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-primitive": "1.0.2" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-fqYwhhI9IarZ0ll2cUSfKuXHlJK0qE4AfnRrPBbRwEH/4mGQn04/QFGomLi8TXWIdv9WJk//KgGm+aDxVIr1wA=="],
 
+    "@radix-ui/react-avatar": ["@radix-ui/react-avatar@1.1.11", "", { "dependencies": { "@radix-ui/react-context": "1.1.3", "@radix-ui/react-primitive": "2.1.4", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-is-hydrated": "0.1.0", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0Qk603AHGV28BOBO34p7IgD5m+V5Sg/YovfayABkoDDBM5d3NCx0Mp4gGrjzLGes1jV5eNOE1r3itqOR33VC6Q=="],
+
     "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
 
-    "@radix-ui/react-context": ["@radix-ui/react-context@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg=="],
+    "@radix-ui/react-context": ["@radix-ui/react-context@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ieIFACdMpYfMEjF0rEf5KLvfVyIkOz6PDGyNnP+u+4xQ6jny3VCgA4OgXOwNx2aUkxn8zx9fiVcM8CfFYv9Lxw=="],
 
     "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.0.3", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.0", "@radix-ui/react-compose-refs": "1.0.0", "@radix-ui/react-primitive": "1.0.2", "@radix-ui/react-use-callback-ref": "1.0.0", "@radix-ui/react-use-escape-keydown": "1.0.2" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-nXZOvFjOuHS1ovumntGV7NNoLaEp9JEvTht3MBjP44NSW5hUKj/8OnfN3+8WmB+CEhN44XaGhpHoSsUIEl5P7Q=="],
 
@@ -404,19 +609,21 @@
 
     "@radix-ui/react-presence": ["@radix-ui/react-presence@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0", "@radix-ui/react-use-layout-effect": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w=="],
 
-    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw=="],
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.0.5", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/primitive": "1.0.0", "@radix-ui/react-compose-refs": "1.0.0", "@radix-ui/react-context": "1.0.0", "@radix-ui/react-dismissable-layer": "1.0.3", "@radix-ui/react-id": "1.0.0", "@radix-ui/react-popper": "1.1.1", "@radix-ui/react-portal": "1.0.2", "@radix-ui/react-presence": "1.0.0", "@radix-ui/react-primitive": "1.0.2", "@radix-ui/react-slot": "1.0.1", "@radix-ui/react-use-controllable-state": "1.0.0", "@radix-ui/react-visually-hidden": "1.0.2" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-cDKVcfzyO6PpckZekODJZDe5ZxZ2fCZlzKzTmPhe4mX9qTHRfLcKgqb0OKf22xLwDequ2tVleim+ZYx3rabD5w=="],
 
-    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg=="],
+    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
     "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-callback-ref": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-FohDoZvk3mEXh9AWAVyRTYR4Sq7/gavuofglmiXB2g1aKyboUD4YtgWxKj8O5n+Uak52gXQ4wKz5IFST4vtJHg=="],
 
     "@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-use-callback-ref": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-DXGim3x74WgUv+iMNCF+cAo8xUHHeqvjx8zs7trKf+FkQKPQXLk2sX7Gx1ysH7Q76xCpZuxIJE7HLPxRE+Q+GA=="],
 
-    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ=="],
+    "@radix-ui/react-use-is-hydrated": ["@radix-ui/react-use-is-hydrated@0.1.0", "", { "dependencies": { "use-sync-external-store": "^1.5.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA=="],
+
+    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
 
     "@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/rect": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-TB7pID8NRMEHxb/qQJpvSt3hQU4sqNPM1VCTjTRjEOa7cEop/QMuq8S6fb/5Tsz64kqSvB9WnwsDHtjnrM9qew=="],
 
@@ -444,6 +651,56 @@
 
     "@rc-component/trigger": ["@rc-component/trigger@2.2.6", "", { "dependencies": { "@babel/runtime": "^7.23.2", "@rc-component/portal": "^1.1.0", "classnames": "^2.3.2", "rc-motion": "^2.0.0", "rc-resize-observer": "^1.3.1", "rc-util": "^5.44.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-/9zuTnWwhQ3S3WT1T8BubuFTT46kvnXgaERR9f4BTKyn61/wpf/BvbImzYBubzJibU707FxwbKszLlHjcLiv1Q=="],
 
+    "@react-aria/color": ["@react-aria/color@3.2.0", "", { "dependencies": { "@swc/helpers": "^0.5.0", "react-aria": "3.48.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-Qw1TySxXnGlE4L7kzsi8v86U1yFs9FtonqsbySFzLPzsMV1Oar+rtkYHI5vwNSyNNF6TBJJikJNocS9Fi8xXwA=="],
+
+    "@react-aria/i18n": ["@react-aria/i18n@3.13.0", "", { "dependencies": { "@internationalized/date": "^3.12.1", "@internationalized/message": "^3.1.9", "@internationalized/string": "^3.2.8", "@swc/helpers": "^0.5.0", "react-aria": "3.48.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-APjw4EwmvlnIyDxixSWfjHvOFFkW2rVTyKZ4l9FV0v7hOerh+FWLE6mF1XnnX3pgz3yARkKWwhSR9xYcRK6tpg=="],
+
+    "@react-aria/ssr": ["@react-aria/ssr@3.10.0", "", { "dependencies": { "@swc/helpers": "^0.5.0", "react-aria": "3.48.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-mnelvACtfNWWKFCT1YHebxJRmfBmmANGwHQhCFPByMVTx1L8RumcaLxChYkE87g2KPuP5xX2il/oRn1DytW+qQ=="],
+
+    "@react-aria/utils": ["@react-aria/utils@3.34.0", "", { "dependencies": { "@swc/helpers": "^0.5.0", "react-aria": "3.48.0", "react-stately": "3.46.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-ZM1ZXIqpwGTJjjL6o3JhlZkEaBpQdxuOCqLEvwEwooaj5GsYI3E9UfOl5vy3UW6bYiEEWl9pNBntrb9CR9kItQ=="],
+
+    "@react-native/assets-registry": ["@react-native/assets-registry@0.85.2", "", {}, "sha512-kauC/oPaxklU4Y+u9gBfCBJm51qX6WBZq4xx0USCdimtp+G8+554kpygfSWIjoqCJa2o06bWxBEjesiuCv+LzA=="],
+
+    "@react-native/babel-plugin-codegen": ["@react-native/babel-plugin-codegen@0.85.2", "", { "dependencies": { "@babel/traverse": "^7.29.0", "@react-native/codegen": "0.85.2" } }, "sha512-5Dqn08kRTUIxPLYju9hExI0cR1ESX+P5tEv5yv0q0UZcisRTw0VB8iUWDIph2LdY1i5Dc8PIvuaWMRNCw3vnKg=="],
+
+    "@react-native/babel-preset": ["@react-native/babel-preset@0.85.2", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/plugin-proposal-export-default-from": "^7.24.7", "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-export-default-from": "^7.24.7", "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3", "@babel/plugin-syntax-optional-chaining": "^7.8.3", "@babel/plugin-transform-async-generator-functions": "^7.25.4", "@babel/plugin-transform-async-to-generator": "^7.24.7", "@babel/plugin-transform-block-scoping": "^7.25.0", "@babel/plugin-transform-class-properties": "^7.25.4", "@babel/plugin-transform-classes": "^7.25.4", "@babel/plugin-transform-destructuring": "^7.24.8", "@babel/plugin-transform-flow-strip-types": "^7.25.2", "@babel/plugin-transform-for-of": "^7.24.7", "@babel/plugin-transform-modules-commonjs": "^7.24.8", "@babel/plugin-transform-named-capturing-groups-regex": "^7.24.7", "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7", "@babel/plugin-transform-optional-catch-binding": "^7.24.7", "@babel/plugin-transform-optional-chaining": "^7.24.8", "@babel/plugin-transform-private-methods": "^7.24.7", "@babel/plugin-transform-private-property-in-object": "^7.24.7", "@babel/plugin-transform-react-display-name": "^7.24.7", "@babel/plugin-transform-react-jsx": "^7.25.2", "@babel/plugin-transform-react-jsx-self": "^7.24.7", "@babel/plugin-transform-react-jsx-source": "^7.24.7", "@babel/plugin-transform-regenerator": "^7.24.7", "@babel/plugin-transform-runtime": "^7.24.7", "@babel/plugin-transform-typescript": "^7.25.2", "@babel/plugin-transform-unicode-regex": "^7.24.7", "@react-native/babel-plugin-codegen": "0.85.2", "babel-plugin-syntax-hermes-parser": "0.33.3", "babel-plugin-transform-flow-enums": "^0.0.2", "react-refresh": "^0.14.0" } }, "sha512-7d2yW23eKkVt0FbbnZLxqO7KybGLtQXOuvvcO1NUOYGtjzVh6ihNKn0TIHrhSNpMyHwYLDoiiuj95wLtcg3IwQ=="],
+
+    "@react-native/codegen": ["@react-native/codegen@0.85.2", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/parser": "^7.29.0", "hermes-parser": "0.33.3", "invariant": "^2.2.4", "nullthrows": "^1.1.1", "tinyglobby": "^0.2.15", "yargs": "^17.6.2" } }, "sha512-XCginmxh0//++EXVOEJHBVZxHla294FzLCFF6jXwAUjvXVhqyIKyxhABfz+r4OOmaiuWk4Rtd4arqdAzeHeprg=="],
+
+    "@react-native/community-cli-plugin": ["@react-native/community-cli-plugin@0.85.2", "", { "dependencies": { "@react-native/dev-middleware": "0.85.2", "debug": "^4.4.0", "invariant": "^2.2.4", "metro": "^0.84.0", "metro-config": "^0.84.0", "metro-core": "^0.84.0", "semver": "^7.1.3" }, "peerDependencies": { "@react-native-community/cli": "*", "@react-native/metro-config": "0.85.2" }, "optionalPeers": ["@react-native-community/cli", "@react-native/metro-config"] }, "sha512-3KLgSg1kHvBpr93zMaQhvfYTgnCw7yZRED+3J4dMcYjfSjtD0Wf8SofU6uBmAw9JaVYvP43lpdwUpI4p0+ABsg=="],
+
+    "@react-native/debugger-frontend": ["@react-native/debugger-frontend@0.85.2", "", {}, "sha512-j+0b9H5f5hGTLQxHIhJU/b/W6ijuxJF+ZTLHB0se2kzUBNxFKd7DkIc6753qk3CJdiv55vxG3XDgmlpbHxOpmA=="],
+
+    "@react-native/debugger-shell": ["@react-native/debugger-shell@0.85.2", "", { "dependencies": { "cross-spawn": "^7.0.6", "debug": "^4.4.0", "fb-dotslash": "0.5.8" } }, "sha512-r5BkhqPMfg3LmaZS5zadHmBNVH5h4bhSpv4BEPGfK4gat9HABAMzUzybi+2wpgU3SoHxnyKGdExEJvoqVcjeRg=="],
+
+    "@react-native/dev-middleware": ["@react-native/dev-middleware@0.85.2", "", { "dependencies": { "@isaacs/ttlcache": "^1.4.1", "@react-native/debugger-frontend": "0.85.2", "@react-native/debugger-shell": "0.85.2", "chrome-launcher": "^0.15.2", "chromium-edge-launcher": "^0.3.0", "connect": "^3.6.5", "debug": "^4.4.0", "invariant": "^2.2.4", "nullthrows": "^1.1.1", "open": "^7.0.3", "serve-static": "^1.16.2", "ws": "^7.5.10" } }, "sha512-3J+NaDUg+QEfDeLAUzgaWhpaxEg78g+KwbydlDCewh2G6WnHpsty8XooruxNHzyAsqVWywZMrzmbn78Ctc1O9Q=="],
+
+    "@react-native/gradle-plugin": ["@react-native/gradle-plugin@0.85.2", "", {}, "sha512-YXBOLeAqFrv7XwUeBPTKZeOV1FIxn4AW7UAEitScf3ibC8bu8+6NpJu4HWgbNQHg7vDbbTZVbcOl8EwGxsSq2w=="],
+
+    "@react-native/js-polyfills": ["@react-native/js-polyfills@0.85.2", "", {}, "sha512-esGEAmKVM40DV/yVmNljCKZTIeUo7qXqc+Hwffkv3TG+b3E24xyFovHrbP98gGxZr2ZsEyx+2sKLdXF5asY5nw=="],
+
+    "@react-native/metro-babel-transformer": ["@react-native/metro-babel-transformer@0.85.2", "", { "dependencies": { "@babel/core": "^7.25.2", "@react-native/babel-preset": "0.85.2", "hermes-parser": "0.33.3", "nullthrows": "^1.1.1" } }, "sha512-lU9XOGahpHvQff30H5lnvh9RYbVwC1zpSHpl84E+7BD2zj0FvW+pD7MBh7CWbmbWmegjtAb+U/2bokXcDVA+jA=="],
+
+    "@react-native/metro-config": ["@react-native/metro-config@0.85.2", "", { "dependencies": { "@react-native/js-polyfills": "0.85.2", "@react-native/metro-babel-transformer": "0.85.2", "metro-config": "^0.84.0", "metro-runtime": "^0.84.0" } }, "sha512-YkTIMfTPeyMUrtpQo/7zd3oybVYJCfTp8626PqoakOvEiWi9PxsUpZ8j44a5GFtOIq8Nc6WWVBiFRn/6qdi1uQ=="],
+
+    "@react-native/normalize-colors": ["@react-native/normalize-colors@0.85.2", "", {}, "sha512-svuOLtjbFGXDdHsriHXuND5FgHg7XlkOXCbH/8+X4t76YLH6qSTffSIQQrKLDL5mn4EFU+Oh/PNO0/FfpnTOTg=="],
+
+    "@react-native/virtualized-lists": ["@react-native/virtualized-lists@0.85.2", "", { "dependencies": { "invariant": "^2.2.4", "nullthrows": "^1.1.1" }, "peerDependencies": { "@types/react": "^19.2.0", "react": "*", "react-native": "0.85.2" }, "optionalPeers": ["@types/react"] }, "sha512-wmVKpAlcr+UB0L5SpbrV865EdleUP7I5+X+48e1aRsQK8q+wsTRBXeUwWVip/1l+HZwlZFeO8iOILJ16VRu0Cw=="],
+
+    "@react-spectrum/color": ["@react-spectrum/color@3.2.0", "", { "dependencies": { "@adobe/react-spectrum": "3.47.0", "@swc/helpers": "^0.5.0", "react-stately": "3.46.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-Xg/U8+l1CQdvPRF4Zrv7AvtqsjuYUNkMxJMG0cIug9RKtIfEoyh7VR4Xg3FNd4Y/AwKXNJZZN4l94qz4WlK23Q=="],
+
+    "@react-spectrum/provider": ["@react-spectrum/provider@3.11.0", "", { "dependencies": { "@adobe/react-spectrum": "3.47.0", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-W2Gxbj8AcG5OR2K5Ua3K8qQqxdsiytEiz+2rhr6oQyBM8VafEgDcNPYSOTtfjrQM3snl2Uhp8LzwN0jwQe/6nQ=="],
+
+    "@react-stately/color": ["@react-stately/color@3.10.0", "", { "dependencies": { "@swc/helpers": "^0.5.0", "react-stately": "3.46.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-P4tlvOYFA8hl/NXiMyPxfM+7rXV01hnwlvGCwbZqUK1aRv0Ry0yGCj2AbSzhYHx7i4J4+CVUJUYozNLzhm+6Sw=="],
+
+    "@react-stately/utils": ["@react-stately/utils@3.12.0", "", { "dependencies": { "@swc/helpers": "^0.5.0", "react-stately": "3.46.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-7q+iHz9cENvro1dVKgdTxNh1i1mtWuLUI6UHp10TAgpxM9DyRDvmuN35zLXYCmMDgx3WLY2xkwqoez8xd+CdxQ=="],
+
+    "@react-types/color": ["@react-types/color@3.2.0", "", { "dependencies": { "@react-aria/color": "^3.2.0", "@react-spectrum/color": "^3.2.0", "@react-stately/color": "^3.10.0" }, "peerDependencies": { "@react-spectrum/provider": "^3.0.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-beV3vz80nzZ1EuYUM7296Kyi3AHcMrbQw0qub/9yzHWVTKKc5sy/e4dCMKcWL/ArkeAyc7jDOiui190RQ4l0Fw=="],
+
+    "@react-types/shared": ["@react-types/shared@3.34.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-gp6xo/s2lX54AlTjOiqwDnxA7UW79BNvI9dB9pr3LZTzRKCd1ZA+ZbgKw/ReIiWuvvVw/8QFJpnqeeFyLocMcQ=="],
+
+    "@reduxjs/toolkit": ["@reduxjs/toolkit@2.11.2", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@standard-schema/utils": "^0.3.0", "immer": "^11.0.0", "redux": "^5.0.1", "redux-thunk": "^3.1.0", "reselect": "^5.1.0" }, "peerDependencies": { "react": "^16.9.0 || ^17.0.0 || ^18 || ^19", "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0" }, "optionalPeers": ["react", "react-redux"] }, "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ=="],
+
     "@remix-run/router": ["@remix-run/router@1.21.0", "", {}, "sha512-xfSkCAchbdG5PnbrKqFWwia4Bi61nH+wm8wLEqfHDyp7Y3dZzgqS2itV8i4gAq9pC2HsTpwyBC6Ds8VHZ96JlA=="],
 
     "@resvg/resvg-js": ["@resvg/resvg-js@2.4.1", "", { "optionalDependencies": { "@resvg/resvg-js-android-arm-eabi": "2.4.1", "@resvg/resvg-js-android-arm64": "2.4.1", "@resvg/resvg-js-darwin-arm64": "2.4.1", "@resvg/resvg-js-darwin-x64": "2.4.1", "@resvg/resvg-js-linux-arm-gnueabihf": "2.4.1", "@resvg/resvg-js-linux-arm64-gnu": "2.4.1", "@resvg/resvg-js-linux-arm64-musl": "2.4.1", "@resvg/resvg-js-linux-x64-gnu": "2.4.1", "@resvg/resvg-js-linux-x64-musl": "2.4.1", "@resvg/resvg-js-win32-arm64-msvc": "2.4.1", "@resvg/resvg-js-win32-ia32-msvc": "2.4.1", "@resvg/resvg-js-win32-x64-msvc": "2.4.1" } }, "sha512-wTOf1zerZX8qYcMmLZw3czR4paI4hXqPjShNwJRh5DeHxvgffUS5KM7XwxtbIheUW6LVYT5fhT2AJiP6mU7U4A=="],
@@ -528,14 +785,24 @@
 
     "@shikijs/vscode-textmate": ["@shikijs/vscode-textmate@10.0.2", "", {}, "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg=="],
 
+    "@sinclair/typebox": ["@sinclair/typebox@0.27.10", "", {}, "sha512-MTBk/3jGLNB2tVxv6uLlFh1iu64iYOQ2PbdOSK3NW8JZsmlaOh2q6sdtKowBhfw8QFLmYNzTW4/oK4uATIi6ZA=="],
+
     "@sindresorhus/merge-streams": ["@sindresorhus/merge-streams@4.0.0", "", {}, "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ=="],
 
     "@so1ve/prettier-config": ["@so1ve/prettier-config@3.1.0", "", { "dependencies": { "@so1ve/prettier-plugin-toml": "3.1.0", "prettier-plugin-astro": "^0.14.0", "prettier-plugin-curly-and-jsdoc": "3.1.0", "prettier-plugin-pkgsort": "^0.2.1" }, "peerDependencies": { "prettier": "^3.0.0" } }, "sha512-9GJ1yXKBC4DzqCTTaZoBf8zw7WWkVuXcccZt1Aqk4lj6ab/GiNUnjPGajUVYLjaqAEOKqM7jUSUfTjk2JTjCAg=="],
 
     "@so1ve/prettier-plugin-toml": ["@so1ve/prettier-plugin-toml@3.1.0", "", { "peerDependencies": { "prettier": "^3.0.0" } }, "sha512-8WZAGjAVNIJlkfWL6wHKxlUuEBY45fdd5qY5bR/Z6r/txgzKXk/r9qi1DTwc17gi/WcNuRrcRugecRT+mWbIYg=="],
 
+    "@spectrum-icons/ui": ["@spectrum-icons/ui@3.7.0", "", { "dependencies": { "@adobe/react-spectrum-ui": "1.2.1", "@babel/runtime": "^7.24.4", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "@adobe/react-spectrum": "^3.47.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-86iQSDfJb3Ama1WSJ/mEiFy4DJT7e/v4pSmEuX4aKKMzbNYft+O40N18S2POUnmblrb7MQneLC/pgIp1SDBwEQ=="],
+
+    "@spectrum-icons/workflow": ["@spectrum-icons/workflow@4.3.0", "", { "dependencies": { "@adobe/react-spectrum-workflow": "2.3.5", "@swc/helpers": "^0.5.0" }, "peerDependencies": { "@adobe/react-spectrum": "^3.47.0", "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-ILuhgWh9jMXaEVMRuOYgTAjMc22cKyvCtUDyZmc8OEMfOYuejj+Gcp5t6DhaCfE0M9rORtVxCrRgsO2WyEgfUw=="],
+
     "@splinetool/runtime": ["@splinetool/runtime@0.9.526", "", { "dependencies": { "on-change": "^4.0.0", "semver-compare": "^1.0.0" } }, "sha512-qznHbXA5aKwDbCgESAothCNm1IeEZcmNWG145p5aXj4w5uoqR1TZ9qkTHTKLTsUbHeitCwdhzmRqan1kxboLgQ=="],
 
+    "@standard-schema/spec": ["@standard-schema/spec@1.1.0", "", {}, "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w=="],
+
+    "@standard-schema/utils": ["@standard-schema/utils@0.3.0", "", {}, "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g=="],
+
     "@stitches/react": ["@stitches/react@1.2.8", "", { "peerDependencies": { "react": ">= 16.3.0" } }, "sha512-9g9dWI4gsSVe8bNLlb+lMkBYsnIKCZTmvqvDG+Avnn69XfmHZKiaMrx7cgTaddq7aTPPmXiTsbFcUy0xgI4+wA=="],
 
     "@swc/core": ["@swc/core@1.13.19", "", { "dependencies": { "@swc/counter": "^0.1.3", "@swc/types": "^0.1.25" }, "optionalDependencies": { "@swc/core-darwin-arm64": "1.13.19", "@swc/core-darwin-x64": "1.13.19", "@swc/core-linux-arm-gnueabihf": "1.13.19", "@swc/core-linux-arm64-gnu": "1.13.19", "@swc/core-linux-arm64-musl": "1.13.19", "@swc/core-linux-x64-gnu": "1.13.19", "@swc/core-linux-x64-musl": "1.13.19", "@swc/core-win32-arm64-msvc": "1.13.19", "@swc/core-win32-ia32-msvc": "1.13.19", "@swc/core-win32-x64-msvc": "1.13.19" }, "peerDependencies": { "@swc/helpers": ">=0.5.17" }, "optionalPeers": ["@swc/helpers"] }, "sha512-V1r4wFdjaZIUIZZrV2Mb/prEeu03xvSm6oatPxsvnXKF9lNh5Jtk9QvUdiVfD9rrvi7bXrAVhg9Wpbmv/2Fl1g=="],
@@ -562,8 +829,40 @@
 
     "@swc/counter": ["@swc/counter@0.1.3", "", {}, "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="],
 
+    "@swc/helpers": ["@swc/helpers@0.5.21", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-jI/VAmtdjB/RnI8GTnokyX7Ug8c+g+ffD6QRLa6XQewtnGyukKkKSk3wLTM3b5cjt1jNh9x0jfVlagdN2gDKQg=="],
+
     "@swc/types": ["@swc/types@0.1.25", "", { "dependencies": { "@swc/counter": "^0.1.3" } }, "sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g=="],
 
+    "@tailwindcss/node": ["@tailwindcss/node@4.2.4", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.19.0", "jiti": "^2.6.1", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.2.4" } }, "sha512-Ai7+yQPxz3ddrDQzFfBKdHEVBg0w3Zl83jnjuwxnZOsnH9pGn93QHQtpU0p/8rYWxvbFZHneni6p1BSLK4DkGA=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.2.4", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.2.4", "@tailwindcss/oxide-darwin-arm64": "4.2.4", "@tailwindcss/oxide-darwin-x64": "4.2.4", "@tailwindcss/oxide-freebsd-x64": "4.2.4", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.2.4", "@tailwindcss/oxide-linux-arm64-gnu": "4.2.4", "@tailwindcss/oxide-linux-arm64-musl": "4.2.4", "@tailwindcss/oxide-linux-x64-gnu": "4.2.4", "@tailwindcss/oxide-linux-x64-musl": "4.2.4", "@tailwindcss/oxide-wasm32-wasi": "4.2.4", "@tailwindcss/oxide-win32-arm64-msvc": "4.2.4", "@tailwindcss/oxide-win32-x64-msvc": "4.2.4" } }, "sha512-9El/iI069DKDSXwTvB9J4BwdO5JhRrOweGaK25taBAvBXyXqJAX+Jqdvs8r8gKpsI/1m0LeJLyQYTf/WLrBT1Q=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.2.4", "", { "os": "android", "cpu": "arm64" }, "sha512-e7MOr1SAn9U8KlZzPi1ZXGZHeC5anY36qjNwmZv9pOJ8E4Q6jmD1vyEHkQFmNOIN7twGPEMXRHmitN4zCMN03g=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.2.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-tSC/Kbqpz/5/o/C2sG7QvOxAKqyd10bq+ypZNf+9Fi2TvbVbv1zNpcEptcsU7DPROaSbVgUXmrzKhurFvo5eDg=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.2.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-yPyUXn3yO/ufR6+Kzv0t4fCg2qNr90jxXc5QqBpjlPNd0NqyDXcmQb/6weunH/MEDXW5dhyEi+agTDiqa3WsGg=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.2.4", "", { "os": "freebsd", "cpu": "x64" }, "sha512-BoMIB4vMQtZsXdGLVc2z+P9DbETkiopogfWZKbWwM8b/1Vinbs4YcUwo+kM/KeLkX3Ygrf4/PsRndKaYhS8Eiw=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.2.4", "", { "os": "linux", "cpu": "arm" }, "sha512-7pIHBLTHYRAlS7V22JNuTh33yLH4VElwKtB3bwchK/UaKUPpQ0lPQiOWcbm4V3WP2I6fNIJ23vABIvoy2izdwA=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-+E4wxJ0ZGOzSH325reXTWB48l42i93kQqMvDyz5gqfRzRZ7faNhnmvlV4EPGJU3QJM/3Ab5jhJ5pCRUsKn6OQw=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.2.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.2.4", "", { "os": "linux", "cpu": "x64" }, "sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.2.4", "", { "dependencies": { "@emnapi/core": "^1.8.1", "@emnapi/runtime": "^1.8.1", "@emnapi/wasi-threads": "^1.1.0", "@napi-rs/wasm-runtime": "^1.1.1", "@tybys/wasm-util": "^0.10.1", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.2.4", "", { "os": "win32", "cpu": "arm64" }, "sha512-L9BXqxC4ToVgwMFqj3pmZRqyHEztulpUJzCxUtLjobMCzTPsGt1Fa9enKbOpY2iIyVtaHNeNvAK8ERP/64sqGQ=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.2.4", "", { "os": "win32", "cpu": "x64" }, "sha512-ESlKG0EpVJQwRjXDDa9rLvhEAh0mhP1sF7sap9dNZT0yyl9SAG6T7gdP09EH0vIv0UNTlo6jPWyujD6559fZvw=="],
+
+    "@tailwindcss/postcss": ["@tailwindcss/postcss@4.2.4", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.2.4", "@tailwindcss/oxide": "4.2.4", "postcss": "^8.5.6", "tailwindcss": "4.2.4" } }, "sha512-wgAVj6nUWAolAu8YFvzT2cTBIElWHkjZwFYovF+xsqKsW2ADxM/X2opxj5NsF/qVccAOjRNe8X2IdPzMsWyHTg=="],
+
     "@turf/boolean-clockwise": ["@turf/boolean-clockwise@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0", "@turf/invariant": "^6.5.0" } }, "sha512-45+C7LC5RMbRWrxh3Z0Eihsc8db1VGBO5d9BLTOAwU4jR6SgsunTfRWR16X7JUwIDYlCVEmnjcXJNi/kIU3VIw=="],
 
     "@turf/clone": ["@turf/clone@6.5.0", "", { "dependencies": { "@turf/helpers": "^6.5.0" } }, "sha512-mzVtTFj/QycXOn6ig+annKrM6ZlimreKYz6f/GSERytOpgzodbQyOgkfwru100O1KQhhjSudKK4DsQ0oyi9cTw=="],
@@ -658,8 +957,16 @@
 
     "@types/geojson": ["@types/geojson@7946.0.16", "", {}, "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg=="],
 
+    "@types/hammerjs": ["@types/hammerjs@2.0.46", "", {}, "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw=="],
+
     "@types/hast": ["@types/hast@3.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ=="],
 
+    "@types/istanbul-lib-coverage": ["@types/istanbul-lib-coverage@2.0.6", "", {}, "sha512-2QF/t/auWm0lsy8XtKVPG19v3sSOQlJe/YHZgfjb/KBBHOGSV+J2q/S671rcq9uTBrLAXmZpqJiaQbMT+zNU1w=="],
+
+    "@types/istanbul-lib-report": ["@types/istanbul-lib-report@3.0.3", "", { "dependencies": { "@types/istanbul-lib-coverage": "*" } }, "sha512-NQn7AHQnk/RSLOxrBbGyJM/aVQ+pjj5HCgasFxc0K/KhoATfQ/47AyUl15I2yBUpihjmas+a+VJBOqecrFH+uA=="],
+
+    "@types/istanbul-reports": ["@types/istanbul-reports@3.0.4", "", { "dependencies": { "@types/istanbul-lib-report": "*" } }, "sha512-pk2B1NWalF9toCRu6gjBzR69syFjP4Od8WRAX+0mmf9lAjCRicLOWc+ZrxZHx/0XRjotgkF9t6iaMJ+aXcOdZQ=="],
+
     "@types/katex": ["@types/katex@0.16.7", "", {}, "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="],
 
     "@types/mdast": ["@types/mdast@4.0.4", "", { "dependencies": { "@types/unist": "*" } }, "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA=="],
@@ -668,16 +975,26 @@
 
     "@types/ms": ["@types/ms@0.7.34", "", {}, "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g=="],
 
+    "@types/node": ["@types/node@25.6.0", "", { "dependencies": { "undici-types": "~7.19.0" } }, "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ=="],
+
     "@types/parse-author": ["@types/parse-author@2.0.3", "", {}, "sha512-pgRW2K/GVQoogylrGJXDl7PBLW9A6T4OOc9Hy9MLT5f7vgufK2GQ8FcfAbjFHR5HjcN9ByzuCczAORk49REqoA=="],
 
     "@types/parse-json": ["@types/parse-json@4.0.2", "", {}, "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw=="],
 
     "@types/react": ["@types/react@19.1.5", "", { "dependencies": { "csstype": "^3.0.2" } }, "sha512-piErsCVVbpMMT2r7wbawdZsq4xMvIAhQuac2gedQHysu1TZYEigE6pnFfgZT+/jQnrRuF5r+SHzuehFjfRjr4g=="],
 
+    "@types/react-test-renderer": ["@types/react-test-renderer@19.1.0", "", { "dependencies": { "@types/react": "*" } }, "sha512-XD0WZrHqjNrxA/MaR9O22w/RNidWR9YZmBdRGI7wcnWGrv/3dA8wKCJ8m63Sn+tLJhcjmuhOi629N66W6kgWzQ=="],
+
     "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
 
     "@types/unist": ["@types/unist@3.0.3", "", {}, "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q=="],
 
+    "@types/use-sync-external-store": ["@types/use-sync-external-store@0.0.6", "", {}, "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg=="],
+
+    "@types/yargs": ["@types/yargs@17.0.35", "", { "dependencies": { "@types/yargs-parser": "*" } }, "sha512-qUHkeCyQFxMXg79wQfTtfndEC+N9ZZg76HJftDJp+qH2tV7Gj4OJi7l+PiWwJ+pWtW8GwSmqsDj/oymhrTWXjg=="],
+
+    "@types/yargs-parser": ["@types/yargs-parser@21.0.3", "", {}, "sha512-I4q9QU9MQv4oEOz4tAHJtNz1cwuLxn2F3xcc2iV5WdqLPpUnj30aUuxt1mAxYTG+oe8CZMV/+6rU4S4gRDzqtQ=="],
+
     "@ungap/structured-clone": ["@ungap/structured-clone@1.2.1", "", {}, "sha512-fEzPV3hSkSMltkw152tJKNARhOupqbH96MZWyRjNaYZOMIzbrTeQDG+MTc6Mr2pgzFQzFxAfmhGDNP5QK++2ZA=="],
 
     "@use-gesture/core": ["@use-gesture/core@10.3.1", "", {}, "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw=="],
@@ -688,10 +1005,6 @@
 
     "@visactor/vchart": ["@visactor/vchart@1.8.11", "", { "dependencies": { "@visactor/vdataset": "~0.17.3", "@visactor/vgrammar-core": "0.10.11", "@visactor/vgrammar-hierarchy": "0.10.11", "@visactor/vgrammar-projection": "0.10.11", "@visactor/vgrammar-sankey": "0.10.11", "@visactor/vgrammar-util": "0.10.11", "@visactor/vgrammar-wordcloud": "0.10.11", "@visactor/vgrammar-wordcloud-shape": "0.10.11", "@visactor/vrender-components": "0.17.17", "@visactor/vrender-core": "0.17.17", "@visactor/vrender-kits": "0.17.17", "@visactor/vscale": "~0.17.3", "@visactor/vutils": "~0.17.3", "@visactor/vutils-extension": "1.8.11" } }, "sha512-RdQ822J02GgAQNXvO1LiT0T3O6FjdgPdcm9hVBFyrpBBmuI8MH02IE7Y1kGe9NiFTH4tDwP0ixRgBmqNSGSLZQ=="],
 
-    "@visactor/vchart-semi-theme": ["@visactor/vchart-semi-theme@1.8.8", "", { "dependencies": { "@visactor/vchart-theme-utils": "1.8.8" }, "peerDependencies": { "@visactor/vchart": "~1.8.8" } }, "sha512-lm57CX3r6Bm7iGBYYyWhDY+1BvkyhNVLEckKx2PnlPKpJHikKSIK2ACyI5SmHuSOOdYzhY2QK6ZfYa2NShJ83w=="],
-
-    "@visactor/vchart-theme-utils": ["@visactor/vchart-theme-utils@1.8.8", "", { "peerDependencies": { "@visactor/vchart": "~1.8.8" } }, "sha512-RdCey3/t0+82EYyFZvx210rgJJWti9rsgcL3ROZS7o9CtRW1CMj9u9LKLDNIcPLNcLNACFC0aoT03jpdD1BCpA=="],
-
     "@visactor/vdataset": ["@visactor/vdataset@0.17.5", "", { "dependencies": { "@turf/flatten": "^6.5.0", "@turf/helpers": "^6.5.0", "@turf/rewind": "^6.5.0", "@visactor/vutils": "0.17.5", "d3-dsv": "^2.0.0", "d3-geo": "^1.12.1", "d3-hexbin": "^0.2.2", "d3-hierarchy": "^3.1.1", "eventemitter3": "^4.0.7", "geobuf": "^3.0.1", "geojson-dissolve": "^3.1.0", "path-browserify": "^1.0.1", "pbf": "^3.2.1", "point-at-length": "^1.1.0", "simple-statistics": "^7.7.3", "simplify-geojson": "^1.0.4", "topojson-client": "^3.1.0" } }, "sha512-zVBdLWHWrhldGc8JDjSYF9lvpFT4ZEFQDB0b6yvfSiHzHKHiSco+rWmUFvA7r4ObT6j2QWF1vZAV9To8Ml4vHw=="],
 
     "@visactor/vgrammar-coordinate": ["@visactor/vgrammar-coordinate@0.10.11", "", { "dependencies": { "@visactor/vgrammar-util": "0.10.11", "@visactor/vutils": "~0.17.3" } }, "sha512-XSUvEkaf/NQHFafmTwqoIMZicp9fF3o6NB2FDpuWrK4DI1lTuip/0RkqrC+kBAjc5erjt0em0TiITyqXpp4G6w=="],
@@ -730,18 +1043,28 @@
 
     "@vue/shared": ["@vue/shared@3.5.26", "", {}, "sha512-7Z6/y3uFI5PRoKeorTOSXKcDj0MSasfNNltcslbFrPpcw6aXRUALq4IfJlaTRspiWIUOEZbrpM+iQGmCOiWe4A=="],
 
+    "@zowe/secrets-for-zowe-sdk": ["@zowe/secrets-for-zowe-sdk@8.29.4", "", {}, "sha512-fiRfuEuFNapwhVbN3LJIA2ZgVajNB+QNFN7O7ES/fIYGM612PKcXuvbZUJSlU69IZ8eUF8SP+9OnveK4s+GLgw=="],
+
+    "abort-controller": ["abort-controller@3.0.0", "", { "dependencies": { "event-target-shim": "^5.0.0" } }, "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg=="],
+
     "abs-svg-path": ["abs-svg-path@0.1.1", "", {}, "sha512-d8XPSGjfyzlXC3Xx891DJRyZfqk5JU0BJrDQcsWomFIV1/BIzPW5HDH5iDdWpqWaav0YVIEzT1RHTwWr0FFshA=="],
 
+    "accepts": ["accepts@2.0.0", "", { "dependencies": { "mime-types": "^3.0.0", "negotiator": "^1.0.0" } }, "sha512-5cvg6CtKwfgdmVqY1WIiXKc3Q1bkRqGLi+2W/6ao+6Y7gu/RCwRuAhGEzh5B4KlszSuTLgZYuqFqo5bImjNKng=="],
+
     "acorn": ["acorn@8.15.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg=="],
 
     "acorn-jsx": ["acorn-jsx@5.3.2", "", { "peerDependencies": { "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="],
 
     "acorn-walk": ["acorn-walk@8.3.4", "", { "dependencies": { "acorn": "^8.11.0" } }, "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g=="],
 
+    "agent-base": ["agent-base@7.1.4", "", {}, "sha512-MnA+YT8fwfJPgBx3m60MNqakm30XOkyIoH1y6huTQvC0PwZG7ki8NacLBcrPbNoo8vEZy7Jpuk7+jMO+CUovTQ=="],
+
     "ahooks": ["ahooks@3.8.5", "", { "dependencies": { "@babel/runtime": "^7.21.0", "dayjs": "^1.9.1", "intersection-observer": "^0.12.0", "js-cookie": "^3.0.5", "lodash": "^4.17.21", "react-fast-compare": "^3.2.2", "resize-observer-polyfill": "^1.5.1", "screenfull": "^5.0.0", "tslib": "^2.4.1" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Y+MLoJpBXVdjsnnBjE5rOSPkQ4DK+8i5aPDzLJdIOsCpo/fiAeXcBY1Y7oWgtOK0TpOz0gFa/XcyO1UGdoqLcw=="],
 
     "ajv": ["ajv@6.12.6", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g=="],
 
+    "anser": ["anser@1.4.10", "", {}, "sha512-hCv9AqTQ8ycjpSd3upOJd7vFwW1JaoYQ7tpham03GJ1ca8/65rqn0RpaWpItOAd6ylW9wAw6luXYPJIyPFVOww=="],
+
     "ansi-regex": ["ansi-regex@5.0.1", "", {}, "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="],
 
     "ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
@@ -750,24 +1073,20 @@
 
     "antd-style": ["antd-style@3.7.1", "", { "dependencies": { "@ant-design/cssinjs": "^1.21.1", "@babel/runtime": "^7.24.1", "@emotion/cache": "^11.11.0", "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.4", "@emotion/serialize": "^1.1.3", "@emotion/utils": "^1.2.1", "use-merge-value": "^1.2.0" }, "peerDependencies": { "antd": ">=5.8.1", "react": ">=18" } }, "sha512-CQOfddVp4aOvBfCepa+Kj2e7ap+2XBINg1Kn2osdE3oQvrD7KJu/K0sfnLcFLkgCJygbxmuazYdWLKb+drPDYA=="],
 
-    "any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="],
-
-    "anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
-
-    "arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
-
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
+    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
+
     "array-source": ["array-source@0.0.4", "", {}, "sha512-frNdc+zBn80vipY+GdcJkLEbMWj3xmzArYApmUGxoiV8uAu/ygcs9icPdsGdA26h0MkHUMW6EN2piIvVx+M5Mw=="],
 
+    "asap": ["asap@2.0.6", "", {}, "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="],
+
     "assign-symbols": ["assign-symbols@1.0.0", "", {}, "sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw=="],
 
     "astring": ["astring@1.9.0", "", { "bin": { "astring": "bin/astring" } }, "sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg=="],
 
     "async": ["async@3.2.6", "", {}, "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA=="],
 
-    "async-validator": ["async-validator@3.5.2", "", {}, "sha512-8eLCg00W9pIRZSB781UUX/H6Oskmm8xloZfr09lz5bikRpBVDlJ3hRVuxxP1SxcwsEYfJ4IU8Q19Y8/893r3rQ=="],
-
     "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
 
     "attr-accept": ["attr-accept@2.2.5", "", {}, "sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ=="],
@@ -786,13 +1105,21 @@
 
     "babel-plugin-polyfill-regenerator": ["babel-plugin-polyfill-regenerator@0.6.4", "", { "dependencies": { "@babel/helper-define-polyfill-provider": "^0.6.4" }, "peerDependencies": { "@babel/core": "^7.4.0 || ^8.0.0-0 <8.0.0" } }, "sha512-7gD3pRadPrbjhjLyxebmx/WrFYcuSjZ0XbdUujQMZ/fcE9oeewk2U/7PCvez84UeuK3oSjmPZ0Ch0dlupQvGzw=="],
 
+    "babel-plugin-syntax-hermes-parser": ["babel-plugin-syntax-hermes-parser@0.33.3", "", { "dependencies": { "hermes-parser": "0.33.3" } }, "sha512-/Z9xYdaJ1lC0pT9do6TqCqhOSLfZ5Ot8D5za1p+feEfWYupCOfGbhhEXN9r2ZgJtDNUNRw/Z+T2CvAGKBqtqWA=="],
+
+    "babel-plugin-transform-flow-enums": ["babel-plugin-transform-flow-enums@0.0.2", "", { "dependencies": { "@babel/plugin-syntax-flow": "^7.12.1" } }, "sha512-g4aaCrDDOsWjbm0PUUeVnkcVd6AKJsVc/MbnPhEotEpkeJQP6b8nzewohQi7+QS8UyPehOhGWn0nOwjvWpmMvQ=="],
+
     "bail": ["bail@2.0.2", "", {}, "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw=="],
 
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
-    "bezier-easing": ["bezier-easing@2.1.0", "", {}, "sha512-gbIqZ/eslnUFC1tjEvtz0sgx+xTK20wDnYMIA27VA04R7w6xxXQPZDbibjA9DTWZRA2CXtwHykkVzlCaAJAZig=="],
+    "base64-js": ["base64-js@1.5.1", "", {}, "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA=="],
+
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.10.21", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-Q+rUQ7Uz8AHM7DEaNdwvfFCTq7a43lNTzuS94eiWqwyxfV/wJv+oUivef51T91mmRY4d4A1u9rcSvkeufCVXlA=="],
+
+    "bcryptjs": ["bcryptjs@3.0.3", "", { "bin": { "bcrypt": "bin/bcrypt" } }, "sha512-GlF5wPWnSa/X5LKM1o0wz0suXIINz1iHRLvTS+sLyi7XPbe5ycmYI3DlZqVGZZtDgl4DmasFg7gOB3JYbphV5g=="],
 
-    "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
+    "boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="],
 
     "brace-expansion": ["brace-expansion@1.1.11", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA=="],
 
@@ -800,13 +1127,17 @@
 
     "browserslist": ["browserslist@4.24.5", "", { "dependencies": { "caniuse-lite": "^1.0.30001716", "electron-to-chromium": "^1.5.149", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-FDToo4Wo82hIdgc1CQ+NQD0hEhmpPjrZ3hiUgwgOG6IuTdlpr8jdjyG24P6cNP1yJpTLzS5OcGgSw0xmDU1/Tw=="],
 
+    "bser": ["bser@2.1.1", "", { "dependencies": { "node-int64": "^0.4.0" } }, "sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ=="],
+
     "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="],
 
+    "bundle-name": ["bundle-name@4.1.0", "", { "dependencies": { "run-applescript": "^7.0.0" } }, "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q=="],
+
     "call-bind-apply-helpers": ["call-bind-apply-helpers@1.0.2", "", { "dependencies": { "es-errors": "^1.3.0", "function-bind": "^1.1.2" } }, "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ=="],
 
     "callsites": ["callsites@3.1.0", "", {}, "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="],
 
-    "camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
+    "camelcase": ["camelcase@6.3.0", "", {}, "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="],
 
     "caniuse-lite": ["caniuse-lite@1.0.30001718", "", {}, "sha512-AflseV1ahcSunK53NfEs9gFWgOEmzr0f+kaMFA4xiLZlr9Hzt7HxcSpIFcnNCUkz6R6dWKa54rUz3HUmI3nVcw=="],
 
@@ -830,8 +1161,16 @@
 
     "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
 
+    "chownr": ["chownr@3.0.0", "", {}, "sha512-+IxzY9BZOQd/XuYPRmrvEVjF/nqj5kgT4kEq7VofrDoM1MxoRjEWkrCC3EtLi59TVawxTAn+orJwFQcrqEN1+g=="],
+
     "chroma-js": ["chroma-js@3.1.2", "", {}, "sha512-IJnETTalXbsLx1eKEgx19d5L6SRM7cH4vINw/99p/M11HCuXGRWL+6YmCm7FWFGIo6dtWuQoQi1dc5yQ7ESIHg=="],
 
+    "chrome-launcher": ["chrome-launcher@0.15.2", "", { "dependencies": { "@types/node": "*", "escape-string-regexp": "^4.0.0", "is-wsl": "^2.2.0", "lighthouse-logger": "^1.0.0" }, "bin": { "print-chrome-path": "bin/print-chrome-path.js" } }, "sha512-zdLEwNo3aUVzIhKhTtXfxhdvZhUghrnmkvcAq2NoDd+LeOHKf03H5jwZ8T/STsAlzyALkBVK552iaG1fGf1xVQ=="],
+
+    "chromium-edge-launcher": ["chromium-edge-launcher@0.3.0", "", { "dependencies": { "@types/node": "*", "escape-string-regexp": "^4.0.0", "is-wsl": "^2.2.0", "lighthouse-logger": "^1.0.0", "mkdirp": "^1.0.4" } }, "sha512-p03azHlGjtyRvFEee3cyvtsRYdniSkwjkzmM/KmVnqT5d7QkkwpJBhis/zCLMYdQMVJ5tt140TBNqqrZPaWeFA=="],
+
+    "ci-info": ["ci-info@2.0.0", "", {}, "sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ=="],
+
     "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
 
     "classnames": ["classnames@2.5.1", "", {}, "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="],
@@ -842,6 +1181,10 @@
 
     "cli-width": ["cli-width@4.1.0", "", {}, "sha512-ouuZd4/dm2Sw5Gmqy6bGyNNNe1qt9RpmxveLSO7KcgsTnU7RXfsw+/bukWGo1abgBiMAic068rclZsO4IWmmxQ=="],
 
+    "client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
+
+    "cliui": ["cliui@8.0.1", "", { "dependencies": { "string-width": "^4.2.0", "strip-ansi": "^6.0.1", "wrap-ansi": "^7.0.0" } }, "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ=="],
+
     "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
 
     "code-inspector-plugin": ["code-inspector-plugin@1.3.3", "", { "dependencies": { "@code-inspector/core": "1.3.3", "@code-inspector/esbuild": "1.3.3", "@code-inspector/mako": "1.3.3", "@code-inspector/turbopack": "1.3.3", "@code-inspector/vite": "1.3.3", "@code-inspector/webpack": "1.3.3", "chalk": "4.1.1" } }, "sha512-yDi84v5tgXFSZLLXqHl/Mc2qy9d2CxcYhIaP192NhqTG1zA5uVtiNIzvDAXh5Vaqy8QGYkvBfbG/i55b/sXaSQ=="],
@@ -860,7 +1203,7 @@
 
     "commander": ["commander@14.0.1", "", {}, "sha512-2JkV3gUZUVrbNA+1sjBOYLsMZ5cEEl8GTFP2a4AVz5hvasAMCQ1D2l2le/cX+pV4N6ZU17zjUahLpIXRrnWL8A=="],
 
-    "compute-scroll-into-view": ["compute-scroll-into-view@1.0.20", "", {}, "sha512-UCB0ioiyj8CRjtrvaceBLqqhZCVP+1B8+NWQhmdsm0VXOJtobBCf1dBQmebCCo34qZmUwZfIH2MZLqNHazrfjg=="],
+    "compute-scroll-into-view": ["compute-scroll-into-view@3.1.1", "", {}, "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw=="],
 
     "concat-map": ["concat-map@0.0.1", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
@@ -868,9 +1211,9 @@
 
     "confbox": ["confbox@0.2.2", "", {}, "sha512-1NB+BKqhtNipMsov4xI/NnhCKp9XG9NamYp5PVm9klAT0fsrNPjaFICsCFhNhwZJKNh7zB/3q8qXz0E9oaMNtQ=="],
 
-    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+    "connect": ["connect@3.7.0", "", { "dependencies": { "debug": "2.6.9", "finalhandler": "1.1.2", "parseurl": "~1.3.3", "utils-merge": "1.0.1" } }, "sha512-ZqRXc+tZukToSNmh5C2iWMSoV3X1YUcPbqEM4DkEG5tNQXrQUZCNVGGv3IuicnkMtPfGf3Xtp8WCXs295iQ1pQ=="],
 
-    "copy-text-to-clipboard": ["copy-text-to-clipboard@2.2.0", "", {}, "sha512-WRvoIdnTs1rgPMkgA2pUOa/M4Enh2uzCwdKsOMYNAJiz/4ZvEJgmbF4OmninPmlFdAWisfeh0tH+Cpf7ni3RqQ=="],
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
 
     "copy-to-clipboard": ["copy-to-clipboard@3.3.3", "", { "dependencies": { "toggle-selection": "^1.0.6" } }, "sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA=="],
 
@@ -884,7 +1227,11 @@
 
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
-    "cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
+    "css-select": ["css-select@5.2.2", "", { "dependencies": { "boolbase": "^1.0.0", "css-what": "^6.1.0", "domhandler": "^5.0.2", "domutils": "^3.0.1", "nth-check": "^2.0.1" } }, "sha512-TizTzUddG/xYLA3NXodFM0fSbNizXjOKhqiQQwvhlspadZokn1KDy0NZFS0wuEubIYAV5/c1/lAr0TaaFXEXzw=="],
+
+    "css-tree": ["css-tree@1.1.3", "", { "dependencies": { "mdn-data": "2.0.14", "source-map": "^0.6.1" } }, "sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q=="],
+
+    "css-what": ["css-what@6.2.2", "", {}, "sha512-u/O3vwbptzhMs3L1fQE82ZSLHQQfto5gyZzwteVIEyeaY5Fc7R4dapF/BvRoSYFeqfBk4m0V1Vafq5Pjv25wvA=="],
 
     "csstype": ["csstype@3.1.3", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
 
@@ -964,52 +1311,84 @@
 
     "date-fns": ["date-fns@2.30.0", "", { "dependencies": { "@babel/runtime": "^7.21.0" } }, "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw=="],
 
-    "date-fns-tz": ["date-fns-tz@1.3.8", "", { "peerDependencies": { "date-fns": ">=2.0.0" } }, "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ=="],
-
     "dayjs": ["dayjs@1.11.13", "", {}, "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg=="],
 
     "debug": ["debug@4.4.0", "", { "dependencies": { "ms": "^2.1.3" } }, "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA=="],
 
+    "decimal.js": ["decimal.js@10.6.0", "", {}, "sha512-YpgQiITW3JXGntzdUmyUR1V812Hn8T1YVXhCu+wO3OpS4eU9l4YdD3qjyiKdV6mvV29zapkMeD390UVEf2lkUg=="],
+
+    "decimal.js-light": ["decimal.js-light@2.5.1", "", {}, "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg=="],
+
     "decode-named-character-reference": ["decode-named-character-reference@1.0.2", "", { "dependencies": { "character-entities": "^2.0.0" } }, "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg=="],
 
     "decode-uri-component": ["decode-uri-component@0.4.1", "", {}, "sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ=="],
 
     "deep-is": ["deep-is@0.1.4", "", {}, "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="],
 
+    "default-browser": ["default-browser@5.5.0", "", { "dependencies": { "bundle-name": "^4.1.0", "default-browser-id": "^5.0.0" } }, "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw=="],
+
+    "default-browser-id": ["default-browser-id@5.0.1", "", {}, "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q=="],
+
+    "define-lazy-prop": ["define-lazy-prop@3.0.0", "", {}, "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg=="],
+
     "delaunator": ["delaunator@5.0.1", "", { "dependencies": { "robust-predicates": "^3.0.2" } }, "sha512-8nvh+XBe96aCESrGOqMp/84b13H9cdKbG5P2ejQCh4d4sK9RL4371qou9drQjMhvnPmhWl5hnmqbEE0fXr9Xnw=="],
 
     "delayed-stream": ["delayed-stream@1.0.0", "", {}, "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ=="],
 
+    "depd": ["depd@2.0.0", "", {}, "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw=="],
+
     "dequal": ["dequal@2.0.3", "", {}, "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA=="],
 
-    "detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="],
+    "destroy": ["destroy@1.2.0", "", {}, "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg=="],
+
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
     "devlop": ["devlop@1.1.0", "", { "dependencies": { "dequal": "^2.0.0" } }, "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA=="],
 
-    "didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="],
+    "doctrine": ["doctrine@3.0.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w=="],
 
-    "dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
+    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
 
-    "doctrine": ["doctrine@3.0.0", "", { "dependencies": { "esutils": "^2.0.2" } }, "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w=="],
+    "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
+
+    "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
+
+    "domhandler": ["domhandler@5.0.3", "", { "dependencies": { "domelementtype": "^2.3.0" } }, "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w=="],
 
     "dompurify": ["dompurify@3.2.6", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ=="],
 
+    "domutils": ["domutils@3.2.2", "", { "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", "domhandler": "^5.0.3" } }, "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw=="],
+
     "dotenv": ["dotenv@16.6.1", "", {}, "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow=="],
 
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
     "eastasianwidth": ["eastasianwidth@0.2.0", "", {}, "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="],
 
+    "ee-first": ["ee-first@1.1.1", "", {}, "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="],
+
     "electron-to-chromium": ["electron-to-chromium@1.5.157", "", {}, "sha512-/0ybgsQd1muo8QlnuTpKwtl0oX5YMlUGbm8xyqgDU00motRkKFFbUJySAQBWcY79rVqNLWIWa87BGVGClwAB2w=="],
 
+    "embla-carousel": ["embla-carousel@8.6.0", "", {}, "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA=="],
+
+    "embla-carousel-react": ["embla-carousel-react@8.6.0", "", { "dependencies": { "embla-carousel": "8.6.0", "embla-carousel-reactive-utils": "8.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.1 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-0/PjqU7geVmo6F734pmPqpyHqiM99olvyecY7zdweCw+6tKEXnrE90pBiBbMMU8s5tICemzpQ3hi5EpxzGW+JA=="],
+
+    "embla-carousel-reactive-utils": ["embla-carousel-reactive-utils@8.6.0", "", { "peerDependencies": { "embla-carousel": "8.6.0" } }, "sha512-fMVUDUEx0/uIEDM0Mz3dHznDhfX+znCCDCeIophYb1QGVM7YThSWX+wz11zlYwWFOr74b4QLGg0hrGPJeG2s4A=="],
+
     "emoji-mart": ["emoji-mart@5.6.0", "", {}, "sha512-eJp3QRe79pjwa+duv+n7+5YsNhRcMl812EcFVwrnRvYKoNPoQb5qxU8DG6Bgwji0akHdp6D4Ln6tYLG58MFSow=="],
 
     "emoji-regex": ["emoji-regex@10.4.0", "", {}, "sha512-EC+0oUMY1Rqm4O6LLrgjtYDvcVYTy7chDnM4Q7030tP4Kwj3u/pR6gP9ygnp2CJMK5Gq+9Q2oqmrFJAz01DXjw=="],
 
+    "encodeurl": ["encodeurl@2.0.0", "", {}, "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg=="],
+
+    "enhanced-resolve": ["enhanced-resolve@5.21.0", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-otxSQPw4lkOZWkHpB3zaEQs6gWYEsmX4xQF68ElXC/TWvGxGMSGOvoNbaLXm6/cS/fSfHtsEdw90y20PCd+sCA=="],
+
     "entities": ["entities@7.0.0", "", {}, "sha512-FDWG5cmEYf2Z00IkYRhbFrwIwvdFKH07uV8dvNy0omp/Qb1xcyCWp2UDtcwJF4QZZvk0sLudP6/hAu42TaqVhQ=="],
 
     "error-ex": ["error-ex@1.3.2", "", { "dependencies": { "is-arrayish": "^0.2.1" } }, "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g=="],
 
+    "error-stack-parser": ["error-stack-parser@2.1.4", "", { "dependencies": { "stackframe": "^1.3.4" } }, "sha512-Sk5V6wVazPhq5MhpO+AUxJn5x7XSXGl1R93Vn7i+zS15KDVxQijejNCrz8340/2bgLBjR9GtEG8ZVKONDjcqGQ=="],
+
     "es-define-property": ["es-define-property@1.0.1", "", {}, "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g=="],
 
     "es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
@@ -1018,6 +1397,8 @@
 
     "es-set-tostringtag": ["es-set-tostringtag@2.1.0", "", { "dependencies": { "es-errors": "^1.3.0", "get-intrinsic": "^1.2.6", "has-tostringtag": "^1.0.2", "hasown": "^2.0.2" } }, "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA=="],
 
+    "es-toolkit": ["es-toolkit@1.46.0", "", {}, "sha512-IToJ6ct9OLl5zz6WsC/1vZEwfSZ7Myil+ygl5Tf30Xjn9AEkzNB4kqp2G7VUJKF1DtTx/ra5M5KLlXvzOg51BA=="],
+
     "esast-util-from-estree": ["esast-util-from-estree@2.0.0", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "devlop": "^1.0.0", "estree-util-visit": "^2.0.0", "unist-util-position-from-estree": "^2.0.0" } }, "sha512-4CyanoAudUSBAn5K13H4JhsMH6L9ZP7XbLVe/dKybkxMO7eDyLsT8UHl9TRNrU2Gr9nz+FovfSIjuXWJ81uVwQ=="],
 
     "esast-util-from-js": ["esast-util-from-js@2.0.1", "", { "dependencies": { "@types/estree-jsx": "^1.0.0", "acorn": "^8.0.0", "esast-util-from-estree": "^2.0.0", "vfile-message": "^4.0.0" } }, "sha512-8Ja+rNJ0Lt56Pcf3TAmpBZjmx8ZcK5Ts4cAzIOjsjevg9oSXJnl6SUQ2EevU8tv3h6ZLWmoKL5H4fgWvdvfETw=="],
@@ -1026,6 +1407,8 @@
 
     "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
 
+    "escape-html": ["escape-html@1.0.3", "", {}, "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="],
+
     "escape-string-regexp": ["escape-string-regexp@4.0.0", "", {}, "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="],
 
     "eslint": ["eslint@8.57.0", "", { "dependencies": { "@eslint-community/eslint-utils": "^4.2.0", "@eslint-community/regexpp": "^4.6.1", "@eslint/eslintrc": "^2.1.4", "@eslint/js": "8.57.0", "@humanwhocodes/config-array": "^0.11.14", "@humanwhocodes/module-importer": "^1.0.1", "@nodelib/fs.walk": "^1.2.8", "@ungap/structured-clone": "^1.2.0", "ajv": "^6.12.4", "chalk": "^4.0.0", "cross-spawn": "^7.0.2", "debug": "^4.3.2", "doctrine": "^3.0.0", "escape-string-regexp": "^4.0.0", "eslint-scope": "^7.2.2", "eslint-visitor-keys": "^3.4.3", "espree": "^9.6.1", "esquery": "^1.4.2", "esutils": "^2.0.2", "fast-deep-equal": "^3.1.3", "file-entry-cache": "^6.0.1", "find-up": "^5.0.0", "glob-parent": "^6.0.2", "globals": "^13.19.0", "graphemer": "^1.4.0", "ignore": "^5.2.0", "imurmurhash": "^0.1.4", "is-glob": "^4.0.0", "is-path-inside": "^3.0.3", "js-yaml": "^4.1.0", "json-stable-stringify-without-jsonify": "^1.0.1", "levn": "^0.4.1", "lodash.merge": "^4.6.2", "minimatch": "^3.1.2", "natural-compare": "^1.4.0", "optionator": "^0.9.3", "strip-ansi": "^6.0.1", "text-table": "^0.2.0" }, "bin": { "eslint": "bin/eslint.js" } }, "sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ=="],
@@ -1038,6 +1421,8 @@
 
     "eslint-visitor-keys": ["eslint-visitor-keys@3.4.3", "", {}, "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag=="],
 
+    "esm-env": ["esm-env@1.2.2", "", {}, "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA=="],
+
     "espree": ["espree@9.6.1", "", { "dependencies": { "acorn": "^8.9.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^3.4.1" } }, "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ=="],
 
     "esquery": ["esquery@1.6.0", "", { "dependencies": { "estraverse": "^5.1.0" } }, "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg=="],
@@ -1062,28 +1447,42 @@
 
     "esutils": ["esutils@2.0.3", "", {}, "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g=="],
 
-    "eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+    "etag": ["etag@1.8.1", "", {}, "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg=="],
+
+    "event-target-shim": ["event-target-shim@5.0.1", "", {}, "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="],
+
+    "eventemitter3": ["eventemitter3@5.0.4", "", {}, "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw=="],
+
+    "eventsource": ["eventsource@4.1.0", "", { "dependencies": { "eventsource-parser": "^3.0.1" } }, "sha512-2GuF51iuHX6A9xdTccMTsNb7VO0lHZihApxhvQzJB5A03DvHDd2FQepodbMaztPBmBcE/ox7o2gqaxGhYB9LhQ=="],
+
+    "eventsource-parser": ["eventsource-parser@3.0.8", "", {}, "sha512-70QWGkr4snxr0OXLRWsFLeRBIRPuQOvt4s8QYjmUlmlkyTZkRqS7EDVRZtzU3TiyDbXSzaOeF0XUKy8PchzukQ=="],
 
     "execa": ["execa@9.6.0", "", { "dependencies": { "@sindresorhus/merge-streams": "^4.0.0", "cross-spawn": "^7.0.6", "figures": "^6.1.0", "get-stream": "^9.0.0", "human-signals": "^8.0.1", "is-plain-obj": "^4.1.0", "is-stream": "^4.0.1", "npm-run-path": "^6.0.0", "pretty-ms": "^9.2.0", "signal-exit": "^4.1.0", "strip-final-newline": "^4.0.0", "yoctocolors": "^2.1.1" } }, "sha512-jpWzZ1ZhwUmeWRhS7Qv3mhpOhLfwI+uAX4e5fOcXqwMR7EcJ0pj2kV1CVzHVMX/LphnKWD3LObjZCoJ71lKpHw=="],
 
+    "exponential-backoff": ["exponential-backoff@3.1.3", "", {}, "sha512-ZgEeZXj30q+I0EN+CbSSpIyPaJ5HVQD18Z1m+u1FXbAeT94mr1zw50q4q6jiiC447Nl/YTcIYSAftiGqetwXCA=="],
+
     "exsolve": ["exsolve@1.0.5", "", {}, "sha512-pz5dvkYYKQ1AHVrgOzBKWeP4u4FRb3a6DNK2ucr0OoNwYIU4QWsJ+NM36LLzORT+z845MzKHHhpXiUF5nvQoJg=="],
 
     "extend": ["extend@3.0.2", "", {}, "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g=="],
 
     "extend-shallow": ["extend-shallow@2.0.1", "", { "dependencies": { "is-extendable": "^0.1.0" } }, "sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug=="],
 
-    "fast-copy": ["fast-copy@3.0.2", "", {}, "sha512-dl0O9Vhju8IrcLndv2eU4ldt1ftXMqqfgN4H1cpmGV7P6jeB9FwpN9a2c8DPGE1Ys88rNUJVYDHq73CGAGOPfQ=="],
-
     "fast-deep-equal": ["fast-deep-equal@3.1.3", "", {}, "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="],
 
-    "fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
-
     "fast-json-stable-stringify": ["fast-json-stable-stringify@2.1.0", "", {}, "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw=="],
 
     "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
 
     "fastq": ["fastq@1.19.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ=="],
 
+    "fb-dotslash": ["fb-dotslash@0.5.8", "", { "bin": { "dotslash": "bin/dotslash" } }, "sha512-XHYLKk9J4BupDxi9bSEhkfss0m+Vr9ChTrjhf9l2iw3jB5C7BnY4GVPoMcqbrTutsKJso6yj2nAB6BI/F2oZaA=="],
+
+    "fb-watchman": ["fb-watchman@2.0.2", "", { "dependencies": { "bser": "2.1.1" } }, "sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "figlet": ["figlet@1.11.0", "", { "dependencies": { "commander": "^14.0.0" }, "bin": { "figlet": "bin/index.js" } }, "sha512-EEx3OS/l2bFqcUNN2NM9FPJp8vAMrgbCxsbl2hbcJNNxOEwVe3mEzrhan7TbJQViZa8mMqhihlbCaqD+LyYKTQ=="],
+
     "figures": ["figures@6.1.0", "", { "dependencies": { "is-unicode-supported": "^2.0.0" } }, "sha512-d+l3qxjSesT4V7v2fh+QnmFnUWv9lSpjarhShNTgBOfA0ttejbQUAlHLitbjkoRiDulW0OPoQPYIGhIC8ohejg=="],
 
     "file-entry-cache": ["file-entry-cache@6.0.1", "", { "dependencies": { "flat-cache": "^3.0.4" } }, "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg=="],
@@ -1096,6 +1495,8 @@
 
     "filter-obj": ["filter-obj@5.1.0", "", {}, "sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng=="],
 
+    "finalhandler": ["finalhandler@1.1.2", "", { "dependencies": { "debug": "2.6.9", "encodeurl": "~1.0.2", "escape-html": "~1.0.3", "on-finished": "~2.3.0", "parseurl": "~1.3.3", "statuses": "~1.5.0", "unpipe": "~1.0.0" } }, "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA=="],
+
     "find-root": ["find-root@1.1.0", "", {}, "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="],
 
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
@@ -1104,6 +1505,8 @@
 
     "flatted": ["flatted@3.3.3", "", {}, "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg=="],
 
+    "flow-enums-runtime": ["flow-enums-runtime@0.0.6", "", {}, "sha512-3PYnM29RFXwvAN6Pc/scUfkI7RwhQ/xqyLUyPNlXUp9S40zI8nup9tUSrTLSVnWGBN38FNiGWbwZOB6uR4OGdw=="],
+
     "follow-redirects": ["follow-redirects@1.15.11", "", {}, "sha512-deG2P0JfjrTxl50XGCDyfI97ZGVCxIpfKYmfyrQ54n5FO/0gfIES8C/Psl6kWVDolizcaaxZJnTS0QSMxvnsBQ=="],
 
     "for-in": ["for-in@1.0.2", "", {}, "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ=="],
@@ -1114,7 +1517,9 @@
 
     "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="],
 
-    "framer-motion": ["framer-motion@12.12.2", "", { "dependencies": { "motion-dom": "^12.12.1", "motion-utils": "^12.12.1", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-qCszZCiGWkilL40E3VuhIJJC/CS3SIBl2IHyGK8FU30nOUhTmhBNWPrNFyozAWH/bXxwzi19vJHIGVdALF0LCg=="],
+    "framer-motion": ["framer-motion@12.38.0", "", { "dependencies": { "motion-dom": "^12.38.0", "motion-utils": "^12.36.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-rFYkY/pigbcswl1XQSb7q424kSTQ8q6eAC+YUsSKooHQYuLdzdHjrt6uxUC+PRAO++q5IS7+TamgIw1AphxR+g=="],
+
+    "fresh": ["fresh@0.5.2", "", {}, "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q=="],
 
     "fs-extra": ["fs-extra@10.1.0", "", { "dependencies": { "graceful-fs": "^4.2.0", "jsonfile": "^6.0.1", "universalify": "^2.0.0" } }, "sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ=="],
 
@@ -1124,6 +1529,8 @@
 
     "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
 
+    "geist": ["geist@1.7.0", "", { "peerDependencies": { "next": ">=13.2.0" } }, "sha512-ZaoiZwkSf0DwwB1ncdLKp+ggAldqxl5L1+SXaNIBGkPAqcu+xjVJLxlf3/S8vLt9UHx1xu5fz3lbzKCj5iOVdQ=="],
+
     "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
 
     "geobuf": ["geobuf@3.0.2", "", { "dependencies": { "concat-stream": "^2.0.0", "pbf": "^3.2.1", "shapefile": "~0.6.6" }, "bin": { "geobuf2json": "bin/geobuf2json", "json2geobuf": "bin/json2geobuf", "shp2geobuf": "bin/shp2geobuf" } }, "sha512-ASgKwEAQQRnyNFHNvpd5uAwstbVYmiTW0Caw3fBb509tNTqXyAAPMyFs5NNihsLZhLxU1j/kjFhkhLWA9djuVg=="],
@@ -1134,6 +1541,8 @@
 
     "geojson-linestring-dissolve": ["geojson-linestring-dissolve@0.0.1", "", {}, "sha512-Y8I2/Ea28R/Xeki7msBcpMvJL2TaPfaPKP8xqueJfQ9/jEhps+iOJxOR2XCBGgVb12Z6XnDb1CMbaPfLepsLaw=="],
 
+    "get-caller-file": ["get-caller-file@2.0.5", "", {}, "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg=="],
+
     "get-east-asian-width": ["get-east-asian-width@1.4.0", "", {}, "sha512-QZjmEOC+IT1uk6Rx0sX22V6uHWVwbdbxf1faPqJ1QhLdGgsRGCZoyaQBm/piRdJy/D2um6hM1UP7ZEeQ4EkP+Q=="],
 
     "get-intrinsic": ["get-intrinsic@1.3.0", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.2", "es-define-property": "^1.0.1", "es-errors": "^1.3.0", "es-object-atoms": "^1.1.1", "function-bind": "^1.1.2", "get-proto": "^1.0.1", "gopd": "^1.2.0", "has-symbols": "^1.1.0", "hasown": "^2.0.2", "math-intrinsics": "^1.1.0" } }, "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ=="],
@@ -1198,6 +1607,18 @@
 
     "hastscript": ["hastscript@9.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "comma-separated-tokens": "^2.0.0", "hast-util-parse-selector": "^4.0.0", "property-information": "^7.0.0", "space-separated-tokens": "^2.0.0" } }, "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w=="],
 
+    "hermes-compiler": ["hermes-compiler@250829098.0.10", "", {}, "sha512-TcRlZ0/TlyfJqquRFAWoyElVNnkdYRi/sEp4/Qy8/GYxjg8j2cS9D4MjuaQ+qimkmLN7AmO+44IznRf06mAr0w=="],
+
+    "hermes-estree": ["hermes-estree@0.33.3", "", {}, "sha512-6kzYZHCk8Fy1Uc+t3HGYyJn3OL4aeqKLTyina4UFtWl8I0kSL7OmKThaiX+Uh2f8nGw3mo4Ifxg0M5Zk3/Oeqg=="],
+
+    "hermes-parser": ["hermes-parser@0.33.3", "", { "dependencies": { "hermes-estree": "0.33.3" } }, "sha512-Yg3HgaG4CqgyowtYjX/FsnPAuZdHOqSMtnbpylbptsQ9nwwSKsy6uRWcGO5RK0EqiX12q8HvDWKgeAVajRO5DA=="],
+
+    "heroui-native": ["heroui-native@1.0.2", "", { "peerDependencies": { "@gorhom/bottom-sheet": "^5.2.8", "react": ">=19.0.0", "react-native": ">=0.81.0", "react-native-gesture-handler": "^2.28.0", "react-native-reanimated": "^4.1.1", "react-native-safe-area-context": "^5.6.0", "react-native-screens": ">=4", "react-native-svg": "^15.12.1", "react-native-worklets": ">=0.5.1", "tailwind-merge": "^3.4.0", "tailwind-variants": "^3.2.2" }, "optionalPeers": ["@gorhom/bottom-sheet", "react-native-screens"] }, "sha512-tGoI8OvURTN5tCzoBJ9bqlXeYdvz70e2Jcc/anEhRHYqdhHuzYRwsx76e07oT0avrAV6jXDXSBef7mcVEKj0gQ=="],
+
+    "heroui-native-pro": ["heroui-native-pro@1.0.0-beta.1", "", { "dependencies": { "chalk": "5.6.2", "heroui-pro": "^1.0.0-alpha.1" } }, "sha512-99zN0FI29UUwhMdX5TkAwUIKtau1vN8eK1bGwwvBTAd0YaKuVnA24jQZXL6nfZFou9RyQj8iGWxVjPjVxr2gXQ=="],
+
+    "heroui-pro": ["heroui-pro@1.0.0-beta.1", "", { "dependencies": { "@clack/prompts": "1.1.0", "chalk": "5.6.2", "commander": "14.0.3", "eventsource": "4.1.0", "figlet": "1.11.0", "find-up": "7.0.0", "jwt-decode": "4.0.0", "open": "11.0.0", "semver": "7.7.2", "tar": "7.5.13" }, "optionalDependencies": { "@zowe/secrets-for-zowe-sdk": "8.29.4" }, "bin": { "heroui-pro": "pre/cli/index.js" } }, "sha512-jY9fQ6hTm1GAikrfEYyPBtf+Wm8yavcMOW+nO5GmNI27u35MUNwItrgUJhBP1ej0Q3ORSyBEmpBKto6Jef1ToQ=="],
+
     "highlight.js": ["highlight.js@11.11.1", "", {}, "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w=="],
 
     "history": ["history@5.3.0", "", { "dependencies": { "@babel/runtime": "^7.7.6" } }, "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ=="],
@@ -1210,6 +1631,10 @@
 
     "html-void-elements": ["html-void-elements@3.0.0", "", {}, "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg=="],
 
+    "http-errors": ["http-errors@2.0.1", "", { "dependencies": { "depd": "~2.0.0", "inherits": "~2.0.4", "setprototypeof": "~1.2.0", "statuses": "~2.0.2", "toidentifier": "~1.0.1" } }, "sha512-4FbRdAX+bSdmo4AUFuS0WNiPz8NgFt+r8ThgNWmlrjQjt1Q7ZR9+zTlce2859x4KSXrwIsaeTqDoKQmtP8pLmQ=="],
+
+    "https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
+
     "human-signals": ["human-signals@8.0.1", "", {}, "sha512-eKCa6bwnJhvxj14kZk5NCPc6Hb6BdsU9DZcOnmQKSnO1VKrfV0zCvtttPZUsBvjmNDn8rpcJfpwSYnHBjc95MQ=="],
 
     "i18next": ["i18next@23.16.8", "", { "dependencies": { "@babel/runtime": "^7.23.2" } }, "sha512-06r/TitrM88Mg5FdUXAKL96dJMzgqLE5dv3ryBAra4KCwD9mJ4ndOTS95ZuymIGoE+2hzfdaMak2X11/es7ZWg=="],
@@ -1226,6 +1651,8 @@
 
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
+    "image-size": ["image-size@1.2.1", "", { "dependencies": { "queue": "6.0.2" }, "bin": { "image-size": "bin/image-size.js" } }, "sha512-rH+46sQJ2dlwfjfhCyNx5thzrv+dtmBIhPHk0zgRUukHzZ/kRueTJXoYYsclBaKcSMBWuGbOFXtioLpzTb5euw=="],
+
     "immer": ["immer@10.1.1", "", {}, "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw=="],
 
     "immutable": ["immutable@5.1.2", "", {}, "sha512-qHKXW1q6liAk1Oys6umoaZbDRqjcjgSrbnrifHsfsttza7zcvRAsL7mMV6xWcyhwQy7Xj5v4hhbr6b+iDYwlmQ=="],
@@ -1240,24 +1667,30 @@
 
     "inline-style-parser": ["inline-style-parser@0.2.4", "", {}, "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="],
 
+    "input-otp": ["input-otp@1.4.2", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-l3jWwYNvrEa6NTCt7BECfCm48GvwuZzkoeG3gBL2w4CHeOXW3eKFmf9UNYkNfYc3mxMrthMnxjIE07MT0zLBQA=="],
+
     "inquirer": ["inquirer@12.9.6", "", { "dependencies": { "@inquirer/ansi": "^1.0.0", "@inquirer/core": "^10.2.2", "@inquirer/prompts": "^7.8.6", "@inquirer/type": "^3.0.8", "mute-stream": "^2.0.0", "run-async": "^4.0.5", "rxjs": "^7.8.2" }, "peerDependencies": { "@types/node": ">=18" }, "optionalPeers": ["@types/node"] }, "sha512-603xXOgyfxhuis4nfnWaZrMaotNT0Km9XwwBNWUKbIDqeCY89jGr2F9YPEMiNhU6XjIP4VoWISMBFfcc5NgrTw=="],
 
     "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="],
 
     "intersection-observer": ["intersection-observer@0.12.2", "", {}, "sha512-7m1vEcPCxXYI8HqnL8CKI6siDyD+eIWSwgB3DZA+ZTogxk9I4CDnj4wilt9x/+/QbHI4YG5YZNmC6458/e9Ktg=="],
 
+    "intl-messageformat": ["intl-messageformat@10.7.18", "", { "dependencies": { "@formatjs/ecma402-abstract": "2.3.6", "@formatjs/fast-memoize": "2.2.7", "@formatjs/icu-messageformat-parser": "2.11.4", "tslib": "^2.8.0" } }, "sha512-m3Ofv/X/tV8Y3tHXLohcuVuhWKo7BBq62cqY15etqmLxg2DZ34AGGgQDeR+SCta2+zICb1NX83af0GJmbQ1++g=="],
+
+    "invariant": ["invariant@2.2.4", "", { "dependencies": { "loose-envify": "^1.0.0" } }, "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA=="],
+
     "is-alphabetical": ["is-alphabetical@2.0.1", "", {}, "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="],
 
     "is-alphanumerical": ["is-alphanumerical@2.0.1", "", { "dependencies": { "is-alphabetical": "^2.0.0", "is-decimal": "^2.0.0" } }, "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw=="],
 
     "is-arrayish": ["is-arrayish@0.2.1", "", {}, "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg=="],
 
-    "is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
-
     "is-core-module": ["is-core-module@2.16.1", "", { "dependencies": { "hasown": "^2.0.2" } }, "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w=="],
 
     "is-decimal": ["is-decimal@2.0.1", "", {}, "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="],
 
+    "is-docker": ["is-docker@3.0.0", "", { "bin": { "is-docker": "cli.js" } }, "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ=="],
+
     "is-extendable": ["is-extendable@1.0.1", "", { "dependencies": { "is-plain-object": "^2.0.4" } }, "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA=="],
 
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
@@ -1268,6 +1701,10 @@
 
     "is-hexadecimal": ["is-hexadecimal@2.0.1", "", {}, "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="],
 
+    "is-in-ssh": ["is-in-ssh@1.0.0", "", {}, "sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw=="],
+
+    "is-inside-container": ["is-inside-container@1.0.0", "", { "dependencies": { "is-docker": "^3.0.0" }, "bin": { "is-inside-container": "cli.js" } }, "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA=="],
+
     "is-interactive": ["is-interactive@2.0.0", "", {}, "sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ=="],
 
     "is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
@@ -1282,6 +1719,8 @@
 
     "is-unicode-supported": ["is-unicode-supported@2.1.0", "", {}, "sha512-mE00Gnza5EEB3Ds0HfMyllZzbBrmLOX3vfWoj9A9PEnTfratQ/BcaJOuMhnkhjXvb2+FkY3VuHqtAGpTPmglFQ=="],
 
+    "is-wsl": ["is-wsl@3.1.1", "", { "dependencies": { "is-inside-container": "^1.0.0" } }, "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw=="],
+
     "isarray": ["isarray@0.0.1", "", {}, "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="],
 
     "isexe": ["isexe@2.0.0", "", {}, "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="],
@@ -1290,6 +1729,14 @@
 
     "jackspeak": ["jackspeak@4.1.1", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" } }, "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ=="],
 
+    "jest-get-type": ["jest-get-type@29.6.3", "", {}, "sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw=="],
+
+    "jest-util": ["jest-util@29.7.0", "", { "dependencies": { "@jest/types": "^29.6.3", "@types/node": "*", "chalk": "^4.0.0", "ci-info": "^3.2.0", "graceful-fs": "^4.2.9", "picomatch": "^2.2.3" } }, "sha512-z6EbKajIpqGKU56y5KBUgy1dt1ihhQJgWzUlZHArA/+X2ad7Cb5iF+AK1EWVL/Bo7Rz9uurpqw6SiBCefUbCGA=="],
+
+    "jest-validate": ["jest-validate@29.7.0", "", { "dependencies": { "@jest/types": "^29.6.3", "camelcase": "^6.2.0", "chalk": "^4.0.0", "jest-get-type": "^29.6.3", "leven": "^3.1.0", "pretty-format": "^29.7.0" } }, "sha512-ZB7wHqaRGVw/9hST/OuFUReG7M8vKeq0/J2egIGLdvjHCmYqGARhzXmtgi+gVeZ5uXFF219aOc3Ls2yLg27tkw=="],
+
+    "jest-worker": ["jest-worker@29.7.0", "", { "dependencies": { "@types/node": "*", "jest-util": "^29.7.0", "merge-stream": "^2.0.0", "supports-color": "^8.0.0" } }, "sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw=="],
+
     "jiti": ["jiti@2.6.1", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ=="],
 
     "js-cookie": ["js-cookie@3.0.5", "", {}, "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw=="],
@@ -1298,6 +1745,8 @@
 
     "js-yaml": ["js-yaml@4.1.0", "", { "dependencies": { "argparse": "^2.0.1" }, "bin": { "js-yaml": "bin/js-yaml.js" } }, "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA=="],
 
+    "jsc-safe-url": ["jsc-safe-url@0.2.4", "", {}, "sha512-0wM3YBWtYePOjfyXQH5MWQ8H7sdk5EXSwZvmSLKk2RboVQ2Bu239jycHDz5J/8Blf3K0Qnoy2b6xD+z10MFB+Q=="],
+
     "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
 
     "json-buffer": ["json-buffer@3.0.1", "", {}, "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ=="],
@@ -1316,6 +1765,8 @@
 
     "jsonfile": ["jsonfile@6.1.0", "", { "dependencies": { "universalify": "^2.0.0" }, "optionalDependencies": { "graceful-fs": "^4.1.6" } }, "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ=="],
 
+    "jwt-decode": ["jwt-decode@4.0.0", "", {}, "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA=="],
+
     "katex": ["katex@0.16.22", "", { "dependencies": { "commander": "^8.3.0" }, "bin": { "katex": "cli.js" } }, "sha512-XCHRdUw4lf3SKBaJe4EvgqIuWwkPSo9XoeO8GjQW94Bp7TWv9hNhzZjZ+OH9yf1UmLygb7DIT5GSFQiyt16zYg=="],
 
     "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
@@ -1332,9 +1783,35 @@
 
     "leva": ["leva@0.10.0", "", { "dependencies": { "@radix-ui/react-portal": "1.0.2", "@radix-ui/react-tooltip": "1.0.5", "@stitches/react": "^1.2.8", "@use-gesture/react": "^10.2.5", "colord": "^2.9.2", "dequal": "^2.0.2", "merge-value": "^1.0.0", "react-colorful": "^5.5.1", "react-dropzone": "^12.0.0", "v8n": "^1.3.3", "zustand": "^3.6.9" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-RiNJWmeqQdKIeHuVXgshmxIHu144a2AMYtLxKf8Nm1j93pisDPexuQDHKNdQlbo37wdyDQibLjY9JKGIiD7gaw=="],
 
+    "leven": ["leven@3.1.0", "", {}, "sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A=="],
+
     "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
 
-    "lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
+    "lighthouse-logger": ["lighthouse-logger@1.4.2", "", { "dependencies": { "debug": "^2.6.9", "marky": "^1.2.2" } }, "sha512-gPWxznF6TKmUHrOQjlVo2UbaL2EJ71mb2CCeRs/2qBpi4L/g4LUVc9+3lKQ6DTUZwJswfM7ainGrLO1+fOqa2g=="],
+
+    "lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
 
     "lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
 
@@ -1356,26 +1833,32 @@
 
     "lodash.merge": ["lodash.merge@4.6.2", "", {}, "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="],
 
+    "lodash.throttle": ["lodash.throttle@4.1.1", "", {}, "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ=="],
+
     "log-symbols": ["log-symbols@7.0.1", "", { "dependencies": { "is-unicode-supported": "^2.0.0", "yoctocolors": "^2.1.1" } }, "sha512-ja1E3yCr9i/0hmBVaM0bfwDjnGy8I/s6PP4DFp+yP+a+mrHO4Rm7DtmnqROTUkHIkqffC84YY7AeqX6oFk0WFg=="],
 
     "longest-streak": ["longest-streak@3.1.0", "", {}, "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g=="],
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
-    "lottie-web": ["lottie-web@5.12.2", "", {}, "sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg=="],
-
     "lowlight": ["lowlight@3.3.0", "", { "dependencies": { "@types/hast": "^3.0.0", "devlop": "^1.0.0", "highlight.js": "~11.11.0" } }, "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ=="],
 
     "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
 
     "lucide-react": ["lucide-react@0.511.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-VK5a2ydJ7xm8GvBeKLS9mu1pVK6ucef9780JVUjw6bAjJL/QXnd4Y0p7SPeOUMC27YhzNCZvm5d/QX0Tp3rc0w=="],
 
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "makeerror": ["makeerror@1.0.12", "", { "dependencies": { "tmpl": "1.0.5" } }, "sha512-JmqCvUhmt43madlpFzG4BQzG2Z3m6tvQDNKdClZnO3VbIudJYmxsT0FNJMeiB2+JTSlTQTSbU8QdesVmwJcmLg=="],
+
     "markdown-extensions": ["markdown-extensions@2.0.0", "", {}, "sha512-o5vL7aDWatOTX8LzaS1WMoaoxIiLRQJuIKKe2wAw6IeULDHaqbiqiggmx+pKvZDb1Sj+pE46Sn1T7lCqfFtg1Q=="],
 
     "markdown-table": ["markdown-table@3.0.4", "", {}, "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw=="],
 
     "marked": ["marked@4.3.0", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A=="],
 
+    "marky": ["marky@1.3.0", "", {}, "sha512-ocnPZQLNpvbedwTy9kNrQEsknEfgvcLMvOtz3sFeWApDq1MXH1TqkCIx58xlpESsfwQOnuBO9beyQuNGzVvuhQ=="],
+
     "math-intrinsics": ["math-intrinsics@1.1.0", "", {}, "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g=="],
 
     "mdast-util-find-and-replace": ["mdast-util-find-and-replace@3.0.2", "", { "dependencies": { "@types/mdast": "^4.0.0", "escape-string-regexp": "^5.0.0", "unist-util-is": "^6.0.0", "unist-util-visit-parents": "^6.0.0" } }, "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg=="],
@@ -1414,14 +1897,44 @@
 
     "mdast-util-to-string": ["mdast-util-to-string@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0" } }, "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg=="],
 
+    "mdn-data": ["mdn-data@2.0.14", "", {}, "sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow=="],
+
     "memoize-one": ["memoize-one@5.2.1", "", {}, "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="],
 
-    "merge-value": ["merge-value@1.0.0", "", { "dependencies": { "get-value": "^2.0.6", "is-extendable": "^1.0.0", "mixin-deep": "^1.2.0", "set-value": "^2.0.0" } }, "sha512-fJMmvat4NeKz63Uv9iHWcPDjCWcCkoiRoajRTEO8hlhUC6rwaHg0QCF9hBOTjZmm4JuglPckPSTtcuJL5kp0TQ=="],
+    "merge-stream": ["merge-stream@2.0.0", "", {}, "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="],
 
-    "merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
+    "merge-value": ["merge-value@1.0.0", "", { "dependencies": { "get-value": "^2.0.6", "is-extendable": "^1.0.0", "mixin-deep": "^1.2.0", "set-value": "^2.0.0" } }, "sha512-fJMmvat4NeKz63Uv9iHWcPDjCWcCkoiRoajRTEO8hlhUC6rwaHg0QCF9hBOTjZmm4JuglPckPSTtcuJL5kp0TQ=="],
 
     "mermaid": ["mermaid@11.6.0", "", { "dependencies": { "@braintree/sanitize-url": "^7.0.4", "@iconify/utils": "^2.1.33", "@mermaid-js/parser": "^0.4.0", "@types/d3": "^7.4.3", "cytoscape": "^3.29.3", "cytoscape-cose-bilkent": "^4.1.0", "cytoscape-fcose": "^2.2.0", "d3": "^7.9.0", "d3-sankey": "^0.12.3", "dagre-d3-es": "7.0.11", "dayjs": "^1.11.13", "dompurify": "^3.2.4", "katex": "^0.16.9", "khroma": "^2.1.0", "lodash-es": "^4.17.21", "marked": "^15.0.7", "roughjs": "^4.6.6", "stylis": "^4.3.6", "ts-dedent": "^2.2.0", "uuid": "^11.1.0" } }, "sha512-PE8hGUy1LDlWIHWBP05SFdqUHGmRcCcK4IzpOKPE35eOw+G9zZgcnMpyunJVUEOgb//KBORPjysKndw8bFLuRg=="],
 
+    "metro": ["metro@0.84.3", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/core": "^7.25.2", "@babel/generator": "^7.29.1", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/traverse": "^7.29.0", "@babel/types": "^7.29.0", "accepts": "^2.0.0", "chalk": "^4.0.0", "ci-info": "^2.0.0", "connect": "^3.6.5", "debug": "^4.4.0", "error-stack-parser": "^2.0.6", "flow-enums-runtime": "^0.0.6", "graceful-fs": "^4.2.4", "hermes-parser": "0.35.0", "image-size": "^1.0.2", "invariant": "^2.2.4", "jest-worker": "^29.7.0", "jsc-safe-url": "^0.2.2", "lodash.throttle": "^4.1.1", "metro-babel-transformer": "0.84.3", "metro-cache": "0.84.3", "metro-cache-key": "0.84.3", "metro-config": "0.84.3", "metro-core": "0.84.3", "metro-file-map": "0.84.3", "metro-resolver": "0.84.3", "metro-runtime": "0.84.3", "metro-source-map": "0.84.3", "metro-symbolicate": "0.84.3", "metro-transform-plugins": "0.84.3", "metro-transform-worker": "0.84.3", "mime-types": "^3.0.1", "nullthrows": "^1.1.1", "serialize-error": "^2.1.0", "source-map": "^0.5.6", "throat": "^5.0.0", "ws": "^7.5.10", "yargs": "^17.6.2" }, "bin": { "metro": "src/cli.js" } }, "sha512-1h3lbVrE6hGf1e/764HfhPGg/bGrWMJDDh7G2rc4gFYZboVuI40BlG/y+UhtbhQDNlO/csMvrcnK0YrTlHUVew=="],
+
+    "metro-babel-transformer": ["metro-babel-transformer@0.84.3", "", { "dependencies": { "@babel/core": "^7.25.2", "flow-enums-runtime": "^0.0.6", "hermes-parser": "0.35.0", "metro-cache-key": "0.84.3", "nullthrows": "^1.1.1" } }, "sha512-svAA+yMLpeMiGcz/jKJs4oHpIGEx4nBqNEJ5AGj4CYIg1efvK+A0TjR6tgIuc6tKO5e8JmN/1lglpN2+f3/z/w=="],
+
+    "metro-cache": ["metro-cache@0.84.3", "", { "dependencies": { "exponential-backoff": "^3.1.1", "flow-enums-runtime": "^0.0.6", "https-proxy-agent": "^7.0.5", "metro-core": "0.84.3" } }, "sha512-0QElxwLaHqLZf+Xqio8QrjVbuXP/8sJfQBGSPiITlKDVXrVLefuzYVSH9Sj+QL6lrPj2gYZd/iwQh1yZuVKnLA=="],
+
+    "metro-cache-key": ["metro-cache-key@0.84.3", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-TnSL1Fdvrw+2glTdBSRmA5TL8l/i16ECjsrUdf3E5HncA+sNx8KcwDG8r+3ct1UhfYcusJypzZqTN55FZZcwGg=="],
+
+    "metro-config": ["metro-config@0.84.3", "", { "dependencies": { "connect": "^3.6.5", "flow-enums-runtime": "^0.0.6", "jest-validate": "^29.7.0", "metro": "0.84.3", "metro-cache": "0.84.3", "metro-core": "0.84.3", "metro-runtime": "0.84.3", "yaml": "^2.6.1" } }, "sha512-JmCzZWOETR+O22q8oPBWyQppx3roU9EbkbGzD8Gf1jukQ4b5T1fTzqqHruu6K4sTiNq5zVQySmKF6bp4kVARew=="],
+
+    "metro-core": ["metro-core@0.84.3", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "lodash.throttle": "^4.1.1", "metro-resolver": "0.84.3" } }, "sha512-cc0pvAa80ai1nDmqqz0P59a+0ZqCZ/YHU/3jEekZL6spFnYDfX8iDLdn9FR6kX+67rmzKxHNrbrSRFLX2AYocw=="],
+
+    "metro-file-map": ["metro-file-map@0.84.3", "", { "dependencies": { "debug": "^4.4.0", "fb-watchman": "^2.0.0", "flow-enums-runtime": "^0.0.6", "graceful-fs": "^4.2.4", "invariant": "^2.2.4", "jest-worker": "^29.7.0", "micromatch": "^4.0.4", "nullthrows": "^1.1.1", "walker": "^1.0.7" } }, "sha512-1cL4m4Jv1yRUt9RJExZQLfccscdlMNOcRG6LHLtmJhf3BG9j3MujPVc7CIpKYdFl+KUl+sdjge6oO3+meKCHQA=="],
+
+    "metro-minify-terser": ["metro-minify-terser@0.84.3", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "terser": "^5.15.0" } }, "sha512-3ofrG2OQyJbO9RNhCfOcl8QU7EE2WrSsnN5dFkuZaJO5+4Imujr9bUXmspeNlXRsOVk0F/rVRbEFH98lFSCkBQ=="],
+
+    "metro-resolver": ["metro-resolver@0.84.3", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-pjEzGDtoM8DTHAIPK/9u9ZxszEiuRohYUVImWvgbnB91V4gqYJpQcoEYUugf2NIm1lrX5HNu0OvNqWmPBnGYjA=="],
+
+    "metro-runtime": ["metro-runtime@0.84.3", "", { "dependencies": { "@babel/runtime": "^7.25.0", "flow-enums-runtime": "^0.0.6" } }, "sha512-o7HLRfMyVk9N2dUZ9VjQfB6xxUItL9Pi9WcqxURE7MEKOH6wbGt9/E92YdYLluTOtkzYAEVfdC6h6lcxqA+hMQ=="],
+
+    "metro-source-map": ["metro-source-map@0.84.3", "", { "dependencies": { "@babel/traverse": "^7.29.0", "@babel/types": "^7.29.0", "flow-enums-runtime": "^0.0.6", "invariant": "^2.2.4", "metro-symbolicate": "0.84.3", "nullthrows": "^1.1.1", "ob1": "0.84.3", "source-map": "^0.5.6", "vlq": "^1.0.0" } }, "sha512-jS48CeSzw78M8y6VE0f9uy3lVmfbOS677j2VCxnlmlYmnahcXuC6IhoN9K6LynNvos9517yUadcfgioju38xYQ=="],
+
+    "metro-symbolicate": ["metro-symbolicate@0.84.3", "", { "dependencies": { "flow-enums-runtime": "^0.0.6", "invariant": "^2.2.4", "metro-source-map": "0.84.3", "nullthrows": "^1.1.1", "source-map": "^0.5.6", "vlq": "^1.0.0" }, "bin": { "metro-symbolicate": "src/index.js" } }, "sha512-J9Tpo8NCycYrozRvBIUyOwGAu4xkawOsAppmTscFiaegK0WvuDGwIM53GbzVSnytCHjVAF0io5GQxpkrKTuc7g=="],
+
+    "metro-transform-plugins": ["metro-transform-plugins@0.84.3", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/generator": "^7.29.1", "@babel/template": "^7.28.6", "@babel/traverse": "^7.29.0", "flow-enums-runtime": "^0.0.6", "nullthrows": "^1.1.1" } }, "sha512-8S3baq2XhBaafHEH5Q8sJW6tmzsEJk80qKc3RU/nZV1MsnYq94RdjTUR6AyKjQd6Rfsk1BtBxhtiNnk7mgslCg=="],
+
+    "metro-transform-worker": ["metro-transform-worker@0.84.3", "", { "dependencies": { "@babel/core": "^7.25.2", "@babel/generator": "^7.29.1", "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "flow-enums-runtime": "^0.0.6", "metro": "0.84.3", "metro-babel-transformer": "0.84.3", "metro-cache": "0.84.3", "metro-cache-key": "0.84.3", "metro-minify-terser": "0.84.3", "metro-source-map": "0.84.3", "metro-transform-plugins": "0.84.3", "nullthrows": "^1.1.1" } }, "sha512-Wjba7PyYktNRsHbPmkx2J2UX32rAzcDXjCu49zPHeF/viJlYJhwRaNePQcHaCRqQ+kmgQT4ThprsnJfDj71ZMA=="],
+
     "micromark": ["micromark@4.0.1", "", { "dependencies": { "@types/debug": "^4.0.0", "debug": "^4.0.0", "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-core-commonmark": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-combine-extensions": "^2.0.0", "micromark-util-decode-numeric-character-reference": "^2.0.0", "micromark-util-encode": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-sanitize-uri": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-eBPdkcoCNvYcxQOAKAlceo5SNdzZWfF+FcSupREAzdAh9rRmE239CEQAiTwIgblwnoM8zzj35sZ5ZwvSEOF6Kw=="],
 
     "micromark-core-commonmark": ["micromark-core-commonmark@2.0.2", "", { "dependencies": { "decode-named-character-reference": "^1.0.0", "devlop": "^1.0.0", "micromark-factory-destination": "^2.0.0", "micromark-factory-label": "^2.0.0", "micromark-factory-space": "^2.0.0", "micromark-factory-title": "^2.0.0", "micromark-factory-whitespace": "^2.0.0", "micromark-util-character": "^2.0.0", "micromark-util-chunked": "^2.0.0", "micromark-util-classify-character": "^2.0.0", "micromark-util-html-tag-name": "^2.0.0", "micromark-util-normalize-identifier": "^2.0.0", "micromark-util-resolve-all": "^2.0.0", "micromark-util-subtokenize": "^2.0.0", "micromark-util-symbol": "^2.0.0", "micromark-util-types": "^2.0.0" } }, "sha512-FKjQKbxd1cibWMM1P9N+H8TwlgGgSkWZMmfuVucLCHaYqeSvJ0hFeHsIa65pA2nYbes0f8LDHPMrd9X7Ujxg9w=="],
@@ -1496,6 +2009,8 @@
 
     "micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
 
+    "mime": ["mime@1.6.0", "", { "bin": { "mime": "cli.js" } }, "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="],
+
     "mime-db": ["mime-db@1.52.0", "", {}, "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg=="],
 
     "mime-types": ["mime-types@2.1.35", "", { "dependencies": { "mime-db": "1.52.0" } }, "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw=="],
@@ -1508,42 +2023,58 @@
 
     "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="],
 
+    "minizlib": ["minizlib@3.1.0", "", { "dependencies": { "minipass": "^7.1.2" } }, "sha512-KZxYo1BUkWD2TVFLr0MQoM8vUUigWD3LlD83a/75BqC+4qE0Hb1Vo5v1FgcfaNXvfXzr+5EhQ6ing/CaBijTlw=="],
+
     "mixin-deep": ["mixin-deep@1.3.2", "", { "dependencies": { "for-in": "^1.0.2", "is-extendable": "^1.0.1" } }, "sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA=="],
 
+    "mkdirp": ["mkdirp@1.0.4", "", { "bin": { "mkdirp": "bin/cmd.js" } }, "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="],
+
     "mlly": ["mlly@1.7.4", "", { "dependencies": { "acorn": "^8.14.0", "pathe": "^2.0.1", "pkg-types": "^1.3.0", "ufo": "^1.5.4" } }, "sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw=="],
 
-    "motion-dom": ["motion-dom@12.12.1", "", { "dependencies": { "motion-utils": "^12.12.1" } }, "sha512-GXq/uUbZBEiFFE+K1Z/sxdPdadMdfJ/jmBALDfIuHGi0NmtealLOfH9FqT+6aNPgVx8ilq0DtYmyQlo6Uj9LKQ=="],
+    "motion": ["motion@12.38.0", "", { "dependencies": { "framer-motion": "^12.38.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-uYfXzeHlgThchzwz5Te47dlv5JOUC7OB4rjJ/7XTUgtBZD8CchMN8qEJ4ZVsUmTyYA44zjV0fBwsiktRuFnn+w=="],
 
-    "motion-utils": ["motion-utils@12.12.1", "", {}, "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w=="],
+    "motion-dom": ["motion-dom@12.38.0", "", { "dependencies": { "motion-utils": "^12.36.0" } }, "sha512-pdkHLD8QYRp8VfiNLb8xIBJis1byQ9gPT3Jnh2jqfFtAsWUA3dEepDlsWe/xMpO8McV+VdpKVcp+E+TGJEtOoA=="],
+
+    "motion-utils": ["motion-utils@12.36.0", "", {}, "sha512-eHWisygbiwVvf6PZ1vhaHCLamvkSbPIeAYxWUuL3a2PD/TROgE7FvfHWTIH4vMl798QLfMw15nRqIaRDXTlYRg=="],
 
     "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
 
     "mute-stream": ["mute-stream@2.0.0", "", {}, "sha512-WWdIxpyjEn+FhQJQQv9aQAYlHoNVdzIzUySNV1gHUPDSdZJ3yZn7pAAbQcV7B56Mvu881q9FZV+0Vx2xC44VWA=="],
 
-    "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
-
     "nanoid": ["nanoid@3.3.8", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w=="],
 
     "natural-compare": ["natural-compare@1.4.0", "", {}, "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="],
 
+    "negotiator": ["negotiator@1.0.0", "", {}, "sha512-8Ofs/AUQh8MaEcrlq5xOX0CQ9ypTF5dl78mjlMNfOK08fzpgTHQRQPBxcPlEtIw0yRpws+Zo/3r+5WRby7u3Gg=="],
+
+    "next": ["next@16.2.4", "", { "dependencies": { "@next/env": "16.2.4", "@swc/helpers": "0.5.15", "baseline-browser-mapping": "^2.9.19", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "16.2.4", "@next/swc-darwin-x64": "16.2.4", "@next/swc-linux-arm64-gnu": "16.2.4", "@next/swc-linux-arm64-musl": "16.2.4", "@next/swc-linux-x64-gnu": "16.2.4", "@next/swc-linux-x64-musl": "16.2.4", "@next/swc-win32-arm64-msvc": "16.2.4", "@next/swc-win32-x64-msvc": "16.2.4", "sharp": "^0.34.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-kPvz56wF5frc+FxlHI5qnklCzbq53HTwORaWBGdT0vNoKh1Aya9XC8aPauH4NJxqtzbWsS5mAbctm4cr+EkQ2Q=="],
+
     "node-addon-api": ["node-addon-api@7.1.1", "", {}, "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="],
 
-    "node-releases": ["node-releases@2.0.19", "", {}, "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="],
+    "node-int64": ["node-int64@0.4.0", "", {}, "sha512-O5lz91xSOeoXP6DulyHfllpq+Eg00MWitZIbtPfoSEvqIHdl5gfcY6hYzDWnj0qD5tz52PI08u9qUvSVeUBeHw=="],
 
-    "normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
+    "node-releases": ["node-releases@2.0.19", "", {}, "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw=="],
 
     "normalize-range": ["normalize-range@0.1.2", "", {}, "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA=="],
 
     "npm-run-path": ["npm-run-path@6.0.0", "", { "dependencies": { "path-key": "^4.0.0", "unicorn-magic": "^0.3.0" } }, "sha512-9qny7Z9DsQU8Ou39ERsPU4OZQlSTP47ShQzuKZ6PRXpYLtIFgl/DEBYEXKlvcEa+9tHVcK8CF81Y2V72qaZhWA=="],
 
+    "nth-check": ["nth-check@2.1.1", "", { "dependencies": { "boolbase": "^1.0.0" } }, "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w=="],
+
+    "nullthrows": ["nullthrows@1.1.1", "", {}, "sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw=="],
+
+    "number-flow": ["number-flow@0.6.0", "", { "dependencies": { "esm-env": "^1.1.4" } }, "sha512-K8flNq2Wqus53vjp/btVo3qXFkagF8dIdYavreBfE7hlvFFG/b1HMGEH6nZL+mlrJ+4lbLP9OmPv3t2rmRkpSQ=="],
+
     "numeral": ["numeral@2.0.6", "", {}, "sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA=="],
 
-    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
+    "ob1": ["ob1@0.84.3", "", { "dependencies": { "flow-enums-runtime": "^0.0.6" } }, "sha512-J7554Ef8bzmKaDY365Afq6PF+qtdnY/d5PKUQFrsKlZHV/N3OGZewVrvDrQDyX5V5NJjTpcAKtlrFZcDr+HvpQ=="],
 
-    "object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
+    "object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
 
     "on-change": ["on-change@4.0.2", "", {}, "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA=="],
 
+    "on-finished": ["on-finished@2.3.0", "", { "dependencies": { "ee-first": "1.1.1" } }, "sha512-ikqdkGAAyf/X/gPhXGvfgAytDZtDbr+bkNUJ0N9h5MI/dmdgCs3l6hoHrcUv41sRKew3jIwrp4qQDXiK99Utww=="],
+
     "once": ["once@1.4.0", "", { "dependencies": { "wrappy": "1" } }, "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w=="],
 
     "onetime": ["onetime@7.0.0", "", { "dependencies": { "mimic-function": "^5.0.0" } }, "sha512-VXJjc87FScF88uafS3JllDgvAm+c/Slfz06lorj2uAY34rlUu0Nt+v8wreiImcrgAjjIHp1rXpTDlLOGw29WwQ=="],
@@ -1552,6 +2083,8 @@
 
     "oniguruma-to-es": ["oniguruma-to-es@4.3.3", "", { "dependencies": { "oniguruma-parser": "^0.12.1", "regex": "^6.0.1", "regex-recursion": "^6.0.2" } }, "sha512-rPiZhzC3wXwE59YQMRDodUwwT9FZ9nNBwQQfsd1wfdtlKEyCdRV0avrTcSZ5xlIvGRVPd/cx6ZN45ECmS39xvg=="],
 
+    "open": ["open@11.0.0", "", { "dependencies": { "default-browser": "^5.4.0", "define-lazy-prop": "^3.0.0", "is-in-ssh": "^1.0.0", "is-inside-container": "^1.0.0", "powershell-utils": "^0.1.0", "wsl-utils": "^0.3.0" } }, "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw=="],
+
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
     "ora": ["ora@9.0.0", "", { "dependencies": { "chalk": "^5.6.2", "cli-cursor": "^5.0.0", "cli-spinners": "^3.2.0", "is-interactive": "^2.0.0", "is-unicode-supported": "^2.1.0", "log-symbols": "^7.0.1", "stdin-discarder": "^0.2.2", "string-width": "^8.1.0", "strip-ansi": "^7.1.2" } }, "sha512-m0pg2zscbYgWbqRR6ABga5c3sZdEon7bSgjnlXC64kxtxLOyjRcbbUkLj7HFyy/FTD+P2xdBWu8snGhYI0jc4A=="],
@@ -1578,6 +2111,8 @@
 
     "parse5": ["parse5@7.3.0", "", { "dependencies": { "entities": "^6.0.0" } }, "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw=="],
 
+    "parseurl": ["parseurl@1.3.3", "", {}, "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ=="],
+
     "path-browserify": ["path-browserify@1.0.1", "", {}, "sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g=="],
 
     "path-data-parser": ["path-data-parser@0.1.0", "", {}, "sha512-NOnmBpt5Y2RWbuv0LMzsayp3lVylAHLPUTut412ZA3l+C4uw4ZVkQbjShYCQ8TCpUMdPapr4YjUqLYD6v68j+w=="],
@@ -1602,11 +2137,7 @@
 
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
-    "picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
-
-    "pify": ["pify@2.3.0", "", {}, "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="],
-
-    "pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
+    "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
 
     "pkg-types": ["pkg-types@2.1.0", "", { "dependencies": { "confbox": "^0.2.1", "exsolve": "^1.0.1", "pathe": "^2.0.3" } }, "sha512-wmJwA+8ihJixSoHKxZJRBQG1oY8Yr9pGLzRmSsNms0iNWyHHAlZCa7mmKiFR10YPZuz/2k169JiS/inOjBCZ2A=="],
 
@@ -1622,18 +2153,10 @@
 
     "postcss": ["postcss@8.5.3", "", { "dependencies": { "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A=="],
 
-    "postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
-
-    "postcss-js": ["postcss-js@4.0.1", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw=="],
-
-    "postcss-load-config": ["postcss-load-config@4.0.2", "", { "dependencies": { "lilconfig": "^3.0.0", "yaml": "^2.3.4" }, "peerDependencies": { "postcss": ">=8.0.9", "ts-node": ">=9.0.0" }, "optionalPeers": ["postcss", "ts-node"] }, "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ=="],
-
-    "postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
-
-    "postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
-
     "postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
+    "powershell-utils": ["powershell-utils@0.1.0", "", {}, "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A=="],
+
     "prelude-ls": ["prelude-ls@1.2.1", "", {}, "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="],
 
     "prettier": ["prettier@3.4.2", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ=="],
@@ -1646,9 +2169,11 @@
 
     "prettier-plugin-pkgsort": ["prettier-plugin-pkgsort@0.2.1", "", { "dependencies": { "prettier-package-json": "^2.8.0" }, "peerDependencies": { "prettier": "^3.0.0" } }, "sha512-/k5MIw84EhgoH7dmq4+6ozHjJ0VYbxbw17g4C+WPGHODkLivGwJoA6U1YPR/KObyRDMQJHXAfXKu++9smg7Jyw=="],
 
+    "pretty-format": ["pretty-format@29.7.0", "", { "dependencies": { "@jest/schemas": "^29.6.3", "ansi-styles": "^5.0.0", "react-is": "^18.0.0" } }, "sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ=="],
+
     "pretty-ms": ["pretty-ms@9.3.0", "", { "dependencies": { "parse-ms": "^4.0.0" } }, "sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ=="],
 
-    "prismjs": ["prismjs@1.29.0", "", {}, "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q=="],
+    "promise": ["promise@8.3.0", "", { "dependencies": { "asap": "~2.0.6" } }, "sha512-rZPNPKTOYVNEEKFaq1HqTgOwZD+4/YHS5ukLzQCypkj+OkYx7iv0mA91lJlpPPZ8vMau3IIGj5Qlwrx+8iiSmg=="],
 
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
 
@@ -1666,8 +2191,12 @@
 
     "query-string": ["query-string@9.2.0", "", { "dependencies": { "decode-uri-component": "^0.4.1", "filter-obj": "^5.1.0", "split-on-first": "^3.0.0" } }, "sha512-YIRhrHujoQxhexwRLxfy3VSjOXmvZRd2nyw1PwL1UUqZ/ys1dEZd1+NSgXkne2l/4X/7OXkigEAuhTX0g/ivJQ=="],
 
+    "queue": ["queue@6.0.2", "", { "dependencies": { "inherits": "~2.0.3" } }, "sha512-iHZWu+q3IdFZFX36ro/lKBkSvfkztY5Y7HMiPlOUjhupPcG2JMfst2KKEpu5XndviX/3UhFbRngUPNKtgvtZiA=="],
+
     "queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
 
+    "range-parser": ["range-parser@1.2.1", "", {}, "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg=="],
+
     "rc-cascader": ["rc-cascader@3.34.0", "", { "dependencies": { "@babel/runtime": "^7.25.7", "classnames": "^2.3.1", "rc-select": "~14.16.2", "rc-tree": "~5.13.0", "rc-util": "^5.43.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-KpXypcvju9ptjW9FaN2NFcA2QH9E9LHKq169Y0eWtH4e/wHQ5Wh5qZakAgvb8EKZ736WZ3B0zLLOBsrsja5Dag=="],
 
     "rc-checkbox": ["rc-checkbox@3.5.0", "", { "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "^2.3.2", "rc-util": "^5.25.2" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-aOAQc3E98HteIIsSqm6Xk2FPKIER6+5vyEFMZfo73TqM+VVAIqOkHoPjgKLqSNtVLWScoaM7vY2ZrGEheI79yg=="],
@@ -1740,13 +2269,19 @@
 
     "re-resizable": ["re-resizable@6.11.2", "", { "peerDependencies": { "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A=="],
 
-    "react": ["react@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
+    "react": ["react@19.2.5", "", {}, "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA=="],
+
+    "react-aria": ["react-aria@3.48.0", "", { "dependencies": { "@internationalized/date": "^3.12.1", "@internationalized/number": "^3.6.6", "@internationalized/string": "^3.2.8", "@react-types/shared": "^3.34.0", "@swc/helpers": "^0.5.0", "aria-hidden": "^1.2.3", "clsx": "^2.0.0", "react-stately": "3.46.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-jQjd4rBEIMqecBaAKYJbVGK6EqIHLa5znVQ7jwFyK5vCyljoj6KhgtiahmcIPsG5vG5vEDLw+ba+bEWn6A2P4w=="],
+
+    "react-aria-components": ["react-aria-components@1.17.0", "", { "dependencies": { "@internationalized/date": "^3.12.1", "@react-types/shared": "^3.34.0", "@swc/helpers": "^0.5.0", "client-only": "^0.0.1", "react-aria": "3.48.0", "react-stately": "3.46.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1", "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-0EyisMgvsFJ2aML3crDYv2tW5vT2Ryf8PGzY/g63JjDdCbLshlwazhS8JNtPF1vkTkungJJ6sVJbKyX+YKSoFA=="],
 
     "react-avatar-editor": ["react-avatar-editor@13.0.2", "", { "dependencies": { "@babel/plugin-transform-runtime": "^7.12.1", "@babel/runtime": "^7.12.5", "prop-types": "^15.7.2" }, "peerDependencies": { "react": "^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom": "^0.14.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, "sha512-a4ajbi7lwDh98kgEtSEeKMu0vs0CHTczkq4Xcxr1EiwMFH1GlgHCEtwGU8q/H5W8SeLnH4KPK8LUjEEaZXklxQ=="],
 
     "react-colorful": ["react-colorful@5.6.1", "", { "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw=="],
 
-    "react-dom": ["react-dom@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw=="],
+    "react-devtools-core": ["react-devtools-core@6.1.5", "", { "dependencies": { "shell-quote": "^1.6.1", "ws": "^7" } }, "sha512-ePrwPfxAnB+7hgnEr8vpKxL9cmnp7F322t8oqcPshbIQQhDKgFDW4tjhF2wjVbdXF9O/nyuy3sQWd9JGpiLPvA=="],
+
+    "react-dom": ["react-dom@19.2.5", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.5" } }, "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag=="],
 
     "react-draggable": ["react-draggable@4.4.6", "", { "dependencies": { "clsx": "^1.1.1", "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">= 16.3.0", "react-dom": ">= 16.3.0" } }, "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw=="],
 
@@ -1772,9 +2307,25 @@
 
     "react-merge-refs": ["react-merge-refs@3.0.2", "", { "peerDependencies": { "react": ">=16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["react"] }, "sha512-MSZAfwFfdbEvwkKWP5EI5chuLYnNUxNS7vyS0i1Jp+wtd8J4Ga2ddzhaE68aMol2Z4vCnRM/oGOo1a3V75UPlw=="],
 
+    "react-native": ["react-native@0.85.2", "", { "dependencies": { "@react-native/assets-registry": "0.85.2", "@react-native/codegen": "0.85.2", "@react-native/community-cli-plugin": "0.85.2", "@react-native/gradle-plugin": "0.85.2", "@react-native/js-polyfills": "0.85.2", "@react-native/normalize-colors": "0.85.2", "@react-native/virtualized-lists": "0.85.2", "abort-controller": "^3.0.0", "anser": "^1.4.9", "ansi-regex": "^5.0.0", "babel-plugin-syntax-hermes-parser": "0.33.3", "base64-js": "^1.5.1", "commander": "^12.0.0", "flow-enums-runtime": "^0.0.6", "hermes-compiler": "250829098.0.10", "invariant": "^2.2.4", "memoize-one": "^5.0.0", "metro-runtime": "^0.84.0", "metro-source-map": "^0.84.0", "nullthrows": "^1.1.1", "pretty-format": "^29.7.0", "promise": "^8.3.0", "react-devtools-core": "^6.1.5", "react-refresh": "^0.14.0", "regenerator-runtime": "^0.13.2", "scheduler": "0.27.0", "semver": "^7.1.3", "stacktrace-parser": "^0.1.10", "tinyglobby": "^0.2.15", "whatwg-fetch": "^3.0.0", "ws": "^7.5.10", "yargs": "^17.6.2" }, "peerDependencies": { "@react-native/jest-preset": "0.85.2", "@types/react": "^19.1.1", "react": "^19.2.3" }, "optionalPeers": ["@react-native/jest-preset", "@types/react"], "bin": { "react-native": "cli.js" } }, "sha512-GFWEPwLYirfj5X8gMtXOWtqX0cqUEURRHETZfFk37VCa4++izrKvGvv24anvuyulXV87NAhVkfNw93rLg3HByw=="],
+
+    "react-native-gesture-handler": ["react-native-gesture-handler@2.31.1", "", { "dependencies": { "@egjs/hammerjs": "^2.0.17", "@types/react-test-renderer": "^19.1.0", "hoist-non-react-statics": "^3.3.0", "invariant": "^2.2.4" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-wQDlECdEzHhYKTnQXFnSqWUtJ5TS3MGQi7EWvQczTnEVKfk6XVSBecnpWAoI/CqlYQ7IWMJEyutY6BxwEBoxeg=="],
+
+    "react-native-is-edge-to-edge": ["react-native-is-edge-to-edge@1.3.1", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-NIXU/iT5+ORyCc7p0z2nnlkouYKX425vuU1OEm6bMMtWWR9yvb+Xg5AZmImTKoF9abxCPqrKC3rOZsKzUYgYZA=="],
+
+    "react-native-reanimated": ["react-native-reanimated@4.3.0", "", { "dependencies": { "react-native-is-edge-to-edge": "^1.3.1", "semver": "^7.7.3" }, "peerDependencies": { "react": "*", "react-native": "0.81 - 0.85", "react-native-worklets": "0.8.x" } }, "sha512-HOTTPdKtddXTOsmQxDASXEwLS3lqEHrKERD3XOgzSqWJ7L3x81Pnx7mTcKx1FKdkgomMug/XSmm1C6Z7GIowxA=="],
+
+    "react-native-safe-area-context": ["react-native-safe-area-context@5.7.0", "", { "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-/9/MtQz8ODphjsLdZ+GZAIcC/RtoqW9EeShf7Uvnfgm/pzYrJ75y3PV/J1wuAV1T5Dye5ygq4EAW20RoBq0ABQ=="],
+
+    "react-native-svg": ["react-native-svg@15.15.4", "", { "dependencies": { "css-select": "^5.1.0", "css-tree": "^1.1.3", "warn-once": "0.1.1" }, "peerDependencies": { "react": "*", "react-native": "*" } }, "sha512-boT/vIRgj6zZKBpfTPJJiYWMbZE9duBMOwPK6kCSTgxsS947IFMOq9OgIFkpWZTB7t229H24pDRkh3W9ZK/J1A=="],
+
+    "react-native-worklets": ["react-native-worklets@0.8.1", "", { "dependencies": { "@babel/plugin-transform-arrow-functions": "^7.27.1", "@babel/plugin-transform-class-properties": "^7.27.1", "@babel/plugin-transform-classes": "^7.28.4", "@babel/plugin-transform-nullish-coalescing-operator": "^7.27.1", "@babel/plugin-transform-optional-chaining": "^7.27.1", "@babel/plugin-transform-shorthand-properties": "^7.27.1", "@babel/plugin-transform-template-literals": "^7.27.1", "@babel/plugin-transform-unicode-regex": "^7.27.1", "@babel/preset-typescript": "^7.27.1", "convert-source-map": "^2.0.0", "semver": "^7.7.3" }, "peerDependencies": { "@babel/core": "*", "@react-native/metro-config": "*", "react": "*", "react-native": "0.81 - 0.85" } }, "sha512-oWP/lStsAHU6oYCaWDXrda/wOHVdhusQJz1e6x9gPnXdFf4ndNDAOtWCmk2zGrAnlapfyA3rM6PCQq94mPg9cw=="],
+
+    "react-redux": ["react-redux@9.2.0", "", { "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" }, "peerDependencies": { "@types/react": "^18.2.25 || ^19", "react": "^18.0 || ^19", "redux": "^5.0.0" }, "optionalPeers": ["@types/react", "redux"] }, "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g=="],
+
     "react-refresh": ["react-refresh@0.14.2", "", {}, "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA=="],
 
-    "react-resizable": ["react-resizable@3.0.5", "", { "dependencies": { "prop-types": "15.x", "react-draggable": "^4.0.3" }, "peerDependencies": { "react": ">= 16.3" } }, "sha512-vKpeHhI5OZvYn82kXOs1bC8aOXktGU5AmKAgaZS4F5JPburCtbmDPqE7Pzp+1kN4+Wb81LlF33VpGwWwtXem+w=="],
+    "react-resizable-panels": ["react-resizable-panels@4.10.0", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" } }, "sha512-frjewRQt7TCv/vCH1pJfjZ7RxAhr5pKuqVQtVgzFq/vherxBFOWyC3xMbryx5Ti2wylViGUFc93Etg4rB3E0UA=="],
 
     "react-rnd": ["react-rnd@10.5.2", "", { "dependencies": { "re-resizable": "6.11.2", "react-draggable": "4.4.6", "tslib": "2.6.2" }, "peerDependencies": { "react": ">=16.3.0", "react-dom": ">=16.3.0" } }, "sha512-0Tm4x7k7pfHf2snewJA8x7Nwgt3LV+58MVEWOVsFjk51eYruFEa6Wy7BNdxt4/lH0wIRsu7Gm3KjSXY2w7YaNw=="],
 
@@ -1782,22 +2333,22 @@
 
     "react-router-dom": ["react-router-dom@6.28.1", "", { "dependencies": { "@remix-run/router": "1.21.0", "react-router": "6.28.1" }, "peerDependencies": { "react": ">=16.8", "react-dom": ">=16.8" } }, "sha512-YraE27C/RdjcZwl5UCqF/ffXnZDxpJdk9Q6jw38SZHjXs7NNdpViq2l2c7fO7+4uWaEfcwfGCv3RSg4e1By/fQ=="],
 
+    "react-stately": ["react-stately@3.46.0", "", { "dependencies": { "@internationalized/date": "^3.12.1", "@internationalized/number": "^3.6.6", "@internationalized/string": "^3.2.8", "@react-types/shared": "^3.34.0", "@swc/helpers": "^0.5.0", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1" } }, "sha512-OdxhWvHgs2L4OJGIs7hnuTr5WjjMM6enhNEAMRqiekhF8+ITvA2LRwNftOZwcogaoCslGYq5S2VQTQwnm0GbCA=="],
+
     "react-telegram-login": ["react-telegram-login@1.1.2", "", { "dependencies": { "react": "^16.13.1" } }, "sha512-pDP+bvfaklWgnK5O6yvZnIwgky0nnYUU6Zhk0EjdMSkPsLQoOzZRsXIoZnbxyBXhi7346bsxMH+EwwJPTxClDw=="],
 
-    "react-toastify": ["react-toastify@9.1.3", "", { "dependencies": { "clsx": "^1.1.1" }, "peerDependencies": { "react": ">=16", "react-dom": ">=16" } }, "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg=="],
+    "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
 
     "react-turnstile": ["react-turnstile@1.1.4", "", { "peerDependencies": { "react": ">= 16.13.1", "react-dom": ">= 16.13.1" } }, "sha512-oluyRWADdsufCt5eMqacW4gfw8/csr6Tk+fmuaMx0PWMKP1SX1iCviLvD2D5w92eAzIYDHi/krUWGHhlfzxTpQ=="],
 
-    "react-window": ["react-window@1.8.11", "", { "dependencies": { "@babel/runtime": "^7.0.0", "memoize-one": ">=3.1.1 <6" }, "peerDependencies": { "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-+SRbUVT2scadgFSWx+R1P754xHPEqvcfSfVX10QYg6POOz+WNgkN48pS+BtZNIMGiL1HYrSEiCkwsMS15QogEQ=="],
-
     "react-zoom-pan-pinch": ["react-zoom-pan-pinch@3.7.0", "", { "peerDependencies": { "react": "*", "react-dom": "*" } }, "sha512-UmReVZ0TxlKzxSbYiAj+LeGRW8s8LraAFTXRAxzMYnNRgGPsxCudwZKVkjvGmjtx7SW/hZamt69NUmGf4xrkXA=="],
 
-    "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
-
     "readable-stream": ["readable-stream@3.6.2", "", { "dependencies": { "inherits": "^2.0.3", "string_decoder": "^1.1.1", "util-deprecate": "^1.0.1" } }, "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA=="],
 
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
 
+    "recharts": ["recharts@3.8.1", "", { "dependencies": { "@reduxjs/toolkit": "^1.9.0 || 2.x.x", "clsx": "^2.1.1", "decimal.js-light": "^2.5.1", "es-toolkit": "^1.39.3", "eventemitter3": "^5.0.1", "immer": "^10.1.1", "react-redux": "8.x.x || 9.x.x", "reselect": "5.1.1", "tiny-invariant": "^1.3.3", "use-sync-external-store": "^1.2.2", "victory-vendor": "^37.0.2" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-mwzmO1s9sFL0TduUpwndxCUNoXsBw3u3E/0+A+cLcrSfQitSG62L32N69GhqUrrT5qKcAE3pCGVINC6pqkBBQg=="],
+
     "recma-build-jsx": ["recma-build-jsx@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-build-jsx": "^3.0.0", "vfile": "^6.0.0" } }, "sha512-8GtdyqaBcDfva+GUKDr3nev3VpKAhup1+RvkMvUxURHpW7QyIvk9F5wz7Vzo06CEMSilw6uArgRqhpiUcWp8ew=="],
 
     "recma-jsx": ["recma-jsx@1.0.0", "", { "dependencies": { "acorn-jsx": "^5.0.0", "estree-util-to-js": "^2.0.0", "recma-parse": "^1.0.0", "recma-stringify": "^1.0.0", "unified": "^11.0.0" } }, "sha512-5vwkv65qWwYxg+Atz95acp8DMu1JDSqdGkA2Of1j6rCreyFUE/gp15fC8MnGEuG1W68UKjM6x6+YTWIh7hZM/Q=="],
@@ -1806,7 +2357,15 @@
 
     "recma-stringify": ["recma-stringify@1.0.0", "", { "dependencies": { "@types/estree": "^1.0.0", "estree-util-to-js": "^2.0.0", "unified": "^11.0.0", "vfile": "^6.0.0" } }, "sha512-cjwII1MdIIVloKvC9ErQ+OgAtwHBmcZ0Bg4ciz78FtbT8In39aAYbaA7zvxQ61xVMSPE8WxhLwLbhif4Js2C+g=="],
 
-    "regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
+    "redux": ["redux@5.0.1", "", {}, "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w=="],
+
+    "redux-thunk": ["redux-thunk@3.1.0", "", { "peerDependencies": { "redux": "^5.0.0" } }, "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw=="],
+
+    "regenerate": ["regenerate@1.4.2", "", {}, "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A=="],
+
+    "regenerate-unicode-properties": ["regenerate-unicode-properties@10.2.2", "", { "dependencies": { "regenerate": "^1.4.2" } }, "sha512-m03P+zhBeQd1RGnYxrGyDAPpWX/epKirLrp8e3qevZdVkKtnCrjjWczIbYc8+xd6vcTStVlqfycTx1KR4LOr0g=="],
+
+    "regenerator-runtime": ["regenerator-runtime@0.13.11", "", {}, "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="],
 
     "regex": ["regex@6.0.1", "", { "dependencies": { "regex-utilities": "^2.3.0" } }, "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA=="],
 
@@ -1814,6 +2373,12 @@
 
     "regex-utilities": ["regex-utilities@2.3.0", "", {}, "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng=="],
 
+    "regexpu-core": ["regexpu-core@6.4.0", "", { "dependencies": { "regenerate": "^1.4.2", "regenerate-unicode-properties": "^10.2.2", "regjsgen": "^0.8.0", "regjsparser": "^0.13.0", "unicode-match-property-ecmascript": "^2.0.0", "unicode-match-property-value-ecmascript": "^2.2.1" } }, "sha512-0ghuzq67LI9bLXpOX/ISfve/Mq33a4aFRzoQYhnnok1JOFpmE/A2TBGkNVenOGEeSBCjIiWcc6MVOG5HEQv0sA=="],
+
+    "regjsgen": ["regjsgen@0.8.0", "", {}, "sha512-RvwtGe3d7LvWiDQXeQw8p5asZUmfU1G/l6WbUXeHta7Y2PEIvBTwH6E2EfmYUK8pxcxEdEmaomqyp0vZZ7C+3Q=="],
+
+    "regjsparser": ["regjsparser@0.13.1", "", { "dependencies": { "jsesc": "~3.1.0" }, "bin": { "regjsparser": "bin/parser" } }, "sha512-dLsljMd9sqwRkby8zhO1gSg3PnJIBFid8f4CQj/sXx+7cKx+E7u0PKhZ+U4wmhx7EfmtvnA318oVaIkAB1lRJw=="],
+
     "rehype-highlight": ["rehype-highlight@7.0.2", "", { "dependencies": { "@types/hast": "^3.0.0", "hast-util-to-text": "^4.0.0", "lowlight": "^3.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" } }, "sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA=="],
 
     "rehype-katex": ["rehype-katex@7.0.1", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/katex": "^0.16.0", "hast-util-from-html-isomorphic": "^2.0.0", "hast-util-to-text": "^4.0.0", "katex": "^0.16.0", "unist-util-visit-parents": "^6.0.0", "vfile": "^6.0.0" } }, "sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA=="],
@@ -1836,6 +2401,10 @@
 
     "remark-stringify": ["remark-stringify@11.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-to-markdown": "^2.0.0", "unified": "^11.0.0" } }, "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw=="],
 
+    "require-directory": ["require-directory@2.1.1", "", {}, "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q=="],
+
+    "reselect": ["reselect@5.1.1", "", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
+
     "resize-observer-polyfill": ["resize-observer-polyfill@1.5.1", "", {}, "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="],
 
     "resolve": ["resolve@1.22.10", "", { "dependencies": { "is-core-module": "^2.16.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w=="],
@@ -1856,6 +2425,8 @@
 
     "roughjs": ["roughjs@4.6.6", "", { "dependencies": { "hachure-fill": "^0.5.2", "path-data-parser": "^0.1.0", "points-on-curve": "^0.2.0", "points-on-path": "^0.2.1" } }, "sha512-ZUz/69+SYpFN/g/lUlo2FXcIjRkSu3nDarreVdGGndHEBJ6cXPdKguS8JGxwj5HA5xIbVKSmLgr5b3AWxtRfvQ=="],
 
+    "run-applescript": ["run-applescript@7.1.0", "", {}, "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q=="],
+
     "run-async": ["run-async@4.0.6", "", {}, "sha512-IoDlSLTs3Yq593mb3ZoKWKXMNu3UpObxhgA/Xuid5p4bbfi2jdY1Hj0m1K+0/tEuQTxIGMhQDqGjKb7RuxGpAQ=="],
 
     "run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
@@ -1874,24 +2445,36 @@
 
     "sass-formatter": ["sass-formatter@0.7.9", "", { "dependencies": { "suf-log": "^2.5.3" } }, "sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw=="],
 
-    "scheduler": ["scheduler@0.23.2", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ=="],
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
 
     "screenfull": ["screenfull@5.2.0", "", {}, "sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA=="],
 
-    "scroll-into-view-if-needed": ["scroll-into-view-if-needed@2.2.31", "", { "dependencies": { "compute-scroll-into-view": "^1.0.20" } }, "sha512-dGCXy99wZQivjmjIqihaBQNjryrz5rueJY7eHfTdyWEiR4ttYpsajb14rn9s5d4DY4EcY6+4+U/maARBXJedkA=="],
+    "scroll-into-view-if-needed": ["scroll-into-view-if-needed@3.1.0", "", { "dependencies": { "compute-scroll-into-view": "^3.0.2" } }, "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ=="],
 
     "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
 
     "semver-compare": ["semver-compare@1.0.0", "", {}, "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow=="],
 
+    "send": ["send@0.19.2", "", { "dependencies": { "debug": "2.6.9", "depd": "2.0.0", "destroy": "1.2.0", "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "etag": "~1.8.1", "fresh": "~0.5.2", "http-errors": "~2.0.1", "mime": "1.6.0", "ms": "2.1.3", "on-finished": "~2.4.1", "range-parser": "~1.2.1", "statuses": "~2.0.2" } }, "sha512-VMbMxbDeehAxpOtWJXlcUS5E8iXh6QmN+BkRX1GARS3wRaXEEgzCcB10gTQazO42tpNIya8xIyNx8fll1OFPrg=="],
+
+    "serialize-error": ["serialize-error@2.1.0", "", {}, "sha512-ghgmKt5o4Tly5yEG/UJp8qTd0AN7Xalw4XBtDEKP655B699qMEtra1WlXeE6WIvdEG481JvRxULKsInq/iNysw=="],
+
+    "serve-static": ["serve-static@1.16.3", "", { "dependencies": { "encodeurl": "~2.0.0", "escape-html": "~1.0.3", "parseurl": "~1.3.3", "send": "~0.19.1" } }, "sha512-x0RTqQel6g5SY7Lg6ZreMmsOzncHFU7nhnRWkKgWuMTu5NN0DR5oruckMqRvacAN9d5w6ARnRBXl9xhDCgfMeA=="],
+
     "set-value": ["set-value@2.0.1", "", { "dependencies": { "extend-shallow": "^2.0.1", "is-extendable": "^0.1.1", "is-plain-object": "^2.0.3", "split-string": "^3.0.1" } }, "sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw=="],
 
+    "setprototypeof": ["setprototypeof@1.2.0", "", {}, "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="],
+
     "shapefile": ["shapefile@0.6.6", "", { "dependencies": { "array-source": "0.0", "commander": "2", "path-source": "0.1", "slice-source": "0.4", "stream-source": "0.3", "text-encoding": "^0.6.4" }, "bin": { "dbf2json": "bin/dbf2json", "shp2json": "bin/shp2json" } }, "sha512-rLGSWeK2ufzCVx05wYd+xrWnOOdSV7xNUW5/XFgx3Bc02hBkpMlrd2F1dDII7/jhWzv0MSyBFh5uJIy9hLdfuw=="],
 
+    "sharp": ["sharp@0.34.5", "", { "dependencies": { "@img/colour": "^1.0.0", "detect-libc": "^2.1.2", "semver": "^7.7.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.34.5", "@img/sharp-darwin-x64": "0.34.5", "@img/sharp-libvips-darwin-arm64": "1.2.4", "@img/sharp-libvips-darwin-x64": "1.2.4", "@img/sharp-libvips-linux-arm": "1.2.4", "@img/sharp-libvips-linux-arm64": "1.2.4", "@img/sharp-libvips-linux-ppc64": "1.2.4", "@img/sharp-libvips-linux-riscv64": "1.2.4", "@img/sharp-libvips-linux-s390x": "1.2.4", "@img/sharp-libvips-linux-x64": "1.2.4", "@img/sharp-libvips-linuxmusl-arm64": "1.2.4", "@img/sharp-libvips-linuxmusl-x64": "1.2.4", "@img/sharp-linux-arm": "0.34.5", "@img/sharp-linux-arm64": "0.34.5", "@img/sharp-linux-ppc64": "0.34.5", "@img/sharp-linux-riscv64": "0.34.5", "@img/sharp-linux-s390x": "0.34.5", "@img/sharp-linux-x64": "0.34.5", "@img/sharp-linuxmusl-arm64": "0.34.5", "@img/sharp-linuxmusl-x64": "0.34.5", "@img/sharp-wasm32": "0.34.5", "@img/sharp-win32-arm64": "0.34.5", "@img/sharp-win32-ia32": "0.34.5", "@img/sharp-win32-x64": "0.34.5" } }, "sha512-Ou9I5Ft9WNcCbXrU9cMgPBcCK8LiwLqcbywW3t4oDV37n1pzpuNLsYiAV8eODnjbtQlSDwZ2cUEeQz4E54Hltg=="],
+
     "shebang-command": ["shebang-command@2.0.0", "", { "dependencies": { "shebang-regex": "^3.0.0" } }, "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA=="],
 
     "shebang-regex": ["shebang-regex@3.0.0", "", {}, "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="],
 
+    "shell-quote": ["shell-quote@1.8.3", "", {}, "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw=="],
+
     "shiki": ["shiki@3.4.2", "", { "dependencies": { "@shikijs/core": "3.4.2", "@shikijs/engine-javascript": "3.4.2", "@shikijs/engine-oniguruma": "3.4.2", "@shikijs/langs": "3.4.2", "@shikijs/themes": "3.4.2", "@shikijs/types": "3.4.2", "@shikijs/vscode-textmate": "^10.0.2", "@types/hast": "^3.0.4" } }, "sha512-wuxzZzQG8kvZndD7nustrNFIKYJ1jJoWIPaBpVe2+KHSvtzMi4SBjOxrigs8qeqce/l3U0cwiC+VAkLKSunHQQ=="],
 
     "signal-exit": ["signal-exit@4.1.0", "", {}, "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw=="],
@@ -1902,16 +2485,20 @@
 
     "simplify-geometry": ["simplify-geometry@0.0.2", "", {}, "sha512-ZEyrplkqgCqDlL7V8GbbYgTLlcnNF+MWWUdy8s8ZeJru50bnI71rDew/I+HG36QS2mPOYAq1ZjwNXxHJ8XOVBw=="],
 
+    "sisteransi": ["sisteransi@1.0.5", "", {}, "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg=="],
+
     "slice-source": ["slice-source@0.4.1", "", {}, "sha512-YiuPbxpCj4hD9Qs06hGAz/OZhQ0eDuALN0lRWJez0eD/RevzKqGdUx1IOMUnXgpr+sXZLq3g8ERwbAH0bCb8vg=="],
 
     "sort-object-keys": ["sort-object-keys@1.1.3", "", {}, "sha512-855pvK+VkU7PaKYPc+Jjnmt4EzejQHyhhF33q31qG8x7maDzkeFhAAThdCYay11CISO+qAMwjOBP+fPZe0IPyg=="],
 
     "sort-order": ["sort-order@1.1.2", "", {}, "sha512-Q8tOrwB1TSv9fNUXym9st3TZJODtmcOIi2JWCkVNQPrRg17KPwlpwweTEb7pMwUIFMTAgx2/JsQQXEPFzYQj3A=="],
 
-    "source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],
+    "source-map": ["source-map@0.6.1", "", {}, "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "source-map-support": ["source-map-support@0.5.21", "", { "dependencies": { "buffer-from": "^1.0.0", "source-map": "^0.6.0" } }, "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w=="],
+
     "space-separated-tokens": ["space-separated-tokens@2.0.2", "", {}, "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q=="],
 
     "split-on-first": ["split-on-first@3.0.0", "", {}, "sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA=="],
@@ -1920,6 +2507,12 @@
 
     "sse.js": ["sse.js@2.6.0", "", {}, "sha512-eGEqOwiPX9Cm+KsOYkcz7HIEqWUSOFeChr0sT515hDOBLvQy5yxaLSZx9JWMhwjf75CXJq+7cgG1MKNh9GQ36w=="],
 
+    "stackframe": ["stackframe@1.3.4", "", {}, "sha512-oeVtt7eWQS+Na6F//S4kJ2K2VbRlS9D43mAlMyVpVWovy9o+jfgH8O9agzANzaiLjclA0oYzUXEM4PurhSUChw=="],
+
+    "stacktrace-parser": ["stacktrace-parser@0.1.11", "", { "dependencies": { "type-fest": "^0.7.1" } }, "sha512-WjlahMgHmCJpqzU8bIBy4qtsZdU9lRlcZE3Lvyej6t4tuOuv1vk57OW3MBrj6hXBFx/nNoC9MPMTcr5YA7NQbg=="],
+
+    "statuses": ["statuses@1.5.0", "", {}, "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA=="],
+
     "stdin-discarder": ["stdin-discarder@0.2.2", "", {}, "sha512-UhDfHmA92YAlNnCfhmq0VeNL5bDbiZGg7sZ2IvPsXubGkiNa9EC+tUTsjBRsYUAz87btI6/1wf4XoVvQ3uRnmQ=="],
 
     "stream-source": ["stream-source@0.3.5", "", {}, "sha512-ZuEDP9sgjiAwUVoDModftG0JtYiLUV8K4ljYD1VyUMRWtbVf92474o4kuuul43iZ8t/hRuiDAx1dIJSvirrK/g=="],
@@ -1944,9 +2537,9 @@
 
     "style-to-object": ["style-to-object@1.0.8", "", { "dependencies": { "inline-style-parser": "0.2.4" } }, "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g=="],
 
-    "stylis": ["stylis@4.3.6", "", {}, "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ=="],
+    "styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" } }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
 
-    "sucrase": ["sucrase@3.35.0", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "glob": "^10.3.10", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA=="],
+    "stylis": ["stylis@4.3.6", "", {}, "sha512-yQ3rwFWRfwNUY7H5vpU0wfdkNSnvnJinhF9830Swlaxl03zsOjCfmX0ugac+3LtK0lYSgwL/KXc8oYL3mG4YFQ=="],
 
     "suf-log": ["suf-log@2.5.3", "", { "dependencies": { "s.color": "0.0.15" } }, "sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow=="],
 
@@ -1960,24 +2553,40 @@
 
     "tabbable": ["tabbable@6.2.0", "", {}, "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="],
 
-    "tailwindcss": ["tailwindcss@3.4.17", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.6", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og=="],
+    "tailwind-merge": ["tailwind-merge@3.5.0", "", {}, "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A=="],
+
+    "tailwind-variants": ["tailwind-variants@3.2.2", "", { "peerDependencies": { "tailwind-merge": ">=3.0.0", "tailwindcss": "*" }, "optionalPeers": ["tailwind-merge"] }, "sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg=="],
+
+    "tailwindcss": ["tailwindcss@4.2.4", "", {}, "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA=="],
+
+    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
+
+    "tar": ["tar@7.5.13", "", { "dependencies": { "@isaacs/fs-minipass": "^4.0.0", "chownr": "^3.0.0", "minipass": "^7.1.2", "minizlib": "^3.1.0", "yallist": "^5.0.0" } }, "sha512-tOG/7GyXpFevhXVh8jOPJrmtRpOTsYqUIkVdVooZYJS/z8WhfQUX8RJILmeuJNinGAMSu1veBr4asSHFt5/hng=="],
+
+    "terser": ["terser@5.46.1", "", { "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.15.0", "commander": "^2.20.0", "source-map-support": "~0.5.20" }, "bin": { "terser": "bin/terser" } }, "sha512-vzCjQO/rgUuK9sf8VJZvjqiqiHFaZLnOiimmUuOKODxWL8mm/xua7viT7aqX7dgPY60otQjUotzFMmCB4VdmqQ=="],
 
     "text-encoding": ["text-encoding@0.6.4", "", {}, "sha512-hJnc6Qg3dWoOMkqP53F0dzRIgtmsAge09kxUIqGrEUS4qr5rWLckGYaQAVr+opBrIMRErGgy6f5aPnyPpyGRfg=="],
 
     "text-table": ["text-table@0.2.0", "", {}, "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="],
 
-    "thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
-
-    "thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
+    "throat": ["throat@5.0.0", "", {}, "sha512-fcwX4mndzpLQKBS1DVYhGAcYaYt7vsHNIvQV+WXMvnow5cgjPphq5CaayLaGsjRdSCKZFNGt7/GYAuXaNOiYCA=="],
 
     "throttle-debounce": ["throttle-debounce@5.0.2", "", {}, "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A=="],
 
+    "tiny-invariant": ["tiny-invariant@1.3.3", "", {}, "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg=="],
+
     "tinyexec": ["tinyexec@1.0.1", "", {}, "sha512-5uC6DDlmeqiOwCPmK9jMSdOuZTh8bU39Ys6yidB+UTt5hfZUPGAypSgFRiEp+jbi9qH40BLDvy85jIU88wKSqw=="],
 
+    "tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
+
+    "tmpl": ["tmpl@1.0.5", "", {}, "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw=="],
+
     "to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
 
     "toggle-selection": ["toggle-selection@1.0.6", "", {}, "sha512-BiZS+C1OS8g/q2RRbJmy59xpyghNBqrr6k5L/uKBGRsTfxmu3ffiRnd8mlGPUVayg8pvfi5urfnu8TU7DVOkLQ=="],
 
+    "toidentifier": ["toidentifier@1.0.1", "", {}, "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA=="],
+
     "topojson-client": ["topojson-client@3.1.0", "", { "dependencies": { "commander": "2" }, "bin": { "topo2geo": "bin/topo2geo", "topomerge": "bin/topomerge", "topoquantize": "bin/topoquantize" } }, "sha512-605uxS6bcYxGXw9qi62XyrV6Q3xwbndjachmNxu8HWTtVPxZfEJN9fd/SZS1Q54Sn2y0TMyMxFj/cJINqGHrKw=="],
 
     "topojson-server": ["topojson-server@3.0.1", "", { "dependencies": { "commander": "2" }, "bin": { "geo2topo": "bin/geo2topo" } }, "sha512-/VS9j/ffKr2XAOjlZ9CgyyeLmgJ9dMwq6Y0YEON8O7p/tGGk+dCWnrE03zEdu7i4L7YsFZLEPZPzCvcB7lEEXw=="],
@@ -1988,12 +2597,12 @@
 
     "ts-dedent": ["ts-dedent@2.2.0", "", {}, "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ=="],
 
-    "ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
-
     "ts-md5": ["ts-md5@1.3.1", "", {}, "sha512-DiwiXfwvcTeZ5wCE0z+2A9EseZsztaiZtGrtSaY5JOD7ekPnR/GoIVD5gXZAlK9Na9Kvpo9Waz5rW64WKAWApg=="],
 
     "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
     "type-check": ["type-check@0.4.0", "", { "dependencies": { "prelude-ls": "^1.2.1" } }, "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew=="],
 
     "type-fest": ["type-fest@0.20.2", "", {}, "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="],
@@ -2004,6 +2613,16 @@
 
     "ufo": ["ufo@1.6.1", "", {}, "sha512-9a4/uxlTWJ4+a5i0ooc1rU7C7YOw3wT+UGqdeNNHWnOF9qcMBgLRS+4IYUqbczewFx4mLEig6gawh7X6mFlEkA=="],
 
+    "undici-types": ["undici-types@7.19.2", "", {}, "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg=="],
+
+    "unicode-canonical-property-names-ecmascript": ["unicode-canonical-property-names-ecmascript@2.0.1", "", {}, "sha512-dA8WbNeb2a6oQzAQ55YlT5vQAWGV9WXOsi3SskE3bcCdM0P4SDd+24zS/OCacdRq5BkdsRj9q3Pg6YyQoxIGqg=="],
+
+    "unicode-match-property-ecmascript": ["unicode-match-property-ecmascript@2.0.0", "", { "dependencies": { "unicode-canonical-property-names-ecmascript": "^2.0.0", "unicode-property-aliases-ecmascript": "^2.0.0" } }, "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q=="],
+
+    "unicode-match-property-value-ecmascript": ["unicode-match-property-value-ecmascript@2.2.1", "", {}, "sha512-JQ84qTuMg4nVkx8ga4A16a1epI9H6uTXAknqxkGF/aFfRLw1xC/Bp24HNLaZhHSkWd3+84t8iXnp1J0kYcZHhg=="],
+
+    "unicode-property-aliases-ecmascript": ["unicode-property-aliases-ecmascript@2.2.0", "", {}, "sha512-hpbDzxUY9BFwX+UeBnxv3Sh1q7HFxj48DTmXchNgRa46lO8uj3/1iEn3MiNUYTg1g9ctIqXCCERn8gYZhHC5lQ=="],
+
     "unicorn-magic": ["unicorn-magic@0.3.0", "", {}, "sha512-+QBBXBCvifc56fsbuxZQ6Sic3wqqc3WWaqxs58gvJrcOuN83HGTCwz3oS5phzU9LthRNE9VrJCFCLUgHeeFnfA=="],
 
     "unified": ["unified@11.0.5", "", { "dependencies": { "@types/unist": "^3.0.0", "bail": "^2.0.0", "devlop": "^1.0.0", "extend": "^3.0.0", "is-plain-obj": "^4.0.0", "trough": "^2.0.0", "vfile": "^6.0.0" } }, "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA=="],
@@ -2026,6 +2645,8 @@
 
     "universalify": ["universalify@2.0.1", "", {}, "sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw=="],
 
+    "unpipe": ["unpipe@1.0.0", "", {}, "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ=="],
+
     "update-browserslist-db": ["update-browserslist-db@1.1.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-UxhIZQ+QInVdunkDAaiazvvT/+fXL5Osr0JZlJulepYu6Jd7qJtDZjlur0emRlT71EN3ScPoE7gvsuIKKNavKw=="],
 
     "uri-js": ["uri-js@4.4.1", "", { "dependencies": { "punycode": "^2.1.0" } }, "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg=="],
@@ -2042,7 +2663,7 @@
 
     "util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
 
-    "utility-types": ["utility-types@3.11.0", "", {}, "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw=="],
+    "utils-merge": ["utils-merge@1.0.1", "", {}, "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="],
 
     "uuid": ["uuid@11.1.0", "", { "bin": { "uuid": "dist/esm/bin/uuid" } }, "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A=="],
 
@@ -2054,8 +2675,12 @@
 
     "vfile-message": ["vfile-message@4.0.2", "", { "dependencies": { "@types/unist": "^3.0.0", "unist-util-stringify-position": "^4.0.0" } }, "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw=="],
 
+    "victory-vendor": ["victory-vendor@37.3.6", "", { "dependencies": { "@types/d3-array": "^3.0.3", "@types/d3-ease": "^3.0.0", "@types/d3-interpolate": "^3.0.1", "@types/d3-scale": "^4.0.2", "@types/d3-shape": "^3.1.0", "@types/d3-time": "^3.0.0", "@types/d3-timer": "^3.0.0", "d3-array": "^3.1.6", "d3-ease": "^3.0.1", "d3-interpolate": "^3.0.1", "d3-scale": "^4.0.2", "d3-shape": "^3.1.0", "d3-time": "^3.0.0", "d3-timer": "^3.0.1" } }, "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ=="],
+
     "vite": ["vite@5.4.11", "", { "dependencies": { "esbuild": "^0.21.3", "postcss": "^8.4.43", "rollup": "^4.20.0" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^18.0.0 || >=20.0.0", "less": "*", "lightningcss": "^1.21.0", "sass": "*", "sass-embedded": "*", "stylus": "*", "sugarss": "*", "terser": "^5.4.0" }, "optionalPeers": ["@types/node", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser"], "bin": { "vite": "bin/vite.js" } }, "sha512-c7jFQRklXua0mTzneGW9QVyxFjUgwcihC4bXEtujIo2ouWCe1Ajt/amn2PCxYnhYfd5k09JX3SB7OYWFKYqj8Q=="],
 
+    "vlq": ["vlq@1.0.1", "", {}, "sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w=="],
+
     "void-elements": ["void-elements@3.1.0", "", {}, "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w=="],
 
     "vscode-jsonrpc": ["vscode-jsonrpc@8.2.0", "", {}, "sha512-C+r0eKJUIfiDIfwJhria30+TYWPtuHJXHtI7J0YlOmKAo7ogxP20T0zxB7HZQIFhIyvoBPwWskjxrvAtfjyZfA=="],
@@ -2070,8 +2695,14 @@
 
     "vscode-uri": ["vscode-uri@3.0.8", "", {}, "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw=="],
 
+    "walker": ["walker@1.0.8", "", { "dependencies": { "makeerror": "1.0.12" } }, "sha512-ts/8E8l5b7kY0vlWLewOkDXMmPdLcVV4GmOQLyxuSswIJsweeFZtAsMF7k1Nszz+TYBQrlYRmzOnr398y1JemQ=="],
+
+    "warn-once": ["warn-once@0.1.1", "", {}, "sha512-VkQZJbO8zVImzYFteBXvBOZEl1qL175WH8VmZcxF2fZAoudNhNDvHi+doCaAEdU2l2vtcIwa2zn0QK5+I1HQ3Q=="],
+
     "web-namespaces": ["web-namespaces@2.0.1", "", {}, "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ=="],
 
+    "whatwg-fetch": ["whatwg-fetch@3.6.20", "", {}, "sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg=="],
+
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
 
     "word-wrap": ["word-wrap@1.2.5", "", {}, "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA=="],
@@ -2082,10 +2713,20 @@
 
     "wrappy": ["wrappy@1.0.2", "", {}, "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ=="],
 
-    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
+    "ws": ["ws@7.5.10", "", { "peerDependencies": { "bufferutil": "^4.0.1", "utf-8-validate": "^5.0.2" }, "optionalPeers": ["bufferutil", "utf-8-validate"] }, "sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ=="],
+
+    "wsl-utils": ["wsl-utils@0.3.1", "", { "dependencies": { "is-wsl": "^3.1.0", "powershell-utils": "^0.1.0" } }, "sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg=="],
+
+    "y18n": ["y18n@5.0.8", "", {}, "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA=="],
+
+    "yallist": ["yallist@5.0.0", "", {}, "sha512-YgvUTfwqyc7UXVMrB+SImsVYSmTS8X/tSrtdNZMImM+n7+QTriRXyXim0mBrTXNeqzVF0KWGgHPeiyViFFrNDw=="],
 
     "yaml": ["yaml@2.8.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-4lLa/EcQCB0cJkyts+FpIRx5G/llPxfP6VQU5KByHEhLxY3IJCH0f0Hy1MHI8sClTvsIb8qwRJ6R/ZdlDJ/leQ=="],
 
+    "yargs": ["yargs@17.7.2", "", { "dependencies": { "cliui": "^8.0.1", "escalade": "^3.1.1", "get-caller-file": "^2.0.5", "require-directory": "^2.1.1", "string-width": "^4.2.3", "y18n": "^5.0.5", "yargs-parser": "^21.1.1" } }, "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w=="],
+
+    "yargs-parser": ["yargs-parser@21.1.1", "", {}, "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw=="],
+
     "yocto-queue": ["yocto-queue@0.1.0", "", {}, "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q=="],
 
     "yoctocolors": ["yoctocolors@2.1.2", "", {}, "sha512-CzhO+pFNo8ajLM2d2IW/R93ipy99LWjtwblvC1RsoSUMZgyLbYFr221TnSNT7GjGdYui6P459mw9JH/g/zW2ug=="],
@@ -2096,20 +2737,136 @@
 
     "zwitch": ["zwitch@2.0.4", "", {}, "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A=="],
 
+    "@adobe/react-spectrum/use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
+    "@ampproject/remapping/@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
+
+    "@ampproject/remapping/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
+
+    "@babel/generator/@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
+
+    "@babel/generator/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
+
+    "@babel/helper-annotate-as-pure/@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="],
+
     "@babel/helper-compilation-targets/browserslist": ["browserslist@4.24.3", "", { "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.1" }, "bin": { "browserslist": "cli.js" } }, "sha512-1CPmv8iobE2fyRMV97dAcMVegvvWKxmq94hkLiAkUGwKVTyDLw33K+ZxiFrREKmmps4rIw6grcCFCnTMSZ/YiA=="],
 
+    "@babel/helper-create-class-features-plugin/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
     "@babel/helper-define-polyfill-provider/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.27.1", "", {}, "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw=="],
 
+    "@babel/helper-member-expression-to-functions/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/helper-member-expression-to-functions/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/helper-optimise-call-expression/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/helper-replace-supers/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="],
+
+    "@babel/helper-wrap-function/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/helper-wrap-function/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/helper-wrap-function/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/plugin-proposal-export-default-from/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-syntax-dynamic-import/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-syntax-export-default-from/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-syntax-flow/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-syntax-jsx/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-syntax-nullish-coalescing-operator/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-syntax-optional-chaining/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-syntax-typescript/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-arrow-functions/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports": ["@babel/helper-module-imports@7.28.6", "", { "dependencies": { "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-block-scoping/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-class-properties/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-classes/@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.28.6", "", { "dependencies": { "@babel/compat-data": "^7.28.6", "@babel/helper-validator-option": "^7.27.1", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-JYtls3hqi15fcx5GaSNL7SCTJ2MNmjrkHXg4FSpOA/grxK8KwyZ5bubHsCq8FXCkua6xhuaaBit+3b7+VZRfcA=="],
+
+    "@babel/plugin-transform-classes/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/plugin-transform-destructuring/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/plugin-transform-flow-strip-types/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-for-of/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.28.6", "", { "dependencies": { "@babel/helper-module-imports": "^7.28.6", "@babel/helper-validator-identifier": "^7.28.5", "@babel/traverse": "^7.28.6" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-67oXFAYr2cDLDVGLXTEABjdBJZ6drElUSI7WKp70NrpyISso3plG9SAGEF6y7zbha/wOzUByWWTJvEDVNIUGcA=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-named-capturing-groups-regex/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-nullish-coalescing-operator/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-optional-catch-binding/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-optional-chaining/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-private-methods/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-private-property-in-object/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-react-display-name/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports": ["@babel/helper-module-imports@7.28.6", "", { "dependencies": { "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/plugin-transform-regenerator/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
     "@babel/plugin-transform-runtime/@babel/helper-module-imports": ["@babel/helper-module-imports@7.27.1", "", { "dependencies": { "@babel/traverse": "^7.27.1", "@babel/types": "^7.27.1" } }, "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w=="],
 
     "@babel/plugin-transform-runtime/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.27.1", "", {}, "sha512-1gn1Up5YXka3YYAHGKpbideQ5Yjf1tDa9qYcgysz+cNCXukyLl6DjPXhD3VRwSb8c0J9tA4b2+rHEZtc6R0tlw=="],
 
+    "@babel/plugin-transform-shorthand-properties/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-template-literals/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-typescript/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/plugin-transform-unicode-regex/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/preset-typescript/@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.28.6", "", {}, "sha512-S9gzZ/bz83GRysI7gAD4wPT/AI3uCnY+9xn+Mx/KPs2JwHJIz1W8PZkg2cqyt3RNOBM8ejcXhV6y8Og7ly/Dug=="],
+
+    "@babel/preset-typescript/@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
+
+    "@babel/runtime/regenerator-runtime": ["regenerator-runtime@0.14.1", "", {}, "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw=="],
+
     "@babel/traverse/globals": ["globals@11.12.0", "", {}, "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA=="],
 
     "@code-inspector/core/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
-    "@douyinfe/semi-foundation/remark-gfm": ["remark-gfm@4.0.0", "", { "dependencies": { "@types/mdast": "^4.0.0", "mdast-util-gfm": "^3.0.0", "micromark-extension-gfm": "^3.0.0", "remark-parse": "^11.0.0", "remark-stringify": "^11.0.0", "unified": "^11.0.0" } }, "sha512-U92vJgBPkbw4Zfu/IiW2oTZLSL3Zpv+uI7My2eq8JxKgqraFdU8YUGicEJCEgSbeaG+QDFqIcwwfMTOEelPxuA=="],
-
     "@emotion/babel-plugin/@emotion/hash": ["@emotion/hash@0.9.2", "", {}, "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g=="],
 
     "@emotion/babel-plugin/convert-source-map": ["convert-source-map@1.9.0", "", {}, "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A=="],
@@ -2124,6 +2881,10 @@
 
     "@emotion/serialize/@emotion/unitless": ["@emotion/unitless@0.10.0", "", {}, "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg=="],
 
+    "@heroui-pro/react/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
+
+    "@heroui/react/tailwind-merge": ["tailwind-merge@3.4.0", "", {}, "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g=="],
+
     "@iconify/utils/globals": ["globals@15.15.0", "", {}, "sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg=="],
 
     "@inquirer/external-editor/iconv-lite": ["iconv-lite@0.7.0", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-cf6L2Ds3h57VVmkZe+Pn+5APsT7FpqJtEhhieDCvrE2MK5Qk9MyffgQyuxQTm6BChfeZNtcOLHp9IcWRVcIcBQ=="],
@@ -2134,37 +2895,119 @@
 
     "@isaacs/cliui/wrap-ansi": ["wrap-ansi@8.1.0", "", { "dependencies": { "ansi-styles": "^6.1.0", "string-width": "^5.0.1", "strip-ansi": "^7.0.1" } }, "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ=="],
 
+    "@jest/types/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "@jridgewell/gen-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
+    "@jridgewell/trace-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
     "@lobehub/fluent-emoji/lucide-react": ["lucide-react@0.469.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw=="],
 
     "@lobehub/icons/lucide-react": ["lucide-react@0.469.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-28vvUnnKQ/dBwiCQtwJw7QauYnE7yd2Cyp4tTTJpvglX4EMpbflcdBgrgToX2j71B3YvugK/NH3BGUk+E/p/Fw=="],
 
-    "@lobehub/ui/@dnd-kit/sortable": ["@dnd-kit/sortable@10.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.3.0", "react": ">=16.8.0" } }, "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg=="],
+    "@lobehub/ui/framer-motion": ["framer-motion@12.12.2", "", { "dependencies": { "motion-dom": "^12.12.1", "motion-utils": "^12.12.1", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-qCszZCiGWkilL40E3VuhIJJC/CS3SIBl2IHyGK8FU30nOUhTmhBNWPrNFyozAWH/bXxwzi19vJHIGVdALF0LCg=="],
 
     "@lobehub/ui/lucide-react": ["lucide-react@0.484.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-oZy8coK9kZzvqhSgfbGkPtTgyjpBvs3ukLgDPv14dSOZtBtboryWF5o8i3qen7QbGg7JhiJBz5mK1p8YoMZTLQ=="],
 
+    "@mdx-js/mdx/source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],
+
+    "@parcel/watcher/detect-libc": ["detect-libc@1.0.3", "", { "bin": { "detect-libc": "./bin/detect-libc.js" } }, "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg=="],
+
+    "@radix-ui/react-arrow/@radix-ui/react-primitive": ["@radix-ui/react-primitive@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw=="],
+
     "@radix-ui/react-dismissable-layer/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA=="],
 
+    "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive": ["@radix-ui/react-primitive@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw=="],
+
+    "@radix-ui/react-dismissable-layer/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg=="],
+
+    "@radix-ui/react-id/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ=="],
+
     "@radix-ui/react-popper/@floating-ui/react-dom": ["@floating-ui/react-dom@0.7.2", "", { "dependencies": { "@floating-ui/dom": "^0.5.3", "use-isomorphic-layout-effect": "^1.1.1" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-1T0sJcpHgX/u4I1OzIEhlcrvkUN8ln39nz7fMoE/2HDHrPiMFoOGR7++GYyfUmIQHkkrTinaeQsO3XWubjSvGg=="],
 
     "@radix-ui/react-popper/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA=="],
 
+    "@radix-ui/react-popper/@radix-ui/react-context": ["@radix-ui/react-context@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg=="],
+
+    "@radix-ui/react-popper/@radix-ui/react-primitive": ["@radix-ui/react-primitive@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw=="],
+
+    "@radix-ui/react-popper/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg=="],
+
+    "@radix-ui/react-popper/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ=="],
+
+    "@radix-ui/react-portal/@radix-ui/react-primitive": ["@radix-ui/react-primitive@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw=="],
+
     "@radix-ui/react-presence/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA=="],
 
-    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw=="],
+    "@radix-ui/react-presence/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ=="],
+
+    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
     "@radix-ui/react-tooltip/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA=="],
 
+    "@radix-ui/react-tooltip/@radix-ui/react-context": ["@radix-ui/react-context@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg=="],
+
+    "@radix-ui/react-tooltip/@radix-ui/react-primitive": ["@radix-ui/react-primitive@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw=="],
+
     "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw=="],
 
+    "@radix-ui/react-use-controllable-state/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg=="],
+
+    "@radix-ui/react-use-escape-keydown/@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg=="],
+
+    "@radix-ui/react-use-size/@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ=="],
+
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@1.0.2", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-slot": "1.0.1" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0", "react-dom": "^16.8 || ^17.0 || ^18.0" } }, "sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@react-native/codegen/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@react-native/community-cli-plugin/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
+
+    "@react-native/dev-middleware/open": ["open@7.4.2", "", { "dependencies": { "is-docker": "^2.0.0", "is-wsl": "^2.1.1" } }, "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q=="],
+
+    "@reduxjs/toolkit/immer": ["immer@11.1.4", "", {}, "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw=="],
+
+    "@spectrum-icons/ui/@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.10.0", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.1", "tslib": "^2.4.0" }, "bundled": true }, "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.4", "", { "dependencies": { "@tybys/wasm-util": "^0.10.1" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" }, "bundled": true }, "sha512-3NQNNgA1YSlJb/kMH1ildASP9HW7/7kYnRI2szWJaofaS1hWmbGI4H+d3+22aGzXXN9IJ+n+GiFVcGipJP18ow=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-9tTaPJLSiejZKx+Bmog4uSubteqTvFrVrURwkmHixBo0G4seD0zUxp98E1DzUBJxLQ3NPwXrGKDiVjwx/DpPsg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "@tailwindcss/postcss/postcss": ["postcss@8.5.10", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ=="],
+
+    "@visactor/vdataset/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+
     "@visactor/vrender-kits/roughjs": ["roughjs@4.5.2", "", { "dependencies": { "path-data-parser": "^0.1.0", "points-on-curve": "^0.2.0", "points-on-path": "^0.2.1" } }, "sha512-2xSlLDKdsWyFxrveYWk9YQ/Y9UfK38EAMRNkYkMqYBJvPX8abCa9PN0x3w02H8Oa6/0bcZICJU+U95VumPqseg=="],
 
+    "@visactor/vutils/eventemitter3": ["eventemitter3@4.0.7", "", {}, "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="],
+
     "@vue/compiler-core/@babel/parser": ["@babel/parser@7.28.5", "", { "dependencies": { "@babel/types": "^7.28.5" }, "bin": "./bin/babel-parser.js" }, "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ=="],
 
     "@vue/compiler-core/estree-walker": ["estree-walker@2.0.2", "", {}, "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="],
 
+    "accepts/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
+
     "antd/rc-collapse": ["rc-collapse@3.9.0", "", { "dependencies": { "@babel/runtime": "^7.10.1", "classnames": "2.x", "rc-motion": "^2.3.4", "rc-util": "^5.27.0" }, "peerDependencies": { "react": ">=16.9.0", "react-dom": ">=16.9.0" } }, "sha512-swDdz4QZ4dFTo4RAUMLL50qP0EY62N2kvmk2We5xYdRwcRn8WcYtuetCJpwpaCbUfUt5+huLpVxhvmnK+PHrkA=="],
 
-    "antd/scroll-into-view-if-needed": ["scroll-into-view-if-needed@3.1.0", "", { "dependencies": { "compute-scroll-into-view": "^3.0.2" } }, "sha512-49oNpRjWRvnU8NyGVmUaYG4jtTkNonFZI86MmGRDqBphEK2EXT9gdEUoQPZhuBM8yWHxCWbobltqYO5M4XrUvQ=="],
+    "chrome-launcher/is-wsl": ["is-wsl@2.2.0", "", { "dependencies": { "is-docker": "^2.0.0" } }, "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww=="],
+
+    "chromium-edge-launcher/is-wsl": ["is-wsl@2.2.0", "", { "dependencies": { "is-docker": "^2.0.0" } }, "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww=="],
+
+    "cliui/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "cliui/wrap-ansi": ["wrap-ansi@7.0.0", "", { "dependencies": { "ansi-styles": "^4.0.0", "string-width": "^4.1.0", "strip-ansi": "^6.0.0" } }, "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q=="],
+
+    "connect/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
 
     "cosmiconfig/yaml": ["yaml@1.10.2", "", {}, "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="],
 
@@ -2184,13 +3027,23 @@
 
     "d3-sankey/d3-shape": ["d3-shape@1.3.7", "", { "dependencies": { "d3-path": "1" } }, "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw=="],
 
+    "dom-helpers/@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
+
+    "dom-serializer/entities": ["entities@4.5.0", "", {}, "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw=="],
+
     "esast-util-from-js/acorn": ["acorn@8.14.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA=="],
 
     "eslint/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
+    "estree-util-to-js/source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],
+
     "extend-shallow/is-extendable": ["is-extendable@0.1.1", "", {}, "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="],
 
-    "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+    "figlet/commander": ["commander@14.0.3", "", {}, "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw=="],
+
+    "finalhandler/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
+
+    "finalhandler/encodeurl": ["encodeurl@1.0.2", "", {}, "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w=="],
 
     "geojson-dissolve/@turf/meta": ["@turf/meta@3.14.0", "", {}, "sha512-OtXqLQuR9hlQ/HkAF/OdzRea7E0eZK1ay8y8CBXkoO2R6v34CsDrWYLMSo0ZzMsaQDpKo76NPP2GGo+PyG1cSg=="],
 
@@ -2204,30 +3057,106 @@
 
     "hastscript/property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
 
+    "heroui-native-pro/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
+
+    "heroui-pro/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
+
+    "heroui-pro/commander": ["commander@14.0.3", "", {}, "sha512-H+y0Jo/T1RZ9qPP4Eh1pkcQcLRglraJaSLoyOtHxu6AapkjWVCy2Sit1QQ4x3Dng8qDlSsZEet7g5Pq06MvTgw=="],
+
+    "heroui-pro/find-up": ["find-up@7.0.0", "", { "dependencies": { "locate-path": "^7.2.0", "path-exists": "^5.0.0", "unicorn-magic": "^0.1.0" } }, "sha512-YyZM99iHrqLKjmt4LJDj58KI+fYyufRLBSYcqycxf//KpBk9FoewoGX0450m9nB44qrZnovzC2oeP5hUibxc/g=="],
+
+    "heroui-pro/semver": ["semver@7.7.2", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA=="],
+
     "hoist-non-react-statics/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "http-errors/statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],
+
     "i18next-cli/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
 
     "i18next-cli/minimatch": ["minimatch@10.0.3", "", { "dependencies": { "@isaacs/brace-expansion": "^5.0.0" } }, "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw=="],
 
     "i18next-resources-for-ts/@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
 
+    "jest-util/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "jest-util/ci-info": ["ci-info@3.9.0", "", {}, "sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ=="],
+
+    "jest-util/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
+
+    "jest-validate/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "jest-worker/supports-color": ["supports-color@8.1.1", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q=="],
+
     "katex/commander": ["commander@8.3.0", "", {}, "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww=="],
 
     "launch-ide/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "leva/react-dropzone": ["react-dropzone@12.1.0", "", { "dependencies": { "attr-accept": "^2.2.2", "file-selector": "^0.5.0", "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">= 16.8" } }, "sha512-iBYHA1rbopIvtzokEX4QubO6qk5IF/x3BtKGu74rF2JkQDXnwC4uO/lHKpaw4PJIV6iIAYOlwLv2FpiGyqHNog=="],
 
+    "lighthouse-logger/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
+
+    "lru-cache/yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
+
     "mdast-util-find-and-replace/escape-string-regexp": ["escape-string-regexp@5.0.0", "", {}, "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw=="],
 
     "mermaid/marked": ["marked@15.0.12", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA=="],
 
+    "metro/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "metro/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "metro/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "metro/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "metro/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "metro/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "metro/chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
+
+    "metro/hermes-parser": ["hermes-parser@0.35.0", "", { "dependencies": { "hermes-estree": "0.35.0" } }, "sha512-9JLjeHxBx8T4CAsydZR49PNZUaix+WpQJwu9p2010lu+7Kwl6D/7wYFFJxoz+aXkaaClp9Zfg6W6/zVlSJORaA=="],
+
+    "metro/mime-types": ["mime-types@3.0.2", "", { "dependencies": { "mime-db": "^1.54.0" } }, "sha512-Lbgzdk0h4juoQ9fCKXW4by0UJqj+nOOrI9MJ1sSj4nI8aI2eo1qmvQEie4VD1glsS250n15LsWsYtCugiStS5A=="],
+
+    "metro/source-map": ["source-map@0.5.7", "", {}, "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="],
+
+    "metro-babel-transformer/hermes-parser": ["hermes-parser@0.35.0", "", { "dependencies": { "hermes-estree": "0.35.0" } }, "sha512-9JLjeHxBx8T4CAsydZR49PNZUaix+WpQJwu9p2010lu+7Kwl6D/7wYFFJxoz+aXkaaClp9Zfg6W6/zVlSJORaA=="],
+
+    "metro-runtime/@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
+
+    "metro-source-map/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "metro-source-map/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "metro-source-map/source-map": ["source-map@0.5.7", "", {}, "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="],
+
+    "metro-symbolicate/source-map": ["source-map@0.5.7", "", {}, "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ=="],
+
+    "metro-transform-plugins/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "metro-transform-plugins/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "metro-transform-plugins/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "metro-transform-worker/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "metro-transform-worker/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "metro-transform-worker/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
     "micromark-extension-mdxjs/acorn": ["acorn@8.14.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA=="],
 
+    "micromatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
+
     "mlly/acorn": ["acorn@8.14.0", "", { "bin": { "acorn": "bin/acorn" } }, "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA=="],
 
     "mlly/pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="],
 
+    "next/@swc/helpers": ["@swc/helpers@0.5.15", "", { "dependencies": { "tslib": "^2.8.0" } }, "sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g=="],
+
+    "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
+
     "npm-run-path/path-key": ["path-key@4.0.0", "", {}, "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ=="],
 
     "ora/chalk": ["chalk@5.6.2", "", {}, "sha512-7NzBL0rN6fMUW+f7A6Io4h40qQlG+xGmtMxfbnH/K7TAtt8JQWVQK+6g0UXKMeVJoyV5EkkNsErQ8pVD3bLHbA=="],
@@ -2244,37 +3173,57 @@
 
     "prettier-package-json/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
 
+    "pretty-format/ansi-styles": ["ansi-styles@5.2.0", "", {}, "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA=="],
+
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
+    "react-aria/use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
     "react-draggable/clsx": ["clsx@1.2.1", "", {}, "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="],
 
+    "react-native/commander": ["commander@12.1.0", "", {}, "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA=="],
+
+    "react-native/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
+
+    "react-native-reanimated/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
+
+    "react-native-worklets/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
+
+    "react-redux/use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
     "react-rnd/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="],
 
+    "react-stately/use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
     "react-telegram-login/react": ["react@16.14.0", "", { "dependencies": { "loose-envify": "^1.1.0", "object-assign": "^4.1.1", "prop-types": "^15.6.2" } }, "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g=="],
 
-    "react-toastify/clsx": ["clsx@1.2.1", "", {}, "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg=="],
+    "react-transition-group/@babel/runtime": ["@babel/runtime@7.28.4", "", {}, "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ=="],
 
     "rimraf/glob": ["glob@7.2.3", "", { "dependencies": { "fs.realpath": "^1.0.0", "inflight": "^1.0.4", "inherits": "2", "minimatch": "^3.1.1", "once": "^1.3.0", "path-is-absolute": "^1.0.0" } }, "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q=="],
 
+    "send/debug": ["debug@2.6.9", "", { "dependencies": { "ms": "2.0.0" } }, "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA=="],
+
+    "send/on-finished": ["on-finished@2.4.1", "", { "dependencies": { "ee-first": "1.1.1" } }, "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg=="],
+
+    "send/statuses": ["statuses@2.0.2", "", {}, "sha512-DvEy55V3DB7uknRo+4iOGT5fP1slR8wQohVdknigZPMpMstaKJQWhwiYBACJE3Ul2pTnATihhBYnRhZQHGBiRw=="],
+
     "set-value/is-extendable": ["is-extendable@0.1.1", "", {}, "sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw=="],
 
     "shapefile/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
 
+    "sharp/semver": ["semver@7.7.4", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA=="],
+
     "simplify-geojson/concat-stream": ["concat-stream@1.4.11", "", { "dependencies": { "inherits": "~2.0.1", "readable-stream": "~1.1.9", "typedarray": "~0.0.5" } }, "sha512-X3JMh8+4je3U1cQpG87+f9lXHDrqcb2MVLg9L7o8b1UZ0DzhRrUpdn65ttzu10PpJPPI3MQNkis+oha6TSA9Mw=="],
 
     "split-string/extend-shallow": ["extend-shallow@3.0.2", "", { "dependencies": { "assign-symbols": "^1.0.0", "is-extendable": "^1.0.1" } }, "sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q=="],
 
+    "stacktrace-parser/type-fest": ["type-fest@0.7.1", "", {}, "sha512-Ne2YiiGN8bmrmJJEuTWTLJR32nh/JdL1+PSicowtNb0WFpn59GK8/lfD61bVtzguz7b3PBt74nxpv/Pw5po5Rg=="],
+
     "string-width/strip-ansi": ["strip-ansi@7.1.2", "", { "dependencies": { "ansi-regex": "^6.0.1" } }, "sha512-gmBGslpoQJtgnMAvOVqGZpEz9dyoKTCzy2nfz/n8aIFhN/jCE/rCmcxabB6jOOHV+0WNnylOxaxBQPSvcWklhA=="],
 
     "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "sucrase/commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
-
-    "sucrase/glob": ["glob@10.4.5", "", { "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" } }, "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg=="],
-
-    "tailwindcss/chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
-
-    "tailwindcss/jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
+    "terser/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
 
     "topojson-client/commander": ["commander@2.20.3", "", {}, "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ=="],
 
@@ -2286,12 +3235,150 @@
 
     "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
 
+    "yargs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],
+
+    "@ampproject/remapping/@jridgewell/gen-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
+    "@ampproject/remapping/@jridgewell/trace-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
+    "@babel/generator/@jridgewell/gen-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
+    "@babel/generator/@jridgewell/trace-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
+    "@babel/helper-annotate-as-pure/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-annotate-as-pure/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
     "@babel/helper-compilation-targets/browserslist/caniuse-lite": ["caniuse-lite@1.0.30001690", "", {}, "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w=="],
 
     "@babel/helper-compilation-targets/browserslist/electron-to-chromium": ["electron-to-chromium@1.5.76", "", {}, "sha512-CjVQyG7n7Sr+eBXE86HIulnL5N8xZY1sgmOPGuq/F0Rr0FJq63lg0kEtOIDfZBk44FnDLf6FUJ+dsJcuiUDdDQ=="],
 
     "@babel/helper-compilation-targets/browserslist/update-browserslist-db": ["update-browserslist-db@1.1.1", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.0" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-R8UzCaa9Az+38REPiJ1tXlImTJXlVfgHZsglwBD/k6nj76ctsH1E3q4doGrukiLQd3sGQYu56r5+lo5r94l29A=="],
 
+    "@babel/helper-create-class-features-plugin/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/helper-create-class-features-plugin/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/helper-create-class-features-plugin/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/helper-create-class-features-plugin/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/helper-create-class-features-plugin/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/helper-member-expression-to-functions/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/helper-member-expression-to-functions/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/helper-member-expression-to-functions/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/helper-member-expression-to-functions/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/helper-member-expression-to-functions/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-member-expression-to-functions/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-optimise-call-expression/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-optimise-call-expression/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/helper-replace-supers/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/helper-replace-supers/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/helper-replace-supers/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/helper-replace-supers/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/helper-replace-supers/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-wrap-function/@babel/template/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/helper-wrap-function/@babel/template/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/helper-wrap-function/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/helper-wrap-function/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/helper-wrap-function/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/helper-wrap-function/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-wrap-function/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/plugin-transform-classes/@babel/helper-compilation-targets/@babel/compat-data": ["@babel/compat-data@7.29.0", "", {}, "sha512-T1NCJqT/j9+cn8fvkt7jtwbLBfLC/1y1c7NtCeXFRgzGTsafi68MRv8yzkYSapBnFA6L3U2VSc02ciDzoAJhJg=="],
+
+    "@babel/plugin-transform-classes/@babel/helper-compilation-targets/@babel/helper-validator-option": ["@babel/helper-validator-option@7.27.1", "", {}, "sha512-YvjJow9FxbhFFKDSuFnVCe2WxXk1zWc22fFePVNEaWJEu8IrZVlda6N0uHwzZrUM1il7NC9Mlp4MaJYbYd9JSg=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/helper-module-imports": ["@babel/helper-module-imports@7.28.6", "", { "dependencies": { "@babel/traverse": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-l5XkZK7r7wa9LucGw9LwZyyCUscb4x37JWTPz7swwFE/0FMQAGpiWUZn8u9DzkSBWEcK25jmvubfpw2dnAMdbw=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports/@babel/traverse": ["@babel/traverse@7.29.0", "", { "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", "@babel/helper-globals": "^7.28.0", "@babel/parser": "^7.29.0", "@babel/template": "^7.28.6", "@babel/types": "^7.29.0", "debug": "^4.3.1" } }, "sha512-4HPiQr0X7+waHfyXPZpWPfWL/J7dcN1mx9gL6WdQVMbPnF3+ZhSMs8tCxN7oHddJE9fhNE7+lxdnlyemKfJRuA=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
     "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/traverse": ["@babel/traverse@7.27.1", "", { "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.27.1", "@babel/parser": "^7.27.1", "@babel/template": "^7.27.1", "@babel/types": "^7.27.1", "debug": "^4.3.1", "globals": "^11.1.0" } }, "sha512-ZCYtZciz1IWJB4U61UPu4KEaqyfj+r5T1Q5mqPo+IBpcG9kHv30Z0aD8LXPgC1trYa6rK0orRyAhqUgk4MjmEg=="],
 
     "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/types": ["@babel/types@7.27.1", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.27.1" } }, "sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q=="],
@@ -2302,13 +3389,51 @@
 
     "@isaacs/cliui/wrap-ansi/ansi-styles": ["ansi-styles@6.2.1", "", {}, "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug=="],
 
+    "@lobehub/ui/framer-motion/motion-dom": ["motion-dom@12.12.1", "", { "dependencies": { "motion-utils": "^12.12.1" } }, "sha512-GXq/uUbZBEiFFE+K1Z/sxdPdadMdfJ/jmBALDfIuHGi0NmtealLOfH9FqT+6aNPgVx8ilq0DtYmyQlo6Uj9LKQ=="],
+
+    "@lobehub/ui/framer-motion/motion-utils": ["motion-utils@12.12.1", "", {}, "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w=="],
+
+    "@radix-ui/react-arrow/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw=="],
+
+    "@radix-ui/react-dismissable-layer/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw=="],
+
     "@radix-ui/react-popper/@floating-ui/react-dom/@floating-ui/dom": ["@floating-ui/dom@0.5.4", "", { "dependencies": { "@floating-ui/core": "^0.7.3" } }, "sha512-419BMceRLq0RrmTSDxn8hf9R3VCJv2K9PUfugh5JyEFmdjzDo+e8U5EdR8nzKq8Yj1htzLm3b6eQEEam3/rrtg=="],
 
-    "@radix-ui/react-primitive/@radix-ui/react-slot/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA=="],
+    "@radix-ui/react-popper/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw=="],
+
+    "@radix-ui/react-portal/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw=="],
+
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.0.1", "", { "dependencies": { "@babel/runtime": "^7.13.10", "@radix-ui/react-compose-refs": "1.0.0" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@react-native/codegen/@babel/parser/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@react-native/dev-middleware/open/is-docker": ["is-docker@2.2.1", "", { "bin": { "is-docker": "cli.js" } }, "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="],
+
+    "@react-native/dev-middleware/open/is-wsl": ["is-wsl@2.2.0", "", { "dependencies": { "is-docker": "^2.0.0" } }, "sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww=="],
+
+    "@tailwindcss/postcss/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
     "@vue/compiler-core/@babel/parser/@babel/types": ["@babel/types@7.28.5", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA=="],
 
-    "antd/scroll-into-view-if-needed/compute-scroll-into-view": ["compute-scroll-into-view@3.1.1", "", {}, "sha512-VRhuHOLoKYOy4UbilLbUzbYg93XLjv2PncJC50EuTWPA3gaja1UjBsUP/D/9/juV3vQFr6XBEzn9KCAHdUvOHw=="],
+    "accepts/mime-types/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
+
+    "chrome-launcher/is-wsl/is-docker": ["is-docker@2.2.1", "", { "bin": { "is-docker": "cli.js" } }, "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="],
+
+    "chromium-edge-launcher/is-wsl/is-docker": ["is-docker@2.2.1", "", { "bin": { "is-docker": "cli.js" } }, "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ=="],
+
+    "cliui/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+
+    "connect/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
 
     "cytoscape-fcose/cose-base/layout-base": ["layout-base@2.0.1", "", {}, "sha512-dp3s92+uNI1hWIpPGH3jK2kxE2lMjdXdr+DH8ynZHpd6PUlH6x6cbuXnoMmiNumznqaNO31xu9e79F0uuZ0JFg=="],
 
@@ -2322,31 +3447,161 @@
 
     "d3/d3-dsv/iconv-lite": ["iconv-lite@0.6.3", "", { "dependencies": { "safer-buffer": ">= 2.1.2 < 3.0.0" } }, "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw=="],
 
+    "finalhandler/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
+
+    "heroui-pro/find-up/locate-path": ["locate-path@7.2.0", "", { "dependencies": { "p-locate": "^6.0.0" } }, "sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA=="],
+
+    "heroui-pro/find-up/path-exists": ["path-exists@5.0.0", "", {}, "sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ=="],
+
+    "heroui-pro/find-up/unicorn-magic": ["unicorn-magic@0.1.0", "", {}, "sha512-lRfVq8fE8gz6QMBuDM6a+LO3IAzTi05H6gCVaUpir2E1Rwpo4ZUog45KpNXKC/Mn3Yb9UDuHumeFTo9iV/D9FQ=="],
+
     "leva/react-dropzone/file-selector": ["file-selector@0.5.0", "", { "dependencies": { "tslib": "^2.0.3" } }, "sha512-s8KNnmIDTBoD0p9uJ9uD0XY38SCeBOtj0UMXyQSLg1Ypfrfj8+dAvwsLjYQkQ2GjhVtp2HrnF5cJzMhBjfD8HA=="],
 
+    "lighthouse-logger/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
+
+    "metro-babel-transformer/hermes-parser/hermes-estree": ["hermes-estree@0.35.0", "", {}, "sha512-xVx5Opwy8Oo1I5yGpVRhCvWL/iV3M+ylksSKVNlxxD90cpDpR/AR1jLYqK8HWihm065a6UI3HeyAmYzwS8NOOg=="],
+
+    "metro-source-map/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "metro-source-map/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "metro-source-map/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "metro-source-map/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "metro-source-map/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "metro-source-map/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro-transform-plugins/@babel/generator/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "metro-transform-plugins/@babel/generator/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "metro-transform-plugins/@babel/template/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "metro-transform-plugins/@babel/template/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "metro-transform-plugins/@babel/template/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "metro-transform-plugins/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "metro-transform-plugins/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "metro-transform-plugins/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "metro-transform-worker/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "metro-transform-worker/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "metro/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro/hermes-parser/hermes-estree": ["hermes-estree@0.35.0", "", {}, "sha512-xVx5Opwy8Oo1I5yGpVRhCvWL/iV3M+ylksSKVNlxxD90cpDpR/AR1jLYqK8HWihm065a6UI3HeyAmYzwS8NOOg=="],
+
+    "metro/mime-types/mime-db": ["mime-db@1.54.0", "", {}, "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ=="],
+
     "mlly/pkg-types/confbox": ["confbox@0.1.8", "", {}, "sha512-RMtmw0iFkeR4YV+fUOSucriAQNb9g8zFR52MWCtl+cCZOFRNL6zeB395vPzFhEjjn4fMxXudmELnl/KF/WrK6w=="],
 
+    "next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
+
     "ora/strip-ansi/ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
 
+    "send/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="],
+
     "simplify-geojson/concat-stream/readable-stream": ["readable-stream@1.1.14", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.1", "isarray": "0.0.1", "string_decoder": "~0.10.x" } }, "sha512-+MeVjFf4L44XUkhM1eYbD8fyEsxcV81pqMSR5gblfcLCHfZvbrqy4/qYHE+/R5HoBUT11WV5O08Cr1n3YXkWVQ=="],
 
     "simplify-geojson/concat-stream/typedarray": ["typedarray@0.0.7", "", {}, "sha512-ueeb9YybpjhivjbHP2LdFDAjbS948fGEPj+ACAMs4xCMmh72OCOMQWBQKlaN4ZNQ04yfLSDLSx1tGRIoWimObQ=="],
 
     "string-width/strip-ansi/ansi-regex": ["ansi-regex@6.1.0", "", {}, "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA=="],
 
-    "sucrase/glob/jackspeak": ["jackspeak@3.4.3", "", { "dependencies": { "@isaacs/cliui": "^8.0.2" }, "optionalDependencies": { "@pkgjs/parseargs": "^0.11.0" } }, "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw=="],
+    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "sucrase/glob/minimatch": ["minimatch@9.0.5", "", { "dependencies": { "brace-expansion": "^2.0.1" } }, "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow=="],
+    "wrap-ansi/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "sucrase/glob/path-scurry": ["path-scurry@1.11.1", "", { "dependencies": { "lru-cache": "^10.2.0", "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0" } }, "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA=="],
+    "yargs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
 
-    "tailwindcss/chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
+    "@babel/helper-create-class-features-plugin/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
-    "tailwindcss/chokidar/readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
+    "@babel/helper-create-class-features-plugin/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
 
-    "wrap-ansi-cjs/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+    "@babel/helper-create-class-features-plugin/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
-    "wrap-ansi/string-width/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
+    "@babel/helper-member-expression-to-functions/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-remap-async-to-generator/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-replace-supers/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-replace-supers/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-replace-supers/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/helper-skip-transparent-expression-wrappers/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-wrap-function/@babel/template/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/helper-wrap-function/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/plugin-transform-async-generator-functions/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/plugin-transform-classes/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/plugin-transform-destructuring/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/helper-module-imports/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/traverse/@babel/types": ["@babel/types@7.29.0", "", { "dependencies": { "@babel/helper-string-parser": "^7.27.1", "@babel/helper-validator-identifier": "^7.28.5" } }, "sha512-LwdZHpScM4Qz8Xw2iKSzS+cfglZzJGvofQICy7W7v4caru4EaAmyUuO6BGrbyQ2mYV11W0U8j5mBhd14dd3B0A=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.29.0", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.28.5", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-9NhCeYjq9+3uxgdtp20LSiJXJvN0FeCtNGpJxuMFZ1Kv3cWUNb6DOhJwUvcVCzKGR66cw4njwM6hrJLqgOwbcw=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports/@babel/traverse/@babel/generator": ["@babel/generator@7.29.1", "", { "dependencies": { "@babel/parser": "^7.29.0", "@babel/types": "^7.29.0", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-qsaF+9Qcm2Qv8SRIMMscAvG4O3lJ0F1GuMo5HR/Bp02LopNgnZBC/EkbevHFeGs4ls/oPz9v+Bsmzbkbe+0dUw=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports/@babel/traverse/@babel/parser": ["@babel/parser@7.29.2", "", { "dependencies": { "@babel/types": "^7.29.0" }, "bin": "./bin/babel-parser.js" }, "sha512-4GgRzy/+fsBa72/RZVJmGKPmZu9Byn8o4MoLpmNe1m8ZfYnz5emHLQz3U4gLud6Zwl0RZIcgiLD7Uq7ySFuDLA=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports/@babel/traverse/@babel/template": ["@babel/template@7.28.6", "", { "dependencies": { "@babel/code-frame": "^7.28.6", "@babel/parser": "^7.28.6", "@babel/types": "^7.28.6" } }, "sha512-YA6Ma2KsCdGb+WC6UpBVFJGXL58MDA6oyONbjyF/+5sBgxY/dwkhLogbMT2GXXyU84/IhRw/2D1Os1B/giz+BQ=="],
 
     "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/traverse/@babel/code-frame": ["@babel/code-frame@7.27.1", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.27.1", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg=="],
 
@@ -2362,18 +3617,70 @@
 
     "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.27.1", "", {}, "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="],
 
+    "@radix-ui/react-arrow/@radix-ui/react-primitive/@radix-ui/react-slot/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA=="],
+
     "@radix-ui/react-popper/@floating-ui/react-dom/@floating-ui/dom/@floating-ui/core": ["@floating-ui/core@0.7.3", "", {}, "sha512-buc8BXHmG9l82+OQXOFU3Kr2XQx9ys01U/Q9HMIrZ300iLc8HLMgh7dcCqgYzAzf4BkoQvDcXf5Y+CuEZ5JBYg=="],
 
+    "@radix-ui/react-portal/@radix-ui/react-primitive/@radix-ui/react-slot/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA=="],
+
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive/@radix-ui/react-slot/@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.0.0", "", { "dependencies": { "@babel/runtime": "^7.13.10" }, "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0" } }, "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@react-native/babel-plugin-codegen/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@react-native/codegen/@babel/parser/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@react-native/codegen/@babel/parser/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
     "@vue/compiler-core/@babel/parser/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
 
     "@vue/compiler-core/@babel/parser/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
+    "heroui-pro/find-up/locate-path/p-locate": ["p-locate@6.0.0", "", { "dependencies": { "p-limit": "^4.0.0" } }, "sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw=="],
+
+    "metro-source-map/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro-transform-plugins/@babel/generator/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "metro-transform-plugins/@babel/generator/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro-transform-plugins/@babel/template/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro-transform-plugins/@babel/template/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "metro-transform-plugins/@babel/template/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro-transform-plugins/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "metro-transform-plugins/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "metro-transform-plugins/@babel/traverse/@babel/types/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
     "simplify-geojson/concat-stream/readable-stream/string_decoder": ["string_decoder@0.10.31", "", {}, "sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ=="],
 
-    "sucrase/glob/minimatch/brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="],
+    "@babel/plugin-transform-async-to-generator/@babel/helper-module-imports/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
+
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/helper-module-imports/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
 
-    "sucrase/glob/path-scurry/lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
+    "@babel/plugin-transform-modules-commonjs/@babel/helper-module-transforms/@babel/traverse/@babel/types/@babel/helper-string-parser": ["@babel/helper-string-parser@7.27.1", "", {}, "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA=="],
+
+    "@babel/plugin-transform-react-jsx/@babel/helper-module-imports/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.28.5", "", {}, "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q=="],
 
     "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/traverse/@babel/code-frame/@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.27.1", "", {}, "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow=="],
+
+    "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/traverse/@babel/generator/@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.8", "", { "dependencies": { "@jridgewell/set-array": "^1.2.1", "@jridgewell/sourcemap-codec": "^1.4.10", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA=="],
+
+    "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/traverse/@babel/generator/@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.25", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ=="],
+
+    "heroui-pro/find-up/locate-path/p-locate/p-limit": ["p-limit@4.0.0", "", { "dependencies": { "yocto-queue": "^1.0.0" } }, "sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ=="],
+
+    "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/traverse/@babel/generator/@jridgewell/gen-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
+    "@babel/plugin-transform-runtime/@babel/helper-module-imports/@babel/traverse/@babel/generator/@jridgewell/trace-mapping/@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.0", "", {}, "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ=="],
+
+    "heroui-pro/find-up/locate-path/p-locate/p-limit/yocto-queue": ["yocto-queue@1.2.2", "", {}, "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ=="],
   }
 }
diff --git a/web/hero-ui-migration-inventory.json b/web/hero-ui-migration-inventory.json
new file mode 100644
index 00000000000..1e981389389
--- /dev/null
+++ b/web/hero-ui-migration-inventory.json
@@ -0,0 +1,146 @@
+{
+  "compatShimFiles": {
+    "description": "These compatibility files re-export Semi-style components backed by HeroUI v3. They allow incremental migration without breaking pages that still use the legacy props (`checked`, `onChange`, `xs/sm/md/lg/xl`, render-prop Form, `Spin spinning`, etc.).",
+    "files": [
+      "web/src/components/common/ui/HeroCompat.jsx",
+      "web/src/components/common/ui/HeroIconsCompat.jsx",
+      "web/src/components/common/ui/HeroIllustrationsCompat.jsx",
+      "web/src/components/ui/semi.js",
+      "web/src/components/ui/semi-icons.js",
+      "web/src/components/common/ui/TableFilterForm.jsx"
+    ]
+  },
+  "sharedV3Components": [
+    "web/src/components/common/ui/ConfirmDialog.jsx — HeroUI v3 Modal-based confirm dialog (replaces Semi Popconfirm and Modal.confirm).",
+    "web/src/components/common/ui/HoverPanel.jsx — Hover-triggered popover (replaces Semi Popover trigger='hover').",
+    "web/src/components/common/ui/ClickMenu.jsx — Click-triggered dropdown menu (replaces Semi Dropdown trigger='click')."
+  ],
+  "compatBugsFixed": [
+    "Spin: now wraps children with overlay; previously returned null when spinning=false hiding everything inside.",
+    "Switch: now renders Switch.Control + Switch.Thumb anatomy; previously rendered a bare role=\"switch\" input with no visible toggle.",
+    "Col: now honors xs/sm/md/lg/xl/xxl breakpoint props via Tailwind responsive classes; previously fell back to span=24 (full width) ignoring all breakpoints.",
+    "Form: stable api ref, no more infinite update loop when controlled `values` is provided.",
+    "Form: supports render-prop children `({ values, formApi, formState }) => ...` used by SystemSetting.",
+    "useFormField: only backfills `initValue` once per field and skips it entirely in controlled mode (was the source of the infinite re-render).",
+    "Radio: added `Radio.Group` alias for legacy callers.",
+    "useTableFilterForm: stabilized `api` ref so freshly-allocated `initValues` literals from parents no longer trigger an infinite re-render loop on /console/token (and any other table using the hook).",
+    "Banner: now honors `description`, `title`, `closeIcon`, `fullMode`, `bordered` props from Semi UI; previously only rendered `children`, dropping the actual message text on every page that used the description prop.",
+    "withIcon (semi-icons): maps Semi-style string sizes (`small`, `default`, `large`, `extra-large`) to numeric pixel values; previously the literal string was forwarded to lucide-react which serialized it as a width/height attribute, blowing up the icon to e.g. 600+ pixels (caused the giant warning triangle on /console/models)."
+  ],
+  "filesStillImportingHeroCompat": 37,
+  "rewrittenToHeroUIv3": [
+    "web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx",
+    "web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx",
+    "web/src/pages/Setting/Operation/SettingsCheckin.jsx",
+    "web/src/pages/Setting/Operation/SettingsCreditLimit.jsx",
+    "web/src/pages/Setting/Operation/SettingsLog.jsx",
+    "web/src/pages/Setting/Operation/SettingsSensitiveWords.jsx",
+    "web/src/pages/Setting/Operation/SettingsMonitoring.jsx",
+    "web/src/pages/Setting/Operation/SettingsGeneral.jsx",
+    "web/src/components/settings/HttpStatusCodeRulesInput.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsDataDashboard.jsx",
+    "web/src/pages/Setting/Drawing/SettingsDrawing.jsx",
+    "web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.jsx",
+    "web/src/pages/Setting/Payment/SettingsGeneralPayment.jsx",
+    "web/src/pages/Setting/Payment/SettingsPaymentGateway.jsx",
+    "web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.jsx",
+    "web/src/pages/Setting/Model/SettingGlobalModel.jsx",
+    "web/src/pages/Setting/Model/SettingGeminiModel.jsx",
+    "web/src/pages/Setting/Model/SettingClaudeModel.jsx",
+    "web/src/pages/Setting/Model/SettingGrokModel.jsx",
+    "web/src/pages/Setting/Model/SettingModelDeployment.jsx",
+    "web/src/components/table/model-pricing/modal/components/ModelHeader.jsx",
+    "web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx",
+    "web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx",
+    "web/src/components/table/channels/modals/BatchTagModal.jsx",
+    "web/src/components/table/channels/ChannelsTabs.jsx",
+    "web/src/components/table/channels/index.jsx",
+    "web/src/components/table/models/ModelsTabs.jsx",
+    "web/src/components/table/models/components/SelectionNotification.jsx",
+    "web/src/components/table/models/index.jsx",
+    "web/src/components/table/models/modals/SyncWizardModal.jsx",
+    "web/src/components/table/models/modals/MissingModelsModal.jsx",
+    "web/src/components/table/models/modals/EditVendorModal.jsx",
+    "web/src/components/table/model-deployments/modals/ConfirmationDialog.jsx",
+    "web/src/components/table/model-pricing/modal/PricingFilterModal.jsx",
+    "web/src/components/table/subscriptions/index.jsx",
+    "web/src/pages/Setting/Ratio/components/AutoGroupList.jsx",
+    "web/src/pages/Setting/Ratio/components/GroupTable.jsx",
+    "web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx",
+    "web/src/components/table/model-pricing/view/table/PricingTable.jsx",
+    "web/src/components/table/channels/modals/CodexOAuthModal.jsx",
+    "web/src/components/table/channels/modals/SingleModelSelectModal.jsx",
+    "web/src/components/table/model-deployments/modals/EditDeploymentModal.jsx",
+    "web/src/components/table/models/modals/PrefillGroupManagement.jsx",
+    "web/src/pages/Setting/Ratio/components/GroupGroupRatioRules.jsx",
+    "web/src/pages/Setting/Ratio/components/GroupSpecialUsableRules.jsx",
+    "web/src/components/table/users/modals/AddUserModal.jsx",
+    "web/src/components/table/models/ModelsActions.jsx",
+    "web/src/helpers/utils.jsx",
+    "web/src/helpers/render.jsx",
+    "web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx",
+    "web/src/components/table/channels/ChannelsActions.jsx",
+    "web/src/components/table/users/UsersColumnDefs.jsx",
+    "web/src/components/table/subscriptions/SubscriptionsColumnDefs.jsx",
+    "web/src/components/table/models/ModelsColumnDefs.jsx",
+    "web/src/pages/Setting/Ratio/ModelRatioSettings.jsx",
+    "web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx",
+    "web/src/components/table/channels/modals/ChannelUpstreamUpdateModal.jsx",
+    "web/src/components/table/models/modals/UpstreamConflictModal.jsx",
+    "web/src/components/table/models/modals/EditPrefillGroupModal.jsx",
+    "web/src/components/table/users/modals/UserBindingManagementModal.jsx",
+    "web/src/components/table/users/modals/UserSubscriptionsModal.jsx",
+    "web/src/components/settings/personal/cards/CheckinCalendar.jsx",
+    "web/src/components/table/redemptions/modals/EditRedemptionModal.jsx",
+    "web/src/components/settings/ChannelSelectorModal.jsx",
+    "web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsFAQ.jsx",
+    "web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsUptimeKuma.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsAPIInfo.jsx",
+    "web/src/pages/Setting/Dashboard/SettingsAnnouncements.jsx",
+    "web/src/components/table/task-logs/TaskLogsColumnDefs.jsx",
+    "web/src/components/table/mj-logs/MjLogsColumnDefs.jsx"
+  ],
+  "v3ApiNotes": {
+    "Switch": "Compound component — needs <Switch.Control><Switch.Thumb /></Switch.Control>; uses isSelected + onChange(value) (NOT onValueChange).",
+    "Input": "Thin wrapper over react-aria-components Input — accepts standard HTML props (value, onChange={(e) => ...}, disabled). Does NOT support onValueChange or isDisabled.",
+    "TextArea": "Same as Input — wrapper over react-aria-components TextArea. Use rows attr instead of minRows/maxRows. For complex layouts use a plain <textarea> with Tailwind classes.",
+    "Button": "Wrapper over react-aria-components Button. Loading prop is isPending (NOT isLoading). Uses onPress (not onClick), color, variant, size, isDisabled, isIconOnly, fullWidth.",
+    "Modal": "Uses compound Modal/ModalBackdrop/ModalContainer/ModalDialog/ModalHeader/ModalBody/ModalFooter + useOverlayState({ isOpen, onOpenChange }) — see ConfirmDialog.jsx for the canonical example."
+  },
+  "verifiedRendering": [
+    "/console (Dashboard)",
+    "/console/personal",
+    "/console/topup",
+    "/console/channel",
+    "/console/token",
+    "/console/log",
+    "/console/midjourney",
+    "/console/task",
+    "/console/redemption",
+    "/console/user",
+    "/console/playground",
+    "/console/models",
+    "/console/deployment",
+    "/console/subscription",
+    "/console/setting?tab=operation",
+    "/console/setting?tab=dashboard",
+    "/console/setting?tab=chats",
+    "/console/setting?tab=drawing",
+    "/console/setting?tab=payment",
+    "/console/setting?tab=ratio",
+    "/console/setting?tab=ratelimit",
+    "/console/setting?tab=models",
+    "/console/setting?tab=model-deployment",
+    "/console/setting?tab=performance",
+    "/console/setting?tab=system",
+    "/console/setting?tab=other",
+    "/pricing"
+  ],
+  "summary": {
+    "remainingHeroCompatImporters": 37,
+    "compatShimFunctional": true,
+    "criticalRenderBugsFixed": true
+  }
+}
diff --git a/web/package.json b/web/package.json
index 83b5d23049b..97959a97125 100644
--- a/web/package.json
+++ b/web/package.json
@@ -4,15 +4,22 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@douyinfe/semi-icons": "^2.63.1",
-    "@douyinfe/semi-ui": "^2.69.1",
+    "@gravity-ui/icons": "^2.18.0",
+    "@heroui-pro/react": "^1.0.0-beta.1",
+    "@heroui/react": ">=3.0.0",
+    "@heroui/styles": ">=3.0.0",
     "@lobehub/icons": "^2.0.0",
+    "@number-flow/react": ">=0.5.0",
     "@visactor/react-vchart": "~1.8.8",
     "@visactor/vchart": "~1.8.8",
-    "@visactor/vchart-semi-theme": "~1.8.8",
     "axios": "1.15.0",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.11",
+    "embla-carousel": ">=8.6.0",
+    "embla-carousel-react": ">=8.6.0",
+    "geist": "^1.7.0",
+    "heroui-native": "^1.0.2",
+    "heroui-native-pro": "^1.0.0-beta.1",
     "history": "^5.3.0",
     "i18next": "^23.16.8",
     "i18next-browser-languagedetector": "^7.2.0",
@@ -20,24 +27,29 @@
     "lucide-react": "^0.511.0",
     "marked": "^4.1.1",
     "mermaid": "^11.6.0",
+    "motion": ">=12.12.0",
     "qrcode.react": "^4.2.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.1.0",
+    "react-aria-components": ">=1.17.0",
+    "react-dom": "^19.1.0",
     "react-dropzone": "^14.2.3",
     "react-fireworks": "^1.0.4",
     "react-i18next": "^13.0.0",
     "react-icons": "^5.5.0",
     "react-markdown": "^10.1.0",
+    "react-resizable-panels": ">=4.10.0",
     "react-router-dom": "^6.3.0",
     "react-telegram-login": "^1.1.2",
-    "react-toastify": "^9.0.8",
     "react-turnstile": "^1.0.5",
+    "recharts": ">=2.0.0",
     "rehype-highlight": "^7.0.2",
     "rehype-katex": "^7.0.1",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "remark-math": "^6.0.0",
     "sse.js": "^2.6.0",
+    "tailwind-merge": ">=3.4.0",
+    "tailwind-variants": ">=3.2.0",
     "unist-util-visit": "^5.0.0",
     "use-debounce": "^10.0.4"
   },
@@ -73,10 +85,11 @@
     ]
   },
   "devDependencies": {
-    "@douyinfe/vite-plugin-semi": "^2.74.0-alpha.6",
     "@so1ve/prettier-config": "^3.1.0",
+    "@tailwindcss/postcss": "^4.1.5",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.21",
+    "bcryptjs": "^3.0.3",
     "code-inspector-plugin": "^1.3.3",
     "eslint": "8.57.0",
     "eslint-plugin-header": "^3.1.1",
@@ -84,7 +97,7 @@
     "i18next-cli": "^1.10.3",
     "postcss": "^8.5.3",
     "prettier": "^3.0.0",
-    "tailwindcss": "^3",
+    "tailwindcss": "^4.1.5",
     "typescript": "4.4.2",
     "vite": "^5.2.0"
   },
@@ -92,5 +105,10 @@
     "singleQuote": true,
     "jsxSingleQuote": true
   },
-  "proxy": "http://localhost:3000"
+  "proxy": "http://localhost:3000",
+  "trustedDependencies": [
+    "heroui-pro",
+    "@heroui-pro/react",
+    "heroui-native-pro"
+  ]
 }
diff --git a/web/postcss.config.js b/web/postcss.config.js
index 5731ce76eb1..d25d63e3a98 100644
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 export default {
   plugins: {
-    tailwindcss: {},
+    '@tailwindcss/postcss': {},
     autoprefixer: {},
   },
 };
diff --git a/web/src/App.jsx b/web/src/App.jsx
index a5d1ebc00b3..fbe92c5edd7 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -64,6 +64,9 @@ function DynamicOAuth2Callback() {
 function App() {
   const location = useLocation();
   const [statusState] = useContext(StatusContext);
+  const routesKey = location.pathname.startsWith('/console')
+    ? `${location.pathname}${location.search}`
+    : 'public-routes';
 
   // 获取模型广场权限配置
   const pricingRequireAuth = useMemo(() => {
@@ -89,7 +92,7 @@ function App() {
 
   return (
     <SetupCheck>
-      <Routes>
+      <Routes key={routesKey}>
         <Route
           path='/'
           element={
diff --git a/web/src/components/auth/AuthLayout.jsx b/web/src/components/auth/AuthLayout.jsx
new file mode 100644
index 00000000000..8780efd27ef
--- /dev/null
+++ b/web/src/components/auth/AuthLayout.jsx
@@ -0,0 +1,318 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Button,
+  Card,
+  Checkbox,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Separator,
+  useOverlayState,
+} from '@heroui/react';
+
+export function AuthPage({ children, turnstile }) {
+  return (
+    <div className='relative overflow-hidden bg-[radial-gradient(circle_at_top_right,rgba(14,165,233,0.15),transparent_26%),radial-gradient(circle_at_bottom_left,rgba(59,130,246,0.18),transparent_24%),var(--app-background)] px-4 py-12 sm:px-6 lg:px-8'>
+      <div
+        className='blur-ball blur-ball-indigo'
+        style={{ top: '-80px', right: '-80px', transform: 'none' }}
+      />
+      <div className='blur-ball blur-ball-teal' style={{ top: '50%', left: '-120px' }} />
+      <div className='relative mx-auto mt-[60px] flex min-h-[calc(100vh-108px)] w-full max-w-md flex-col items-center justify-center'>
+        {children}
+        {turnstile ? <div className='mt-6 flex justify-center'>{turnstile}</div> : null}
+      </div>
+    </div>
+  );
+}
+
+export function AuthBrand({ logo, systemName }) {
+  return (
+    <div className='mb-6 flex items-center justify-center gap-3'>
+      <img
+        src={logo}
+        alt={systemName}
+        className='h-11 w-11 rounded-2xl border border-border bg-background p-1.5 shadow-sm'
+      />
+      <div className='text-xl font-semibold tracking-tight text-foreground'>
+        {systemName}
+      </div>
+    </div>
+  );
+}
+
+export function AuthPanel({ title, subtitle, children, className = '' }) {
+  return (
+    <Card className={`w-full rounded-[28px] border border-border bg-background/88 px-5 py-6 shadow-[0_28px_90px_rgba(15,23,42,0.16)] backdrop-blur-xl ${className}`}>
+      <div className='mb-6 text-center'>
+        <h1 className='text-2xl font-semibold tracking-tight text-foreground'>
+          {title}
+        </h1>
+        {subtitle ? (
+          <p className='mt-2 text-sm leading-6 text-muted'>
+            {subtitle}
+          </p>
+        ) : null}
+      </div>
+      {children}
+    </Card>
+  );
+}
+
+export function AuthDivider({ children }) {
+  return (
+    <div className='my-5 flex items-center gap-4'>
+      <Separator className='flex-1 bg-border' />
+      <span className='text-xs font-medium uppercase tracking-[0.22em] text-muted'>
+        {children}
+      </span>
+      <Separator className='flex-1 bg-border' />
+    </div>
+  );
+}
+
+export function AuthAgreement({
+  checked,
+  onChange,
+  hasUserAgreement,
+  hasPrivacyPolicy,
+  t,
+}) {
+  if (!hasUserAgreement && !hasPrivacyPolicy) return null;
+
+  return (
+    <div className='pt-3'>
+      <Checkbox
+        isSelected={checked}
+        onValueChange={onChange}
+        classNames={{
+          base: 'items-start',
+          label: 'text-sm leading-6 text-muted',
+        }}
+      >
+        <>
+          {t('我已阅读并同意')}
+          {hasUserAgreement ? (
+            <a
+              href='/user-agreement'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='mx-1 font-medium text-primary transition hover:text-primary/80'
+            >
+              {t('用户协议')}
+            </a>
+          ) : null}
+          {hasUserAgreement && hasPrivacyPolicy ? t('和') : null}
+          {hasPrivacyPolicy ? (
+            <a
+              href='/privacy-policy'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='mx-1 font-medium text-primary transition hover:text-primary/80'
+            >
+              {t('隐私政策')}
+            </a>
+          ) : null}
+        </>
+      </Checkbox>
+    </div>
+  );
+}
+
+export function AuthLinkRow({ prefix, linkText, to }) {
+  return (
+    <div className='mt-6 text-center text-sm text-muted'>
+      {prefix}{' '}
+      <a href={to} className='font-medium text-primary transition hover:text-primary/80'>
+        {linkText}
+      </a>
+    </div>
+  );
+}
+
+export function AuthPrimaryButton({
+  children,
+  className = '',
+  ...props
+}) {
+  return (
+    <Button
+      variant='primary'
+      size='lg'
+      className={`h-12 w-full rounded-full font-medium ${className}`}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function AuthOutlineButton({
+  children,
+  className = '',
+  ...props
+}) {
+  return (
+    <Button
+      variant='outline'
+      size='lg'
+      className={`h-12 w-full rounded-full border-border bg-background/80 font-medium text-foreground hover:bg-surface-secondary ${className}`}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function AuthGhostButton({
+  children,
+  className = '',
+  ...props
+}) {
+  return (
+    <Button
+      variant='ghost'
+      size='lg'
+      className={`h-12 w-full rounded-full font-medium text-muted hover:text-foreground ${className}`}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+}
+
+export function AuthTextField({
+  label,
+  icon,
+  action,
+  className = '',
+  inputClassName = '',
+  onChange,
+  onValueChange,
+  name,
+  ...props
+}) {
+  const handleValueChange = (eventOrValue) => {
+    const value = eventOrValue?.target
+      ? eventOrValue.target.value
+      : eventOrValue;
+
+    onValueChange?.(value);
+    onChange?.(
+      eventOrValue?.target
+        ? eventOrValue
+        : {
+            target: {
+              name,
+              value,
+            },
+          },
+    );
+  };
+
+  return (
+    <label className={`block text-sm font-medium text-foreground ${className}`}>
+      <span className='mb-1.5 block'>{label}</span>
+      <div className='relative flex items-center'>
+        {icon ? (
+          <span className='pointer-events-none absolute left-3 z-10 text-muted'>
+            {icon}
+          </span>
+        ) : null}
+        <Input
+          fullWidth
+          className={`h-12 rounded-2xl border border-border bg-background/85 text-foreground shadow-sm outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10 ${icon ? 'pl-10' : ''} ${action ? 'pr-32' : ''} ${inputClassName}`}
+          name={name}
+          onChange={handleValueChange}
+          onValueChange={handleValueChange}
+          {...props}
+        />
+        {action ? (
+          <div className='absolute right-1.5 z-10 flex items-center'>
+            {action}
+          </div>
+        ) : null}
+      </div>
+    </label>
+  );
+}
+
+export function AuthModal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  onConfirm,
+  confirmText,
+  cancelText,
+  isConfirmLoading,
+  footer,
+  size = 'sm',
+  isDismissable = true,
+}) {
+  const modalState = useOverlayState({
+    isOpen,
+    onOpenChange: (nextOpen) => {
+      if (!nextOpen) onClose?.();
+    },
+  });
+
+  return (
+    <Modal state={modalState}>
+      <ModalBackdrop isDismissable={isDismissable} variant='blur'>
+        <ModalContainer size={size} placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            {title ? (
+              <ModalHeader className='border-b border-border'>
+                {title}
+              </ModalHeader>
+            ) : null}
+            <ModalBody className='px-6 py-5'>{children}</ModalBody>
+            {footer !== null ? (
+              <ModalFooter className='border-t border-border'>
+                {footer || (
+                  <>
+                    <Button variant='ghost' onPress={onClose}>
+                      {cancelText}
+                    </Button>
+                    <Button
+                      isPending={isConfirmLoading}
+                      variant='primary'
+                      onPress={onConfirm}
+                    >
+                      {confirmText}
+                    </Button>
+                  </>
+                )}
+              </ModalFooter>
+            ) : null}
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
+    </Modal>
+  );
+}
diff --git a/web/src/components/auth/LoginForm.jsx b/web/src/components/auth/LoginForm.jsx
index 7e8c0ce017f..f52c3f7eda7 100644
--- a/web/src/components/auth/LoginForm.jsx
+++ b/web/src/components/auth/LoginForm.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Link, useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { UserContext } from '../../context/User';
 import { StatusContext } from '../../context/Status';
 import {
@@ -41,31 +41,27 @@ import {
   isPasskeySupported,
 } from '../../helpers';
 import Turnstile from 'react-turnstile';
-import {
-  Button,
-  Card,
-  Checkbox,
-  Divider,
-  Form,
-  Icon,
-  Modal,
-} from '@douyinfe/semi-ui';
-import Title from '@douyinfe/semi-ui/lib/es/typography/title';
-import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 import TelegramLoginButton from 'react-telegram-login';
-
-import {
-  IconGithubLogo,
-  IconMail,
-  IconLock,
-  IconKey,
-} from '@douyinfe/semi-icons';
 import OIDCIcon from '../common/logo/OIDCIcon';
 import WeChatIcon from '../common/logo/WeChatIcon';
 import LinuxDoIcon from '../common/logo/LinuxDoIcon';
 import TwoFAVerification from './TwoFAVerification';
 import { useTranslation } from 'react-i18next';
-import { SiDiscord } from 'react-icons/si';
+import { SiDiscord, SiGithub } from 'react-icons/si';
+import { KeyRound, LockKeyhole, Mail } from 'lucide-react';
+import {
+  AuthAgreement,
+  AuthBrand,
+  AuthDivider,
+  AuthGhostButton,
+  AuthLinkRow,
+  AuthModal,
+  AuthOutlineButton,
+  AuthPage,
+  AuthPanel,
+  AuthPrimaryButton,
+  AuthTextField,
+} from './AuthLayout';
 
 const LoginForm = () => {
   let navigate = useNavigate();
@@ -249,11 +245,7 @@ const LoginForm = () => {
           updateAPI();
           showSuccess('登录成功！');
           if (username === 'root' && password === '123456') {
-            Modal.error({
-              title: '您正在使用默认密码！',
-              content: '请立刻修改默认密码！',
-              centered: true,
-            });
+            showError('您正在使用默认密码！请立刻修改默认密码！');
           }
           navigate('/console');
         } else {
@@ -502,58 +494,39 @@ const LoginForm = () => {
 
   const renderOAuthOptions = () => {
     return (
-      <div className='flex flex-col items-center'>
-        <div className='w-full max-w-md'>
-          <div className='flex items-center justify-center mb-6 gap-2'>
-            <img src={logo} alt='Logo' className='h-10 rounded-full' />
-            <Title heading={3} className='!text-gray-800'>
-              {systemName}
-            </Title>
-          </div>
-
-          <Card className='border-0 !rounded-2xl overflow-hidden'>
-            <div className='flex justify-center pt-6 pb-2'>
-              <Title heading={3} className='text-gray-800 dark:text-gray-200'>
-                {t('登 录')}
-              </Title>
-            </div>
-            <div className='px-2 py-8'>
-              <div className='space-y-3'>
+      <>
+        <AuthBrand logo={logo} systemName={systemName} />
+        <AuthPanel
+          title={t('登 录')}
+          subtitle={t('选择一种方式继续进入控制台。')}
+        >
+          <div className='space-y-3'>
                 {status.wechat_login && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={
-                      <Icon svg={<WeChatIcon />} style={{ color: '#07C160' }} />
+                  <AuthOutlineButton
+                    startContent={
+                      <WeChatIcon style={{ color: '#07C160' }} />
                     }
-                    onClick={onWeChatLoginClicked}
-                    loading={wechatLoading}
+                    onPress={onWeChatLoginClicked}
+                    isPending={wechatLoading}
                   >
-                    <span className='ml-3'>{t('使用 微信 继续')}</span>
-                  </Button>
+                    {t('使用 微信 继续')}
+                  </AuthOutlineButton>
                 )}
 
                 {status.github_oauth && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={<IconGithubLogo size='large' />}
-                    onClick={handleGitHubClick}
-                    loading={githubLoading}
-                    disabled={githubButtonDisabled}
+                  <AuthOutlineButton
+                    startContent={<SiGithub size={20} />}
+                    onPress={handleGitHubClick}
+                    isPending={githubLoading}
+                    isDisabled={githubButtonDisabled}
                   >
-                    <span className='ml-3'>{githubButtonText}</span>
-                  </Button>
+                    {githubButtonText}
+                  </AuthOutlineButton>
                 )}
 
                 {status.discord_oauth && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={
+                  <AuthOutlineButton
+                    startContent={
                       <SiDiscord
                         style={{
                           color: '#5865F2',
@@ -562,32 +535,26 @@ const LoginForm = () => {
                         }}
                       />
                     }
-                    onClick={handleDiscordClick}
-                    loading={discordLoading}
+                    onPress={handleDiscordClick}
+                    isPending={discordLoading}
                   >
-                    <span className='ml-3'>{t('使用 Discord 继续')}</span>
-                  </Button>
+                    {t('使用 Discord 继续')}
+                  </AuthOutlineButton>
                 )}
 
                 {status.oidc_enabled && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={<OIDCIcon style={{ color: '#1877F2' }} />}
-                    onClick={handleOIDCClick}
-                    loading={oidcLoading}
+                  <AuthOutlineButton
+                    startContent={<OIDCIcon style={{ color: '#1877F2' }} />}
+                    onPress={handleOIDCClick}
+                    isPending={oidcLoading}
                   >
-                    <span className='ml-3'>{t('使用 OIDC 继续')}</span>
-                  </Button>
+                    {t('使用 OIDC 继续')}
+                  </AuthOutlineButton>
                 )}
 
                 {status.linuxdo_oauth && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={
+                  <AuthOutlineButton
+                    startContent={
                       <LinuxDoIcon
                         style={{
                           color: '#E95420',
@@ -596,28 +563,23 @@ const LoginForm = () => {
                         }}
                       />
                     }
-                    onClick={handleLinuxDOClick}
-                    loading={linuxdoLoading}
+                    onPress={handleLinuxDOClick}
+                    isPending={linuxdoLoading}
                   >
-                    <span className='ml-3'>{t('使用 LinuxDO 继续')}</span>
-                  </Button>
+                    {t('使用 LinuxDO 继续')}
+                  </AuthOutlineButton>
                 )}
 
                 {status.custom_oauth_providers &&
                   status.custom_oauth_providers.map((provider) => (
-                    <Button
+                    <AuthOutlineButton
                       key={provider.slug}
-                      theme='outline'
-                      className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                      type='tertiary'
-                      icon={getOAuthProviderIcon(provider.icon || '', 20)}
-                      onClick={() => handleCustomOAuthClick(provider)}
-                      loading={customOAuthLoading[provider.slug]}
+                      startContent={getOAuthProviderIcon(provider.icon || '', 20)}
+                      onPress={() => handleCustomOAuthClick(provider)}
+                      isPending={customOAuthLoading[provider.slug]}
                     >
-                      <span className='ml-3'>
-                        {t('使用 {{name}} 继续', { name: provider.name })}
-                      </span>
-                    </Button>
+                      {t('使用 {{name}} 继续', { name: provider.name })}
+                    </AuthOutlineButton>
                   ))}
 
                 {status.telegram_oauth && (
@@ -630,259 +592,161 @@ const LoginForm = () => {
                 )}
 
                 {status.passkey_login && passkeySupported && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={<IconKey size='large' />}
-                    onClick={handlePasskeyLogin}
-                    loading={passkeyLoading}
+                  <AuthOutlineButton
+                    startContent={<KeyRound size={20} />}
+                    onPress={handlePasskeyLogin}
+                    isPending={passkeyLoading}
                   >
-                    <span className='ml-3'>{t('使用 Passkey 登录')}</span>
-                  </Button>
+                    {t('使用 Passkey 登录')}
+                  </AuthOutlineButton>
                 )}
 
-                <Divider margin='12px' align='center'>
-                  {t('或')}
-                </Divider>
-
-                <Button
-                  theme='solid'
-                  type='primary'
-                  className='w-full h-12 flex items-center justify-center bg-black text-white !rounded-full hover:bg-gray-800 transition-colors'
-                  icon={<IconMail size='large' />}
-                  onClick={handleEmailLoginClick}
-                  loading={emailLoginLoading}
+                <AuthDivider>{t('或')}</AuthDivider>
+
+                <AuthPrimaryButton
+                  startContent={<Mail size={20} />}
+                  onPress={handleEmailLoginClick}
+                  isPending={emailLoginLoading}
+                  className='bg-foreground text-background'
                 >
-                  <span className='ml-3'>{t('使用 邮箱或用户名 登录')}</span>
-                </Button>
+                  {t('使用 邮箱或用户名 登录')}
+                </AuthPrimaryButton>
               </div>
 
-              {(hasUserAgreement || hasPrivacyPolicy) && (
-                <div className='mt-6'>
-                  <Checkbox
-                    checked={agreedToTerms}
-                    onChange={(e) => setAgreedToTerms(e.target.checked)}
-                  >
-                    <Text size='small' className='text-gray-600'>
-                      {t('我已阅读并同意')}
-                      {hasUserAgreement && (
-                        <>
-                          <a
-                            href='/user-agreement'
-                            target='_blank'
-                            rel='noopener noreferrer'
-                            className='text-blue-600 hover:text-blue-800 mx-1'
-                          >
-                            {t('用户协议')}
-                          </a>
-                        </>
-                      )}
-                      {hasUserAgreement && hasPrivacyPolicy && t('和')}
-                      {hasPrivacyPolicy && (
-                        <>
-                          <a
-                            href='/privacy-policy'
-                            target='_blank'
-                            rel='noopener noreferrer'
-                            className='text-blue-600 hover:text-blue-800 mx-1'
-                          >
-                            {t('隐私政策')}
-                          </a>
-                        </>
-                      )}
-                    </Text>
-                  </Checkbox>
-                </div>
-              )}
+          <AuthAgreement
+            checked={agreedToTerms}
+            onChange={setAgreedToTerms}
+            hasUserAgreement={hasUserAgreement}
+            hasPrivacyPolicy={hasPrivacyPolicy}
+            t={t}
+          />
 
               {!status.self_use_mode_enabled && (
-                <div className='mt-6 text-center text-sm'>
-                  <Text>
-                    {t('没有账户？')}{' '}
-                    <Link
-                      to='/register'
-                      className='text-blue-600 hover:text-blue-800 font-medium'
-                    >
-                      {t('注册')}
-                    </Link>
-                  </Text>
-                </div>
+                <AuthLinkRow
+                  prefix={t('没有账户？')}
+                  linkText={t('注册')}
+                  to='/register'
+                />
               )}
-            </div>
-          </Card>
-        </div>
-      </div>
+        </AuthPanel>
+      </>
     );
   };
 
   const renderEmailLoginForm = () => {
     return (
-      <div className='flex flex-col items-center'>
-        <div className='w-full max-w-md'>
-          <div className='flex items-center justify-center mb-6 gap-2'>
-            <img src={logo} alt='Logo' className='h-10 rounded-full' />
-            <Title heading={3}>{systemName}</Title>
-          </div>
-
-          <Card className='border-0 !rounded-2xl overflow-hidden'>
-            <div className='flex justify-center pt-6 pb-2'>
-              <Title heading={3} className='text-gray-800 dark:text-gray-200'>
-                {t('登 录')}
-              </Title>
-            </div>
-            <div className='px-2 py-8'>
+      <>
+        <AuthBrand logo={logo} systemName={systemName} />
+        <AuthPanel
+          title={t('登 录')}
+          subtitle={t('使用你的账户信息继续，或切换到更快捷的登录方式。')}
+        >
               {status.passkey_login && passkeySupported && (
-                <Button
-                  theme='outline'
-                  type='tertiary'
-                  className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors mb-4'
-                  icon={<IconKey size='large' />}
-                  onClick={handlePasskeyLogin}
-                  loading={passkeyLoading}
+                <AuthOutlineButton
+                  startContent={<KeyRound size={20} />}
+                  onPress={handlePasskeyLogin}
+                  isPending={passkeyLoading}
+                  className='mb-4'
                 >
-                  <span className='ml-3'>{t('使用 Passkey 登录')}</span>
-                </Button>
+                  {t('使用 Passkey 登录')}
+                </AuthOutlineButton>
               )}
-              <Form className='space-y-3'>
-                <Form.Input
-                  field='username'
+              <form
+                className='space-y-3'
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  handleSubmit();
+                }}
+              >
+                <AuthTextField
                   label={t('用户名或邮箱')}
                   placeholder={t('请输入您的用户名或邮箱地址')}
                   name='username'
-                  onChange={(value) => handleChange('username', value)}
-                  prefix={<IconMail />}
+                  value={username}
+                  onChange={(event) =>
+                    handleChange('username', event.target.value)
+                  }
+                  icon={<Mail size={18} />}
                 />
 
-                <Form.Input
-                  field='password'
+                <AuthTextField
                   label={t('密码')}
                   placeholder={t('请输入您的密码')}
                   name='password'
-                  mode='password'
-                  onChange={(value) => handleChange('password', value)}
-                  prefix={<IconLock />}
+                  type='password'
+                  value={password}
+                  onChange={(event) =>
+                    handleChange('password', event.target.value)
+                  }
+                  icon={<LockKeyhole size={18} />}
                 />
 
-                {(hasUserAgreement || hasPrivacyPolicy) && (
-                  <div className='pt-4'>
-                    <Checkbox
-                      checked={agreedToTerms}
-                      onChange={(e) => setAgreedToTerms(e.target.checked)}
-                    >
-                      <Text size='small' className='text-gray-600'>
-                        {t('我已阅读并同意')}
-                        {hasUserAgreement && (
-                          <>
-                            <a
-                              href='/user-agreement'
-                              target='_blank'
-                              rel='noopener noreferrer'
-                              className='text-blue-600 hover:text-blue-800 mx-1'
-                            >
-                              {t('用户协议')}
-                            </a>
-                          </>
-                        )}
-                        {hasUserAgreement && hasPrivacyPolicy && t('和')}
-                        {hasPrivacyPolicy && (
-                          <>
-                            <a
-                              href='/privacy-policy'
-                              target='_blank'
-                              rel='noopener noreferrer'
-                              className='text-blue-600 hover:text-blue-800 mx-1'
-                            >
-                              {t('隐私政策')}
-                            </a>
-                          </>
-                        )}
-                      </Text>
-                    </Checkbox>
-                  </div>
-                )}
+                <AuthAgreement
+                  checked={agreedToTerms}
+                  onChange={setAgreedToTerms}
+                  hasUserAgreement={hasUserAgreement}
+                  hasPrivacyPolicy={hasPrivacyPolicy}
+                  t={t}
+                />
 
                 <div className='space-y-2 pt-2'>
-                  <Button
-                    theme='solid'
-                    className='w-full !rounded-full'
-                    type='primary'
-                    htmlType='submit'
-                    onClick={handleSubmit}
-                    loading={loginLoading}
-                    disabled={
+                  <AuthPrimaryButton
+                    onPress={handleSubmit}
+                    isPending={loginLoading}
+                    isDisabled={
                       (hasUserAgreement || hasPrivacyPolicy) && !agreedToTerms
                     }
                   >
                     {t('继续')}
-                  </Button>
-
-                  <Button
-                    theme='borderless'
-                    type='tertiary'
-                    className='w-full !rounded-full'
-                    onClick={handleResetPasswordClick}
-                    loading={resetPasswordLoading}
+                  </AuthPrimaryButton>
+
+                  <AuthGhostButton
+                    onPress={handleResetPasswordClick}
+                    isPending={resetPasswordLoading}
                   >
                     {t('忘记密码？')}
-                  </Button>
+                  </AuthGhostButton>
                 </div>
-              </Form>
+              </form>
 
               {hasOAuthLoginOptions && (
                 <>
-                  <Divider margin='12px' align='center'>
-                    {t('或')}
-                  </Divider>
+                  <AuthDivider>{t('或')}</AuthDivider>
 
                   <div className='mt-4 text-center'>
-                    <Button
-                      theme='outline'
-                      type='tertiary'
-                      className='w-full !rounded-full'
-                      onClick={handleOtherLoginOptionsClick}
-                      loading={otherLoginOptionsLoading}
+                    <AuthOutlineButton
+                      onPress={handleOtherLoginOptionsClick}
+                      isPending={otherLoginOptionsLoading}
                     >
                       {t('其他登录选项')}
-                    </Button>
+                    </AuthOutlineButton>
                   </div>
                 </>
               )}
 
               {!status.self_use_mode_enabled && (
-                <div className='mt-6 text-center text-sm'>
-                  <Text>
-                    {t('没有账户？')}{' '}
-                    <Link
-                      to='/register'
-                      className='text-blue-600 hover:text-blue-800 font-medium'
-                    >
-                      {t('注册')}
-                    </Link>
-                  </Text>
-                </div>
+                <AuthLinkRow
+                  prefix={t('没有账户？')}
+                  linkText={t('注册')}
+                  to='/register'
+                />
               )}
-            </div>
-          </Card>
-        </div>
-      </div>
+        </AuthPanel>
+      </>
     );
   };
 
   // 微信登录模态框
   const renderWeChatLoginModal = () => {
     return (
-      <Modal
+      <AuthModal
         title={t('微信扫码登录')}
-        visible={showWeChatLoginModal}
-        maskClosable={true}
-        onOk={onSubmitWeChatVerificationCode}
-        onCancel={() => setShowWeChatLoginModal(false)}
-        okText={t('登录')}
-        centered={true}
-        okButtonProps={{
-          loading: wechatCodeSubmitLoading,
-        }}
+        isOpen={showWeChatLoginModal}
+        onClose={() => setShowWeChatLoginModal(false)}
+        onConfirm={onSubmitWeChatVerificationCode}
+        confirmText={t('登录')}
+        cancelText={t('取消')}
+        isConfirmLoading={wechatCodeSubmitLoading}
       >
         <div className='flex flex-col items-center'>
           <img src={status.wechat_qrcode} alt='微信二维码' className='mb-4' />
@@ -894,25 +758,30 @@ const LoginForm = () => {
           </p>
         </div>
 
-        <Form>
-          <Form.Input
-            field='wechat_verification_code'
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            onSubmitWeChatVerificationCode();
+          }}
+        >
+          <AuthTextField
             placeholder={t('验证码')}
             label={t('验证码')}
             value={inputs.wechat_verification_code}
-            onChange={(value) =>
-              handleChange('wechat_verification_code', value)
+            onChange={(event) =>
+              handleChange('wechat_verification_code', event.target.value)
             }
+            icon={<KeyRound size={18} />}
           />
-        </Form>
-      </Modal>
+        </form>
+      </AuthModal>
     );
   };
 
   // 2FA验证弹窗
   const render2FAModal = () => {
     return (
-      <Modal
+      <AuthModal
         title={
           <div className='flex items-center'>
             <div className='w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-3'>
@@ -931,52 +800,39 @@ const LoginForm = () => {
             两步验证
           </div>
         }
-        visible={showTwoFA}
-        onCancel={handleBackToLogin}
+        isOpen={showTwoFA}
+        onClose={handleBackToLogin}
         footer={null}
-        width={450}
-        centered
+        size='md'
       >
         <TwoFAVerification
           onSuccess={handle2FASuccess}
           onBack={handleBackToLogin}
           isModal={true}
         />
-      </Modal>
+      </AuthModal>
     );
   };
 
   return (
-    <div className='relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8'>
-      {/* 背景模糊晕染球 */}
-      <div
-        className='blur-ball blur-ball-indigo'
-        style={{ top: '-80px', right: '-80px', transform: 'none' }}
-      />
-      <div
-        className='blur-ball blur-ball-teal'
-        style={{ top: '50%', left: '-120px' }}
-      />
-      <div className='w-full max-w-sm mt-[60px]'>
-        {showEmailLogin ||
-        !hasOAuthLoginOptions
-          ? renderEmailLoginForm()
-          : renderOAuthOptions()}
-        {renderWeChatLoginModal()}
-        {render2FAModal()}
-
-        {turnstileEnabled && (
-          <div className='flex justify-center mt-6'>
-            <Turnstile
-              sitekey={turnstileSiteKey}
-              onVerify={(token) => {
-                setTurnstileToken(token);
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
+    <AuthPage
+      turnstile={
+        turnstileEnabled ? (
+          <Turnstile
+            sitekey={turnstileSiteKey}
+            onVerify={(token) => {
+              setTurnstileToken(token);
+            }}
+          />
+        ) : null
+      }
+    >
+      {showEmailLogin || !hasOAuthLoginOptions
+        ? renderEmailLoginForm()
+        : renderOAuthOptions()}
+      {renderWeChatLoginModal()}
+      {render2FAModal()}
+    </AuthPage>
   );
 };
 
diff --git a/web/src/components/auth/PasswordResetConfirm.jsx b/web/src/components/auth/PasswordResetConfirm.jsx
index 9bc37b3ce56..de7bdace247 100644
--- a/web/src/components/auth/PasswordResetConfirm.jsx
+++ b/web/src/components/auth/PasswordResetConfirm.jsx
@@ -26,12 +26,18 @@ import {
   getLogo,
   getSystemName,
 } from '../../helpers';
-import { useSearchParams, Link } from 'react-router-dom';
-import { Button, Card, Form, Typography, Banner } from '@douyinfe/semi-ui';
-import { IconMail, IconLock, IconCopy } from '@douyinfe/semi-icons';
+import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-
-const { Text, Title } = Typography;
+import { Button } from '@heroui/react';
+import { Copy, LockKeyhole, Mail, TriangleAlert } from 'lucide-react';
+import {
+  AuthBrand,
+  AuthLinkRow,
+  AuthPage,
+  AuthPanel,
+  AuthPrimaryButton,
+  AuthTextField,
+} from './AuthLayout';
 
 const PasswordResetConfirm = () => {
   const { t } = useTranslation();
@@ -46,8 +52,7 @@ const PasswordResetConfirm = () => {
   const [disableButton, setDisableButton] = useState(false);
   const [countdown, setCountdown] = useState(30);
   const [newPassword, setNewPassword] = useState('');
-  const [searchParams, setSearchParams] = useSearchParams();
-  const [formApi, setFormApi] = useState(null);
+  const [searchParams] = useSearchParams();
 
   const logo = getLogo();
   const systemName = getSystemName();
@@ -59,13 +64,7 @@ const PasswordResetConfirm = () => {
       token: token || '',
       email: email || '',
     });
-    if (formApi) {
-      formApi.setValues({
-        email: email || '',
-        newPassword: newPassword || '',
-      });
-    }
-  }, [searchParams, newPassword, formApi]);
+  }, [searchParams]);
 
   useEffect(() => {
     let countdownInterval = null;
@@ -104,116 +103,71 @@ const PasswordResetConfirm = () => {
   }
 
   return (
-    <div className='relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8'>
-      {/* 背景模糊晕染球 */}
-      <div
-        className='blur-ball blur-ball-indigo'
-        style={{ top: '-80px', right: '-80px', transform: 'none' }}
-      />
-      <div
-        className='blur-ball blur-ball-teal'
-        style={{ top: '50%', left: '-120px' }}
-      />
-      <div className='w-full max-w-sm mt-[60px]'>
-        <div className='flex flex-col items-center'>
-          <div className='w-full max-w-md'>
-            <div className='flex items-center justify-center mb-6 gap-2'>
-              <img src={logo} alt='Logo' className='h-10 rounded-full' />
-              <Title heading={3} className='!text-gray-800'>
-                {systemName}
-              </Title>
-            </div>
-
-            <Card className='border-0 !rounded-2xl overflow-hidden'>
-              <div className='flex justify-center pt-6 pb-2'>
-                <Title heading={3} className='text-gray-800 dark:text-gray-200'>
-                  {t('密码重置确认')}
-                </Title>
-              </div>
-              <div className='px-2 py-8'>
-                {!isValidResetLink && (
-                  <Banner
-                    type='danger'
-                    description={t('无效的重置链接，请重新发起密码重置请求')}
-                    className='mb-4 !rounded-lg'
-                    closeIcon={null}
-                  />
-                )}
-                <Form
-                  getFormApi={(api) => setFormApi(api)}
-                  initValues={{
-                    email: email || '',
-                    newPassword: newPassword || '',
+    <AuthPage>
+      <AuthBrand logo={logo} systemName={systemName} />
+      <AuthPanel
+        title={t('密码重置确认')}
+        subtitle={t('确认邮件信息后，系统会为你生成并复制一个新密码。')}
+      >
+        {!isValidResetLink && (
+          <div className='mb-4 flex items-start gap-3 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm leading-6 text-rose-700 dark:border-rose-900/50 dark:bg-rose-950/30 dark:text-rose-200'>
+            <TriangleAlert size={18} className='mt-0.5 shrink-0' />
+            <span>{t('无效的重置链接，请重新发起密码重置请求')}</span>
+          </div>
+        )}
+        <form
+          className='space-y-4'
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+        >
+          <AuthTextField
+            label={t('邮箱')}
+            name='email'
+            value={email}
+            isDisabled
+            icon={<Mail size={18} />}
+            placeholder={email ? '' : t('等待获取邮箱信息...')}
+          />
+
+          {newPassword && (
+            <AuthTextField
+              label={t('新密码')}
+              name='newPassword'
+              value={newPassword}
+              isDisabled
+              icon={<LockKeyhole size={18} />}
+              action={
+                <Button
+                  size='sm'
+                  variant='ghost'
+                  startContent={<Copy size={14} />}
+                  onPress={async () => {
+                    await copy(newPassword);
+                    showNotice(`${t('密码已复制到剪贴板：')} ${newPassword}`);
                   }}
-                  className='space-y-4'
                 >
-                  <Form.Input
-                    field='email'
-                    label={t('邮箱')}
-                    name='email'
-                    disabled={true}
-                    prefix={<IconMail />}
-                    placeholder={email ? '' : t('等待获取邮箱信息...')}
-                  />
-
-                  {newPassword && (
-                    <Form.Input
-                      field='newPassword'
-                      label={t('新密码')}
-                      name='newPassword'
-                      disabled={true}
-                      prefix={<IconLock />}
-                      suffix={
-                        <Button
-                          icon={<IconCopy />}
-                          type='tertiary'
-                          theme='borderless'
-                          onClick={async () => {
-                            await copy(newPassword);
-                            showNotice(
-                              `${t('密码已复制到剪贴板：')} ${newPassword}`,
-                            );
-                          }}
-                        >
-                          {t('复制')}
-                        </Button>
-                      }
-                    />
-                  )}
-
-                  <div className='space-y-2 pt-2'>
-                    <Button
-                      theme='solid'
-                      className='w-full !rounded-full'
-                      type='primary'
-                      htmlType='submit'
-                      onClick={handleSubmit}
-                      loading={loading}
-                      disabled={
-                        disableButton || newPassword || !isValidResetLink
-                      }
-                    >
-                      {newPassword ? t('密码重置完成') : t('确认重置密码')}
-                    </Button>
-                  </div>
-                </Form>
-
-                <div className='mt-6 text-center text-sm'>
-                  <Text>
-                    <Link
-                      to='/login'
-                      className='text-blue-600 hover:text-blue-800 font-medium'
-                    >
-                      {t('返回登录')}
-                    </Link>
-                  </Text>
-                </div>
-              </div>
-            </Card>
+                  {t('复制')}
+                </Button>
+              }
+            />
+          )}
+
+          <div className='pt-2'>
+            <AuthPrimaryButton
+              onPress={handleSubmit}
+              isPending={loading}
+              isDisabled={disableButton || newPassword || !isValidResetLink}
+            >
+              {newPassword ? t('密码重置完成') : t('确认重置密码')}
+            </AuthPrimaryButton>
           </div>
-        </div>
-      </div>
-    </div>
+        </form>
+
+        <AuthLinkRow prefix='' linkText={t('返回登录')} to='/login' />
+      </AuthPanel>
+    </AuthPage>
   );
 };
 
diff --git a/web/src/components/auth/PasswordResetForm.jsx b/web/src/components/auth/PasswordResetForm.jsx
index 92afc2afa43..fe455338c31 100644
--- a/web/src/components/auth/PasswordResetForm.jsx
+++ b/web/src/components/auth/PasswordResetForm.jsx
@@ -27,12 +27,16 @@ import {
   getSystemName,
 } from '../../helpers';
 import Turnstile from 'react-turnstile';
-import { Button, Card, Form, Typography } from '@douyinfe/semi-ui';
-import { IconMail } from '@douyinfe/semi-icons';
-import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-
-const { Text, Title } = Typography;
+import { Mail } from 'lucide-react';
+import {
+  AuthBrand,
+  AuthLinkRow,
+  AuthPage,
+  AuthPanel,
+  AuthPrimaryButton,
+  AuthTextField,
+} from './AuthLayout';
 
 const PasswordResetForm = () => {
   const { t } = useTranslation();
@@ -104,89 +108,53 @@ const PasswordResetForm = () => {
   }
 
   return (
-    <div className='relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8'>
-      {/* 背景模糊晕染球 */}
-      <div
-        className='blur-ball blur-ball-indigo'
-        style={{ top: '-80px', right: '-80px', transform: 'none' }}
-      />
-      <div
-        className='blur-ball blur-ball-teal'
-        style={{ top: '50%', left: '-120px' }}
-      />
-      <div className='w-full max-w-sm mt-[60px]'>
-        <div className='flex flex-col items-center'>
-          <div className='w-full max-w-md'>
-            <div className='flex items-center justify-center mb-6 gap-2'>
-              <img src={logo} alt='Logo' className='h-10 rounded-full' />
-              <Title heading={3} className='!text-gray-800'>
-                {systemName}
-              </Title>
-            </div>
-
-            <Card className='border-0 !rounded-2xl overflow-hidden'>
-              <div className='flex justify-center pt-6 pb-2'>
-                <Title heading={3} className='text-gray-800 dark:text-gray-200'>
-                  {t('密码重置')}
-                </Title>
-              </div>
-              <div className='px-2 py-8'>
-                <Form className='space-y-3'>
-                  <Form.Input
-                    field='email'
-                    label={t('邮箱')}
-                    placeholder={t('请输入您的邮箱地址')}
-                    name='email'
-                    value={email}
-                    onChange={handleChange}
-                    prefix={<IconMail />}
-                  />
-
-                  <div className='space-y-2 pt-2'>
-                    <Button
-                      theme='solid'
-                      className='w-full !rounded-full'
-                      type='primary'
-                      htmlType='submit'
-                      onClick={handleSubmit}
-                      loading={loading}
-                      disabled={disableButton}
-                    >
-                      {disableButton
-                        ? `${t('重试')} (${countdown})`
-                        : t('提交')}
-                    </Button>
-                  </div>
-                </Form>
-
-                <div className='mt-6 text-center text-sm'>
-                  <Text>
-                    {t('想起来了？')}{' '}
-                    <Link
-                      to='/login'
-                      className='text-blue-600 hover:text-blue-800 font-medium'
-                    >
-                      {t('登录')}
-                    </Link>
-                  </Text>
-                </div>
-              </div>
-            </Card>
-
-            {turnstileEnabled && (
-              <div className='flex justify-center mt-6'>
-                <Turnstile
-                  sitekey={turnstileSiteKey}
-                  onVerify={(token) => {
-                    setTurnstileToken(token);
-                  }}
-                />
-              </div>
-            )}
+    <AuthPage
+      turnstile={
+        turnstileEnabled ? (
+          <Turnstile
+            sitekey={turnstileSiteKey}
+            onVerify={(token) => {
+              setTurnstileToken(token);
+            }}
+          />
+        ) : null
+      }
+    >
+      <AuthBrand logo={logo} systemName={systemName} />
+      <AuthPanel
+        title={t('密码重置')}
+        subtitle={t('输入注册邮箱，我们会向你发送重置密码邮件。')}
+      >
+        <form
+          className='space-y-4'
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+        >
+          <AuthTextField
+            label={t('邮箱')}
+            placeholder={t('请输入您的邮箱地址')}
+            name='email'
+            value={email}
+            onChange={(event) => handleChange(event.target.value)}
+            icon={<Mail size={18} />}
+          />
+
+          <div className='pt-2'>
+            <AuthPrimaryButton
+              onPress={handleSubmit}
+              isPending={loading}
+              isDisabled={disableButton}
+            >
+              {disableButton ? `${t('重试')} (${countdown})` : t('提交')}
+            </AuthPrimaryButton>
           </div>
-        </div>
-      </div>
-    </div>
+        </form>
+
+        <AuthLinkRow prefix={t('想起来了？')} linkText={t('登录')} to='/login' />
+      </AuthPanel>
+    </AuthPage>
   );
 };
 
diff --git a/web/src/components/auth/RegisterForm.jsx b/web/src/components/auth/RegisterForm.jsx
index 0a755b19443..f58af29e3ed 100644
--- a/web/src/components/auth/RegisterForm.jsx
+++ b/web/src/components/auth/RegisterForm.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 import {
   API,
   getLogo,
@@ -33,24 +33,7 @@ import {
   onCustomOAuthClicked,
 } from '../../helpers';
 import Turnstile from 'react-turnstile';
-import {
-  Button,
-  Card,
-  Checkbox,
-  Divider,
-  Form,
-  Icon,
-  Modal,
-} from '@douyinfe/semi-ui';
-import Title from '@douyinfe/semi-ui/lib/es/typography/title';
-import Text from '@douyinfe/semi-ui/lib/es/typography/text';
-import {
-  IconGithubLogo,
-  IconMail,
-  IconUser,
-  IconLock,
-  IconKey,
-} from '@douyinfe/semi-icons';
+import { Button } from '@heroui/react';
 import {
   onGitHubOAuthClicked,
   onLinuxDOOAuthClicked,
@@ -63,7 +46,20 @@ import TelegramLoginButton from 'react-telegram-login/src';
 import { UserContext } from '../../context/User';
 import { StatusContext } from '../../context/Status';
 import { useTranslation } from 'react-i18next';
-import { SiDiscord } from 'react-icons/si';
+import { SiDiscord, SiGithub } from 'react-icons/si';
+import { KeyRound, LockKeyhole, Mail, UserRound } from 'lucide-react';
+import {
+  AuthAgreement,
+  AuthBrand,
+  AuthDivider,
+  AuthLinkRow,
+  AuthModal,
+  AuthOutlineButton,
+  AuthPage,
+  AuthPanel,
+  AuthPrimaryButton,
+  AuthTextField,
+} from './AuthLayout';
 
 const RegisterForm = () => {
   let navigate = useNavigate();
@@ -393,58 +389,39 @@ const RegisterForm = () => {
 
   const renderOAuthOptions = () => {
     return (
-      <div className='flex flex-col items-center'>
-        <div className='w-full max-w-md'>
-          <div className='flex items-center justify-center mb-6 gap-2'>
-            <img src={logo} alt='Logo' className='h-10 rounded-full' />
-            <Title heading={3} className='!text-gray-800'>
-              {systemName}
-            </Title>
-          </div>
-
-          <Card className='border-0 !rounded-2xl overflow-hidden'>
-            <div className='flex justify-center pt-6 pb-2'>
-              <Title heading={3} className='text-gray-800 dark:text-gray-200'>
-                {t('注 册')}
-              </Title>
-            </div>
-            <div className='px-2 py-8'>
-              <div className='space-y-3'>
+      <>
+        <AuthBrand logo={logo} systemName={systemName} />
+        <AuthPanel
+          title={t('注 册')}
+          subtitle={t('先选择一种便捷方式，或继续使用用户名注册。')}
+        >
+          <div className='space-y-3'>
                 {status.wechat_login && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={
-                      <Icon svg={<WeChatIcon />} style={{ color: '#07C160' }} />
+                  <AuthOutlineButton
+                    startContent={
+                      <WeChatIcon style={{ color: '#07C160' }} />
                     }
-                    onClick={onWeChatLoginClicked}
-                    loading={wechatLoading}
+                    onPress={onWeChatLoginClicked}
+                    isPending={wechatLoading}
                   >
-                    <span className='ml-3'>{t('使用 微信 继续')}</span>
-                  </Button>
+                    {t('使用 微信 继续')}
+                  </AuthOutlineButton>
                 )}
 
                 {status.github_oauth && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={<IconGithubLogo size='large' />}
-                    onClick={handleGitHubClick}
-                    loading={githubLoading}
-                    disabled={githubButtonDisabled}
+                  <AuthOutlineButton
+                    startContent={<SiGithub size={20} />}
+                    onPress={handleGitHubClick}
+                    isPending={githubLoading}
+                    isDisabled={githubButtonDisabled}
                   >
-                    <span className='ml-3'>{githubButtonText}</span>
-                  </Button>
+                    {githubButtonText}
+                  </AuthOutlineButton>
                 )}
 
                 {status.discord_oauth && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={
+                  <AuthOutlineButton
+                    startContent={
                       <SiDiscord
                         style={{
                           color: '#5865F2',
@@ -453,32 +430,26 @@ const RegisterForm = () => {
                         }}
                       />
                     }
-                    onClick={handleDiscordClick}
-                    loading={discordLoading}
+                    onPress={handleDiscordClick}
+                    isPending={discordLoading}
                   >
-                    <span className='ml-3'>{t('使用 Discord 继续')}</span>
-                  </Button>
+                    {t('使用 Discord 继续')}
+                  </AuthOutlineButton>
                 )}
 
                 {status.oidc_enabled && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={<OIDCIcon style={{ color: '#1877F2' }} />}
-                    onClick={handleOIDCClick}
-                    loading={oidcLoading}
+                  <AuthOutlineButton
+                    startContent={<OIDCIcon style={{ color: '#1877F2' }} />}
+                    onPress={handleOIDCClick}
+                    isPending={oidcLoading}
                   >
-                    <span className='ml-3'>{t('使用 OIDC 继续')}</span>
-                  </Button>
+                    {t('使用 OIDC 继续')}
+                  </AuthOutlineButton>
                 )}
 
                 {status.linuxdo_oauth && (
-                  <Button
-                    theme='outline'
-                    className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                    type='tertiary'
-                    icon={
+                  <AuthOutlineButton
+                    startContent={
                       <LinuxDoIcon
                         style={{
                           color: '#E95420',
@@ -487,28 +458,23 @@ const RegisterForm = () => {
                         }}
                       />
                     }
-                    onClick={handleLinuxDOClick}
-                    loading={linuxdoLoading}
+                    onPress={handleLinuxDOClick}
+                    isPending={linuxdoLoading}
                   >
-                    <span className='ml-3'>{t('使用 LinuxDO 继续')}</span>
-                  </Button>
+                    {t('使用 LinuxDO 继续')}
+                  </AuthOutlineButton>
                 )}
 
                 {status.custom_oauth_providers &&
                   status.custom_oauth_providers.map((provider) => (
-                    <Button
+                    <AuthOutlineButton
                       key={provider.slug}
-                      theme='outline'
-                      className='w-full h-12 flex items-center justify-center !rounded-full border border-gray-200 hover:bg-gray-50 transition-colors'
-                      type='tertiary'
-                      icon={getOAuthProviderIcon(provider.icon || '', 20)}
-                      onClick={() => handleCustomOAuthClick(provider)}
-                      loading={customOAuthLoading[provider.slug]}
+                      startContent={getOAuthProviderIcon(provider.icon || '', 20)}
+                      onPress={() => handleCustomOAuthClick(provider)}
+                      isPending={customOAuthLoading[provider.slug]}
                     >
-                      <span className='ml-3'>
-                        {t('使用 {{name}} 继续', { name: provider.name })}
-                      </span>
-                    </Button>
+                      {t('使用 {{name}} 继续', { name: provider.name })}
+                    </AuthOutlineButton>
                   ))}
 
                 {status.telegram_oauth && (
@@ -520,103 +486,94 @@ const RegisterForm = () => {
                   </div>
                 )}
 
-                <Divider margin='12px' align='center'>
-                  {t('或')}
-                </Divider>
-
-                <Button
-                  theme='solid'
-                  type='primary'
-                  className='w-full h-12 flex items-center justify-center bg-black text-white !rounded-full hover:bg-gray-800 transition-colors'
-                  icon={<IconMail size='large' />}
-                  onClick={handleEmailRegisterClick}
-                  loading={emailRegisterLoading}
+                <AuthDivider>{t('或')}</AuthDivider>
+
+                <AuthPrimaryButton
+                  startContent={<Mail size={20} />}
+                  onPress={handleEmailRegisterClick}
+                  isPending={emailRegisterLoading}
+                  className='bg-foreground text-background'
                 >
-                  <span className='ml-3'>{t('使用 用户名 注册')}</span>
-                </Button>
+                  {t('使用 用户名 注册')}
+                </AuthPrimaryButton>
               </div>
 
-              <div className='mt-6 text-center text-sm'>
-                <Text>
-                  {t('已有账户？')}{' '}
-                  <Link
-                    to='/login'
-                    className='text-blue-600 hover:text-blue-800 font-medium'
-                  >
-                    {t('登录')}
-                  </Link>
-                </Text>
-              </div>
-            </div>
-          </Card>
-        </div>
-      </div>
+          <AuthLinkRow prefix={t('已有账户？')} linkText={t('登录')} to='/login' />
+        </AuthPanel>
+      </>
     );
   };
 
   const renderEmailRegisterForm = () => {
     return (
-      <div className='flex flex-col items-center'>
-        <div className='w-full max-w-md'>
-          <div className='flex items-center justify-center mb-6 gap-2'>
-            <img src={logo} alt='Logo' className='h-10 rounded-full' />
-            <Title heading={3} className='!text-gray-800'>
-              {systemName}
-            </Title>
-          </div>
-
-          <Card className='border-0 !rounded-2xl overflow-hidden'>
-            <div className='flex justify-center pt-6 pb-2'>
-              <Title heading={3} className='text-gray-800 dark:text-gray-200'>
-                {t('注 册')}
-              </Title>
-            </div>
-            <div className='px-2 py-8'>
-              <Form className='space-y-3'>
-                <Form.Input
-                  field='username'
+      <>
+        <AuthBrand logo={logo} systemName={systemName} />
+        <AuthPanel
+          title={t('注 册')}
+          subtitle={t('创建一个新账户，稍后可以继续使用第三方登录。')}
+        >
+              <form
+                className='space-y-3'
+                onSubmit={(event) => {
+                  event.preventDefault();
+                  handleSubmit();
+                }}
+              >
+                <AuthTextField
                   label={t('用户名')}
                   placeholder={t('请输入用户名')}
                   name='username'
-                  onChange={(value) => handleChange('username', value)}
-                  prefix={<IconUser />}
+                  value={inputs.username}
+                  onChange={(event) =>
+                    handleChange('username', event.target.value)
+                  }
+                  icon={<UserRound size={18} />}
                 />
 
-                <Form.Input
-                  field='password'
+                <AuthTextField
                   label={t('密码')}
                   placeholder={t('输入密码，最短 8 位，最长 20 位')}
                   name='password'
-                  mode='password'
-                  onChange={(value) => handleChange('password', value)}
-                  prefix={<IconLock />}
+                  type='password'
+                  value={inputs.password}
+                  onChange={(event) =>
+                    handleChange('password', event.target.value)
+                  }
+                  icon={<LockKeyhole size={18} />}
                 />
 
-                <Form.Input
-                  field='password2'
+                <AuthTextField
                   label={t('确认密码')}
                   placeholder={t('确认密码')}
                   name='password2'
-                  mode='password'
-                  onChange={(value) => handleChange('password2', value)}
-                  prefix={<IconLock />}
+                  type='password'
+                  value={inputs.password2}
+                  onChange={(event) =>
+                    handleChange('password2', event.target.value)
+                  }
+                  icon={<LockKeyhole size={18} />}
                 />
 
                 {showEmailVerification && (
                   <>
-                    <Form.Input
-                      field='email'
+                    <AuthTextField
                       label={t('邮箱')}
                       placeholder={t('输入邮箱地址')}
                       name='email'
                       type='email'
-                      onChange={(value) => handleChange('email', value)}
-                      prefix={<IconMail />}
-                      suffix={
+                      value={inputs.email}
+                      onChange={(event) =>
+                        handleChange('email', event.target.value)
+                      }
+                      icon={<Mail size={18} />}
+                      action={
                         <Button
-                          onClick={sendVerificationCode}
-                          loading={verificationCodeLoading}
-                          disabled={disableButton || verificationCodeLoading}
+                          size='sm'
+                          variant='secondary'
+                          onPress={sendVerificationCode}
+                          isPending={verificationCodeLoading}
+                          isDisabled={disableButton || verificationCodeLoading}
+                          className='rounded-xl'
                         >
                           {disableButton
                             ? `${t('重新发送')} (${countdown})`
@@ -624,125 +581,71 @@ const RegisterForm = () => {
                         </Button>
                       }
                     />
-                    <Form.Input
-                      field='verification_code'
+                    <AuthTextField
                       label={t('验证码')}
                       placeholder={t('输入验证码')}
                       name='verification_code'
-                      onChange={(value) =>
-                        handleChange('verification_code', value)
+                      value={inputs.verification_code}
+                      onChange={(event) =>
+                        handleChange('verification_code', event.target.value)
                       }
-                      prefix={<IconKey />}
+                      icon={<KeyRound size={18} />}
                     />
                   </>
                 )}
 
-                {(hasUserAgreement || hasPrivacyPolicy) && (
-                  <div className='pt-4'>
-                    <Checkbox
-                      checked={agreedToTerms}
-                      onChange={(e) => setAgreedToTerms(e.target.checked)}
-                    >
-                      <Text size='small' className='text-gray-600'>
-                        {t('我已阅读并同意')}
-                        {hasUserAgreement && (
-                          <>
-                            <a
-                              href='/user-agreement'
-                              target='_blank'
-                              rel='noopener noreferrer'
-                              className='text-blue-600 hover:text-blue-800 mx-1'
-                            >
-                              {t('用户协议')}
-                            </a>
-                          </>
-                        )}
-                        {hasUserAgreement && hasPrivacyPolicy && t('和')}
-                        {hasPrivacyPolicy && (
-                          <>
-                            <a
-                              href='/privacy-policy'
-                              target='_blank'
-                              rel='noopener noreferrer'
-                              className='text-blue-600 hover:text-blue-800 mx-1'
-                            >
-                              {t('隐私政策')}
-                            </a>
-                          </>
-                        )}
-                      </Text>
-                    </Checkbox>
-                  </div>
-                )}
+                <AuthAgreement
+                  checked={agreedToTerms}
+                  onChange={setAgreedToTerms}
+                  hasUserAgreement={hasUserAgreement}
+                  hasPrivacyPolicy={hasPrivacyPolicy}
+                  t={t}
+                />
 
                 <div className='space-y-2 pt-2'>
-                  <Button
-                    theme='solid'
-                    className='w-full !rounded-full'
-                    type='primary'
-                    htmlType='submit'
-                    onClick={handleSubmit}
-                    loading={registerLoading}
-                    disabled={
+                  <AuthPrimaryButton
+                    onPress={handleSubmit}
+                    isPending={registerLoading}
+                    isDisabled={
                       (hasUserAgreement || hasPrivacyPolicy) && !agreedToTerms
                     }
                   >
                     {t('注册')}
-                  </Button>
+                  </AuthPrimaryButton>
                 </div>
-              </Form>
+              </form>
 
               {hasOAuthRegisterOptions && (
                 <>
-                  <Divider margin='12px' align='center'>
-                    {t('或')}
-                  </Divider>
+                  <AuthDivider>{t('或')}</AuthDivider>
 
                   <div className='mt-4 text-center'>
-                    <Button
-                      theme='outline'
-                      type='tertiary'
-                      className='w-full !rounded-full'
-                      onClick={handleOtherRegisterOptionsClick}
-                      loading={otherRegisterOptionsLoading}
+                    <AuthOutlineButton
+                      onPress={handleOtherRegisterOptionsClick}
+                      isPending={otherRegisterOptionsLoading}
                     >
                       {t('其他注册选项')}
-                    </Button>
+                    </AuthOutlineButton>
                   </div>
                 </>
               )}
 
-              <div className='mt-6 text-center text-sm'>
-                <Text>
-                  {t('已有账户？')}{' '}
-                  <Link
-                    to='/login'
-                    className='text-blue-600 hover:text-blue-800 font-medium'
-                  >
-                    {t('登录')}
-                  </Link>
-                </Text>
-              </div>
-            </div>
-          </Card>
-        </div>
-      </div>
+          <AuthLinkRow prefix={t('已有账户？')} linkText={t('登录')} to='/login' />
+        </AuthPanel>
+      </>
     );
   };
 
   const renderWeChatLoginModal = () => {
     return (
-      <Modal
+      <AuthModal
         title={t('微信扫码登录')}
-        visible={showWeChatLoginModal}
-        maskClosable={true}
-        onOk={onSubmitWeChatVerificationCode}
-        onCancel={() => setShowWeChatLoginModal(false)}
-        okText={t('登录')}
-        centered={true}
-        okButtonProps={{
-          loading: wechatCodeSubmitLoading,
-        }}
+        isOpen={showWeChatLoginModal}
+        onClose={() => setShowWeChatLoginModal(false)}
+        onConfirm={onSubmitWeChatVerificationCode}
+        confirmText={t('登录')}
+        cancelText={t('取消')}
+        isConfirmLoading={wechatCodeSubmitLoading}
       >
         <div className='flex flex-col items-center'>
           <img src={status.wechat_qrcode} alt='微信二维码' className='mb-4' />
@@ -754,51 +657,44 @@ const RegisterForm = () => {
           </p>
         </div>
 
-        <Form>
-          <Form.Input
-            field='wechat_verification_code'
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            onSubmitWeChatVerificationCode();
+          }}
+        >
+          <AuthTextField
             placeholder={t('验证码')}
             label={t('验证码')}
             value={inputs.wechat_verification_code}
-            onChange={(value) =>
-              handleChange('wechat_verification_code', value)
+            onChange={(event) =>
+              handleChange('wechat_verification_code', event.target.value)
             }
+            icon={<KeyRound size={18} />}
           />
-        </Form>
-      </Modal>
+        </form>
+      </AuthModal>
     );
   };
 
   return (
-    <div className='relative overflow-hidden bg-gray-100 flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8'>
-      {/* 背景模糊晕染球 */}
-      <div
-        className='blur-ball blur-ball-indigo'
-        style={{ top: '-80px', right: '-80px', transform: 'none' }}
-      />
-      <div
-        className='blur-ball blur-ball-teal'
-        style={{ top: '50%', left: '-120px' }}
-      />
-      <div className='w-full max-w-sm mt-[60px]'>
-        {showEmailRegister ||
-        !hasOAuthRegisterOptions
-          ? renderEmailRegisterForm()
-          : renderOAuthOptions()}
-        {renderWeChatLoginModal()}
-
-        {turnstileEnabled && (
-          <div className='flex justify-center mt-6'>
-            <Turnstile
-              sitekey={turnstileSiteKey}
-              onVerify={(token) => {
-                setTurnstileToken(token);
-              }}
-            />
-          </div>
-        )}
-      </div>
-    </div>
+    <AuthPage
+      turnstile={
+        turnstileEnabled ? (
+          <Turnstile
+            sitekey={turnstileSiteKey}
+            onVerify={(token) => {
+              setTurnstileToken(token);
+            }}
+          />
+        ) : null
+      }
+    >
+      {showEmailRegister || !hasOAuthRegisterOptions
+        ? renderEmailRegisterForm()
+        : renderOAuthOptions()}
+      {renderWeChatLoginModal()}
+    </AuthPage>
   );
 };
 
diff --git a/web/src/components/auth/TwoFAVerification.jsx b/web/src/components/auth/TwoFAVerification.jsx
index 626de74363b..f6b66ac8aac 100644
--- a/web/src/components/auth/TwoFAVerification.jsx
+++ b/web/src/components/auth/TwoFAVerification.jsx
@@ -17,17 +17,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import { API, showError, showSuccess } from '../../helpers';
-import {
-  Button,
-  Card,
-  Divider,
-  Form,
-  Input,
-  Typography,
-} from '@douyinfe/semi-ui';
 import React, { useState } from 'react';
-
-const { Title, Text, Paragraph } = Typography;
+import { KeyRound, ShieldCheck } from 'lucide-react';
+import {
+  AuthDivider,
+  AuthGhostButton,
+  AuthPanel,
+  AuthPrimaryButton,
+  AuthTextField,
+} from './AuthLayout';
 
 const TwoFAVerification = ({ onSuccess, onBack, isModal = false }) => {
   const [loading, setLoading] = useState(false);
@@ -80,163 +78,123 @@ const TwoFAVerification = ({ onSuccess, onBack, isModal = false }) => {
   if (isModal) {
     return (
       <div className='space-y-4'>
-        <Paragraph className='text-gray-600 dark:text-gray-300'>
+        <p className='text-sm leading-6 text-muted'>
           请输入认证器应用显示的验证码完成登录
-        </Paragraph>
+        </p>
 
-        <Form onSubmit={handleSubmit}>
-          <Form.Input
-            field='code'
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+        >
+          <AuthTextField
             label={useBackupCode ? '备用码' : '验证码'}
             placeholder={useBackupCode ? '请输入8位备用码' : '请输入6位验证码'}
             value={verificationCode}
-            onChange={setVerificationCode}
-            onKeyPress={handleKeyPress}
-            size='large'
-            style={{ marginBottom: 16 }}
+            onChange={(event) => setVerificationCode(event.target.value)}
+            onKeyDown={handleKeyPress}
+            icon={useBackupCode ? <KeyRound size={18} /> : <ShieldCheck size={18} />}
+            className='mb-4'
             autoFocus
           />
 
-          <Button
-            htmlType='submit'
-            type='primary'
-            loading={loading}
-            block
-            size='large'
-            style={{ marginBottom: 16 }}
-          >
+          <AuthPrimaryButton onPress={handleSubmit} isPending={loading} className='mb-4'>
             验证并登录
-          </Button>
-        </Form>
+          </AuthPrimaryButton>
+        </form>
 
-        <Divider />
+        <AuthDivider>2FA</AuthDivider>
 
-        <div style={{ textAlign: 'center' }}>
-          <Button
-            theme='borderless'
-            type='tertiary'
-            onClick={() => {
+        <div className='flex flex-wrap items-center justify-center gap-3'>
+          <AuthGhostButton
+            onPress={() => {
               setUseBackupCode(!useBackupCode);
               setVerificationCode('');
             }}
-            style={{ marginRight: 16, color: '#1890ff', padding: 0 }}
+            className='h-auto w-auto px-0'
           >
             {useBackupCode ? '使用认证器验证码' : '使用备用码'}
-          </Button>
+          </AuthGhostButton>
 
           {onBack && (
-            <Button
-              theme='borderless'
-              type='tertiary'
-              onClick={onBack}
-              style={{ color: '#1890ff', padding: 0 }}
-            >
+            <AuthGhostButton onPress={onBack} className='h-auto w-auto px-0'>
               返回登录
-            </Button>
+            </AuthGhostButton>
           )}
         </div>
 
-        <div className='bg-gray-50 dark:bg-gray-800 rounded-lg p-3'>
-          <Text size='small' type='secondary'>
+        <div className='rounded-2xl border border-border bg-surface-secondary/80 p-4 text-sm leading-6 text-muted'>
             <strong>提示：</strong>
             <br />
             • 验证码每30秒更新一次
             <br />
             • 如果无法获取验证码，请使用备用码
             <br />• 每个备用码只能使用一次
-          </Text>
         </div>
       </div>
     );
   }
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        minHeight: '60vh',
-      }}
-    >
-      <Card style={{ width: 400, padding: 24 }}>
-        <div style={{ textAlign: 'center', marginBottom: 24 }}>
-          <Title heading={3}>两步验证</Title>
-          <Paragraph type='secondary'>
-            请输入认证器应用显示的验证码完成登录
-          </Paragraph>
-        </div>
-
-        <Form onSubmit={handleSubmit}>
-          <Form.Input
-            field='code'
+    <div className='flex min-h-[60vh] items-center justify-center'>
+      <div className='w-full max-w-md'>
+        <AuthPanel
+          title='两步验证'
+          subtitle='请输入认证器应用显示的验证码完成登录'
+        >
+        <form
+          onSubmit={(event) => {
+            event.preventDefault();
+            handleSubmit();
+          }}
+        >
+          <AuthTextField
             label={useBackupCode ? '备用码' : '验证码'}
             placeholder={useBackupCode ? '请输入8位备用码' : '请输入6位验证码'}
             value={verificationCode}
-            onChange={setVerificationCode}
-            onKeyPress={handleKeyPress}
-            size='large'
-            style={{ marginBottom: 16 }}
+            onChange={(event) => setVerificationCode(event.target.value)}
+            onKeyDown={handleKeyPress}
+            icon={useBackupCode ? <KeyRound size={18} /> : <ShieldCheck size={18} />}
+            className='mb-4'
             autoFocus
           />
 
-          <Button
-            htmlType='submit'
-            type='primary'
-            loading={loading}
-            block
-            size='large'
-            style={{ marginBottom: 16 }}
-          >
+          <AuthPrimaryButton onPress={handleSubmit} isPending={loading} className='mb-4'>
             验证并登录
-          </Button>
-        </Form>
+          </AuthPrimaryButton>
+        </form>
 
-        <Divider />
+        <AuthDivider>2FA</AuthDivider>
 
-        <div style={{ textAlign: 'center' }}>
-          <Button
-            theme='borderless'
-            type='tertiary'
-            onClick={() => {
+        <div className='flex flex-wrap items-center justify-center gap-3'>
+          <AuthGhostButton
+            onPress={() => {
               setUseBackupCode(!useBackupCode);
               setVerificationCode('');
             }}
-            style={{ marginRight: 16, color: '#1890ff', padding: 0 }}
+            className='h-auto w-auto px-0'
           >
             {useBackupCode ? '使用认证器验证码' : '使用备用码'}
-          </Button>
+          </AuthGhostButton>
 
           {onBack && (
-            <Button
-              theme='borderless'
-              type='tertiary'
-              onClick={onBack}
-              style={{ color: '#1890ff', padding: 0 }}
-            >
+            <AuthGhostButton onPress={onBack} className='h-auto w-auto px-0'>
               返回登录
-            </Button>
+            </AuthGhostButton>
           )}
         </div>
 
-        <div
-          style={{
-            marginTop: 24,
-            padding: 16,
-            background: '#f6f8fa',
-            borderRadius: 6,
-          }}
-        >
-          <Text size='small' type='secondary'>
+        <div className='mt-6 rounded-2xl border border-border bg-surface-secondary/80 p-4 text-sm leading-6 text-muted'>
             <strong>提示：</strong>
             <br />
             • 验证码每30秒更新一次
             <br />
             • 如果无法获取验证码，请使用备用码
             <br />• 每个备用码只能使用一次
-          </Text>
         </div>
-      </Card>
+        </AuthPanel>
+      </div>
     </div>
   );
 };
diff --git a/web/src/components/common/DocumentRenderer/index.jsx b/web/src/components/common/DocumentRenderer/index.jsx
index 8c15c073de1..cb8b44db2a1 100644
--- a/web/src/components/common/DocumentRenderer/index.jsx
+++ b/web/src/components/common/DocumentRenderer/index.jsx
@@ -19,14 +19,10 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { API, showError } from '../../../helpers';
-import { Empty, Card, Spin, Typography } from '@douyinfe/semi-ui';
-const { Title } = Typography;
-import {
-  IllustrationConstruction,
-  IllustrationConstructionDark,
-} from '@douyinfe/semi-illustrations';
+import { Spinner } from '@heroui/react';
 import { useTranslation } from 'react-i18next';
 import MarkdownRenderer from '../markdown/MarkdownRenderer';
+import { Construction } from 'lucide-react';
 
 // Check whether content is a URL.
 const isUrl = (content) => {
@@ -142,7 +138,7 @@ const DocumentRenderer = ({ apiEndpoint, title, cacheKey, emptyMessage }) => {
   if (loading) {
     return (
       <div className='flex justify-center items-center min-h-screen'>
-        <Spin size='large' />
+        <Spinner size='lg' color='primary' />
       </div>
     );
   }
@@ -150,17 +146,15 @@ const DocumentRenderer = ({ apiEndpoint, title, cacheKey, emptyMessage }) => {
   // 如果没有内容，显示空状态
   if (!content || content.trim() === '') {
     return (
-      <div className='flex justify-center items-center min-h-screen bg-gray-50'>
-        <Empty
-          title={t('管理员未设置' + title + '内容')}
-          image={
-            <IllustrationConstruction style={{ width: 150, height: 150 }} />
-          }
-          darkModeImage={
-            <IllustrationConstructionDark style={{ width: 150, height: 150 }} />
-          }
-          className='p-8'
-        />
+      <div className='flex min-h-screen items-center justify-center bg-surface-secondary p-6'>
+        <div className='glass-panel flex max-w-md flex-col items-center gap-4 rounded-[2rem] p-8 text-center'>
+          <div className='flex h-24 w-24 items-center justify-center rounded-[2rem] bg-primary/10 text-primary'>
+            <Construction size={44} />
+          </div>
+          <h2 className='text-lg font-semibold text-foreground'>
+            {t('管理员未设置' + title + '内容')}
+          </h2>
+        </div>
       </div>
     );
   }
@@ -168,13 +162,13 @@ const DocumentRenderer = ({ apiEndpoint, title, cacheKey, emptyMessage }) => {
   // 如果是 URL，显示链接卡片
   if (isUrl(content)) {
     return (
-      <div className='flex justify-center items-center min-h-screen bg-gray-50 p-4'>
-        <Card className='max-w-md w-full'>
+      <div className='flex justify-center items-center min-h-screen bg-surface-secondary p-4'>
+        <div className='glass-panel max-w-md w-full rounded-[2rem] p-8'>
           <div className='text-center'>
-            <Title heading={4} className='mb-4'>
+            <h2 className='mb-4 text-xl font-semibold text-foreground'>
               {title}
-            </Title>
-            <p className='text-gray-600 mb-4'>
+            </h2>
+            <p className='text-muted mb-4'>
               {t('管理员设置了外部链接，点击下方按钮访问')}
             </p>
             <a
@@ -188,7 +182,7 @@ const DocumentRenderer = ({ apiEndpoint, title, cacheKey, emptyMessage }) => {
               {t('访问' + title)}
             </a>
           </div>
-        </Card>
+        </div>
       </div>
     );
   }
@@ -196,12 +190,12 @@ const DocumentRenderer = ({ apiEndpoint, title, cacheKey, emptyMessage }) => {
   // 如果是 HTML 内容，直接渲染
   if (isHtmlContent(content)) {
     return (
-      <div className='min-h-screen bg-gray-50'>
-        <div className='max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8'>
-          <div className='bg-white rounded-lg shadow-sm p-8'>
-            <Title heading={2} className='text-center mb-8'>
+    <div className='min-h-screen bg-surface-secondary'>
+      <div className='max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8'>
+          <div className='rounded-2xl bg-background p-8 shadow-sm'>
+            <h1 className='mb-8 text-center text-3xl font-bold text-foreground'>
               {title}
-            </Title>
+            </h1>
             <div
               className='prose prose-lg max-w-none'
               dangerouslySetInnerHTML={{ __html: htmlPayload.content }}
@@ -214,12 +208,12 @@ const DocumentRenderer = ({ apiEndpoint, title, cacheKey, emptyMessage }) => {
 
   // 其他内容统一使用 Markdown 渲染器
   return (
-    <div className='min-h-screen bg-gray-50'>
+    <div className='min-h-screen bg-surface-secondary'>
       <div className='max-w-4xl mx-auto py-12 px-4 sm:px-6 lg:px-8'>
-        <div className='bg-white rounded-lg shadow-sm p-8'>
-          <Title heading={2} className='text-center mb-8'>
+        <div className='rounded-2xl bg-background p-8 shadow-sm'>
+          <h1 className='mb-8 text-center text-3xl font-bold text-foreground'>
             {title}
-          </Title>
+          </h1>
           <div className='prose prose-lg max-w-none'>
             <MarkdownRenderer content={content} />
           </div>
diff --git a/web/src/components/common/ErrorBoundary.jsx b/web/src/components/common/ErrorBoundary.jsx
index 3827969acf9..6a1c72629b2 100644
--- a/web/src/components/common/ErrorBoundary.jsx
+++ b/web/src/components/common/ErrorBoundary.jsx
@@ -1,44 +1,73 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
 import React from 'react';
-import { Empty, Button } from '@douyinfe/semi-ui';
-import {
-  IllustrationFailure,
-  IllustrationFailureDark,
-} from '@douyinfe/semi-illustrations';
+import { Button } from '@heroui/react';
 import { withTranslation } from 'react-i18next';
+import { RefreshCcw, TriangleAlert } from 'lucide-react';
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false };
+    this.state = { hasError: false, error: null, errorInfo: null };
   }
 
-  static getDerivedStateFromError() {
-    return { hasError: true };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
   }
 
   componentDidCatch(error, errorInfo) {
     console.error('[ErrorBoundary]', error, errorInfo);
+    this.setState({ error, errorInfo });
   }
 
   render() {
     if (this.state.hasError) {
       const { t } = this.props;
+      const shouldShowDetails = import.meta.env.DEV && this.state.error;
       return (
         <div className='flex flex-col justify-center items-center h-screen p-8'>
-          <Empty
-            image={
-              <IllustrationFailure style={{ width: 250, height: 250 }} />
-            }
-            darkModeImage={
-              <IllustrationFailureDark style={{ width: 250, height: 250 }} />
-            }
-            description={t('页面渲染出错，请刷新页面重试')}
-          />
+          <div className='glass-panel flex max-w-md flex-col items-center gap-4 rounded-[2rem] p-8 text-center'>
+            <div className='flex h-24 w-24 items-center justify-center rounded-[2rem] bg-danger/10 text-danger'>
+              <TriangleAlert size={44} />
+            </div>
+            <p className='text-base font-semibold text-slate-950 dark:text-white'>
+              {t('页面渲染出错，请刷新页面重试')}
+            </p>
+            {shouldShowDetails ? (
+              <pre className='max-h-56 w-full overflow-auto rounded-2xl bg-slate-950/90 p-4 text-left text-xs leading-5 text-rose-100'>
+                {[
+                  this.state.error?.message,
+                  this.state.error?.stack,
+                  this.state.errorInfo?.componentStack,
+                ]
+                  .filter(Boolean)
+                  .join('\n\n')}
+              </pre>
+            ) : null}
+          </div>
           <Button
-            theme='solid'
-            type='primary'
-            style={{ marginTop: 16 }}
-            onClick={() => window.location.reload()}
+            color='primary'
+            radius='full'
+            className='mt-4'
+            startContent={<RefreshCcw size={16} />}
+            onPress={() => window.location.reload()}
           >
             {t('刷新页面')}
           </Button>
diff --git a/web/src/components/common/logo/LinuxDoIcon.jsx b/web/src/components/common/logo/LinuxDoIcon.jsx
index 861f19d4f20..1cef9bb9725 100644
--- a/web/src/components/common/logo/LinuxDoIcon.jsx
+++ b/web/src/components/common/logo/LinuxDoIcon.jsx
@@ -18,11 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Icon } from '@douyinfe/semi-ui';
 
 const LinuxDoIcon = (props) => {
-  function CustomIcon() {
-    return (
+  return (
       <svg
         className='icon'
         viewBox='0 0 16 16'
@@ -48,9 +46,6 @@ const LinuxDoIcon = (props) => {
         </g>
       </svg>
     );
-  }
-
-  return <Icon svg={<CustomIcon />} />;
 };
 
 export default LinuxDoIcon;
diff --git a/web/src/components/common/logo/OIDCIcon.jsx b/web/src/components/common/logo/OIDCIcon.jsx
index 28d538eb060..c097decadfd 100644
--- a/web/src/components/common/logo/OIDCIcon.jsx
+++ b/web/src/components/common/logo/OIDCIcon.jsx
@@ -18,11 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Icon } from '@douyinfe/semi-ui';
 
 const OIDCIcon = (props) => {
-  function CustomIcon() {
-    return (
+  return (
       <svg
         t='1723135116886'
         className='icon'
@@ -32,26 +30,24 @@ const OIDCIcon = (props) => {
         p-id='10969'
         width='20'
         height='20'
+        {...props}
       >
         <path
           d='M512 960C265 960 64 759 64 512S265 64 512 64s448 201 448 448-201 448-448 448z m0-882.6c-239.7 0-434.6 195-434.6 434.6s195 434.6 434.6 434.6 434.6-195 434.6-434.6S751.7 77.4 512 77.4z'
           p-id='10970'
           fill='#2c2c2c'
           stroke='#2c2c2c'
-          stroke-width='60'
+          strokeWidth='60'
         ></path>
         <path
           d='M197.7 512c0-78.3 31.6-98.8 87.2-98.8 56.2 0 87.2 20.5 87.2 98.8s-31 98.8-87.2 98.8c-55.7 0-87.2-20.5-87.2-98.8z m130.4 0c0-46.8-7.8-64.5-43.2-64.5-35.2 0-42.9 17.7-42.9 64.5 0 47.1 7.8 63.7 42.9 63.7 35.4 0 43.2-16.6 43.2-63.7zM409.7 415.9h42.1V608h-42.1V415.9zM653.9 512c0 74.2-37.1 96.1-93.6 96.1h-65.9V415.9h65.9c56.5 0 93.6 16.1 93.6 96.1z m-43.5 0c0-49.3-17.7-60.6-52.3-60.6h-21.6v120.7h21.6c35.4 0 52.3-13.3 52.3-60.1zM686.5 512c0-74.2 36.3-98.8 92.7-98.8 18.3 0 33.2 2.2 44.8 6.4v36.3c-11.9-4.2-26-6.6-42.1-6.6-34.6 0-49.8 15.5-49.8 62.6 0 50.1 15.2 62.6 49.3 62.6 15.8 0 30.2-2.2 44.8-7.5v36c-11.3 4.7-28.5 8-46.8 8-56.1-0.2-92.9-18.7-92.9-99z'
           p-id='10971'
           fill='#2c2c2c'
           stroke='#2c2c2c'
-          stroke-width='20'
+          strokeWidth='20'
         ></path>
       </svg>
     );
-  }
-
-  return <Icon svg={<CustomIcon />} />;
 };
 
 export default OIDCIcon;
diff --git a/web/src/components/common/logo/WeChatIcon.jsx b/web/src/components/common/logo/WeChatIcon.jsx
index f9f7057cf93..12f4a18eaab 100644
--- a/web/src/components/common/logo/WeChatIcon.jsx
+++ b/web/src/components/common/logo/WeChatIcon.jsx
@@ -18,11 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Icon } from '@douyinfe/semi-ui';
 
-const WeChatIcon = () => {
-  function CustomIcon() {
-    return (
+const WeChatIcon = (props) => {
+  return (
       <svg
         t='1709714447384'
         className='icon'
@@ -32,6 +30,7 @@ const WeChatIcon = () => {
         p-id='5091'
         width='20'
         height='20'
+        {...props}
       >
         <path
           d='M690.1 377.4c5.9 0 11.8 0.2 17.6 0.5-24.4-128.7-158.3-227.1-319.9-227.1C209 150.8 64 271.4 64 420.2c0 81.1 43.6 154.2 111.9 203.6 5.5 3.9 9.1 10.3 9.1 17.6 0 2.4-0.5 4.6-1.1 6.9-5.5 20.3-14.2 52.8-14.6 54.3-0.7 2.6-1.7 5.2-1.7 7.9 0 5.9 4.8 10.8 10.8 10.8 2.3 0 4.2-0.9 6.2-2l70.9-40.9c5.3-3.1 11-5 17.2-5 3.2 0 6.4 0.5 9.5 1.4 33.1 9.5 68.8 14.8 105.7 14.8 6 0 11.9-0.1 17.8-0.4-7.1-21-10.9-43.1-10.9-66 0-135.8 132.2-245.8 295.3-245.8z m-194.3-86.5c23.8 0 43.2 19.3 43.2 43.1s-19.3 43.1-43.2 43.1c-23.8 0-43.2-19.3-43.2-43.1s19.4-43.1 43.2-43.1z m-215.9 86.2c-23.8 0-43.2-19.3-43.2-43.1s19.3-43.1 43.2-43.1 43.2 19.3 43.2 43.1-19.4 43.1-43.2 43.1z'
@@ -43,13 +42,6 @@ const WeChatIcon = () => {
         ></path>
       </svg>
     );
-  }
-
-  return (
-    <div>
-      <Icon svg={<CustomIcon />} />
-    </div>
-  );
 };
 
 export default WeChatIcon;
diff --git a/web/src/components/common/markdown/MarkdownRenderer.jsx b/web/src/components/common/markdown/MarkdownRenderer.jsx
index 6a71c695f84..9f1c84d4d3e 100644
--- a/web/src/components/common/markdown/MarkdownRenderer.jsx
+++ b/web/src/components/common/markdown/MarkdownRenderer.jsx
@@ -31,9 +31,9 @@ import mermaid from 'mermaid';
 import React from 'react';
 import { useDebouncedCallback } from 'use-debounce';
 import clsx from 'clsx';
-import { Button, Tooltip, Toast } from '@douyinfe/semi-ui';
+import { Button, Tooltip } from '@heroui/react';
 import { copy, rehypeSplitWordsIntoSpans } from '../../../helpers';
-import { IconCopy } from '@douyinfe/semi-icons';
+import { Copy } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
 mermaid.initialize({
@@ -42,6 +42,14 @@ mermaid.initialize({
   securityLevel: 'loose',
 });
 
+const notify = (type, message) => {
+  window.dispatchEvent(
+    new CustomEvent('app-toast', {
+      detail: { type, content: message },
+    }),
+  );
+};
+
 export function Mermaid(props) {
   const ref = useRef(null);
   const [hasError, setHasError] = useState(false);
@@ -80,9 +88,9 @@ export function Mermaid(props) {
         cursor: 'pointer',
         overflow: 'auto',
         padding: '12px',
-        border: '1px solid var(--semi-color-border)',
+        border: '1px solid var(--app-border)',
         borderRadius: '8px',
-        backgroundColor: 'var(--semi-color-bg-1)',
+        backgroundColor: 'var(--app-surface)',
         margin: '12px 0',
       }}
       ref={ref}
@@ -192,8 +200,8 @@ export function PreCode(props) {
         ref={ref}
         style={{
           position: 'relative',
-          backgroundColor: 'var(--semi-color-fill-0)',
-          border: '1px solid var(--semi-color-border)',
+          backgroundColor: 'var(--app-surface-muted)',
+          border: '1px solid var(--app-border)',
           borderRadius: '6px',
           padding: '12px',
           margin: '12px 0',
@@ -217,33 +225,27 @@ export function PreCode(props) {
         >
           <Tooltip content={t('复制代码')}>
             <Button
-              size='small'
-              theme='borderless'
-              icon={<IconCopy />}
-              onClick={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
+              size='sm'
+              variant='outline'
+              isIconOnly
+              aria-label={t('复制代码')}
+              onPress={() => {
                 if (ref.current) {
                   const codeElement = ref.current.querySelector('code');
                   const code = codeElement?.textContent ?? '';
                   copy(code).then((success) => {
                     if (success) {
-                      Toast.success(t('代码已复制到剪贴板'));
+                      notify('success', t('代码已复制到剪贴板'));
                     } else {
-                      Toast.error(t('复制失败，请手动复制'));
+                      notify('error', t('复制失败，请手动复制'));
                     }
                   });
                 }
               }}
-              style={{
-                padding: '4px',
-                backgroundColor: 'var(--semi-color-bg-2)',
-                borderRadius: '4px',
-                cursor: 'pointer',
-                border: '1px solid var(--semi-color-border)',
-                boxShadow: '0 1px 2px rgba(0, 0, 0, 0.1)',
-              }}
-            />
+              className='h-8 w-8 rounded-lg bg-background/90 shadow-sm'
+            >
+              <Copy size={15} />
+            </Button>
           </Tooltip>
         </div>
         {props.children}
@@ -254,18 +256,18 @@ export function PreCode(props) {
       {htmlCode.length > 0 && (
         <div
           style={{
-            border: '1px solid var(--semi-color-border)',
+            border: '1px solid var(--app-border)',
             borderRadius: '8px',
             padding: '16px',
             margin: '12px 0',
-            backgroundColor: 'var(--semi-color-bg-1)',
+            backgroundColor: 'var(--app-surface)',
           }}
         >
           <div
             style={{
               marginBottom: '8px',
               fontSize: '12px',
-              color: 'var(--semi-color-text-2)',
+              color: 'var(--app-muted)',
             }}
           >
             HTML预览:
@@ -308,7 +310,7 @@ function CustomCode(props) {
             justifyContent: 'center',
           }}
         >
-          <Button size='small' onClick={toggleCollapsed} theme='solid'>
+          <Button size='sm' onPress={toggleCollapsed}>
             {t('显示更多')}
           </Button>
         </div>
@@ -327,7 +329,7 @@ function CustomCode(props) {
           overflowY: 'hidden',
           display: 'block',
           padding: '8px 12px',
-          backgroundColor: 'var(--semi-color-fill-0)',
+          backgroundColor: 'var(--app-surface-muted)',
           borderRadius: '4px',
           fontSize: '13px',
           lineHeight: '1.4',
@@ -453,7 +455,7 @@ function _MarkdownContent(props) {
               {...aProps}
               target={target}
               style={{
-                color: isUserMessage ? '#87CEEB' : 'var(--semi-color-primary)',
+                color: isUserMessage ? '#87CEEB' : 'var(--app-primary)',
                 textDecoration: 'none',
               }}
               onMouseEnter={(e) => {
@@ -472,7 +474,7 @@ function _MarkdownContent(props) {
               fontSize: '24px',
               fontWeight: 'bold',
               margin: '20px 0 12px 0',
-              color: isUserMessage ? 'white' : 'var(--semi-color-text-0)',
+              color: isUserMessage ? 'white' : 'var(--app-text)',
             }}
           />
         ),
@@ -483,7 +485,7 @@ function _MarkdownContent(props) {
               fontSize: '20px',
               fontWeight: 'bold',
               margin: '18px 0 10px 0',
-              color: isUserMessage ? 'white' : 'var(--semi-color-text-0)',
+              color: isUserMessage ? 'white' : 'var(--app-text)',
             }}
           />
         ),
@@ -494,7 +496,7 @@ function _MarkdownContent(props) {
               fontSize: '18px',
               fontWeight: 'bold',
               margin: '16px 0 8px 0',
-              color: isUserMessage ? 'white' : 'var(--semi-color-text-0)',
+              color: isUserMessage ? 'white' : 'var(--app-text)',
             }}
           />
         ),
@@ -505,7 +507,7 @@ function _MarkdownContent(props) {
               fontSize: '16px',
               fontWeight: 'bold',
               margin: '14px 0 6px 0',
-              color: isUserMessage ? 'white' : 'var(--semi-color-text-0)',
+              color: isUserMessage ? 'white' : 'var(--app-text)',
             }}
           />
         ),
@@ -516,7 +518,7 @@ function _MarkdownContent(props) {
               fontSize: '14px',
               fontWeight: 'bold',
               margin: '12px 0 4px 0',
-              color: isUserMessage ? 'white' : 'var(--semi-color-text-0)',
+              color: isUserMessage ? 'white' : 'var(--app-text)',
             }}
           />
         ),
@@ -527,7 +529,7 @@ function _MarkdownContent(props) {
               fontSize: '13px',
               fontWeight: 'bold',
               margin: '10px 0 4px 0',
-              color: isUserMessage ? 'white' : 'var(--semi-color-text-0)',
+              color: isUserMessage ? 'white' : 'var(--app-text)',
             }}
           />
         ),
@@ -537,12 +539,12 @@ function _MarkdownContent(props) {
             style={{
               borderLeft: isUserMessage
                 ? '4px solid rgba(255, 255, 255, 0.5)'
-                : '4px solid var(--semi-color-primary)',
+                : '4px solid var(--app-primary)',
               paddingLeft: '16px',
               margin: '12px 0',
               backgroundColor: isUserMessage
                 ? 'rgba(255, 255, 255, 0.1)'
-                : 'var(--semi-color-fill-0)',
+                : 'var(--app-surface-muted)',
               padding: '8px 16px',
               borderRadius: '0 4px 4px 0',
               fontStyle: 'italic',
@@ -589,7 +591,7 @@ function _MarkdownContent(props) {
                 borderCollapse: 'collapse',
                 border: isUserMessage
                   ? '1px solid rgba(255, 255, 255, 0.3)'
-                  : '1px solid var(--semi-color-border)',
+                  : '1px solid var(--app-border)',
                 borderRadius: '6px',
                 overflow: 'hidden',
               }}
@@ -603,10 +605,10 @@ function _MarkdownContent(props) {
               padding: '8px 12px',
               backgroundColor: isUserMessage
                 ? 'rgba(255, 255, 255, 0.2)'
-                : 'var(--semi-color-fill-1)',
+                : 'var(--app-surface-muted)',
               border: isUserMessage
                 ? '1px solid rgba(255, 255, 255, 0.3)'
-                : '1px solid var(--semi-color-border)',
+                : '1px solid var(--app-border)',
               fontWeight: 'bold',
               textAlign: 'left',
               color: isUserMessage ? 'white' : 'inherit',
@@ -620,7 +622,7 @@ function _MarkdownContent(props) {
               padding: '8px 12px',
               border: isUserMessage
                 ? '1px solid rgba(255, 255, 255, 0.3)'
-                : '1px solid var(--semi-color-border)',
+                : '1px solid var(--app-border)',
               color: isUserMessage ? 'white' : 'inherit',
             }}
           />
@@ -654,7 +656,7 @@ export function MarkdownRenderer(props) {
         fontSize: `${fontSize}px`,
         fontFamily: fontFamily,
         lineHeight: '1.6',
-        color: 'var(--semi-color-text-0)',
+        color: 'var(--app-text)',
         ...style,
       }}
       dir='auto'
@@ -667,15 +669,15 @@ export function MarkdownRenderer(props) {
             alignItems: 'center',
             gap: '8px',
             padding: '16px',
-            color: 'var(--semi-color-text-2)',
+            color: 'var(--app-muted)',
           }}
         >
           <div
             style={{
               width: '16px',
               height: '16px',
-              border: '2px solid var(--semi-color-border)',
-              borderTop: '2px solid var(--semi-color-primary)',
+              border: '2px solid var(--app-border)',
+              borderTop: '2px solid var(--app-primary)',
               borderRadius: '50%',
               animation: 'spin 1s linear infinite',
             }}
diff --git a/web/src/components/common/markdown/markdown.css b/web/src/components/common/markdown/markdown.css
index e1e9e9cb49a..fd98276a0f8 100644
--- a/web/src/components/common/markdown/markdown.css
+++ b/web/src/components/common/markdown/markdown.css
@@ -2,7 +2,7 @@
 .markdown-body {
   font-family: inherit;
   line-height: 1.6;
-  color: var(--semi-color-text-0);
+  color: var(--app-text);
   overflow-wrap: break-word;
   word-wrap: break-word;
   word-break: break-word;
@@ -93,25 +93,25 @@
   }
 }
 
-/* 代码高亮主题 - 适配Semi Design */
+/* 代码高亮主题 - 适配 HeroUI tokens */
 .hljs {
   display: block;
   overflow-x: auto;
   padding: 0;
   background: transparent;
-  color: var(--semi-color-text-0);
+  color: var(--app-text);
 }
 
 .hljs-comment,
 .hljs-quote {
-  color: var(--semi-color-text-2);
+  color: var(--app-muted);
   font-style: italic;
 }
 
 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-subst {
-  color: var(--semi-color-primary);
+  color: var(--app-primary);
   font-weight: bold;
 }
 
@@ -120,18 +120,18 @@
 .hljs-variable,
 .hljs-template-variable,
 .hljs-tag .hljs-attr {
-  color: var(--semi-color-warning);
+  color: var(--app-warning);
 }
 
 .hljs-string,
 .hljs-doctag {
-  color: var(--semi-color-success);
+  color: var(--app-success);
 }
 
 .hljs-title,
 .hljs-section,
 .hljs-selector-id {
-  color: var(--semi-color-primary);
+  color: var(--app-primary);
   font-weight: bold;
 }
 
@@ -141,42 +141,42 @@
 
 .hljs-type,
 .hljs-class .hljs-title {
-  color: var(--semi-color-info);
+  color: var(--app-primary);
   font-weight: bold;
 }
 
 .hljs-tag,
 .hljs-name,
 .hljs-attribute {
-  color: var(--semi-color-primary);
+  color: var(--app-primary);
   font-weight: normal;
 }
 
 .hljs-regexp,
 .hljs-link {
-  color: var(--semi-color-tertiary);
+  color: var(--app-muted);
 }
 
 .hljs-symbol,
 .hljs-bullet {
-  color: var(--semi-color-warning);
+  color: var(--app-warning);
 }
 
 .hljs-built_in,
 .hljs-builtin-name {
-  color: var(--semi-color-info);
+  color: var(--app-primary);
 }
 
 .hljs-meta {
-  color: var(--semi-color-text-2);
+  color: var(--app-muted);
 }
 
 .hljs-deletion {
-  background: var(--semi-color-danger-light-default);
+  background: color-mix(in srgb, var(--app-danger) 12%, transparent);
 }
 
 .hljs-addition {
-  background: var(--semi-color-success-light-default);
+  background: color-mix(in srgb, var(--app-success) 12%, transparent);
 }
 
 .hljs-emphasis {
@@ -205,7 +205,7 @@ pre {
 }
 
 pre:hover {
-  border-color: var(--semi-color-primary) !important;
+  border-color: var(--app-primary) !important;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
@@ -230,15 +230,15 @@ pre:hover .copy-code-button {
 }
 
 /* 确保按钮可点击 */
-.copy-code-button .semi-button {
+.copy-code-button button {
   pointer-events: auto !important;
   cursor: pointer !important;
   transition: all 0.2s ease;
 }
 
-.copy-code-button .semi-button:hover {
-  background-color: var(--semi-color-fill-1) !important;
-  border-color: var(--semi-color-primary) !important;
+.copy-code-button button:hover {
+  background-color: var(--app-surface-muted) !important;
+  border-color: var(--app-primary) !important;
   transform: scale(1.05);
 }
 
@@ -280,17 +280,17 @@ pre:hover .copy-code-button {
   left: -8px;
   top: -8px;
   font-size: 24px;
-  color: var(--semi-color-primary);
+  color: var(--app-primary);
   opacity: 0.3;
 }
 
 /* 列表样式增强 */
 .markdown-body ul li::marker {
-  color: var(--semi-color-primary);
+  color: var(--app-primary);
 }
 
 .markdown-body ol li::marker {
-  color: var(--semi-color-primary);
+  color: var(--app-primary);
   font-weight: bold;
 }
 
@@ -301,7 +301,7 @@ pre:hover .copy-code-button {
   background: linear-gradient(
     to right,
     transparent,
-    var(--semi-color-border),
+    var(--app-border),
     transparent
   );
   margin: 24px 0;
@@ -318,12 +318,12 @@ pre:hover .copy-code-button {
 
 /* 内联代码样式 */
 .markdown-body code:not(pre code) {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--app-surface-muted);
   padding: 2px 6px;
   border-radius: 4px;
   font-size: 0.9em;
-  color: var(--semi-color-primary);
-  border: 1px solid var(--semi-color-border);
+  color: var(--app-primary);
+  border: 1px solid var(--app-border);
 }
 
 /* 标题锚点样式 */
@@ -349,11 +349,11 @@ pre:hover .copy-code-button {
 
 /* 键盘按键样式 */
 .markdown-body kbd {
-  background-color: var(--semi-color-fill-0);
-  border: 1px solid var(--semi-color-border);
+  background-color: var(--app-surface-muted);
+  border: 1px solid var(--app-border);
   border-radius: 3px;
-  box-shadow: 0 1px 0 var(--semi-color-border);
-  color: var(--semi-color-text-0);
+  box-shadow: 0 1px 0 var(--app-border);
+  color: var(--app-text);
   display: inline-block;
   font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
   font-size: 0.85em;
@@ -365,7 +365,7 @@ pre:hover .copy-code-button {
 
 /* 详情折叠样式 */
 .markdown-body details {
-  border: 1px solid var(--semi-color-border);
+  border: 1px solid var(--app-border);
   border-radius: 6px;
   padding: 12px;
   margin: 12px 0;
@@ -374,17 +374,17 @@ pre:hover .copy-code-button {
 .markdown-body summary {
   cursor: pointer;
   font-weight: bold;
-  color: var(--semi-color-primary);
+  color: var(--app-primary);
   margin-bottom: 8px;
 }
 
 .markdown-body summary:hover {
-  color: var(--semi-color-primary-hover);
+  color: color-mix(in srgb, var(--app-primary) 86%, white);
 }
 
 /* 脚注样式 */
 .markdown-body .footnote-ref {
-  color: var(--semi-color-primary);
+  color: var(--app-primary);
   text-decoration: none;
   font-weight: bold;
 }
@@ -395,32 +395,32 @@ pre:hover .copy-code-button {
 
 /* 警告块样式 */
 .markdown-body .warning {
-  background-color: var(--semi-color-warning-light-default);
-  border-left: 4px solid var(--semi-color-warning);
+  background-color: color-mix(in srgb, var(--app-warning) 12%, transparent);
+  border-left: 4px solid var(--app-warning);
   padding: 12px 16px;
   margin: 12px 0;
   border-radius: 0 6px 6px 0;
 }
 
 .markdown-body .info {
-  background-color: var(--semi-color-info-light-default);
-  border-left: 4px solid var(--semi-color-info);
+  background-color: color-mix(in srgb, var(--app-primary) 12%, transparent);
+  border-left: 4px solid var(--app-primary);
   padding: 12px 16px;
   margin: 12px 0;
   border-radius: 0 6px 6px 0;
 }
 
 .markdown-body .success {
-  background-color: var(--semi-color-success-light-default);
-  border-left: 4px solid var(--semi-color-success);
+  background-color: color-mix(in srgb, var(--app-success) 12%, transparent);
+  border-left: 4px solid var(--app-success);
   padding: 12px 16px;
   margin: 12px 0;
   border-radius: 0 6px 6px 0;
 }
 
 .markdown-body .danger {
-  background-color: var(--semi-color-danger-light-default);
-  border-left: 4px solid var(--semi-color-danger);
+  background-color: color-mix(in srgb, var(--app-danger) 12%, transparent);
+  border-left: 4px solid var(--app-danger);
   padding: 12px 16px;
   margin: 12px 0;
   border-radius: 0 6px 6px 0;
diff --git a/web/src/components/common/modals/RiskAcknowledgementModal.jsx b/web/src/components/common/modals/RiskAcknowledgementModal.jsx
index 54aa62eaace..5822f579491 100644
--- a/web/src/components/common/modals/RiskAcknowledgementModal.jsx
+++ b/web/src/components/common/modals/RiskAcknowledgementModal.jsx
@@ -20,18 +20,21 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
   Button,
-  Typography,
   Checkbox,
   Input,
-  Space,
-} from '@douyinfe/semi-ui';
-import { IconAlertTriangle } from '@douyinfe/semi-icons';
+  useOverlayState,
+} from '@heroui/react';
+import { TriangleAlert } from 'lucide-react';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import MarkdownRenderer from '../markdown/MarkdownRenderer';
 
-const { Text } = Typography;
-
 const RiskMarkdownBlock = React.memo(function RiskMarkdownBlock({
   markdownContent,
 }) {
@@ -41,12 +44,8 @@ const RiskMarkdownBlock = React.memo(function RiskMarkdownBlock({
 
   return (
     <div
-      className='rounded-lg'
-      style={{
-        border: '1px solid var(--semi-color-warning-light-hover)',
-        padding: '12px',
-        contentVisibility: 'auto',
-      }}
+      className='rounded-2xl border border-warning/30 bg-warning/5 p-3'
+      style={{ contentVisibility: 'auto' }}
     >
       <MarkdownRenderer content={markdownContent} />
     </div>
@@ -91,6 +90,12 @@ const RiskAcknowledgementModal = React.memo(function RiskAcknowledgementModal({
 
   const detailText = useMemo(() => detailItems.join(', '), [detailItems]);
   const canConfirm = allChecked && typedMatched;
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
 
   const handleChecklistChange = useCallback((index, checked) => {
     setCheckedItems((previous) => {
@@ -101,53 +106,31 @@ const RiskAcknowledgementModal = React.memo(function RiskAcknowledgementModal({
   }, []);
 
   return (
-    <Modal
-      visible={visible}
-      title={
-        <Space align='center'>
-          <IconAlertTriangle style={{ color: 'var(--semi-color-warning)' }} />
-          <span>{title}</span>
-        </Space>
-      }
-      width={isMobile ? '100%' : 860}
-      centered
-      maskClosable={false}
-      closeOnEsc={false}
-      onCancel={onCancel}
-      bodyStyle={{
-        maxHeight: isMobile ? '70vh' : '72vh',
-        overflowY: 'auto',
-        padding: isMobile ? '12px 16px' : '18px 22px',
-      }}
-      footer={
-        <Space>
-          <Button onClick={onCancel}>{cancelText}</Button>
-          <Button
-            theme='solid'
-            type='danger'
-            disabled={!canConfirm}
-            onClick={onConfirm}
-          >
-            {confirmText}
-          </Button>
-        </Space>
-      }
-    >
-      <div className='flex flex-col gap-4'>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer
+          size={isMobile ? 'full' : 'xl'}
+          scroll='inside'
+          placement='center'
+        >
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <TriangleAlert className='text-warning' size={20} />
+                <span>{title}</span>
+              </div>
+            </ModalHeader>
+            <ModalBody className='max-h-[72vh] overflow-y-auto px-4 py-4 md:px-6'>
+              <div className='flex flex-col gap-4'>
 
         <RiskMarkdownBlock markdownContent={markdownContent} />
 
         {detailItems.length > 0 ? (
           <div
-            className='flex flex-col gap-2 rounded-lg'
-            style={{
-              border: '1px solid var(--semi-color-warning-light-hover)',
-              background: 'var(--semi-color-fill-0)',
-              padding: isMobile ? '10px 12px' : '12px 14px',
-            }}
+            className='flex flex-col gap-2 rounded-2xl border border-warning/30 bg-warning/5 p-3 md:p-4'
           >
-            {detailTitle ? <Text strong>{detailTitle}</Text> : null}
-            <div className='font-mono text-xs break-all bg-orange-50 border border-orange-200 rounded-md p-2'>
+            {detailTitle ? <strong className='text-sm'>{detailTitle}</strong> : null}
+            <div className='break-all rounded-xl border border-warning/20 bg-background/80 p-2 font-mono text-xs'>
               {detailText}
             </div>
           </div>
@@ -155,20 +138,13 @@ const RiskAcknowledgementModal = React.memo(function RiskAcknowledgementModal({
 
         {checklist.length > 0 ? (
           <div
-            className='flex flex-col gap-2 rounded-lg'
-            style={{
-              border: '1px solid var(--semi-color-border)',
-              background: 'var(--semi-color-fill-0)',
-              padding: isMobile ? '10px 12px' : '12px 14px',
-            }}
+            className='flex flex-col gap-3 rounded-2xl border border-border bg-surface-secondary/80 p-3 md:p-4'
           >
             {checklist.map((item, index) => (
               <Checkbox
                 key={`risk-check-${index}`}
-                checked={!!checkedItems[index]}
-                onChange={(event) => {
-                  handleChecklistChange(index, event.target.checked);
-                }}
+                isSelected={!!checkedItems[index]}
+                onValueChange={(checked) => handleChecklistChange(index, checked)}
               >
                 {item}
               </Checkbox>
@@ -178,20 +154,15 @@ const RiskAcknowledgementModal = React.memo(function RiskAcknowledgementModal({
 
         {requiredText ? (
           <div
-            className='flex flex-col gap-2 rounded-lg'
-            style={{
-              border: '1px solid var(--semi-color-danger-light-hover)',
-              background: 'var(--semi-color-danger-light-default)',
-              padding: isMobile ? '10px 12px' : '12px 14px',
-            }}
+            className='flex flex-col gap-2 rounded-2xl border border-danger/30 bg-danger/5 p-3 md:p-4'
           >
-            {inputPrompt ? <Text strong>{inputPrompt}</Text> : null}
-            <div className='font-mono text-xs break-all rounded-md p-2 bg-gray-50 border border-gray-200'>
+            {inputPrompt ? <strong className='text-sm'>{inputPrompt}</strong> : null}
+            <div className='break-all rounded-xl border border-danger/20 bg-background/80 p-2 font-mono text-xs'>
               {requiredText}
             </div>
             <Input
               value={typedText}
-              onChange={setTypedText}
+              onChange={(event) => setTypedText(event.target.value)}
               placeholder={inputPlaceholder}
               autoFocus={visible}
               onCopy={(event) => event.preventDefault()}
@@ -200,13 +171,29 @@ const RiskAcknowledgementModal = React.memo(function RiskAcknowledgementModal({
               onDrop={(event) => event.preventDefault()}
             />
             {!typedMatched && typedText ? (
-              <Text type='danger' size='small'>
+              <span className='text-sm text-danger'>
                 {mismatchText}
-              </Text>
+              </span>
             ) : null}
           </div>
         ) : null}
-      </div>
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='outline' onPress={onCancel}>
+                {cancelText}
+              </Button>
+              <Button
+                variant='danger'
+                isDisabled={!canConfirm}
+                onPress={onConfirm}
+              >
+                {confirmText}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 });
diff --git a/web/src/components/common/modals/SecureVerificationModal.jsx b/web/src/components/common/modals/SecureVerificationModal.jsx
index 6c61c291d1d..236a54f18a4 100644
--- a/web/src/components/common/modals/SecureVerificationModal.jsx
+++ b/web/src/components/common/modals/SecureVerificationModal.jsx
@@ -21,14 +21,19 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
   Button,
   Input,
-  Typography,
+  Tab,
   Tabs,
-  TabPane,
-  Space,
-  Spin,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
+import { KeyRound, ShieldCheck, TriangleAlert } from 'lucide-react';
 
 /**
  * 通用安全验证模态框组件
@@ -61,6 +66,12 @@ const SecureVerificationModal = ({
 
   const { has2FA, hasPasskey, passkeySupported } = verificationMethods;
   const { method, loading, code } = verificationState;
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen && !loading) onCancel();
+    },
+  });
 
   useEffect(() => {
     if (visible) {
@@ -83,238 +94,131 @@ const SecureVerificationModal = ({
   // 如果用户没有启用任何验证方式
   if (visible && !has2FA && !hasPasskey) {
     return (
-      <Modal
-        title={title || t('安全验证')}
-        visible={visible}
-        onCancel={onCancel}
-        footer={<Button onClick={onCancel}>{t('确定')}</Button>}
-        width={500}
-        style={{ maxWidth: '90vw' }}
-      >
-        <div className='text-center py-6'>
-          <div className='mb-4'>
-            <svg
-              className='w-16 h-16 text-yellow-500 mx-auto mb-4'
-              fill='currentColor'
-              viewBox='0 0 20 20'
-            >
-              <path
-                fillRule='evenodd'
-                d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z'
-                clipRule='evenodd'
-              />
-            </svg>
-          </div>
-          <Typography.Title heading={4} className='mb-2'>
-            {t('需要安全验证')}
-          </Typography.Title>
-          <Typography.Text type='tertiary'>
-            {t('您需要先启用两步验证或 Passkey 才能查看敏感信息。')}
-          </Typography.Text>
-          <br />
-          <Typography.Text type='tertiary'>
-            {t('请前往个人设置 → 安全设置进行配置。')}
-          </Typography.Text>
-        </div>
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='md' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader>{title || t('安全验证')}</ModalHeader>
+              <ModalBody>
+                <div className='py-6 text-center'>
+                  <div className='mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-3xl bg-warning/10 text-warning'>
+                    <TriangleAlert size={32} />
+                  </div>
+                  <h3 className='mb-2 text-lg font-semibold text-foreground'>
+                    {t('需要安全验证')}
+                  </h3>
+                  <p className='text-sm leading-6 text-muted'>
+                    {t('您需要先启用两步验证或 Passkey 才能查看敏感信息。')}
+                    <br />
+                    {t('请前往个人设置 → 安全设置进行配置。')}
+                  </p>
+                </div>
+              </ModalBody>
+              <ModalFooter>
+                <Button onPress={onCancel}>{t('确定')}</Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
     );
   }
 
   return (
-    <Modal
-      title={title || t('安全验证')}
-      visible={visible}
-      onCancel={loading ? undefined : onCancel}
-      closeOnEsc={!loading}
-      footer={null}
-      width={460}
-      centered
-      style={{
-        maxWidth: 'calc(100vw - 32px)',
-      }}
-      bodyStyle={{
-        padding: '20px 24px',
-      }}
-    >
-      <div style={{ width: '100%' }}>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='md' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader>{title || t('安全验证')}</ModalHeader>
+            <ModalBody className='px-5 py-5'>
+      <div className='w-full'>
         {/* 描述信息 */}
         {description && (
-          <Typography.Paragraph
-            type='tertiary'
-            style={{
-              margin: '0 0 20px 0',
-              fontSize: '14px',
-              lineHeight: '1.6',
-            }}
-          >
+          <p className='mb-5 text-sm leading-6 text-muted'>
             {description}
-          </Typography.Paragraph>
+          </p>
         )}
 
         {/* 验证方式选择 */}
         <Tabs
-          activeKey={method}
-          onChange={onMethodSwitch}
-          type='line'
+          selectedKey={method}
+          onSelectionChange={(key) => onMethodSwitch(String(key))}
           size='default'
-          style={{ margin: 0 }}
+          variant='underlined'
         >
           {has2FA && (
-            <TabPane tab={t('两步验证')} itemKey='2fa'>
-              <div style={{ paddingTop: '20px' }}>
-                <div style={{ marginBottom: '12px' }}>
+            <Tab key='2fa' title={t('两步验证')}>
+              <div className='pt-5'>
+                <div className='mb-3'>
                   <Input
                     placeholder={t('请输入6位验证码或8位备用码')}
                     value={code}
-                    onChange={onCodeChange}
+                    onChange={(event) => onCodeChange(event.target.value)}
                     size='large'
                     maxLength={8}
                     onKeyDown={handleKeyDown}
                     autoFocus={method === '2fa'}
-                    disabled={loading}
-                    prefix={
-                      <svg
-                        style={{
-                          width: 16,
-                          height: 16,
-                          marginRight: 8,
-                          flexShrink: 0,
-                        }}
-                        fill='currentColor'
-                        viewBox='0 0 20 20'
-                      >
-                        <path
-                          fillRule='evenodd'
-                          d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z'
-                          clipRule='evenodd'
-                        />
-                      </svg>
-                    }
-                    style={{ width: '100%' }}
+                    isDisabled={loading}
+                    startContent={<KeyRound size={16} />}
                   />
                 </div>
 
-                <Typography.Text
-                  type='tertiary'
-                  size='small'
-                  style={{
-                    display: 'block',
-                    marginBottom: '20px',
-                    fontSize: '13px',
-                    lineHeight: '1.5',
-                  }}
-                >
+                <p className='mb-5 text-sm leading-6 text-muted'>
                   {t('从认证器应用中获取验证码，或使用备用码')}
-                </Typography.Text>
+                </p>
 
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    gap: '8px',
-                    flexWrap: 'wrap',
-                  }}
-                >
-                  <Button onClick={onCancel} disabled={loading}>
+                <div className='flex flex-wrap justify-end gap-2'>
+                  <Button variant='outline' onPress={onCancel} isDisabled={loading}>
                     {t('取消')}
                   </Button>
                   <Button
-                    theme='solid'
-                    type='primary'
-                    loading={loading}
-                    disabled={!code.trim() || loading}
-                    onClick={() => onVerify(method, code)}
+                    isPending={loading}
+                    isDisabled={!code.trim() || loading}
+                    onPress={() => onVerify(method, code)}
                   >
                     {t('验证')}
                   </Button>
                 </div>
               </div>
-            </TabPane>
+            </Tab>
           )}
 
           {hasPasskey && passkeySupported && (
-            <TabPane tab={t('Passkey')} itemKey='passkey'>
-              <div style={{ paddingTop: '20px' }}>
-                <div
-                  style={{
-                    textAlign: 'center',
-                    padding: '24px 16px',
-                    marginBottom: '20px',
-                  }}
-                >
-                  <div
-                    style={{
-                      width: 56,
-                      height: 56,
-                      margin: '0 auto 16px',
-                      display: 'flex',
-                      alignItems: 'center',
-                      justifyContent: 'center',
-                      borderRadius: '50%',
-                      background: 'var(--semi-color-primary-light-default)',
-                    }}
-                  >
-                    <svg
-                      style={{
-                        width: 28,
-                        height: 28,
-                        color: 'var(--semi-color-primary)',
-                      }}
-                      fill='currentColor'
-                      viewBox='0 0 20 20'
-                    >
-                      <path
-                        fillRule='evenodd'
-                        d='M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z'
-                        clipRule='evenodd'
-                      />
-                    </svg>
+            <Tab key='passkey' title={t('Passkey')}>
+              <div className='pt-5'>
+                <div className='mb-5 px-4 py-6 text-center'>
+                  <div className='mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-accent/10 text-accent'>
+                    <ShieldCheck size={28} />
                   </div>
-                  <Typography.Title
-                    heading={5}
-                    style={{ margin: '0 0 8px', fontSize: '16px' }}
-                  >
+                  <h3 className='mb-2 text-base font-semibold text-foreground'>
                     {t('使用 Passkey 验证')}
-                  </Typography.Title>
-                  <Typography.Text
-                    type='tertiary'
-                    style={{
-                      display: 'block',
-                      margin: 0,
-                      fontSize: '13px',
-                      lineHeight: '1.5',
-                    }}
-                  >
+                  </h3>
+                  <p className='text-sm leading-6 text-muted'>
                     {t('点击验证按钮，使用您的生物特征或安全密钥')}
-                  </Typography.Text>
+                  </p>
                 </div>
 
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    gap: '8px',
-                    flexWrap: 'wrap',
-                  }}
-                >
-                  <Button onClick={onCancel} disabled={loading}>
+                <div className='flex flex-wrap justify-end gap-2'>
+                  <Button variant='outline' onPress={onCancel} isDisabled={loading}>
                     {t('取消')}
                   </Button>
                   <Button
-                    theme='solid'
-                    type='primary'
-                    loading={loading}
-                    disabled={loading}
-                    onClick={() => onVerify(method)}
+                    isPending={loading}
+                    isDisabled={loading}
+                    onPress={() => onVerify(method)}
                   >
                     {t('验证 Passkey')}
                   </Button>
                 </div>
               </div>
-            </TabPane>
+            </Tab>
           )}
         </Tabs>
       </div>
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/common/ui/CardPro.jsx b/web/src/components/common/ui/CardPro.jsx
index 2c95f97c750..9bcc1023d34 100644
--- a/web/src/components/common/ui/CardPro.jsx
+++ b/web/src/components/common/ui/CardPro.jsx
@@ -18,12 +18,10 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState } from 'react';
-import { Card, Divider, Typography, Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import PropTypes from 'prop-types';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
-import { IconEyeOpened, IconEyeClosed } from '@douyinfe/semi-icons';
-
-const { Text } = Typography;
+import { Eye, EyeOff } from 'lucide-react';
 
 /**
  * CardPro 高级卡片组件
@@ -69,6 +67,7 @@ const CardPro = ({
   };
 
   const hasMobileHideableContent = actionsArea || searchArea;
+  const divider = <div className='my-3 h-px w-full bg-border' />;
 
   const renderHeader = () => {
     const hasContent =
@@ -86,10 +85,9 @@ const CardPro = ({
         )}
 
         {/* 第一个分隔线 - 在描述信息或统计信息后面 */}
-        {((type === 'type1' || type === 'type3') && descriptionArea) ||
-        (type === 'type2' && statsArea) ? (
-          <Divider margin='12px' />
-        ) : null}
+        {(((type === 'type1' || type === 'type3') && descriptionArea) ||
+          (type === 'type2' && statsArea)) &&
+          divider}
 
         {/* 类型切换/标签区域 - 主要用于type3 */}
         {type === 'type3' && tabsArea && <>{tabsArea}</>}
@@ -99,12 +97,11 @@ const CardPro = ({
           <>
             <div className='w-full mb-2'>
               <Button
-                onClick={toggleMobileActions}
-                icon={showMobileActions ? <IconEyeClosed /> : <IconEyeOpened />}
-                type='tertiary'
-                size='small'
-                theme='outline'
-                block
+                onPress={toggleMobileActions}
+                startContent={showMobileActions ? <EyeOff size={16} /> : <Eye size={16} />}
+                variant='bordered'
+                size='sm'
+                className='w-full'
               >
                 {showMobileActions ? t('隐藏操作项') : t('显示操作项')}
               </Button>
@@ -122,7 +119,7 @@ const CardPro = ({
             (Array.isArray(actionsArea) ? (
               actionsArea.map((area, idx) => (
                 <React.Fragment key={idx}>
-                  {idx !== 0 && <Divider />}
+                  {idx !== 0 && divider}
                   <div className='w-full'>{area}</div>
                 </React.Fragment>
               ))
@@ -131,7 +128,7 @@ const CardPro = ({
             ))}
 
           {/* 当同时存在操作区和搜索区时，插入分隔线 */}
-          {actionsArea && searchArea && <Divider />}
+          {actionsArea && searchArea && divider}
 
           {/* 搜索表单区域 - 所有类型都可能有 */}
           {searchArea && <div className='w-full'>{searchArea}</div>}
@@ -148,8 +145,7 @@ const CardPro = ({
 
     return (
       <div
-        className={`flex w-full pt-4 border-t ${isMobile ? 'justify-center' : 'justify-between items-center'}`}
-        style={{ borderColor: 'var(--semi-color-border)' }}
+        className={`flex w-full border-t border-border pt-4 ${isMobile ? 'justify-center' : 'justify-between items-center'}`}
       >
         {paginationArea}
       </div>
@@ -159,17 +155,16 @@ const CardPro = ({
   const footerContent = renderFooter();
 
   return (
-    <Card
-      className={`table-scroll-card !rounded-2xl ${className}`}
-      title={headerContent}
-      footer={footerContent}
-      shadows={shadows}
-      bordered={bordered}
+    <section
+      className={`table-scroll-card rounded-2xl bg-background/90 shadow-sm backdrop-blur ${bordered ? 'border border-border' : ''} ${className}`}
       style={style}
+      data-shadow={shadows || undefined}
       {...props}
     >
-      {children}
-    </Card>
+      {headerContent && <div className='p-4 pb-3'>{headerContent}</div>}
+      <div className='p-4 pt-0'>{children}</div>
+      {footerContent && <div className='px-4 pb-4'>{footerContent}</div>}
+    </section>
   );
 };
 
diff --git a/web/src/components/common/ui/CardTable.jsx b/web/src/components/common/ui/CardTable.jsx
index 8a331d07ec0..a341ad66bb9 100644
--- a/web/src/components/common/ui/CardTable.jsx
+++ b/web/src/components/common/ui/CardTable.jsx
@@ -17,18 +17,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Table,
-  Card,
   Skeleton,
   Pagination,
-  Empty,
   Button,
-  Collapsible,
-} from '@douyinfe/semi-ui';
-import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
+} from '@heroui/react';
+import { ChevronDown, ChevronUp, Inbox } from 'lucide-react';
 import PropTypes from 'prop-types';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
@@ -57,38 +53,148 @@ const CardTable = ({
     return record[rowKey] !== undefined ? record[rowKey] : index;
   };
 
+  const visibleColumns = columns.filter((col) => {
+    if (tableProps?.visibleColumns && col.key) {
+      return tableProps.visibleColumns[col.key];
+    }
+    return true;
+  });
+
+  const getCellValue = (record, dataIndex) => {
+    if (Array.isArray(dataIndex)) {
+      return dataIndex.reduce((value, key) => value?.[key], record);
+    }
+    if (typeof dataIndex === 'string' && dataIndex.includes('.')) {
+      return dataIndex.split('.').reduce((value, key) => value?.[key], record);
+    }
+    return record?.[dataIndex];
+  };
+
+  const renderCell = (col, record, index) => {
+    const value = getCellValue(record, col.dataIndex);
+    return col.render ? col.render(value, record, index) : value;
+  };
+
+  const renderPagination = () => {
+    if (hidePagination || !tableProps.pagination || dataSource.length === 0) {
+      return null;
+    }
+
+    const pagination = tableProps.pagination;
+    const pageSize = pagination.pageSize || pagination.defaultPageSize || 10;
+    const total = pagination.total || dataSource.length;
+    const currentPage = pagination.currentPage || pagination.current || 1;
+
+    return (
+      <div className='mt-3 flex justify-center'>
+        <Pagination
+          page={currentPage}
+          total={Math.max(1, Math.ceil(total / pageSize))}
+          onChange={(page) => {
+            pagination.onPageChange?.(page);
+            pagination.onChange?.(page, pageSize);
+          }}
+        />
+      </div>
+    );
+  };
+
+  const renderEmpty = () => {
+    if (tableProps.empty) return tableProps.empty;
+    return (
+      <div className='flex flex-col items-center justify-center gap-3 rounded-2xl border border-dashed border-border bg-background/60 p-8 text-center text-muted'>
+        <div className='flex h-12 w-12 items-center justify-center rounded-2xl bg-surface-secondary'>
+          <Inbox size={24} />
+        </div>
+        <span className='text-sm'>{t('暂无数据')}</span>
+      </div>
+    );
+  };
+
   if (!isMobile) {
-    const finalTableProps = hidePagination
-      ? { ...tableProps, pagination: false }
-      : tableProps;
+    if (showSkeleton) {
+      return (
+        <div className='overflow-hidden rounded-2xl border border-border bg-background/80'>
+          <div className='grid gap-px bg-border'>
+            {[0, 1, 2, 3].map((row) => (
+              <div
+                key={row}
+                className='grid bg-background p-3'
+                style={{
+                  gridTemplateColumns: `repeat(${Math.max(visibleColumns.length, 1)}, minmax(0, 1fr))`,
+                }}
+              >
+                {visibleColumns.map((col, idx) => (
+                  <Skeleton
+                    key={col.key || col.dataIndex || idx}
+                    className='h-4 w-3/4 rounded-lg bg-surface-secondary'
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      );
+    }
+
+    if (!dataSource || dataSource.length === 0) {
+      return renderEmpty();
+    }
 
     return (
-      <Table
-        columns={columns}
-        dataSource={dataSource}
-        loading={loading}
-        rowKey={rowKey}
-        {...finalTableProps}
-      />
+      <div className={tableProps.className}>
+        <div className='overflow-x-auto rounded-2xl border border-border bg-background/80'>
+          <table className='min-w-full border-collapse text-sm'>
+            <thead className='bg-surface-secondary text-left text-xs font-semibold uppercase tracking-wide text-muted'>
+              <tr>
+                {visibleColumns.map((col, idx) => (
+                  <th
+                    key={col.key || col.dataIndex || idx}
+                    className='whitespace-nowrap px-4 py-3'
+                    style={{ width: col.width }}
+                  >
+                    {col.title}
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody className='divide-y divide-border'>
+              {dataSource.map((record, index) => {
+                const rowProps = tableProps.onRow?.(record, index) || {};
+                return (
+                  <tr
+                    key={getRowKey(record, index)}
+                    className='transition-colors hover:bg-surface-secondary/60'
+                    {...rowProps}
+                  >
+                    {visibleColumns.map((col, colIdx) => (
+                      <td
+                        key={col.key || col.dataIndex || colIdx}
+                        className='px-4 py-3 align-middle text-foreground'
+                      >
+                        {renderCell(col, record, index) ?? '-'}
+                      </td>
+                    ))}
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+        {renderPagination()}
+      </div>
     );
   }
 
   if (showSkeleton) {
-    const visibleCols = columns.filter((col) => {
-      if (tableProps?.visibleColumns && col.key) {
-        return tableProps.visibleColumns[col.key];
-      }
-      return true;
-    });
-
     const renderSkeletonCard = (key) => {
-      const placeholder = (
-        <div className='p-2'>
-          {visibleCols.map((col, idx) => {
+      return (
+        <div key={key} className='rounded-2xl border border-border bg-background p-4 shadow-sm'>
+          {visibleColumns.map((col, idx) => {
             if (!col.title) {
               return (
                 <div key={idx} className='mt-2 flex justify-end'>
-                  <Skeleton.Title active style={{ width: 100, height: 24 }} />
+                  <Skeleton className='h-6 w-24 rounded-lg bg-surface-secondary' />
                 </div>
               );
             }
@@ -96,29 +202,18 @@ const CardTable = ({
             return (
               <div
                 key={idx}
-                className='flex justify-between items-center py-1 border-b last:border-b-0 border-dashed'
-                style={{ borderColor: 'var(--semi-color-border)' }}
+                className='flex justify-between items-center border-b border-dashed border-border py-2 last:border-b-0'
               >
-                <Skeleton.Title active style={{ width: 80, height: 14 }} />
-                <Skeleton.Title
-                  active
-                  style={{
-                    width: `${50 + (idx % 3) * 10}%`,
-                    maxWidth: 180,
-                    height: 14,
-                  }}
+                <Skeleton className='h-4 w-20 rounded-lg bg-surface-secondary' />
+                <Skeleton
+                  className='h-4 rounded-lg bg-surface-secondary'
+                  style={{ width: `${50 + (idx % 3) * 10}%`, maxWidth: 180 }}
                 />
               </div>
             );
           })}
         </div>
       );
-
-      return (
-        <Card key={key} className='!rounded-2xl shadow-sm'>
-          <Skeleton loading={true} active placeholder={placeholder}></Skeleton>
-        </Card>
-      );
     };
 
     return (
@@ -139,19 +234,11 @@ const CardTable = ({
       (!tableProps.rowExpandable || tableProps.rowExpandable(record));
 
     return (
-      <Card key={rowKeyVal} className='!rounded-2xl shadow-sm'>
-        {columns.map((col, colIdx) => {
-          if (
-            tableProps?.visibleColumns &&
-            !tableProps.visibleColumns[col.key]
-          ) {
-            return null;
-          }
+      <div key={rowKeyVal} className='rounded-2xl border border-border bg-background p-4 shadow-sm'>
+        {visibleColumns.map((col, colIdx) => {
 
           const title = col.title;
-          const cellContent = col.render
-            ? col.render(record[col.dataIndex], record, index)
-            : record[col.dataIndex];
+          const cellContent = renderCell(col, record, index);
 
           if (!title) {
             return (
@@ -164,10 +251,9 @@ const CardTable = ({
           return (
             <div
               key={col.key || colIdx}
-              className='flex justify-between items-start py-1 border-b last:border-b-0 border-dashed'
-              style={{ borderColor: 'var(--semi-color-border)' }}
+              className='flex justify-between items-start border-b border-dashed border-border py-2 last:border-b-0'
             >
-              <span className='font-medium text-gray-600 mr-2 whitespace-nowrap select-none'>
+              <span className='mr-2 select-none whitespace-nowrap font-medium text-muted'>
                 {title}
               </span>
               <div className='flex-1 break-all flex justify-end items-center gap-1'>
@@ -182,25 +268,24 @@ const CardTable = ({
         {hasDetails && (
           <>
             <Button
-              theme='borderless'
-              size='small'
+              variant='light'
+              size='sm'
               className='w-full flex justify-center mt-2'
-              icon={showDetails ? <IconChevronUp /> : <IconChevronDown />}
-              onClick={(e) => {
-                e.stopPropagation();
+              startContent={showDetails ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+              onPress={() => {
                 setShowDetails(!showDetails);
               }}
             >
               {showDetails ? t('收起') : t('详情')}
             </Button>
-            <Collapsible isOpen={showDetails} keepDOM>
+            {showDetails && (
               <div className='pt-2'>
                 {tableProps.expandedRowRender(record, index)}
               </div>
-            </Collapsible>
+            )}
           </>
         )}
-      </Card>
+      </div>
     );
   };
 
@@ -208,7 +293,7 @@ const CardTable = ({
     if (tableProps.empty) return tableProps.empty;
     return (
       <div className='flex justify-center p-4'>
-        <Empty description='No Data' />
+        {renderEmpty()}
       </div>
     );
   }
@@ -224,7 +309,7 @@ const CardTable = ({
       ))}
       {!hidePagination && tableProps.pagination && dataSource.length > 0 && (
         <div className='mt-2 flex justify-center'>
-          <Pagination {...tableProps.pagination} />
+          {renderPagination()}
         </div>
       )}
     </div>
diff --git a/web/src/components/common/ui/ChannelKeyDisplay.jsx b/web/src/components/common/ui/ChannelKeyDisplay.jsx
index 79aa3eec708..29676a38c9f 100644
--- a/web/src/components/common/ui/ChannelKeyDisplay.jsx
+++ b/web/src/components/common/ui/ChannelKeyDisplay.jsx
@@ -19,8 +19,9 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { Card, Button, Typography, Tag } from '@douyinfe/semi-ui';
+import { Button, Chip } from '@heroui/react';
 import { copy, showSuccess } from '../../../helpers';
+import { CheckCircle2, Clipboard, Info, TriangleAlert } from 'lucide-react';
 
 /**
  * 解析密钥数据，支持多种格式
@@ -110,39 +111,29 @@ const ChannelKeyDisplay = ({
       {/* 成功状态 */}
       {showSuccessIcon && (
         <div className='flex items-center gap-2'>
-          <svg
-            className='w-5 h-5 text-green-600'
-            fill='currentColor'
-            viewBox='0 0 20 20'
-          >
-            <path
-              fillRule='evenodd'
-              d='M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z'
-              clipRule='evenodd'
-            />
-          </svg>
-          <Typography.Text strong className='text-green-700'>
+          <CheckCircle2 className='h-5 w-5 text-green-600' />
+          <span className='font-semibold text-green-700 dark:text-green-300'>
             {successText || t('验证成功')}
-          </Typography.Text>
+          </span>
         </div>
       )}
 
       {/* 密钥内容 */}
       <div className='space-y-3'>
         <div className='flex items-center justify-between'>
-          <Typography.Text strong>
+          <span className='font-semibold text-foreground'>
             {isMultipleKeys ? t('渠道密钥列表') : t('渠道密钥')}
-          </Typography.Text>
+          </span>
           {isMultipleKeys && (
             <div className='flex items-center gap-2'>
-              <Typography.Text type='tertiary' size='small'>
+              <span className='text-xs text-muted'>
                 {t('共 {{count}} 个密钥', { count: parsedKeys.length })}
-              </Typography.Text>
+              </span>
               <Button
-                size='small'
-                type='primary'
-                theme='outline'
-                onClick={handleCopyAll}
+                size='sm'
+                color='primary'
+                variant='bordered'
+                onPress={handleCopyAll}
               >
                 {t('复制全部')}
               </Button>
@@ -152,91 +143,57 @@ const ChannelKeyDisplay = ({
 
         <div className='space-y-3 max-h-80 overflow-auto'>
           {parsedKeys.map((keyItem) => (
-            <Card
+            <div
               key={keyItem.id}
-              className='!rounded-lg !border !border-gray-200 dark:!border-gray-700'
+              className='rounded-xl border border-border bg-background/80 p-4'
             >
               <div className='space-y-2'>
                 <div className='flex items-center justify-between'>
-                  <Typography.Text
-                    strong
-                    size='small'
-                    className='text-gray-700 dark:text-gray-300'
-                  >
+                  <span className='text-sm font-semibold text-foreground'>
                     {keyItem.label}
-                  </Typography.Text>
+                  </span>
                   <div className='flex items-center gap-2'>
                     {keyItem.type === 'json' && (
-                      <Tag size='small' color='blue'>
+                      <Chip size='sm' color='primary' variant='flat'>
                         {t('JSON')}
-                      </Tag>
+                      </Chip>
                     )}
                     <Button
-                      size='small'
-                      type='primary'
-                      theme='outline'
-                      icon={
-                        <svg
-                          className='w-3 h-3'
-                          fill='currentColor'
-                          viewBox='0 0 20 20'
-                        >
-                          <path d='M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z' />
-                          <path d='M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z' />
-                        </svg>
-                      }
-                      onClick={() => handleCopyKey(keyItem.content)}
+                      size='sm'
+                      color='primary'
+                      variant='bordered'
+                      startContent={<Clipboard size={14} />}
+                      onPress={() => handleCopyKey(keyItem.content)}
                     >
                       {t('复制')}
                     </Button>
                   </div>
                 </div>
 
-                <div className='bg-gray-50 dark:bg-gray-800 rounded-lg p-3 max-h-40 overflow-auto'>
-                  <Typography.Text
-                    code
-                    className='text-xs font-mono break-all whitespace-pre-wrap text-gray-800 dark:text-gray-200'
-                  >
+                <div className='bg-surface-secondary rounded-lg p-3 max-h-40 overflow-auto'>
+                  <code className='whitespace-pre-wrap break-all font-mono text-xs text-foreground'>
                     {keyItem.content}
-                  </Typography.Text>
+                  </code>
                 </div>
 
                 {keyItem.type === 'json' && (
-                  <Typography.Text
-                    type='tertiary'
-                    size='small'
-                    className='block'
-                  >
+                  <span className='block text-xs text-muted'>
                     {t('JSON格式密钥，请确保格式正确')}
-                  </Typography.Text>
+                  </span>
                 )}
               </div>
-            </Card>
+            </div>
           ))}
         </div>
 
         {isMultipleKeys && (
           <div className='bg-blue-50 dark:bg-blue-900 rounded-lg p-3'>
-            <Typography.Text
-              type='tertiary'
-              size='small'
-              className='text-blue-700 dark:text-blue-300'
-            >
-              <svg
-                className='w-4 h-4 inline mr-1'
-                fill='currentColor'
-                viewBox='0 0 20 20'
-              >
-                <path
-                  fillRule='evenodd'
-                  d='M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z'
-                  clipRule='evenodd'
-                />
-              </svg>
+            <span className='text-xs text-blue-700 dark:text-blue-300'>
+              <Info className='mr-1 inline h-4 w-4' />
               {t(
                 '检测到多个密钥，您可以单独复制每个密钥，或点击复制全部获取完整内容。',
               )}
-            </Typography.Text>
+            </span>
           </div>
         )}
       </div>
@@ -245,30 +202,17 @@ const ChannelKeyDisplay = ({
       {showWarning && (
         <div className='bg-yellow-50 dark:bg-yellow-900 rounded-lg p-4'>
           <div className='flex items-start'>
-            <svg
-              className='w-5 h-5 text-yellow-600 dark:text-yellow-400 mt-0.5 mr-3 flex-shrink-0'
-              fill='currentColor'
-              viewBox='0 0 20 20'
-            >
-              <path
-                fillRule='evenodd'
-                d='M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z'
-                clipRule='evenodd'
-              />
-            </svg>
+            <TriangleAlert className='mt-0.5 mr-3 h-5 w-5 flex-shrink-0 text-yellow-600 dark:text-yellow-400' />
             <div>
-              <Typography.Text
-                strong
-                className='text-yellow-800 dark:text-yellow-200'
-              >
+              <span className='font-semibold text-yellow-800 dark:text-yellow-200'>
                 {t('安全提醒')}
-              </Typography.Text>
-              <Typography.Text className='block text-yellow-700 dark:text-yellow-300 text-sm mt-1'>
+              </span>
+              <span className='mt-1 block text-sm text-yellow-700 dark:text-yellow-300'>
                 {warningText ||
                   t(
                     '请妥善保管密钥信息，不要泄露给他人。如有安全疑虑，请及时更换密钥。',
                   )}
-              </Typography.Text>
+              </span>
             </div>
           </div>
         </div>
diff --git a/web/src/components/common/ui/ClickMenu.jsx b/web/src/components/common/ui/ClickMenu.jsx
new file mode 100644
index 00000000000..56d67586b1c
--- /dev/null
+++ b/web/src/components/common/ui/ClickMenu.jsx
@@ -0,0 +1,110 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useRef, useState } from 'react';
+
+const PLACEMENT_CLASSES = {
+  bottomLeft: 'top-full left-0 mt-1',
+  bottomRight: 'top-full right-0 mt-1',
+  topLeft: 'bottom-full left-0 mb-1',
+  topRight: 'bottom-full right-0 mb-1',
+};
+
+/**
+ * ClickMenu — click-triggered dropdown menu.
+ * - Items: `[{ label, onClick, danger?, disabled?, divider? }]`
+ * - `trigger` is the clickable element (rendered inline).
+ * - Closes on outside click and after item selection.
+ */
+const ClickMenu = ({
+  trigger,
+  items = [],
+  placement = 'bottomRight',
+  menuClassName = '',
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  const place = PLACEMENT_CLASSES[placement] || PLACEMENT_CLASSES.bottomRight;
+
+  return (
+    <span ref={ref} className='relative inline-flex'>
+      <span
+        onClick={(event) => {
+          event.stopPropagation();
+          setOpen((prev) => !prev);
+        }}
+      >
+        {trigger}
+      </span>
+      {open ? (
+        <div
+          role='menu'
+          className={`absolute z-30 min-w-[10rem] overflow-hidden rounded-lg border border-border bg-background shadow-lg ${place} ${menuClassName}`}
+        >
+          {items.map((item, idx) => {
+            if (item.divider) {
+              return (
+                <div
+                  key={`divider-${idx}`}
+                  className='my-1 h-px bg-[color:var(--app-border)]'
+                />
+              );
+            }
+            return (
+              <button
+                key={`item-${idx}`}
+                type='button'
+                role='menuitem'
+                disabled={item.disabled}
+                className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                  item.danger
+                    ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40'
+                    : 'text-foreground hover:bg-[color:var(--app-background)]'
+                }`}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setOpen(false);
+                  item.onClick?.();
+                }}
+              >
+                {item.icon}
+                <span className='min-w-0 flex-1'>{item.label}</span>
+                {item.suffix}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </span>
+  );
+};
+
+export default ClickMenu;
diff --git a/web/src/components/common/ui/ColumnSelectorDialog.jsx b/web/src/components/common/ui/ColumnSelectorDialog.jsx
new file mode 100644
index 00000000000..30a13ac800c
--- /dev/null
+++ b/web/src/components/common/ui/ColumnSelectorDialog.jsx
@@ -0,0 +1,113 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Button,
+  Checkbox,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+
+const ColumnSelectorDialog = ({
+  title,
+  visible,
+  onClose,
+  resetText,
+  cancelText,
+  confirmText,
+  allText,
+  visibleColumns,
+  columns,
+  onColumnChange,
+  onSelectAll,
+  onReset,
+  children,
+}) => {
+  const selectableColumns = columns.filter((column) => !column.disabled);
+  const allSelected = selectableColumns.every(
+    (column) => visibleColumns[column.key] === true,
+  );
+  const someSelected = selectableColumns.some(
+    (column) => visibleColumns[column.key] === true,
+  );
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onClose?.();
+    },
+  });
+
+  return (
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='2xl' scroll='inside' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {title}
+            </ModalHeader>
+            <ModalBody className='px-4 py-4 md:px-6'>
+              <div className='space-y-4'>
+                {children}
+                <Checkbox
+                  isSelected={allSelected}
+                  isIndeterminate={someSelected && !allSelected}
+                  onValueChange={onSelectAll}
+                >
+                  {allText}
+                </Checkbox>
+                <div className='grid max-h-96 grid-cols-1 gap-3 overflow-y-auto rounded-2xl border border-border bg-surface-secondary/70 p-4 sm:grid-cols-2'>
+                  {columns.map((column) => (
+                    <Checkbox
+                      key={column.key}
+                      isSelected={!!visibleColumns[column.key]}
+                      isDisabled={column.disabled}
+                      onValueChange={(checked) => onColumnChange(column.key, checked)}
+                    >
+                      {column.title}
+                    </Checkbox>
+                  ))}
+                </div>
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='flat' onPress={onReset}>
+                {resetText}
+              </Button>
+              <Button variant='light' onPress={onClose}>
+                {cancelText}
+              </Button>
+              <Button color='primary' onPress={onClose}>
+                {confirmText}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
+    </Modal>
+  );
+};
+
+export default ColumnSelectorDialog;
diff --git a/web/src/components/common/ui/CompactModeToggle.jsx b/web/src/components/common/ui/CompactModeToggle.jsx
index 40da0abc005..5f8ab1f1b79 100644
--- a/web/src/components/common/ui/CompactModeToggle.jsx
+++ b/web/src/components/common/ui/CompactModeToggle.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import PropTypes from 'prop-types';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 
@@ -45,10 +45,11 @@ const CompactModeToggle = ({
 
   return (
     <Button
-      type={type}
-      size={size}
+      variant={type === 'primary' ? 'solid' : 'bordered'}
+      color={type === 'primary' ? 'primary' : 'default'}
+      size={size === 'small' ? 'sm' : size}
       className={`w-full md:w-auto ${className}`}
-      onClick={() => setCompactMode(!compactMode)}
+      onPress={() => setCompactMode(!compactMode)}
       {...props}
     >
       {compactMode ? t('自适应列表') : t('紧凑列表')}
diff --git a/web/src/components/common/ui/ConfirmDialog.jsx b/web/src/components/common/ui/ConfirmDialog.jsx
new file mode 100644
index 00000000000..edbe7b323f8
--- /dev/null
+++ b/web/src/components/common/ui/ConfirmDialog.jsx
@@ -0,0 +1,83 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import {
+  Button,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { TriangleAlert } from 'lucide-react';
+
+const ConfirmDialog = ({
+  visible,
+  title,
+  children,
+  onCancel,
+  onConfirm,
+  cancelText,
+  confirmText,
+  danger = false,
+}) => {
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
+  return (
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='lg' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <TriangleAlert
+                  size={18}
+                  className={danger ? 'text-danger' : 'text-warning'}
+                />
+                <span>{title}</span>
+              </div>
+            </ModalHeader>
+            <ModalBody className='px-6 py-5 text-sm text-muted'>
+              {children}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={onCancel}>
+                {cancelText}
+              </Button>
+              <Button color={danger ? 'danger' : 'warning'} onPress={onConfirm}>
+                {confirmText}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
+    </Modal>
+  );
+};
+
+export default ConfirmDialog;
diff --git a/web/src/components/common/ui/HoverPanel.jsx b/web/src/components/common/ui/HoverPanel.jsx
new file mode 100644
index 00000000000..e5895e25066
--- /dev/null
+++ b/web/src/components/common/ui/HoverPanel.jsx
@@ -0,0 +1,92 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useRef, useState } from 'react';
+
+const PLACEMENT_CLASSES = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-0 mr-2',
+  right: 'left-full top-0 ml-2',
+  bottomLeft: 'top-full left-0 mt-1.5',
+  bottomRight: 'top-full right-0 mt-1.5',
+  topLeft: 'bottom-full left-0 mb-1.5',
+  topRight: 'bottom-full right-0 mb-1.5',
+};
+
+/**
+ * HoverPanel — drop-in replacement for Semi UI's Popover with hover trigger.
+ * - Renders inline next to children (relative wrapper).
+ * - Opens on mouseenter/focusin, closes 100ms after mouseleave/focusout.
+ * - `placement` accepts top/bottom/left/right + their corner variants.
+ * - `panelClassName` is appended to the panel wrapper for sizing/styling.
+ */
+const HoverPanel = ({
+  children,
+  content,
+  placement = 'top',
+  panelClassName = '',
+  delay = 100,
+  disabled = false,
+}) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const timer = useRef(null);
+
+  const show = () => {
+    if (disabled) return;
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setOpen(true);
+  };
+
+  const hide = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(false), delay);
+  };
+
+  useEffect(() => () => timer.current && clearTimeout(timer.current), []);
+
+  const place = PLACEMENT_CLASSES[placement] || PLACEMENT_CLASSES.top;
+
+  return (
+    <span
+      ref={ref}
+      className='relative inline-flex'
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocusCapture={show}
+      onBlurCapture={hide}
+    >
+      {children}
+      {open ? (
+        <div
+          role='tooltip'
+          className={`absolute z-30 rounded-lg border border-border bg-background p-3 text-xs shadow-lg ${place} ${panelClassName}`}
+        >
+          {content}
+        </div>
+      ) : null}
+    </span>
+  );
+};
+
+export default HoverPanel;
diff --git a/web/src/components/common/ui/JSONEditor.jsx b/web/src/components/common/ui/JSONEditor.jsx
index 21530db3908..59606b8d1e8 100644
--- a/web/src/components/common/ui/JSONEditor.jsx
+++ b/web/src/components/common/ui/JSONEditor.jsx
@@ -21,24 +21,15 @@ import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
-  Form,
-  Typography,
-  Banner,
-  Tabs,
-  TabPane,
   Card,
   Input,
-  InputNumber,
   Switch,
+  Tab,
+  Tabs,
   TextArea,
-  Row,
-  Col,
-  Divider,
   Tooltip,
-} from '@douyinfe/semi-ui';
-import { IconPlus, IconDelete, IconAlertTriangle } from '@douyinfe/semi-icons';
-
-const { Text } = Typography;
+} from '@heroui/react';
+import { AlertTriangle, Plus, Trash2 } from 'lucide-react';
 
 // 唯一 ID 生成器，确保在组件生命周期内稳定且递增
 const generateUniqueId = (() => {
@@ -46,6 +37,50 @@ const generateUniqueId = (() => {
   return () => `kv_${counter++}`;
 })();
 
+const inputClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 text-sm outline-none transition focus:border-primary';
+
+function FieldSlot({ label, extraText, children }) {
+  return (
+    <div className='space-y-2'>
+      {label ? (
+        <div className='text-sm font-medium text-foreground'>
+          {label}
+        </div>
+      ) : null}
+      {children}
+      {extraText ? (
+        <div className='text-xs leading-5 text-muted'>
+          {extraText}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+function AlertBanner({ type = 'warning', children, className = '' }) {
+  const colorClass =
+    type === 'danger'
+      ? 'border-danger/30 bg-danger/10 text-danger'
+      : 'border-warning/30 bg-warning/10 text-warning';
+
+  return (
+    <div className={`rounded-2xl border px-4 py-3 text-sm ${colorClass} ${className}`}>
+      <div className='flex items-start gap-2'>
+        <AlertTriangle className='mt-0.5 shrink-0' size={16} />
+        <div className='min-w-0 flex-1'>{children}</div>
+      </div>
+    </div>
+  );
+}
+
+function HiddenField({ field, value }) {
+  if (!field) return null;
+  const hiddenValue =
+    typeof value === 'string' ? value : value ? JSON.stringify(value) : '';
+  return <input type='hidden' name={field} value={hiddenValue} readOnly />;
+}
+
 const JSONEditor = ({
   value = '',
   onChange,
@@ -61,7 +96,6 @@ const JSONEditor = ({
   rules = [],
   formApi = null,
   renderStringValueSuffix,
-  ...props
 }) => {
   const { t } = useTranslation();
 
@@ -182,6 +216,15 @@ const JSONEditor = ({
     }
   }, [value, editMode]);
 
+  const syncFormValue = useCallback(
+    (nextValue) => {
+      if (formApi && field) {
+        formApi.setValue(field, nextValue);
+      }
+    },
+    [formApi, field],
+  );
+
   // 处理可视化编辑的数据变化
   const handleVisualChange = useCallback(
     (newPairs) => {
@@ -193,15 +236,10 @@ const JSONEditor = ({
           : JSON.stringify(jsonObject, null, 2);
 
       setJsonError('');
-
-      // 通过formApi设置值
-      if (formApi && field) {
-        formApi.setValue(field, jsonString);
-      }
-
+      syncFormValue(jsonString);
       onChange?.(jsonString);
     },
-    [onChange, formApi, field, keyValueArrayToObject],
+    [onChange, syncFormValue, keyValueArrayToObject],
   );
 
   // 处理手动编辑的数据变化
@@ -213,6 +251,7 @@ const JSONEditor = ({
           const parsed = JSON.parse(newValue);
           setKeyValuePairs(objectToKeyValueArray(parsed, keyValuePairs));
           setJsonError('');
+          syncFormValue(newValue);
           onChange?.(newValue);
         } catch (error) {
           setJsonError(error.message);
@@ -220,10 +259,11 @@ const JSONEditor = ({
       } else {
         setKeyValuePairs([]);
         setJsonError('');
+        syncFormValue('');
         onChange?.('');
       }
     },
-    [onChange, objectToKeyValueArray, keyValuePairs],
+    [onChange, objectToKeyValueArray, keyValuePairs, syncFormValue],
   );
 
   // 切换编辑模式
@@ -251,7 +291,6 @@ const JSONEditor = ({
         setEditMode('visual');
       } catch (error) {
         setJsonError(error.message);
-        return;
       }
     }
   }, [
@@ -317,23 +356,29 @@ const JSONEditor = ({
     if (template) {
       const templateString = JSON.stringify(template, null, 2);
 
-      if (formApi && field) {
-        formApi.setValue(field, templateString);
-      }
-
+      syncFormValue(templateString);
       setManualText(templateString);
       setKeyValuePairs(objectToKeyValueArray(template, keyValuePairs));
       onChange?.(templateString);
       setJsonError('');
     }
-  }, [
-    template,
-    onChange,
-    formApi,
-    field,
-    objectToKeyValueArray,
-    keyValuePairs,
-  ]);
+  }, [template, onChange, syncFormValue, objectToKeyValueArray, keyValuePairs]);
+
+  const renderDuplicateWarning = () => {
+    if (duplicateKeys.size === 0) return null;
+    return (
+      <AlertBanner className='mb-3'>
+        <div>
+          <strong>{t('存在重复的键名：')}</strong>
+          <span>{Array.from(duplicateKeys).join(', ')}</span>
+          <br />
+          <span className='text-xs opacity-80'>
+            {t('注意：JSON中重复的键只会保留最后一个同名键的值')}
+          </span>
+        </div>
+      </AlertBanner>
+    );
+  };
 
   // 渲染值输入控件（支持嵌套）
   const renderValueInput = (pairId, pairKey, value) => {
@@ -341,24 +386,29 @@ const JSONEditor = ({
 
     if (valueType === 'boolean') {
       return (
-        <div className='flex items-center'>
+        <div className='flex items-center gap-2'>
           <Switch
-            checked={value}
-            onChange={(newValue) => updateValue(pairId, newValue)}
-          />
-          <Text type='tertiary' className='ml-2'>
+            isSelected={value}
+            onValueChange={(newValue) => updateValue(pairId, newValue)}
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
+          <span className='text-sm text-muted'>
             {value ? t('true') : t('false')}
-          </Text>
+          </span>
         </div>
       );
     }
 
     if (valueType === 'number') {
       return (
-        <InputNumber
+        <input
+          type='number'
           value={value}
-          onChange={(newValue) => updateValue(pairId, newValue)}
-          style={{ width: '100%' }}
+          onChange={(event) => updateValue(pairId, Number(event.target.value))}
+          className={inputClass}
           placeholder={t('输入数字')}
         />
       );
@@ -369,10 +419,13 @@ const JSONEditor = ({
       return (
         <TextArea
           rows={2}
+          fullWidth
           value={JSON.stringify(value, null, 2)}
-          onChange={(txt) => {
+          onChange={(event) => {
             try {
-              const obj = txt.trim() ? JSON.parse(txt) : {};
+              const obj = event.target.value.trim()
+                ? JSON.parse(event.target.value)
+                : {};
               updateValue(pairId, obj);
             } catch {
               // 忽略解析错误
@@ -385,55 +438,39 @@ const JSONEditor = ({
 
     // 字符串或其他原始类型
     return (
-      <Input
-        placeholder={t('参数值')}
-        value={String(value)}
-        suffix={renderStringValueSuffix?.({ pairId, pairKey, value })}
-        onChange={(newValue) => {
-          let convertedValue = newValue;
-          if (newValue === 'true') convertedValue = true;
-          else if (newValue === 'false') convertedValue = false;
-          else if (!isNaN(newValue) && newValue !== '') {
-            const num = Number(newValue);
-            // 检查是否为整数
-            if (Number.isInteger(num)) {
-              convertedValue = num;
+      <div className='flex items-center gap-2'>
+        <Input
+          placeholder={t('参数值')}
+          value={String(value)}
+          onChange={(event) => {
+            const newValue = event.target.value;
+            let convertedValue = newValue;
+            if (newValue === 'true') convertedValue = true;
+            else if (newValue === 'false') convertedValue = false;
+            else if (!isNaN(newValue) && newValue !== '') {
+              const num = Number(newValue);
+              // 检查是否为整数
+              if (Number.isInteger(num)) {
+                convertedValue = num;
+              }
             }
-          }
-          updateValue(pairId, convertedValue);
-        }}
-      />
+            updateValue(pairId, convertedValue);
+          }}
+        />
+        {renderStringValueSuffix?.({ pairId, pairKey, value })}
+      </div>
     );
   };
 
   // 渲染键值对编辑器
   const renderKeyValueEditor = () => {
     return (
-      <div className='space-y-1'>
-        {/* 重复键警告 */}
-        {duplicateKeys.size > 0 && (
-          <Banner
-            type='warning'
-            icon={<IconAlertTriangle />}
-            description={
-              <div>
-                <Text strong>{t('存在重复的键名：')}</Text>
-                <Text>{Array.from(duplicateKeys).join(', ')}</Text>
-                <br />
-                <Text type='tertiary' size='small'>
-                  {t('注意：JSON中重复的键只会保留最后一个同名键的值')}
-                </Text>
-              </div>
-            }
-            className='mb-3'
-          />
-        )}
+      <div className='space-y-2'>
+        {renderDuplicateWarning()}
 
         {keyValuePairs.length === 0 && (
-          <div className='text-center py-6 px-4'>
-            <Text type='tertiary' className='text-gray-500 text-sm'>
-              {t('暂无数据，点击下方按钮添加键值对')}
-            </Text>
+          <div className='rounded-2xl border border-dashed border-border px-4 py-6 text-center text-sm text-muted'>
+            {t('暂无数据，点击下方按钮添加键值对')}
           </div>
         )}
 
@@ -444,57 +481,49 @@ const JSONEditor = ({
             keyValuePairs.slice(index + 1).every((p) => p.key !== pair.key);
 
           return (
-            <Row key={pair.id} gutter={8} align='middle'>
-              <Col span={10}>
-                <div className='relative'>
-                  <Input
-                    placeholder={t('键名')}
-                    value={pair.key}
-                    onChange={(newKey) => updateKey(pair.id, newKey)}
-                    status={isDuplicate ? 'warning' : undefined}
-                  />
-                  {isDuplicate && (
-                    <Tooltip
-                      content={
-                        isLastDuplicate
-                          ? t('这是重复键中的最后一个，其值将被使用')
-                          : t('重复的键名，此值将被后面的同名键覆盖')
-                      }
-                    >
-                      <IconAlertTriangle
-                        className='absolute right-2 top-1/2 transform -translate-y-1/2'
-                        style={{
-                          color: isLastDuplicate ? '#ff7d00' : '#faad14',
-                          fontSize: '14px',
-                        }}
-                      />
-                    </Tooltip>
-                  )}
-                </div>
-              </Col>
-              <Col span={12}>
-                {renderValueInput(pair.id, pair.key, pair.value)}
-              </Col>
-              <Col span={2}>
-                <Button
-                  icon={<IconDelete />}
-                  type='danger'
-                  theme='borderless'
-                  onClick={() => removeKeyValue(pair.id)}
-                  style={{ width: '100%' }}
+            <div
+              key={pair.id}
+              className='grid grid-cols-1 items-center gap-2 md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)_2.5rem]'
+            >
+              <div className='relative'>
+                <Input
+                  placeholder={t('键名')}
+                  value={pair.key}
+                  onChange={(event) => updateKey(pair.id, event.target.value)}
+                  className={isDuplicate ? 'border-warning' : undefined}
                 />
-              </Col>
-            </Row>
+                {isDuplicate && (
+                  <Tooltip
+                    content={
+                      isLastDuplicate
+                        ? t('这是重复键中的最后一个，其值将被使用')
+                        : t('重复的键名，此值将被后面的同名键覆盖')
+                    }
+                  >
+                    <AlertTriangle
+                      className='absolute right-3 top-1/2 -translate-y-1/2 text-warning'
+                      size={15}
+                    />
+                  </Tooltip>
+                )}
+              </div>
+              <div>{renderValueInput(pair.id, pair.key, pair.value)}</div>
+              <Button
+                isIconOnly
+                variant='danger-soft'
+                aria-label={t('删除')}
+                onPress={() => removeKeyValue(pair.id)}
+                className='w-full md:w-10'
+              >
+                <Trash2 size={16} />
+              </Button>
+            </div>
           );
         })}
 
-        <div className='mt-2 flex justify-center'>
-          <Button
-            icon={<IconPlus />}
-            type='primary'
-            theme='outline'
-            onClick={addKeyValue}
-          >
+        <div className='mt-3 flex justify-center'>
+          <Button variant='outline' onPress={addKeyValue}>
+            <Plus size={16} />
             {t('添加键值对')}
           </Button>
         </div>
@@ -508,106 +537,85 @@ const JSONEditor = ({
     const modelPairs = keyValuePairs.filter((pair) => pair.key !== 'default');
 
     return (
-      <div className='space-y-2'>
-        {/* 重复键警告 */}
-        {duplicateKeys.size > 0 && (
-          <Banner
-            type='warning'
-            icon={<IconAlertTriangle />}
-            description={
-              <div>
-                <Text strong>{t('存在重复的键名：')}</Text>
-                <Text>{Array.from(duplicateKeys).join(', ')}</Text>
-                <br />
-                <Text type='tertiary' size='small'>
-                  {t('注意：JSON中重复的键只会保留最后一个同名键的值')}
-                </Text>
-              </div>
-            }
-            className='mb-3'
-          />
-        )}
+      <div className='space-y-4'>
+        {renderDuplicateWarning()}
 
         {/* 默认区域 */}
-        <Form.Slot label={t('默认区域')}>
+        <FieldSlot label={t('默认区域')}>
           <Input
             placeholder={t('默认区域，如: us-central1')}
             value={defaultPair ? defaultPair.value : ''}
-            onChange={(value) => {
+            onChange={(event) => {
+              const nextValue = event.target.value;
               if (defaultPair) {
-                updateValue(defaultPair.id, value);
+                updateValue(defaultPair.id, nextValue);
               } else {
                 const newPairs = [
                   ...keyValuePairs,
                   {
                     id: generateUniqueId(),
                     key: 'default',
-                    value: value,
+                    value: nextValue,
                   },
                 ];
                 handleVisualChange(newPairs);
               }
             }}
           />
-        </Form.Slot>
+        </FieldSlot>
 
         {/* 模型专用区域 */}
-        <Form.Slot label={t('模型专用区域')}>
-          <div>
+        <FieldSlot label={t('模型专用区域')}>
+          <div className='space-y-2'>
             {modelPairs.map((pair) => {
               const isDuplicate = duplicateKeys.has(pair.key);
               return (
-                <Row key={pair.id} gutter={8} align='middle' className='mb-2'>
-                  <Col span={10}>
-                    <div className='relative'>
-                      <Input
-                        placeholder={t('模型名称')}
-                        value={pair.key}
-                        onChange={(newKey) => updateKey(pair.id, newKey)}
-                        status={isDuplicate ? 'warning' : undefined}
-                      />
-                      {isDuplicate && (
-                        <Tooltip content={t('重复的键名')}>
-                          <IconAlertTriangle
-                            className='absolute right-2 top-1/2 transform -translate-y-1/2'
-                            style={{ color: '#faad14', fontSize: '14px' }}
-                          />
-                        </Tooltip>
-                      )}
-                    </div>
-                  </Col>
-                  <Col span={12}>
+                <div
+                  key={pair.id}
+                  className='grid grid-cols-1 items-center gap-2 md:grid-cols-[minmax(0,0.9fr)_minmax(0,1.1fr)_2.5rem]'
+                >
+                  <div className='relative'>
                     <Input
-                      placeholder={t('区域')}
-                      value={pair.value}
-                      onChange={(newValue) => updateValue(pair.id, newValue)}
-                    />
-                  </Col>
-                  <Col span={2}>
-                    <Button
-                      icon={<IconDelete />}
-                      type='danger'
-                      theme='borderless'
-                      onClick={() => removeKeyValue(pair.id)}
-                      style={{ width: '100%' }}
+                      placeholder={t('模型名称')}
+                      value={pair.key}
+                      onChange={(event) => updateKey(pair.id, event.target.value)}
+                      className={isDuplicate ? 'border-warning' : undefined}
                     />
-                  </Col>
-                </Row>
+                    {isDuplicate && (
+                      <Tooltip content={t('重复的键名')}>
+                        <AlertTriangle
+                          className='absolute right-3 top-1/2 -translate-y-1/2 text-warning'
+                          size={15}
+                        />
+                      </Tooltip>
+                    )}
+                  </div>
+                  <Input
+                    placeholder={t('区域')}
+                    value={pair.value}
+                    onChange={(event) => updateValue(pair.id, event.target.value)}
+                  />
+                  <Button
+                    isIconOnly
+                    variant='danger-soft'
+                    aria-label={t('删除')}
+                    onPress={() => removeKeyValue(pair.id)}
+                    className='w-full md:w-10'
+                  >
+                    <Trash2 size={16} />
+                  </Button>
+                </div>
               );
             })}
 
-            <div className='mt-2 flex justify-center'>
-              <Button
-                icon={<IconPlus />}
-                onClick={addKeyValue}
-                type='primary'
-                theme='outline'
-              >
+            <div className='mt-3 flex justify-center'>
+              <Button variant='outline' onPress={addKeyValue}>
+                <Plus size={16} />
                 {t('添加模型区域')}
               </Button>
             </div>
           </div>
-        </Form.Slot>
+        </FieldSlot>
       </div>
     );
   };
@@ -627,91 +635,85 @@ const JSONEditor = ({
   const hasJsonError = jsonError && jsonError.trim() !== '';
 
   return (
-    <Form.Slot label={label}>
-      <Card
-        header={
-          <div className='flex justify-between items-center'>
-            <Tabs
-              type='slash'
-              activeKey={editMode}
-              onChange={(key) => {
-                if (key === 'manual' && editMode === 'visual') {
-                  setEditMode('manual');
-                } else if (key === 'visual' && editMode === 'manual') {
-                  toggleEditMode();
-                }
-              }}
-            >
-              <TabPane tab={t('可视化')} itemKey='visual' />
-              <TabPane tab={t('手动编辑')} itemKey='manual' />
-            </Tabs>
-
-            {template && templateLabel && (
-              <Button type='tertiary' onClick={fillTemplate} size='small'>
-                {templateLabel}
-              </Button>
-            )}
-          </div>
-        }
-        headerStyle={{ padding: '12px 16px' }}
-        bodyStyle={{ padding: '16px' }}
-        className='!rounded-2xl'
-      >
-        {/* JSON错误提示 */}
-        {hasJsonError && (
-          <Banner
-            type='danger'
-            description={`JSON 格式错误: ${jsonError}`}
-            className='mb-3'
-          />
-        )}
-
-        {/* 编辑器内容 */}
-        {editMode === 'visual' ? (
-          <div>
-            {renderVisualEditor()}
-            {/* 隐藏的Form字段用于验证和数据绑定 */}
-            <Form.Input
-              field={field}
-              value={value}
-              rules={rules}
-              style={{ display: 'none' }}
-              noLabel={true}
-              {...props}
-            />
-          </div>
-        ) : (
-          <div>
-            <TextArea
-              placeholder={placeholder}
-              value={manualText}
-              onChange={handleManualChange}
-              showClear={showClear}
-              rows={Math.max(8, manualText ? manualText.split('\n').length : 8)}
-            />
-            {/* 隐藏的Form字段用于验证和数据绑定 */}
-            <Form.Input
-              field={field}
-              value={value}
-              rules={rules}
-              style={{ display: 'none' }}
-              noLabel={true}
-              {...props}
-            />
-          </div>
-        )}
-
-        {/* 额外文本显示在卡片底部 */}
-        {extraText && (
-          <Divider margin='12px' align='center'>
-            <Text type='tertiary' size='small'>
-              {extraText}
-            </Text>
-          </Divider>
-        )}
-        {extraFooter && <div className='mt-1'>{extraFooter}</div>}
+    <FieldSlot label={label}>
+      <Card className='rounded-2xl border border-border bg-background/80 shadow-sm'>
+        <div className='flex flex-col gap-3 border-b border-border px-4 py-3 md:flex-row md:items-center md:justify-between'>
+          <Tabs
+            selectedKey={editMode}
+            onSelectionChange={(key) => {
+              const nextKey = String(key);
+              if (nextKey === 'manual' && editMode === 'visual') {
+                setEditMode('manual');
+              } else if (nextKey === 'visual' && editMode === 'manual') {
+                toggleEditMode();
+              }
+            }}
+            size='sm'
+            variant='underlined'
+          >
+            <Tab key='visual' title={t('可视化')} />
+            <Tab key='manual' title={t('手动编辑')} />
+          </Tabs>
+
+          {template && templateLabel && (
+            <Button variant='ghost' size='sm' onPress={fillTemplate}>
+              {templateLabel}
+            </Button>
+          )}
+        </div>
+        <div className='p-4'>
+          {/* JSON错误提示 */}
+          {hasJsonError && (
+            <AlertBanner type='danger' className='mb-3'>
+              {`JSON 格式错误: ${jsonError}`}
+            </AlertBanner>
+          )}
+
+          {/* 编辑器内容 */}
+          {editMode === 'visual' ? (
+            <div>
+              {renderVisualEditor()}
+              {/* 隐藏字段用于原生表单场景的数据绑定；主流程仍由 formApi/onChange 驱动 */}
+              <HiddenField field={field} value={value} rules={rules} />
+            </div>
+          ) : (
+            <div>
+              <div className='relative'>
+                <TextArea
+                  placeholder={placeholder}
+                  value={manualText}
+                  onChange={(event) => handleManualChange(event.target.value)}
+                  rows={Math.max(8, manualText ? manualText.split('\n').length : 8)}
+                  fullWidth
+                />
+                {showClear && manualText ? (
+                  <Button
+                    size='sm'
+                    variant='ghost'
+                    onPress={() => handleManualChange('')}
+                    className='absolute right-2 top-2'
+                  >
+                    {t('清空')}
+                  </Button>
+                ) : null}
+              </div>
+              {/* 隐藏字段用于原生表单场景的数据绑定；主流程仍由 formApi/onChange 驱动 */}
+              <HiddenField field={field} value={value} rules={rules} />
+            </div>
+          )}
+
+          {/* 额外文本显示在卡片底部 */}
+          {extraText && (
+            <div className='my-3 flex items-center gap-3 text-xs text-muted'>
+              <span className='h-px flex-1 bg-border' />
+              <span>{extraText}</span>
+              <span className='h-px flex-1 bg-border' />
+            </div>
+          )}
+          {extraFooter && <div className='mt-1'>{extraFooter}</div>}
+        </div>
       </Card>
-    </Form.Slot>
+    </FieldSlot>
   );
 };
 
diff --git a/web/src/components/common/ui/Loading.jsx b/web/src/components/common/ui/Loading.jsx
index a2fc6f8e9f7..4d63187c59d 100644
--- a/web/src/components/common/ui/Loading.jsx
+++ b/web/src/components/common/ui/Loading.jsx
@@ -18,12 +18,12 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Spin } from '@douyinfe/semi-ui';
+import { Spinner } from '@heroui/react';
 
 const Loading = ({ size = 'small' }) => {
   return (
     <div className='fixed inset-0 w-screen h-screen flex items-center justify-center'>
-      <Spin size={size} spinning={true} />
+      <Spinner size={size === 'large' ? 'lg' : 'sm'} color='primary' />
     </div>
   );
 };
diff --git a/web/src/components/common/ui/RenderUtils.jsx b/web/src/components/common/ui/RenderUtils.jsx
index 3411649ce61..9aa116efa83 100644
--- a/web/src/components/common/ui/RenderUtils.jsx
+++ b/web/src/components/common/ui/RenderUtils.jsx
@@ -18,9 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Space, Tag, Typography, Popover } from '@douyinfe/semi-ui';
-
-const { Text } = Typography;
+import { Chip, Tooltip } from '@heroui/react';
 
 // 通用渲染函数：限制项目数量显示，支持popover展开
 export function renderLimitedItems({ items, renderItem, maxDisplay = 3 }) {
@@ -28,33 +26,33 @@ export function renderLimitedItems({ items, renderItem, maxDisplay = 3 }) {
   const displayItems = items.slice(0, maxDisplay);
   const remainingItems = items.slice(maxDisplay);
   return (
-    <Space spacing={1} wrap>
+    <div className='flex flex-wrap items-center gap-1'>
       {displayItems.map((item, idx) => renderItem(item, idx))}
       {remainingItems.length > 0 && (
-        <Popover
+        <Tooltip
           content={
-            <div className='p-2'>
-              <Space spacing={1} wrap>
+            <div className='flex max-w-xs flex-wrap gap-1 p-1'>
                 {remainingItems.map((item, idx) => renderItem(item, idx))}
-              </Space>
             </div>
           }
-          position='top'
         >
-          <Tag size='small' shape='circle' color='grey'>
+          <Chip size='sm' variant='flat'>
             +{remainingItems.length}
-          </Tag>
-        </Popover>
+          </Chip>
+        </Tooltip>
       )}
-    </Space>
+    </div>
   );
 }
 
 // 渲染描述字段，长文本支持tooltip
 export const renderDescription = (text, maxWidth = 200) => {
+  const value = text || '-';
   return (
-    <Text ellipsis={{ showTooltip: true }} style={{ maxWidth }}>
-      {text || '-'}
-    </Text>
+    <Tooltip content={value}>
+      <span className='block truncate text-sm text-foreground' style={{ maxWidth }}>
+        {value}
+      </span>
+    </Tooltip>
   );
 };
diff --git a/web/src/components/common/ui/SelectableButtonGroup.jsx b/web/src/components/common/ui/SelectableButtonGroup.jsx
index dc5c428b516..5858a15df5c 100644
--- a/web/src/components/common/ui/SelectableButtonGroup.jsx
+++ b/web/src/components/common/ui/SelectableButtonGroup.jsx
@@ -20,17 +20,8 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useState, useRef, useEffect } from 'react';
 import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
 import { useContainerWidth } from '../../../hooks/common/useContainerWidth';
-import {
-  Divider,
-  Button,
-  Row,
-  Col,
-  Collapsible,
-  Checkbox,
-  Skeleton,
-  Tooltip,
-} from '@douyinfe/semi-ui';
-import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
+import { Button, Checkbox, Skeleton, Tooltip } from '@heroui/react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 
 /**
  * 通用可选择按钮组组件
@@ -75,7 +66,7 @@ const SelectableButtonGroup = ({
     }, [text, containerWidth]);
 
     const textElement = (
-      <span ref={textRef} className='sbg-ellipsis'>
+      <span ref={textRef} className='min-w-0 truncate text-left text-sm'>
         {text}
       </span>
     );
@@ -100,14 +91,6 @@ const SelectableButtonGroup = ({
   const needCollapse = collapsible && items.length > perRow * maxVisibleRows;
   const showSkeleton = useMinimumLoadingTime(loading);
 
-  // 统一使用紧凑的网格间距
-  const gutterSize = [4, 4];
-
-  // 计算 Semi UI Col 的 span 值
-  const getColSpan = () => {
-    return Math.floor(24 / perRow);
-  };
-
   const maskStyle = isOpen
     ? {}
     : {
@@ -119,65 +102,40 @@ const SelectableButtonGroup = ({
     setIsOpen(!isOpen);
   };
 
-  const linkStyle = {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    textAlign: 'center',
-    bottom: -10,
-    fontWeight: 400,
-    cursor: 'pointer',
-    fontSize: '12px',
-    color: 'var(--semi-color-text-2)',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 4,
-  };
+  const gridClass =
+    perRow === 1
+      ? 'grid-cols-1'
+      : perRow === 2
+        ? 'grid-cols-2'
+        : 'grid-cols-3';
 
   const renderSkeletonButtons = () => {
-    const placeholder = (
-      <Row gutter={gutterSize} style={{ lineHeight: '32px', ...style }}>
+    return (
+      <div
+        className={`grid ${gridClass} gap-1`}
+        style={style}
+        aria-busy='true'
+      >
         {Array.from({ length: skeletonCount }).map((_, index) => (
-          <Col span={getColSpan()} key={index}>
-            <div
-              style={{
-                width: '100%',
-                height: '32px',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                border: '1px solid var(--semi-color-border)',
-                borderRadius: 'var(--semi-border-radius-medium)',
-                padding: '0 12px',
-                gap: '6px',
-              }}
-            >
-              {withCheckbox && (
-                <Skeleton.Title active style={{ width: 14, height: 14 }} />
-              )}
-              <Skeleton.Title
-                active
-                style={{
-                  width: `${60 + (index % 3) * 20}px`,
-                  height: 14,
-                }}
-              />
-            </div>
-          </Col>
+          <div
+            className='flex h-8 items-center gap-2 rounded-xl border border-border px-3'
+            key={index}
+          >
+            {withCheckbox ? <Skeleton className='h-3.5 w-3.5 rounded' /> : null}
+            <Skeleton
+              className='h-3.5 rounded-full'
+              style={{ width: `${60 + (index % 3) * 20}px` }}
+            />
+          </div>
         ))}
-      </Row>
-    );
-
-    return (
-      <Skeleton loading={true} active placeholder={placeholder}></Skeleton>
+      </div>
     );
   };
 
   const contentElement = showSkeleton ? (
     renderSkeletonButtons()
   ) : (
-    <Row gutter={gutterSize} style={{ lineHeight: '32px', ...style }}>
+    <div className={`grid ${gridClass} gap-1`} style={style}>
       {items.map((item) => {
         const isActive = Array.isArray(activeValue)
           ? activeValue.includes(item.value)
@@ -185,60 +143,64 @@ const SelectableButtonGroup = ({
 
         if (withCheckbox) {
           return (
-            <Col span={getColSpan()} key={item.value}>
+            <div key={item.value}>
               <Button
-                onClick={() => {
-                  /* disabled */
-                }}
-                theme={isActive ? 'light' : 'outline'}
-                type={isActive ? 'primary' : 'tertiary'}
-                className='sbg-button'
-                icon={
+                onPress={() => onChange(item.value)}
+                variant={isActive ? 'secondary' : 'outline'}
+                className='h-8 w-full justify-start rounded-xl px-2'
+              >
+                <div className='flex min-w-0 flex-1 items-center gap-2'>
                   <Checkbox
-                    checked={isActive}
-                    onChange={() => onChange(item.value)}
-                    style={{ pointerEvents: 'auto' }}
+                    isSelected={isActive}
+                    className='pointer-events-none shrink-0'
+                    aria-hidden='true'
                   />
-                }
-                style={{ width: '100%', cursor: 'default' }}
-              >
-                <div className='sbg-content'>
-                  {item.icon && <span className='sbg-icon'>{item.icon}</span>}
+                  {item.icon && <span className='shrink-0'>{item.icon}</span>}
                   <ConditionalTooltipText text={item.label} />
                   {item.tagCount !== undefined && shouldShowTags && (
-                    <span className={`sbg-badge ${isActive ? 'sbg-badge-active' : ''}`}>
+                    <span
+                      className={`ml-auto inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-[11px] font-medium ${
+                        isActive
+                          ? 'bg-accent text-accent-foreground'
+                          : 'bg-surface-secondary text-muted'
+                      }`}
+                    >
                       {item.tagCount}
                     </span>
                   )}
                 </div>
               </Button>
-            </Col>
+            </div>
           );
         }
 
         return (
-          <Col span={getColSpan()} key={item.value}>
+          <div key={item.value}>
             <Button
-              onClick={() => onChange(item.value)}
-              theme={isActive ? 'light' : 'outline'}
-              type={isActive ? 'primary' : 'tertiary'}
-              className='sbg-button'
-              style={{ width: '100%' }}
+              onPress={() => onChange(item.value)}
+              variant={isActive ? 'secondary' : 'outline'}
+              className='h-8 w-full justify-start rounded-xl px-2'
             >
-              <div className='sbg-content'>
-                {item.icon && <span className='sbg-icon'>{item.icon}</span>}
+              <div className='flex min-w-0 flex-1 items-center gap-2'>
+                {item.icon && <span className='shrink-0'>{item.icon}</span>}
                 <ConditionalTooltipText text={item.label} />
                 {item.tagCount !== undefined && shouldShowTags && item.tagCount !== '' && (
-                  <span className={`sbg-badge ${isActive ? 'sbg-badge-active' : ''}`}>
+                  <span
+                    className={`ml-auto inline-flex h-5 min-w-5 shrink-0 items-center justify-center rounded-full px-1.5 text-[11px] font-medium ${
+                      isActive
+                        ? 'bg-accent text-accent-foreground'
+                        : 'bg-surface-secondary text-muted'
+                    }`}
+                  >
                     {item.tagCount}
                   </span>
                 )}
               </div>
             </Button>
-          </Col>
+          </div>
         );
       })}
-    </Row>
+    </div>
   );
 
   return (
@@ -247,42 +209,46 @@ const SelectableButtonGroup = ({
       ref={containerRef}
     >
       {title && (
-        <Divider margin='12px' align='left'>
+        <div className='mb-3 flex items-center gap-3 text-sm font-semibold text-foreground'>
+          <span className='h-px flex-1 bg-border' />
           {showSkeleton ? (
-            <Skeleton.Title active style={{ width: 80, height: 14 }} />
+            <Skeleton className='h-3.5 w-20 rounded-full' />
           ) : (
-            title
+            <span className='shrink-0'>{title}</span>
           )}
-        </Divider>
+          <span className='h-px flex-1 bg-border' />
+        </div>
       )}
       {needCollapse && !showSkeleton ? (
-        <div style={{ position: 'relative' }}>
-          <Collapsible
-            isOpen={isOpen}
-            collapseHeight={collapseHeight}
-            style={{ ...maskStyle }}
+        <div className='relative'>
+          <div
+            style={{
+              ...maskStyle,
+              maxHeight: isOpen ? 'none' : collapseHeight,
+              overflow: isOpen ? 'visible' : 'hidden',
+            }}
           >
             {contentElement}
-          </Collapsible>
+          </div>
           {isOpen ? null : (
-            <div onClick={toggle} style={{ ...linkStyle }}>
-              <IconChevronDown size='small' />
+            <button
+              type='button'
+              onClick={toggle}
+              className='absolute -bottom-3 left-0 right-0 mx-auto flex w-fit cursor-pointer items-center justify-center gap-1 rounded-full bg-background/90 px-2 text-xs text-muted shadow-sm ring-1 ring-border backdrop-blur hover:text-foreground'
+            >
+              <ChevronDown size={14} />
               <span>{t('展开更多')}</span>
-            </div>
+            </button>
           )}
           {isOpen && (
-            <div
+            <button
+              type='button'
               onClick={toggle}
-              style={{
-                ...linkStyle,
-                position: 'static',
-                marginTop: 8,
-                bottom: 'auto',
-              }}
+              className='mx-auto mt-2 flex cursor-pointer items-center justify-center gap-1 rounded-full px-2 text-xs text-muted hover:text-foreground'
             >
-              <IconChevronUp size='small' />
+              <ChevronUp size={14} />
               <span>{t('收起')}</span>
-            </div>
+            </button>
           )}
         </div>
       ) : (
diff --git a/web/src/components/common/ui/TableEmptyState.jsx b/web/src/components/common/ui/TableEmptyState.jsx
new file mode 100644
index 00000000000..c9be9a955b3
--- /dev/null
+++ b/web/src/components/common/ui/TableEmptyState.jsx
@@ -0,0 +1,42 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { SearchX } from 'lucide-react';
+import { EmptyState } from '@heroui-pro/react';
+
+const TableEmptyState = ({ title, description, icon, size = 'sm' }) => {
+  return (
+    <div className='flex min-h-48 w-full items-center justify-center px-4 py-8'>
+      <EmptyState size={size}>
+        <EmptyState.Header>
+          <EmptyState.Media variant='icon'>
+            {icon ?? <SearchX />}
+          </EmptyState.Media>
+          {title ? <EmptyState.Title>{title}</EmptyState.Title> : null}
+          {description ? (
+            <EmptyState.Description>{description}</EmptyState.Description>
+          ) : null}
+        </EmptyState.Header>
+      </EmptyState>
+    </div>
+  );
+};
+
+export default TableEmptyState;
diff --git a/web/src/components/common/ui/TableFilterForm.jsx b/web/src/components/common/ui/TableFilterForm.jsx
new file mode 100644
index 00000000000..4bef179a22b
--- /dev/null
+++ b/web/src/components/common/ui/TableFilterForm.jsx
@@ -0,0 +1,190 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+const toDateTimeInputValue = (value) => {
+  if (!value) {
+    return '';
+  }
+
+  if (value instanceof Date) {
+    const offsetDate = new Date(value.getTime() - value.getTimezoneOffset() * 60000);
+    return offsetDate.toISOString().slice(0, 16);
+  }
+
+  return String(value).replace(' ', 'T').slice(0, 16);
+};
+
+const fromDateTimeInputValue = (value) => {
+  if (!value) {
+    return '';
+  }
+
+  return `${value.replace('T', ' ')}:00`;
+};
+
+export function useTableFilterForm({ initValues = {}, setFormApi, onSubmit }) {
+  const [values, setValues] = useState(initValues || {});
+
+  // Snapshot the latest values, initValues, and onSubmit into refs so the
+  // returned `api` object stays referentially stable. Previously `api` was
+  // memoized with `[values, initValues, onSubmit]` deps, which combined with
+  // an effect that called `setFormApi(api)` and a parent that passed a
+  // freshly-allocated `initValues` literal each render produced an infinite
+  // setState loop on /console/token (and any other table using this hook).
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const initValuesRef = useRef(initValues);
+  initValuesRef.current = initValues;
+  const onSubmitRef = useRef(onSubmit);
+  onSubmitRef.current = onSubmit;
+
+  const api = useMemo(
+    () => ({
+      getValues: () => valuesRef.current,
+      getValue: (field) => valuesRef.current[field],
+      setValue: (field, value) => {
+        setValues((previous) => ({ ...previous, [field]: value }));
+      },
+      reset: () => {
+        setValues(initValuesRef.current || {});
+      },
+      submitForm: () => {
+        onSubmitRef.current?.(valuesRef.current);
+      },
+    }),
+    [],
+  );
+
+  // Hand the api to the parent exactly once. Use a ref for the callback so
+  // a parent that passes an inline `setFormApi` arrow doesn't retrigger the
+  // effect on every render.
+  const setFormApiRef = useRef(setFormApi);
+  setFormApiRef.current = setFormApi;
+  useEffect(() => {
+    setFormApiRef.current?.(api);
+  }, [api]);
+
+  const setFieldValue = (field, value) => {
+    setValues((previous) => ({ ...previous, [field]: value }));
+  };
+
+  const handleSubmit = (event) => {
+    event?.preventDefault();
+    onSubmit?.(values);
+  };
+
+  return { values, setFieldValue, handleSubmit, api };
+}
+
+export function FilterInput({
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+  className = '',
+}) {
+  return (
+    <input
+      type={type}
+      value={value ?? ''}
+      onChange={(event) => onChange(event.target.value)}
+      placeholder={placeholder}
+      className={`h-9 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary ${className}`}
+    />
+  );
+}
+
+export function FilterSelect({
+  value,
+  onChange,
+  placeholder,
+  options = [],
+  children,
+  className = '',
+}) {
+  return (
+    <select
+      value={value ?? ''}
+      onChange={(event) => onChange(event.target.value)}
+      className={`h-9 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary ${className}`}
+    >
+      {placeholder ? <option value=''>{placeholder}</option> : null}
+      {options.map((option) => (
+        <option key={String(option.value ?? '')} value={option.value ?? ''}>
+          {option.label}
+        </option>
+      ))}
+      {children}
+    </select>
+  );
+}
+
+export function FilterDateRange({
+  value = [],
+  onChange,
+  startPlaceholder,
+  endPlaceholder,
+  presets = [],
+  className = '',
+}) {
+  const [start = '', end = ''] = value || [];
+
+  const setRangeValue = (index, nextValue) => {
+    const nextRange = [start, end];
+    nextRange[index] = fromDateTimeInputValue(nextValue);
+    onChange(nextRange);
+  };
+
+  return (
+    <div className={`flex flex-col gap-2 ${className}`}>
+      <div className='grid grid-cols-1 gap-2 sm:grid-cols-2'>
+        <input
+          type='datetime-local'
+          value={toDateTimeInputValue(start)}
+          onChange={(event) => setRangeValue(0, event.target.value)}
+          aria-label={startPlaceholder}
+          className='h-9 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary'
+        />
+        <input
+          type='datetime-local'
+          value={toDateTimeInputValue(end)}
+          onChange={(event) => setRangeValue(1, event.target.value)}
+          aria-label={endPlaceholder}
+          className='h-9 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary'
+        />
+      </div>
+      {presets.length > 0 ? (
+        <div className='flex flex-wrap gap-1.5'>
+          {presets.map((preset) => (
+            <button
+              key={preset.text}
+              type='button'
+              onClick={() => onChange([preset.start, preset.end])}
+              className='rounded-full border border-border bg-surface-secondary px-2.5 py-1 text-xs text-muted transition hover:border-primary hover:text-foreground'
+            >
+              {preset.text}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+}
diff --git a/web/src/components/dashboard/AnnouncementsPanel.jsx b/web/src/components/dashboard/AnnouncementsPanel.jsx
index c62850b3b8f..57738cf356d 100644
--- a/web/src/components/dashboard/AnnouncementsPanel.jsx
+++ b/web/src/components/dashboard/AnnouncementsPanel.jsx
@@ -18,108 +18,93 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Tag, Timeline, Empty } from '@douyinfe/semi-ui';
+import { Chip } from '@heroui/react';
+import { EmptyState, Widget } from '@heroui-pro/react';
 import { Bell } from 'lucide-react';
 import { marked } from 'marked';
-import {
-  IllustrationConstruction,
-  IllustrationConstructionDark,
-} from '@douyinfe/semi-illustrations';
 import ScrollableContainer from '../common/ui/ScrollableContainer';
 
+// Map known legend swatch keys to concrete CSS colors so the dot
+// renders consistently regardless of the active theme.
+const LEGEND_COLOR_MAP = {
+  grey: '#8b9aa7',
+  blue: '#3b82f6',
+  green: '#10b981',
+  orange: '#f59e0b',
+  red: '#ef4444',
+};
+
 const AnnouncementsPanel = ({
   announcementData,
   announcementLegendData,
   CARD_PROPS,
-  ILLUSTRATION_SIZE,
   t,
 }) => {
   return (
-    <Card
-      {...CARD_PROPS}
-      className='shadow-sm !rounded-2xl lg:col-span-2'
-      title={
-        <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-2 w-full'>
-          <div className='flex items-center gap-2'>
-            <Bell size={16} />
-            {t('系统公告')}
-            <Tag color='white' shape='circle'>
-              {t('显示最新20条')}
-            </Tag>
-          </div>
-          {/* 图例 */}
-          <div className='flex flex-wrap gap-3 text-xs'>
-            {announcementLegendData.map((legend, index) => (
-              <div key={index} className='flex items-center gap-1'>
-                <div
-                  className='w-2 h-2 rounded-full'
-                  style={{
-                    backgroundColor:
-                      legend.color === 'grey'
-                        ? '#8b9aa7'
-                        : legend.color === 'blue'
-                          ? '#3b82f6'
-                          : legend.color === 'green'
-                            ? '#10b981'
-                            : legend.color === 'orange'
-                              ? '#f59e0b'
-                              : legend.color === 'red'
-                                ? '#ef4444'
-                                : '#8b9aa7',
-                  }}
-                />
-                <span className='text-gray-600'>{legend.label}</span>
-              </div>
-            ))}
-          </div>
+    <Widget className={`lg:col-span-2 ${CARD_PROPS?.className || ''}`}>
+      <Widget.Header className='h-auto min-h-12 flex-col items-start gap-2 py-3 lg:flex-row lg:items-center'>
+        <div className='flex items-center gap-2 whitespace-nowrap'>
+          <Bell size={16} className='shrink-0' />
+          <Widget.Title>{t('系统公告')}</Widget.Title>
+          <Chip size='sm' variant='secondary'>
+            {t('显示最新20条')}
+          </Chip>
         </div>
-      }
-      bodyStyle={{ padding: 0 }}
-    >
-      <ScrollableContainer maxHeight='24rem'>
-        {announcementData.length > 0 ? (
-          <Timeline mode='left'>
-            {announcementData.map((item, idx) => {
-              const htmlExtra = item.extra ? marked.parse(item.extra) : '';
-              return (
-                <Timeline.Item
-                  key={idx}
-                  type={item.type || 'default'}
-                  time={`${item.relative ? item.relative + ' ' : ''}${item.time}`}
-                  extra={
-                    item.extra ? (
-                      <div
-                        className='text-xs text-gray-500'
-                        dangerouslySetInnerHTML={{ __html: htmlExtra }}
-                      />
-                    ) : null
-                  }
-                >
-                  <div>
+        <Widget.Legend className='flex-wrap'>
+          {announcementLegendData.map((legend, index) => (
+            <Widget.LegendItem
+              key={index}
+              color={LEGEND_COLOR_MAP[legend.color] || legend.color}
+            >
+              {legend.label}
+            </Widget.LegendItem>
+          ))}
+        </Widget.Legend>
+      </Widget.Header>
+      <Widget.Content className='p-0'>
+        <ScrollableContainer maxHeight='24rem'>
+          {announcementData.length > 0 ? (
+            <div className='space-y-4 p-4'>
+              {announcementData.map((item, idx) => {
+                const htmlExtra = item.extra ? marked.parse(item.extra) : '';
+                return (
+                  <div key={idx} className='relative pl-5'>
+                    <span className='absolute left-0 top-1.5 h-2.5 w-2.5 rounded-full bg-muted ring-4 ring-surface' />
+                    <div className='text-xs text-muted'>
+                      {`${item.relative ? item.relative + ' ' : ''}${item.time}`}
+                    </div>
                     <div
+                      className='prose prose-sm mt-1 max-w-none dark:prose-invert text-foreground'
                       dangerouslySetInnerHTML={{
                         __html: marked.parse(item.content || ''),
                       }}
                     />
+                    {item.extra ? (
+                      <div
+                        className='prose prose-xs mt-2 max-w-none text-xs text-muted dark:prose-invert'
+                        dangerouslySetInnerHTML={{ __html: htmlExtra }}
+                      />
+                    ) : null}
                   </div>
-                </Timeline.Item>
-              );
-            })}
-          </Timeline>
-        ) : (
-          <div className='flex justify-center items-center py-8'>
-            <Empty
-              image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
-              darkModeImage={
-                <IllustrationConstructionDark style={ILLUSTRATION_SIZE} />
-              }
-              title={t('暂无系统公告')}
-              description={t('请联系管理员在系统设置中配置公告信息')}
-            />
-          </div>
-        )}
-      </ScrollableContainer>
-    </Card>
+                );
+              })}
+            </div>
+          ) : (
+            <EmptyState size='sm'>
+              <EmptyState.Header>
+                <EmptyState.Media variant='icon'>
+                  <Bell />
+                </EmptyState.Media>
+                <EmptyState.Title>{t('暂无系统公告')}</EmptyState.Title>
+                <EmptyState.Description>
+                  {t('请联系管理员在系统设置中配置公告信息')}
+                </EmptyState.Description>
+              </EmptyState.Header>
+            </EmptyState>
+          )}
+        </ScrollableContainer>
+      </Widget.Content>
+    </Widget>
   );
 };
 
diff --git a/web/src/components/dashboard/ApiInfoPanel.jsx b/web/src/components/dashboard/ApiInfoPanel.jsx
index c93ada44118..ce48d8d025d 100644
--- a/web/src/components/dashboard/ApiInfoPanel.jsx
+++ b/web/src/components/dashboard/ApiInfoPanel.jsx
@@ -18,12 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Tag, Divider, Empty } from '@douyinfe/semi-ui';
+import { Avatar, Button } from '@heroui/react';
+import { EmptyState, Widget } from '@heroui-pro/react';
 import { Server, Gauge, ExternalLink, Copy } from 'lucide-react';
-import {
-  IllustrationConstruction,
-  IllustrationConstructionDark,
-} from '@douyinfe/semi-illustrations';
 import ScrollableContainer from '../common/ui/ScrollableContainer';
 
 const ApiInfoPanel = ({
@@ -32,94 +29,102 @@ const ApiInfoPanel = ({
   handleSpeedTest,
   CARD_PROPS,
   FLEX_CENTER_GAP2,
-  ILLUSTRATION_SIZE,
   t,
 }) => {
   return (
-    <Card
-      {...CARD_PROPS}
-      className='bg-gray-50 border-0 !rounded-2xl'
-      title={
-        <div className={FLEX_CENTER_GAP2}>
-          <Server size={16} />
-          {t('API信息')}
+    <Widget className={CARD_PROPS?.className || ''}>
+      <Widget.Header className='h-12'>
+        <div className={`${FLEX_CENTER_GAP2} whitespace-nowrap`}>
+          <Server size={16} className='shrink-0' />
+          <Widget.Title>{t('API信息')}</Widget.Title>
         </div>
-      }
-      bodyStyle={{ padding: 0 }}
-    >
-      <ScrollableContainer maxHeight='24rem'>
+      </Widget.Header>
+      <Widget.Content className='flex p-0'>
+        {/* When the panel has API rows, defer to ScrollableContainer's
+            scroll-with-fade behavior. When empty, render a flex wrapper that
+            fills the Widget height so the EmptyState is vertically centered
+            inside whatever the grid row stretches us to (matches the chart
+            panel sitting next to it). `flex` on Widget.Content + `flex-1`
+            on the inner wrapper is what propagates the row height down. */}
         {apiInfoData.length > 0 ? (
-          apiInfoData.map((api) => (
-            <React.Fragment key={api.id}>
-              <div className='flex p-2 hover:bg-white rounded-lg transition-colors cursor-pointer'>
-                <div className='flex-shrink-0 mr-3'>
-                  <Avatar size='extra-small' color={api.color}>
-                    {api.route.substring(0, 2)}
-                  </Avatar>
-                </div>
-                <div className='flex-1'>
-                  <div className='flex flex-wrap items-center justify-between mb-1 w-full gap-2'>
-                    <span className='text-sm font-medium text-gray-900 !font-bold break-all'>
-                      {api.route}
-                    </span>
-                    <div className='flex items-center gap-1 mt-1 lg:mt-0'>
-                      <Tag
-                        prefixIcon={<Gauge size={12} />}
-                        size='small'
-                        color='white'
-                        shape='circle'
-                        onClick={() => handleSpeedTest(api.url)}
-                        className='cursor-pointer hover:opacity-80 text-xs'
-                      >
-                        {t('测速')}
-                      </Tag>
-                      <Tag
-                        prefixIcon={<ExternalLink size={12} />}
-                        size='small'
-                        color='white'
-                        shape='circle'
-                        onClick={() =>
-                          window.open(api.url, '_blank', 'noopener,noreferrer')
-                        }
-                        className='cursor-pointer hover:opacity-80 text-xs'
+          <ScrollableContainer className='flex-1' maxHeight='24rem'>
+            {apiInfoData.map((api) => (
+              <React.Fragment key={api.id}>
+                <div className='flex p-2 hover:bg-surface-secondary rounded-lg transition-colors cursor-pointer'>
+                  <div className='flex-shrink-0 mr-3'>
+                    <Avatar size='sm' color={api.color}>
+                      <Avatar.Fallback>
+                        {api.route.substring(0, 2)}
+                      </Avatar.Fallback>
+                    </Avatar>
+                  </div>
+                  <div className='flex-1'>
+                    <div className='flex flex-wrap items-center justify-between mb-1 w-full gap-2'>
+                      <span className='text-sm font-semibold text-foreground break-all'>
+                        {api.route}
+                      </span>
+                      <div className='flex items-center gap-1 mt-1 lg:mt-0'>
+                        <Button
+                          size='sm'
+                          variant='secondary'
+                          onPress={() => handleSpeedTest(api.url)}
+                        >
+                          <Gauge size={12} />
+                          {t('测速')}
+                        </Button>
+                        <Button
+                          size='sm'
+                          variant='secondary'
+                          onPress={() =>
+                            window.open(
+                              api.url,
+                              '_blank',
+                              'noopener,noreferrer',
+                            )
+                          }
+                        >
+                          <ExternalLink size={12} />
+                          {t('跳转')}
+                        </Button>
+                      </div>
+                    </div>
+                    <div className='flex items-center gap-1 mb-1'>
+                      <span
+                        className='text-sm text-primary break-all cursor-pointer hover:underline'
+                        onClick={() => handleCopyUrl(api.url)}
                       >
-                        {t('跳转')}
-                      </Tag>
+                        {api.url}
+                      </span>
+                      <Copy
+                        size={14}
+                        className='flex-shrink-0 text-muted hover:text-primary cursor-pointer transition-colors'
+                        onClick={() => handleCopyUrl(api.url)}
+                      />
                     </div>
+                    <div className='text-xs text-muted'>{api.description}</div>
                   </div>
-                  <div className='flex items-center gap-1 mb-1'>
-                    <span
-                      className='!text-semi-color-primary break-all cursor-pointer hover:underline'
-                      onClick={() => handleCopyUrl(api.url)}
-                    >
-                      {api.url}
-                    </span>
-                    <Copy
-                      size={14}
-                      className='flex-shrink-0 text-gray-400 hover:text-semi-color-primary cursor-pointer transition-colors'
-                      onClick={() => handleCopyUrl(api.url)}
-                    />
-                  </div>
-                  <div className='text-gray-500'>{api.description}</div>
                 </div>
-              </div>
-              <Divider />
-            </React.Fragment>
-          ))
+                <div className='h-px bg-border' />
+              </React.Fragment>
+            ))}
+          </ScrollableContainer>
         ) : (
-          <div className='flex justify-center items-center min-h-[20rem] w-full'>
-            <Empty
-              image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
-              darkModeImage={
-                <IllustrationConstructionDark style={ILLUSTRATION_SIZE} />
-              }
-              title={t('暂无API信息')}
-              description={t('请联系管理员在系统设置中配置API信息')}
-            />
+          <div className='flex flex-1 min-h-80 items-center justify-center'>
+            <EmptyState size='sm'>
+              <EmptyState.Header>
+                <EmptyState.Media variant='icon'>
+                  <Server />
+                </EmptyState.Media>
+                <EmptyState.Title>{t('暂无API信息')}</EmptyState.Title>
+                <EmptyState.Description>
+                  {t('请联系管理员在系统设置中配置API信息')}
+                </EmptyState.Description>
+              </EmptyState.Header>
+            </EmptyState>
           </div>
         )}
-      </ScrollableContainer>
-    </Card>
+      </Widget.Content>
+    </Widget>
   );
 };
 
diff --git a/web/src/components/dashboard/ChartsPanel.jsx b/web/src/components/dashboard/ChartsPanel.jsx
index 0034ffd9006..0408312876a 100644
--- a/web/src/components/dashboard/ChartsPanel.jsx
+++ b/web/src/components/dashboard/ChartsPanel.jsx
@@ -18,7 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Tabs, TabPane } from '@douyinfe/semi-ui';
+import { Tabs } from '@heroui/react';
+import { Widget } from '@heroui-pro/react';
 import { PieChart } from 'lucide-react';
 import { VChart } from '@visactor/react-vchart';
 
@@ -38,57 +39,62 @@ const ChartsPanel = ({
   hasApiInfoPanel,
   t,
 }) => {
+  // Build static tab items so the underlying RAC collection sees a stable
+  // list (HeroUI Tabs is a `react-aria-components` Tabs and rejects raw
+  // conditional children inside <Tabs.List/>).
+  const tabItems = [
+    { id: '1', title: t('消耗分布'), spec: spec_line },
+    { id: '2', title: t('调用趋势'), spec: spec_model_line },
+    { id: '3', title: t('调用次数分布'), spec: spec_pie },
+    { id: '4', title: t('调用次数排行'), spec: spec_rank_bar },
+    isAdminUser && { id: '5', title: t('用户消耗排行'), spec: spec_user_rank },
+    isAdminUser && { id: '6', title: t('用户消耗趋势'), spec: spec_user_trend },
+  ].filter(Boolean);
+
   return (
-    <Card
-      {...CARD_PROPS}
-      className={`!rounded-2xl ${hasApiInfoPanel ? 'lg:col-span-3' : ''}`}
-      title={
-        <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between w-full gap-3'>
-          <div className={FLEX_CENTER_GAP2}>
-            <PieChart size={16} />
-            {t('模型数据分析')}
-          </div>
+    <Widget
+      className={`${hasApiInfoPanel ? 'lg:col-span-2 xl:col-span-3' : ''} ${CARD_PROPS?.className || ''}`}
+    >
+      {/* The Tabs strip carries 4–6 entries and only fits on the same row as
+          the title at xl+, so keep the header column-stacked through lg and
+          let the tab list scroll horizontally when it would otherwise squeeze
+          tab labels into vertical CJK character columns. */}
+      <Widget.Header className='h-auto min-h-12 flex-col items-start gap-3 py-3 xl:flex-row xl:items-center'>
+        <div className={`${FLEX_CENTER_GAP2} whitespace-nowrap`}>
+          <PieChart size={16} className='shrink-0' />
+          <Widget.Title>{t('模型数据分析')}</Widget.Title>
+        </div>
+        <div className='-mx-1 w-full overflow-x-auto px-1 xl:w-auto'>
           <Tabs
-            type='slash'
-            activeKey={activeChartTab}
-            onChange={setActiveChartTab}
+            selectedKey={activeChartTab}
+            onSelectionChange={(key) => setActiveChartTab(String(key))}
+            variant='secondary'
           >
-            <TabPane tab={<span>{t('消耗分布')}</span>} itemKey='1' />
-            <TabPane tab={<span>{t('调用趋势')}</span>} itemKey='2' />
-            <TabPane tab={<span>{t('调用次数分布')}</span>} itemKey='3' />
-            <TabPane tab={<span>{t('调用次数排行')}</span>} itemKey='4' />
-            {isAdminUser && (
-              <TabPane tab={<span>{t('用户消耗排行')}</span>} itemKey='5' />
-            )}
-            {isAdminUser && (
-              <TabPane tab={<span>{t('用户消耗趋势')}</span>} itemKey='6' />
-            )}
+            <Tabs.List aria-label={t('模型数据分析')}>
+              {tabItems.map((item) => (
+                <Tabs.Tab
+                  key={item.id}
+                  id={item.id}
+                  className='whitespace-nowrap text-xs'
+                >
+                  {item.title}
+                </Tabs.Tab>
+              ))}
+            </Tabs.List>
           </Tabs>
         </div>
-      }
-      bodyStyle={{ padding: 0 }}
-    >
-      <div className='h-96 p-2'>
-        {activeChartTab === '1' && (
-          <VChart spec={spec_line} option={CHART_CONFIG} />
-        )}
-        {activeChartTab === '2' && (
-          <VChart spec={spec_model_line} option={CHART_CONFIG} />
-        )}
-        {activeChartTab === '3' && (
-          <VChart spec={spec_pie} option={CHART_CONFIG} />
-        )}
-        {activeChartTab === '4' && (
-          <VChart spec={spec_rank_bar} option={CHART_CONFIG} />
-        )}
-        {activeChartTab === '5' && isAdminUser && (
-          <VChart spec={spec_user_rank} option={CHART_CONFIG} />
-        )}
-        {activeChartTab === '6' && isAdminUser && (
-          <VChart spec={spec_user_trend} option={CHART_CONFIG} />
-        )}
-      </div>
-    </Card>
+      </Widget.Header>
+      <Widget.Content className='p-0'>
+        <div className='h-96 p-2'>
+          {tabItems.map(
+            (item) =>
+              activeChartTab === item.id && (
+                <VChart key={item.id} spec={item.spec} option={CHART_CONFIG} />
+              ),
+          )}
+        </div>
+      </Widget.Content>
+    </Widget>
   );
 };
 
diff --git a/web/src/components/dashboard/DashboardHeader.jsx b/web/src/components/dashboard/DashboardHeader.jsx
index c2867e90c2a..1baf7603e3a 100644
--- a/web/src/components/dashboard/DashboardHeader.jsx
+++ b/web/src/components/dashboard/DashboardHeader.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import { RefreshCw, Search } from 'lucide-react';
 
 const DashboardHeader = ({
@@ -29,30 +29,36 @@ const DashboardHeader = ({
   loading,
   t,
 }) => {
-  const ICON_BUTTON_CLASS = 'text-white hover:bg-opacity-80 !rounded-full';
-
   return (
     <div className='flex items-center justify-between mb-4'>
       <h2
-        className='text-2xl font-semibold text-gray-800 transition-opacity duration-1000 ease-in-out'
+        className='text-xl font-semibold text-foreground truncate transition-opacity duration-1000 ease-in-out'
         style={{ opacity: greetingVisible ? 1 : 0 }}
       >
         {getGreeting}
       </h2>
-      <div className='flex gap-3'>
+      {/* Use the `ghost` variant so the trigger reads as a bare icon — the
+          surrounding pill only fades in on hover/press, not at rest. */}
+      <div className='flex gap-1'>
         <Button
-          type='tertiary'
-          icon={<Search size={16} />}
-          onClick={showSearchModal}
-          className={`bg-green-500 hover:bg-green-600 ${ICON_BUTTON_CLASS}`}
-        />
+          isIconOnly
+          aria-label={t('搜索条件')}
+          size='sm'
+          variant='ghost'
+          onPress={showSearchModal}
+        >
+          <Search size={16} />
+        </Button>
         <Button
-          type='tertiary'
-          icon={<RefreshCw size={16} />}
-          onClick={refresh}
-          loading={loading}
-          className={`bg-blue-500 hover:bg-blue-600 ${ICON_BUTTON_CLASS}`}
-        />
+          isIconOnly
+          aria-label={t('刷新')}
+          isPending={loading}
+          size='sm'
+          variant='ghost'
+          onPress={refresh}
+        >
+          <RefreshCw size={16} />
+        </Button>
       </div>
     </div>
   );
diff --git a/web/src/components/dashboard/FaqPanel.jsx b/web/src/components/dashboard/FaqPanel.jsx
index a092abbd108..fb7ce0ee9e5 100644
--- a/web/src/components/dashboard/FaqPanel.jsx
+++ b/web/src/components/dashboard/FaqPanel.jsx
@@ -18,70 +18,56 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Collapse, Empty } from '@douyinfe/semi-ui';
+import { Accordion, AccordionItem } from '@heroui/react';
+import { EmptyState, Widget } from '@heroui-pro/react';
 import { HelpCircle } from 'lucide-react';
-import { IconPlus, IconMinus } from '@douyinfe/semi-icons';
 import { marked } from 'marked';
-import {
-  IllustrationConstruction,
-  IllustrationConstructionDark,
-} from '@douyinfe/semi-illustrations';
 import ScrollableContainer from '../common/ui/ScrollableContainer';
 
-const FaqPanel = ({
-  faqData,
-  CARD_PROPS,
-  FLEX_CENTER_GAP2,
-  ILLUSTRATION_SIZE,
-  t,
-}) => {
+const FaqPanel = ({ faqData, CARD_PROPS, FLEX_CENTER_GAP2, t }) => {
   return (
-    <Card
-      {...CARD_PROPS}
-      className='shadow-sm !rounded-2xl lg:col-span-1'
-      title={
-        <div className={FLEX_CENTER_GAP2}>
-          <HelpCircle size={16} />
-          {t('常见问答')}
+    <Widget className={`lg:col-span-1 ${CARD_PROPS?.className || ''}`}>
+      <Widget.Header className='h-12'>
+        <div className={`${FLEX_CENTER_GAP2} whitespace-nowrap`}>
+          <HelpCircle size={16} className='shrink-0' />
+          <Widget.Title>{t('常见问答')}</Widget.Title>
         </div>
-      }
-      bodyStyle={{ padding: 0 }}
-    >
-      <ScrollableContainer maxHeight='24rem'>
-        {faqData.length > 0 ? (
-          <Collapse
-            accordion
-            expandIcon={<IconPlus />}
-            collapseIcon={<IconMinus />}
-          >
-            {faqData.map((item, index) => (
-              <Collapse.Panel
-                key={index}
-                header={item.question}
-                itemKey={index.toString()}
-              >
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: marked.parse(item.answer || ''),
-                  }}
-                />
-              </Collapse.Panel>
-            ))}
-          </Collapse>
-        ) : (
-          <div className='flex justify-center items-center py-8'>
-            <Empty
-              image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
-              darkModeImage={
-                <IllustrationConstructionDark style={ILLUSTRATION_SIZE} />
-              }
-              title={t('暂无常见问答')}
-              description={t('请联系管理员在系统设置中配置常见问答')}
-            />
-          </div>
-        )}
-      </ScrollableContainer>
-    </Card>
+      </Widget.Header>
+      <Widget.Content className='p-0'>
+        <ScrollableContainer maxHeight='24rem'>
+          {faqData.length > 0 ? (
+            <Accordion selectionMode='multiple' variant='light'>
+              {faqData.map((item, index) => (
+                <AccordionItem
+                  key={index.toString()}
+                  aria-label={item.question}
+                  title={item.question}
+                >
+                  <div
+                    className='prose prose-sm max-w-none dark:prose-invert'
+                    dangerouslySetInnerHTML={{
+                      __html: marked.parse(item.answer || ''),
+                    }}
+                  />
+                </AccordionItem>
+              ))}
+            </Accordion>
+          ) : (
+            <EmptyState size='sm'>
+              <EmptyState.Header>
+                <EmptyState.Media variant='icon'>
+                  <HelpCircle />
+                </EmptyState.Media>
+                <EmptyState.Title>{t('暂无常见问答')}</EmptyState.Title>
+                <EmptyState.Description>
+                  {t('请联系管理员在系统设置中配置常见问答')}
+                </EmptyState.Description>
+              </EmptyState.Header>
+            </EmptyState>
+          )}
+        </ScrollableContainer>
+      </Widget.Content>
+    </Widget>
   );
 };
 
diff --git a/web/src/components/dashboard/StatsCards.jsx b/web/src/components/dashboard/StatsCards.jsx
index ce72568354c..c97bfe80cce 100644
--- a/web/src/components/dashboard/StatsCards.jsx
+++ b/web/src/components/dashboard/StatsCards.jsx
@@ -18,7 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Skeleton, Tag } from '@douyinfe/semi-ui';
+import { Avatar, Button, Skeleton } from '@heroui/react';
+import { Widget } from '@heroui-pro/react';
 import { VChart } from '@visactor/react-vchart';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -34,68 +35,57 @@ const StatsCards = ({
   const { t } = useTranslation();
   return (
     <div className='mb-4'>
-      <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4'>
+      {/* Use 2-col through `lg` so each KPI card has enough room for the
+          avatar + label + value + sparkline row, then collapse to 4-col only
+          at xl where the main area is wide enough for ~280px per card. */}
+      <div className='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4'>
         {groupedStatsData.map((group, idx) => (
-          <Card
+          <Widget
             key={idx}
-            {...CARD_PROPS}
-            className={`${group.color} border-0 !rounded-2xl w-full`}
-            title={group.title}
+            className={`w-full ${group.color || ''} ${CARD_PROPS?.className || ''}`}
           >
-            <div className='space-y-4'>
+            <Widget.Header className='h-12'>{group.title}</Widget.Header>
+            {/* Tighten the default Widget.Content p-4 to p-3 so the inner shell
+                still has room for value + sparkline/button on narrow widths. */}
+            <Widget.Content className='space-y-4 p-3'>
               {group.items.map((item, itemIdx) => (
                 <div
                   key={itemIdx}
-                  className='flex items-center justify-between cursor-pointer'
+                  className='flex items-center justify-between gap-2 cursor-pointer'
                   onClick={item.onClick}
                 >
-                  <div className='flex items-center'>
+                  <div className='flex items-center min-w-0 flex-1'>
                     <Avatar
-                      className='mr-3'
-                      size='small'
+                      className='mr-2 shrink-0'
+                      size='sm'
                       color={item.avatarColor}
                     >
-                      {item.icon}
+                      <Avatar.Fallback>{item.icon}</Avatar.Fallback>
                     </Avatar>
-                    <div>
-                      <div className='text-xs text-gray-500'>{item.title}</div>
-                      <div className='text-lg font-semibold'>
-                        <Skeleton
-                          loading={loading}
-                          active
-                          placeholder={
-                            <Skeleton.Paragraph
-                              active
-                              rows={1}
-                              style={{
-                                width: '65px',
-                                height: '24px',
-                                marginTop: '4px',
-                              }}
-                            />
-                          }
-                        >
-                          {item.value}
-                        </Skeleton>
+                    <div className='min-w-0'>
+                      <div className='text-xs text-muted'>{item.title}</div>
+                      <div className='text-base font-semibold tabular-nums text-foreground'>
+                        {loading ? (
+                          <Skeleton className='mt-1 h-6 w-16 rounded-lg' />
+                        ) : (
+                          item.value
+                        )}
                       </div>
                     </div>
                   </div>
                   {item.title === t('当前余额') ? (
-                    <Tag
-                      color='white'
-                      shape='circle'
-                      size='large'
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        navigate('/console/topup');
-                      }}
+                    <Button
+                      className='shrink-0'
+                      size='sm'
+                      variant='primary'
+                      onPress={() => navigate('/console/topup')}
                     >
                       {t('充值')}
-                    </Tag>
+                    </Button>
                   ) : (
                     (loading ||
                       (item.trendData && item.trendData.length > 0)) && (
-                      <div className='w-24 h-10'>
+                      <div className='w-24 h-10 shrink-0'>
                         <VChart
                           spec={getTrendSpec(item.trendData, item.trendColor)}
                           option={CHART_CONFIG}
@@ -105,8 +95,8 @@ const StatsCards = ({
                   )}
                 </div>
               ))}
-            </div>
-          </Card>
+            </Widget.Content>
+          </Widget>
         ))}
       </div>
     </div>
diff --git a/web/src/components/dashboard/UptimePanel.jsx b/web/src/components/dashboard/UptimePanel.jsx
index ed978d99e90..263e0e24e2c 100644
--- a/web/src/components/dashboard/UptimePanel.jsx
+++ b/web/src/components/dashboard/UptimePanel.jsx
@@ -18,20 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import {
-  Card,
-  Button,
-  Spin,
-  Tabs,
-  TabPane,
-  Tag,
-  Empty,
-} from '@douyinfe/semi-ui';
+import { Button, Chip, Spinner, Tabs } from '@heroui/react';
+import { EmptyState, Widget } from '@heroui-pro/react';
 import { Gauge, RefreshCw } from 'lucide-react';
-import {
-  IllustrationConstruction,
-  IllustrationConstructionDark,
-} from '@douyinfe/semi-illustrations';
 import ScrollableContainer from '../common/ui/ScrollableContainer';
 
 const UptimePanel = ({
@@ -43,109 +32,104 @@ const UptimePanel = ({
   uptimeLegendData,
   renderMonitorList,
   CARD_PROPS,
-  ILLUSTRATION_SIZE,
   t,
 }) => {
   return (
-    <Card
-      {...CARD_PROPS}
-      className='shadow-sm !rounded-2xl lg:col-span-1'
-      title={
-        <div className='flex items-center justify-between w-full gap-2'>
-          <div className='flex items-center gap-2'>
-            <Gauge size={16} />
-            {t('服务可用性')}
-          </div>
-          <Button
-            icon={<RefreshCw size={14} />}
-            onClick={loadUptimeData}
-            loading={uptimeLoading}
-            size='small'
-            theme='borderless'
-            type='tertiary'
-            className='text-gray-500 hover:text-blue-500 hover:bg-blue-50 !rounded-full'
-          />
+    <Widget className={`lg:col-span-1 ${CARD_PROPS?.className || ''}`}>
+      <Widget.Header className='h-12'>
+        <div className='flex items-center gap-2 whitespace-nowrap'>
+          <Gauge size={16} className='shrink-0' />
+          <Widget.Title>{t('服务可用性')}</Widget.Title>
         </div>
-      }
-      bodyStyle={{ padding: 0 }}
-    >
-      {/* 内容区域 */}
-      <div className='relative'>
-        <Spin spinning={uptimeLoading}>
-          {uptimeData.length > 0 ? (
+        {/* Force sub-`sm` dimensions: HeroUI Button only ships sm/md/lg, so
+            the trailing refresh action gets `!h-6 !w-6` overrides + a 12px
+            icon to read as a quiet inline affordance instead of a full-size
+            button against the compact 48px header. */}
+        <Button
+          isIconOnly
+          isPending={uptimeLoading}
+          size='sm'
+          variant='ghost'
+          onPress={loadUptimeData}
+          className='!h-6 !w-6 !min-w-0 rounded-full text-muted hover:text-primary [&_svg]:!size-3'
+        >
+          <RefreshCw size={12} />
+        </Button>
+      </Widget.Header>
+      <Widget.Content className='p-0'>
+        <div className='relative'>
+          {uptimeLoading ? (
+            <div className='flex min-h-48 items-center justify-center'>
+              <Spinner size='sm' />
+            </div>
+          ) : uptimeData.length > 0 ? (
             uptimeData.length === 1 ? (
               <ScrollableContainer maxHeight='24rem'>
                 {renderMonitorList(uptimeData[0].monitors)}
               </ScrollableContainer>
             ) : (
               <Tabs
-                type='card'
-                collapsible
-                activeKey={activeUptimeTab}
-                onChange={setActiveUptimeTab}
-                size='small'
+                selectedKey={activeUptimeTab}
+                onSelectionChange={(key) => setActiveUptimeTab(String(key))}
+                variant='secondary'
+                className='p-3'
               >
-                {uptimeData.map((group, groupIdx) => (
-                  <TabPane
-                    tab={
+                <Tabs.List aria-label={t('服务可用性')}>
+                  {uptimeData.map((group) => (
+                    <Tabs.Tab key={group.categoryName} id={group.categoryName}>
                       <span className='flex items-center gap-2'>
                         <Gauge size={14} />
                         {group.categoryName}
-                        <Tag
+                        <Chip
                           color={
                             activeUptimeTab === group.categoryName
-                              ? 'red'
-                              : 'grey'
+                              ? 'danger'
+                              : 'default'
                           }
-                          size='small'
-                          shape='circle'
+                          size='sm'
                         >
                           {group.monitors ? group.monitors.length : 0}
-                        </Tag>
+                        </Chip>
                       </span>
-                    }
-                    itemKey={group.categoryName}
-                    key={groupIdx}
-                  >
+                    </Tabs.Tab>
+                  ))}
+                </Tabs.List>
+                {uptimeData.map((group) => (
+                  <Tabs.Panel key={group.categoryName} id={group.categoryName}>
                     <ScrollableContainer maxHeight='21.5rem'>
                       {renderMonitorList(group.monitors)}
                     </ScrollableContainer>
-                  </TabPane>
+                  </Tabs.Panel>
                 ))}
               </Tabs>
             )
           ) : (
-            <div className='flex justify-center items-center py-8'>
-              <Empty
-                image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
-                darkModeImage={
-                  <IllustrationConstructionDark style={ILLUSTRATION_SIZE} />
-                }
-                title={t('暂无监控数据')}
-                description={t('请联系管理员在系统设置中配置Uptime')}
-              />
-            </div>
+            <EmptyState size='sm'>
+              <EmptyState.Header>
+                <EmptyState.Media variant='icon'>
+                  <Gauge />
+                </EmptyState.Media>
+                <EmptyState.Title>{t('暂无监控数据')}</EmptyState.Title>
+                <EmptyState.Description>
+                  {t('请联系管理员在系统设置中配置Uptime')}
+                </EmptyState.Description>
+              </EmptyState.Header>
+            </EmptyState>
           )}
-        </Spin>
-      </div>
-
-      {/* 图例 */}
+        </div>
+      </Widget.Content>
       {uptimeData.length > 0 && (
-        <div className='p-3 bg-gray-50 rounded-b-2xl'>
-          <div className='flex flex-wrap gap-3 text-xs justify-center'>
+        <Widget.Footer className='justify-center'>
+          <Widget.Legend className='flex-wrap'>
             {uptimeLegendData.map((legend, index) => (
-              <div key={index} className='flex items-center gap-1'>
-                <div
-                  className='w-2 h-2 rounded-full'
-                  style={{ backgroundColor: legend.color }}
-                />
-                <span className='text-gray-600'>{legend.label}</span>
-              </div>
+              <Widget.LegendItem key={index} color={legend.color}>
+                {legend.label}
+              </Widget.LegendItem>
             ))}
-          </div>
-        </div>
+          </Widget.Legend>
+        </Widget.Footer>
       )}
-    </Card>
+    </Widget>
   );
 };
 
diff --git a/web/src/components/dashboard/index.jsx b/web/src/components/dashboard/index.jsx
index 811e23ca760..83f0659a37d 100644
--- a/web/src/components/dashboard/index.jsx
+++ b/web/src/components/dashboard/index.jsx
@@ -39,7 +39,6 @@ import {
   CHART_CONFIG,
   CARD_PROPS,
   FLEX_CENTER_GAP2,
-  ILLUSTRATION_SIZE,
   ANNOUNCEMENT_LEGEND_DATA,
   UPTIME_STATUS_MAP,
 } from '../../constants/dashboard.constants';
@@ -185,7 +184,7 @@ const Dashboard = () => {
       {/* API信息和图表面板 */}
       <div className='mb-4'>
         <div
-          className={`grid grid-cols-1 gap-4 ${dashboardData.hasApiInfoPanel ? 'lg:grid-cols-4' : ''}`}
+          className={`grid grid-cols-1 gap-4 ${dashboardData.hasApiInfoPanel ? 'lg:grid-cols-3 xl:grid-cols-4' : ''}`}
         >
           <ChartsPanel
             activeChartTab={dashboardData.activeChartTab}
@@ -211,7 +210,6 @@ const Dashboard = () => {
               handleSpeedTest={handleSpeedTest}
               CARD_PROPS={CARD_PROPS}
               FLEX_CENTER_GAP2={FLEX_CENTER_GAP2}
-              ILLUSTRATION_SIZE={ILLUSTRATION_SIZE}
               t={dashboardData.t}
             />
           )}
@@ -221,7 +219,7 @@ const Dashboard = () => {
       {/* 系统公告和常见问答卡片 */}
       {dashboardData.hasInfoPanels && (
         <div className='mb-4'>
-          <div className='grid grid-cols-1 lg:grid-cols-4 gap-4'>
+          <div className='grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-4'>
             {/* 公告卡片 */}
             {dashboardData.announcementsEnabled && (
               <AnnouncementsPanel
@@ -233,7 +231,6 @@ const Dashboard = () => {
                   }),
                 )}
                 CARD_PROPS={CARD_PROPS}
-                ILLUSTRATION_SIZE={ILLUSTRATION_SIZE}
                 t={dashboardData.t}
               />
             )}
@@ -244,7 +241,6 @@ const Dashboard = () => {
                 faqData={faqData}
                 CARD_PROPS={CARD_PROPS}
                 FLEX_CENTER_GAP2={FLEX_CENTER_GAP2}
-                ILLUSTRATION_SIZE={ILLUSTRATION_SIZE}
                 t={dashboardData.t}
               />
             )}
@@ -272,7 +268,6 @@ const Dashboard = () => {
                   )
                 }
                 CARD_PROPS={CARD_PROPS}
-                ILLUSTRATION_SIZE={ILLUSTRATION_SIZE}
                 t={dashboardData.t}
               />
             )}
diff --git a/web/src/components/dashboard/modals/SearchModal.jsx b/web/src/components/dashboard/modals/SearchModal.jsx
index f619831dccb..19ae8009dbc 100644
--- a/web/src/components/dashboard/modals/SearchModal.jsx
+++ b/web/src/components/dashboard/modals/SearchModal.jsx
@@ -17,8 +17,19 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef } from 'react';
-import { Modal, Form } from '@douyinfe/semi-ui';
+import React from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 
 const SearchModal = ({
   searchModalVisible,
@@ -32,70 +43,95 @@ const SearchModal = ({
   handleInputChange,
   t,
 }) => {
-  const formRef = useRef();
-
-  const FORM_FIELD_PROPS = {
-    className: 'w-full mb-2 !rounded-lg',
-  };
-
-  const createFormField = (Component, props) => (
-    <Component {...FORM_FIELD_PROPS} {...props} />
-  );
-
   const { start_timestamp, end_timestamp, username } = inputs;
+  const modalState = useOverlayState({
+    isOpen: searchModalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleCloseModal();
+    },
+  });
+
+  const fieldClass =
+    'flex flex-col gap-1.5 text-sm font-medium text-foreground';
 
   return (
-    <Modal
-      title={t('搜索条件')}
-      visible={searchModalVisible}
-      onOk={handleSearchConfirm}
-      onCancel={handleCloseModal}
-      closeOnEsc={true}
-      size={isMobile ? 'full-width' : 'small'}
-      centered
-    >
-      <Form ref={formRef} layout='vertical' className='w-full'>
-        {createFormField(Form.DatePicker, {
-          field: 'start_timestamp',
-          label: t('起始时间'),
-          initValue: start_timestamp,
-          value: start_timestamp,
-          type: 'dateTime',
-          name: 'start_timestamp',
-          onChange: (value) => handleInputChange(value, 'start_timestamp'),
-        })}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size={isMobile ? 'full' : 'sm'} placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('搜索条件')}
+            </ModalHeader>
+            <ModalBody className='space-y-4 px-6 py-5'>
+              <label className={fieldClass}>
+                {t('起始时间')}
+                <Input
+                  value={start_timestamp}
+                  onChange={(event) =>
+                    handleInputChange(event.target.value, 'start_timestamp')
+                  }
+                  placeholder='YYYY-MM-DD HH:mm:ss'
+                  fullWidth
+                />
+              </label>
 
-        {createFormField(Form.DatePicker, {
-          field: 'end_timestamp',
-          label: t('结束时间'),
-          initValue: end_timestamp,
-          value: end_timestamp,
-          type: 'dateTime',
-          name: 'end_timestamp',
-          onChange: (value) => handleInputChange(value, 'end_timestamp'),
-        })}
+              <label className={fieldClass}>
+                {t('结束时间')}
+                <Input
+                  value={end_timestamp}
+                  onChange={(event) =>
+                    handleInputChange(event.target.value, 'end_timestamp')
+                  }
+                  placeholder='YYYY-MM-DD HH:mm:ss'
+                  fullWidth
+                />
+              </label>
 
-        {createFormField(Form.Select, {
-          field: 'data_export_default_time',
-          label: t('时间粒度'),
-          initValue: dataExportDefaultTime,
-          placeholder: t('时间粒度'),
-          name: 'data_export_default_time',
-          optionList: timeOptions,
-          onChange: (value) =>
-            handleInputChange(value, 'data_export_default_time'),
-        })}
+              <label className={fieldClass}>
+                {t('时间粒度')}
+                <select
+                  className='h-10 rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+                  value={dataExportDefaultTime}
+                  onChange={(event) =>
+                    handleInputChange(
+                      event.target.value,
+                      'data_export_default_time',
+                    )
+                  }
+                >
+                  {timeOptions.map((option) => (
+                    <option key={option.value} value={option.value}>
+                      {option.label}
+                    </option>
+                  ))}
+                </select>
+              </label>
 
-        {isAdminUser &&
-          createFormField(Form.Input, {
-            field: 'username',
-            label: t('用户名称'),
-            value: username,
-            placeholder: t('可选值'),
-            name: 'username',
-            onChange: (value) => handleInputChange(value, 'username'),
-          })}
-      </Form>
+              {isAdminUser && (
+                <label className={fieldClass}>
+                  {t('用户名称')}
+                  <Input
+                    value={username}
+                    onChange={(event) =>
+                      handleInputChange(event.target.value, 'username')
+                    }
+                    placeholder={t('可选值')}
+                    fullWidth
+                  />
+                </label>
+              )}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='ghost' onPress={handleCloseModal}>
+                {t('取消')}
+              </Button>
+              <Button variant='primary' onPress={handleSearchConfirm}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/layout/Footer.jsx b/web/src/components/layout/Footer.jsx
index ba64689374a..1db0add4f4d 100644
--- a/web/src/components/layout/Footer.jsx
+++ b/web/src/components/layout/Footer.jsx
@@ -19,7 +19,6 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useEffect, useState, useMemo, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Typography } from '@douyinfe/semi-ui';
 import { getFooterHTML, getLogo, getSystemName } from '../../helpers';
 import { StatusContext } from '../../context/Status';
 
@@ -32,10 +31,7 @@ const FooterBar = () => {
   const isDemoSiteMode = statusState?.status?.demo_site_enabled || false;
 
   const loadFooter = () => {
-    let footer_html = localStorage.getItem('footer_html');
-    if (footer_html) {
-      setFooter(footer_html);
-    }
+    setFooter(getFooterHTML());
   };
 
   const currentYear = new Date().getFullYear();
@@ -52,13 +48,13 @@ const FooterBar = () => {
               <img
                 src={logo}
                 alt={systemName}
-                className='w-16 h-16 rounded-full bg-gray-800 p-1.5 object-contain'
+                className='w-16 h-16 rounded-full bg-foreground p-1.5 object-contain'
               />
             </div>
 
             <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-8 w-full'>
               <div className='text-left'>
-                <p className='!text-semi-color-text-0 font-semibold mb-5'>
+                <p className='mb-5 font-semibold text-foreground'>
                   {t('关于我们')}
                 </p>
                 <div className='flex flex-col gap-4'>
@@ -66,7 +62,7 @@ const FooterBar = () => {
                     href='https://docs.newapi.pro/wiki/project-introduction/'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     {t('关于项目')}
                   </a>
@@ -74,7 +70,7 @@ const FooterBar = () => {
                     href='https://docs.newapi.pro/support/community-interaction/'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     {t('联系我们')}
                   </a>
@@ -82,7 +78,7 @@ const FooterBar = () => {
                     href='https://docs.newapi.pro/wiki/features-introduction/'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     {t('功能特性')}
                   </a>
@@ -90,7 +86,7 @@ const FooterBar = () => {
               </div>
 
               <div className='text-left'>
-                <p className='!text-semi-color-text-0 font-semibold mb-5'>
+                <p className='mb-5 font-semibold text-foreground'>
                   {t('文档')}
                 </p>
                 <div className='flex flex-col gap-4'>
@@ -98,7 +94,7 @@ const FooterBar = () => {
                     href='https://docs.newapi.pro/getting-started/'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     {t('快速开始')}
                   </a>
@@ -106,7 +102,7 @@ const FooterBar = () => {
                     href='https://docs.newapi.pro/installation/'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     {t('安装指南')}
                   </a>
@@ -114,7 +110,7 @@ const FooterBar = () => {
                     href='https://docs.newapi.pro/api/'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     {t('API 文档')}
                   </a>
@@ -122,7 +118,7 @@ const FooterBar = () => {
               </div>
 
               <div className='text-left'>
-                <p className='!text-semi-color-text-0 font-semibold mb-5'>
+                <p className='mb-5 font-semibold text-foreground'>
                   {t('相关项目')}
                 </p>
                 <div className='flex flex-col gap-4'>
@@ -130,7 +126,7 @@ const FooterBar = () => {
                     href='https://github.com/songquanpeng/one-api'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     One API
                   </a>
@@ -138,7 +134,7 @@ const FooterBar = () => {
                     href='https://github.com/novicezk/midjourney-proxy'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     Midjourney-Proxy
                   </a>
@@ -146,7 +142,7 @@ const FooterBar = () => {
                     href='https://github.com/Calcium-Ion/neko-api-key-tool'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     neko-api-key-tool
                   </a>
@@ -154,7 +150,7 @@ const FooterBar = () => {
               </div>
 
               <div className='text-left'>
-                <p className='!text-semi-color-text-0 font-semibold mb-5'>
+                <p className='mb-5 font-semibold text-foreground'>
                   {t('友情链接')}
                 </p>
                 <div className='flex flex-col gap-4'>
@@ -162,7 +158,7 @@ const FooterBar = () => {
                     href='https://github.com/Calcium-Ion/new-api-horizon'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     new-api-horizon
                   </a>
@@ -170,7 +166,7 @@ const FooterBar = () => {
                     href='https://github.com/coaidev/coai'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     CoAI
                   </a>
@@ -178,7 +174,7 @@ const FooterBar = () => {
                     href='https://www.gpt-load.com/'
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='!text-semi-color-text-1'
+                    className='text-muted hover:text-primary'
                   >
                     GPT-Load
                   </a>
@@ -190,20 +186,20 @@ const FooterBar = () => {
 
         <div className='flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-6'>
           <div className='flex flex-wrap items-center gap-2'>
-            <Typography.Text className='text-sm !text-semi-color-text-1'>
+            <span className='text-sm text-muted'>
               © {currentYear} {systemName}. {t('版权所有')}
-            </Typography.Text>
+            </span>
           </div>
 
           <div className='text-sm'>
-            <span className='!text-semi-color-text-1'>
+            <span className='text-muted'>
               {t('设计与开发由')}{' '}
             </span>
             <a
               href='https://github.com/QuantumNous/new-api'
               target='_blank'
               rel='noopener noreferrer'
-              className='!text-semi-color-primary font-medium'
+              className='font-medium text-primary'
             >
               New API
             </a>
@@ -218,24 +214,33 @@ const FooterBar = () => {
     loadFooter();
   }, []);
 
+  useEffect(() => {
+    const nextFooter = statusState?.status?.footer_html;
+    if (nextFooter) {
+      setFooter(nextFooter);
+      return;
+    }
+    setFooter(getFooterHTML());
+  }, [statusState?.status?.footer_html]);
+
   return (
     <div className='w-full'>
       {footer ? (
         <footer className='relative h-auto py-4 px-6 md:px-24 w-full flex items-center justify-center overflow-hidden'>
           <div className='flex flex-col md:flex-row items-center justify-between w-full max-w-[1110px] gap-4'>
             <div
-              className='custom-footer na-cb6feafeb3990c78 text-sm !text-semi-color-text-1'
+              className='custom-footer na-cb6feafeb3990c78 text-sm text-muted'
               dangerouslySetInnerHTML={{ __html: footer }}
             ></div>
             <div className='text-sm flex-shrink-0'>
-              <span className='!text-semi-color-text-1'>
+              <span className='text-muted'>
                 {t('设计与开发由')}{' '}
               </span>
               <a
                 href='https://github.com/QuantumNous/new-api'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='!text-semi-color-primary font-medium'
+                className='font-medium text-primary'
               >
                 New API
               </a>
diff --git a/web/src/components/layout/NoticeModal.jsx b/web/src/components/layout/NoticeModal.jsx
index c8197a58ba7..379a0a0c960 100644
--- a/web/src/components/layout/NoticeModal.jsx
+++ b/web/src/components/layout/NoticeModal.jsx
@@ -21,20 +21,22 @@ import React, { useEffect, useState, useContext, useMemo } from 'react';
 import {
   Button,
   Modal,
-  Empty,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  Tab,
   Tabs,
-  TabPane,
-  Timeline,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
 import { useTranslation } from 'react-i18next';
 import { API, showError, getRelativeTime } from '../../helpers';
 import { marked } from 'marked';
-import {
-  IllustrationNoContent,
-  IllustrationNoContentDark,
-} from '@douyinfe/semi-illustrations';
 import { StatusContext } from '../../context/Status';
-import { Bell, Megaphone } from 'lucide-react';
+import { Bell, Megaphone, Inbox } from 'lucide-react';
 
 const NoticeModal = ({
   visible,
@@ -49,6 +51,12 @@ const NoticeModal = ({
   const [activeTab, setActiveTab] = useState(defaultTab);
 
   const [statusState] = useContext(StatusContext);
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onClose();
+    },
+  });
 
   const announcements = statusState?.status?.announcements || [];
 
@@ -119,25 +127,16 @@ const NoticeModal = ({
   const renderMarkdownNotice = () => {
     if (loading) {
       return (
-        <div className='py-12'>
-          <Empty description={t('加载中...')} />
+        <div className='flex flex-col items-center justify-center gap-3 py-12 text-muted'>
+          <Spinner color='primary' />
+          <span className='text-sm'>{t('加载中...')}</span>
         </div>
       );
     }
 
     if (!noticeContent) {
       return (
-        <div className='py-12'>
-          <Empty
-            image={
-              <IllustrationNoContent style={{ width: 150, height: 150 }} />
-            }
-            darkModeImage={
-              <IllustrationNoContentDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('暂无公告')}
-          />
-        </div>
+        <EmptyState description={t('暂无公告')} />
       );
     }
 
@@ -152,51 +151,17 @@ const NoticeModal = ({
   const renderAnnouncementTimeline = () => {
     if (processedAnnouncements.length === 0) {
       return (
-        <div className='py-12'>
-          <Empty
-            image={
-              <IllustrationNoContent style={{ width: 150, height: 150 }} />
-            }
-            darkModeImage={
-              <IllustrationNoContentDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('暂无系统公告')}
-          />
-        </div>
+        <EmptyState description={t('暂无系统公告')} />
       );
     }
 
     return (
-      <div className='max-h-[55vh] overflow-y-auto pr-2 card-content-scroll'>
-        <Timeline mode='left'>
-          {processedAnnouncements.map((item, idx) => {
-            const htmlContent = marked.parse(item.content || '');
-            const htmlExtra = item.extra ? marked.parse(item.extra) : '';
-            return (
-              <Timeline.Item
-                key={idx}
-                type={item.type}
-                time={`${item.relative ? item.relative + ' ' : ''}${item.time}`}
-                extra={
-                  item.extra ? (
-                    <div
-                      className='text-xs text-gray-500'
-                      dangerouslySetInnerHTML={{ __html: htmlExtra }}
-                    />
-                  ) : null
-                }
-                className={item.isUnread ? '' : ''}
-              >
-                <div>
-                  <div
-                    className={item.isUnread ? 'shine-text' : ''}
-                    dangerouslySetInnerHTML={{ __html: htmlContent }}
-                  />
-                </div>
-              </Timeline.Item>
-            );
-          })}
-        </Timeline>
+      <div className='card-content-scroll max-h-[55vh] overflow-y-auto pr-2'>
+        <div className='space-y-5 border-l border-border pl-5'>
+          {processedAnnouncements.map((item, idx) => (
+            <AnnouncementItem key={idx} item={item} />
+          ))}
+        </div>
       </div>
     );
   };
@@ -209,47 +174,104 @@ const NoticeModal = ({
   };
 
   return (
-    <Modal
-      title={
-        <div className='flex items-center justify-between w-full'>
-          <span>{t('系统公告')}</span>
-          <Tabs activeKey={activeTab} onChange={setActiveTab} type='button'>
-            <TabPane
-              tab={
-                <span className='flex items-center gap-1'>
-                  <Bell size={14} /> {t('通知')}
-                </span>
-              }
-              itemKey='inApp'
-            />
-            <TabPane
-              tab={
-                <span className='flex items-center gap-1'>
-                  <Megaphone size={14} /> {t('系统公告')}
-                </span>
-              }
-              itemKey='system'
-            />
-          </Tabs>
-        </div>
-      }
-      visible={visible}
-      onCancel={onClose}
-      footer={
-        <div className='flex justify-end'>
-          <Button type='secondary' onClick={handleCloseTodayNotice}>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur' isDismissable>
+        <ModalContainer
+          size={isMobile ? 'full' : 'lg'}
+          scroll='inside'
+          placement='center'
+        >
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+          <div className='flex w-full flex-col gap-3 md:flex-row md:items-center md:justify-between'>
+            <span>{t('系统公告')}</span>
+            <Tabs
+              size='sm'
+              radius='full'
+              variant='bordered'
+              selectedKey={activeTab}
+              onSelectionChange={(key) => setActiveTab(String(key))}
+            >
+              <Tab
+                key='inApp'
+                title={
+                  <span className='flex items-center gap-1'>
+                    <Bell size={14} /> {t('通知')}
+                  </span>
+                }
+              />
+              <Tab
+                key='system'
+                title={
+                  <span className='flex items-center gap-1'>
+                    <Megaphone size={14} /> {t('系统公告')}
+                  </span>
+                }
+              />
+            </Tabs>
+          </div>
+            </ModalHeader>
+            <ModalBody>{renderBody()}</ModalBody>
+            <ModalFooter className='border-t border-border'>
+          <Button variant='flat' onPress={handleCloseTodayNotice}>
             {t('今日关闭')}
           </Button>
-          <Button type='primary' onClick={onClose}>
+          <Button color='primary' onPress={onClose}>
             {t('关闭公告')}
           </Button>
-        </div>
-      }
-      size={isMobile ? 'full-width' : 'large'}
-    >
-      {renderBody()}
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
 
+const EmptyState = ({ description }) => (
+  <div className='flex flex-col items-center justify-center gap-3 py-12 text-muted'>
+    <div className='flex h-16 w-16 items-center justify-center rounded-3xl bg-surface-secondary text-muted'>
+      <Inbox size={30} />
+    </div>
+    <span className='text-sm'>{description}</span>
+  </div>
+);
+
+const typeColorClass = {
+  warning: 'bg-warning',
+  danger: 'bg-danger',
+  success: 'bg-success',
+  primary: 'bg-primary',
+  default: 'bg-muted',
+};
+
+const AnnouncementItem = ({ item }) => {
+  const htmlContent = marked.parse(item.content || '');
+  const htmlExtra = item.extra ? marked.parse(item.extra) : '';
+
+  return (
+    <article className='relative'>
+      <span
+        className={`absolute -left-[27px] top-1.5 h-3 w-3 rounded-full ring-4 ring-background ${
+          typeColorClass[item.type] || typeColorClass.default
+        }`}
+      />
+      <div className='space-y-2 rounded-2xl border border-border bg-background/70 p-4 shadow-sm'>
+        <div className='text-xs font-medium text-muted'>
+          {`${item.relative ? item.relative + ' ' : ''}${item.time}`}
+        </div>
+        <div
+          className={item.isUnread ? 'shine-text' : ''}
+          dangerouslySetInnerHTML={{ __html: htmlContent }}
+        />
+        {item.extra && (
+          <div
+            className='text-xs text-muted'
+            dangerouslySetInnerHTML={{ __html: htmlExtra }}
+          />
+        )}
+      </div>
+    </article>
+  );
+};
+
 export default NoticeModal;
diff --git a/web/src/components/layout/PageLayout.jsx b/web/src/components/layout/PageLayout.jsx
index ca38ed506e6..a08ad125e37 100644
--- a/web/src/components/layout/PageLayout.jsx
+++ b/web/src/components/layout/PageLayout.jsx
@@ -18,15 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import HeaderBar from './headerbar';
-import { Layout } from '@douyinfe/semi-ui';
 import SiderBar from './SiderBar';
 import App from '../../App';
 import FooterBar from './Footer';
-import { ToastContainer } from 'react-toastify';
+import ToastViewport from '../ui/ToastViewport';
 import ErrorBoundary from '../common/ErrorBoundary';
-import React, { useContext, useEffect, useState } from 'react';
-import { useIsMobile } from '../../hooks/common/useIsMobile';
-import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
+import React, { useCallback, useContext, useEffect } from 'react';
+import { Sidebar, useSidebar } from '@heroui-pro/react';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
   API,
@@ -37,18 +36,52 @@ import {
 } from '../../helpers';
 import { UserContext } from '../../context/User';
 import { StatusContext } from '../../context/Status';
-import { useLocation } from 'react-router-dom';
 import { normalizeLanguage } from '../../i18n/language';
-const { Sider, Content, Header } = Layout;
+
+// Bridges the existing localStorage-backed sidebar collapsed flag with
+// `Sidebar.Provider`'s open/onOpenChange API. Reading the cookie or
+// localStorage at module load gives the initial value with no flash.
+const SIDEBAR_COLLAPSED_KEY = 'default_collapse_sidebar';
+const readSidebarDefaultOpen = () => {
+  try {
+    return localStorage.getItem(SIDEBAR_COLLAPSED_KEY) !== 'true';
+  } catch {
+    return true;
+  }
+};
+
+const getFallbackStatus = () => {
+  try {
+    const cachedStatus = localStorage.getItem('status');
+    if (cachedStatus) {
+      return JSON.parse(cachedStatus);
+    }
+  } catch (error) {
+    console.warn('Failed to parse cached status', error);
+  }
+
+  return {
+    system_name: getSystemName(),
+    logo: getLogo(),
+    footer_html: localStorage.getItem('footer_html') || '',
+    HeaderNavModules: '',
+    announcements: [],
+    docs_link: localStorage.getItem('docs_link') || '',
+    self_use_mode_enabled: false,
+    demo_site_enabled: false,
+    api_info_enabled: true,
+    announcements_enabled: true,
+    faq_enabled: true,
+    uptime_kuma_enabled: true,
+  };
+};
 
 const PageLayout = () => {
   const [userState, userDispatch] = useContext(UserContext);
   const [, statusDispatch] = useContext(StatusContext);
-  const isMobile = useIsMobile();
-  const [collapsed, , setCollapsed] = useSidebarCollapsed();
-  const [drawerOpen, setDrawerOpen] = useState(false);
   const { i18n } = useTranslation();
   const location = useLocation();
+  const navigate = useNavigate();
 
   const cardProPages = [
     '/console/channel',
@@ -62,21 +95,24 @@ const PageLayout = () => {
     '/pricing',
   ];
 
-  const shouldHideFooter = cardProPages.includes(location.pathname);
+  const isConsoleRoute = location.pathname.startsWith('/console');
+  const shouldHideFooter =
+    isConsoleRoute || cardProPages.includes(location.pathname);
 
   const shouldInnerPadding =
     location.pathname.includes('/console') &&
     !location.pathname.startsWith('/console/chat') &&
     location.pathname !== '/console/playground';
 
-  const isConsoleRoute = location.pathname.startsWith('/console');
-  const showSider = isConsoleRoute && (!isMobile || drawerOpen);
-
-  useEffect(() => {
-    if (isMobile && drawerOpen && collapsed) {
-      setCollapsed(false);
+  // Persist sidebar open state back to localStorage so refresh / cross-tab
+  // matches the previous behavior of `useSidebarCollapsed`.
+  const handleSidebarOpenChange = useCallback((open) => {
+    try {
+      localStorage.setItem(SIDEBAR_COLLAPSED_KEY, (!open).toString());
+    } catch {
+      // Ignore quota / privacy errors — Sidebar.Provider keeps state in memory.
     }
-  }, [isMobile, drawerOpen, collapsed, setCollapsed]);
+  }, []);
 
   const loadUser = () => {
     let user = localStorage.getItem('user');
@@ -88,16 +124,18 @@ const PageLayout = () => {
 
   const loadStatus = async () => {
     try {
-      const res = await API.get('/api/status');
+      const res = await API.get('/api/status', { skipErrorHandler: true });
       const { success, data } = res.data;
       if (success) {
         statusDispatch({ type: 'set', payload: data });
         setStatusData(data);
       } else {
+        statusDispatch({ type: 'set', payload: getFallbackStatus() });
         showError('Unable to connect to server');
       }
     } catch (error) {
-      showError('Failed to load status');
+      console.error('Failed to load status', error);
+      statusDispatch({ type: 'set', payload: getFallbackStatus() });
     }
   };
 
@@ -144,98 +182,66 @@ const PageLayout = () => {
     }
   }, [i18n, userState?.user?.setting]);
 
+  // Hoist Sidebar.Provider to the root so HeaderBar (mobile menu toggle) and
+  // SiderBar both have access to `useSidebar()`. The provider's default flex
+  // layout is overridden to flex-col via className so our fixed header can
+  // sit on top of the sidebar+main row.
   return (
-    <Layout
-      className='app-layout'
-      style={{
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: isMobile ? 'visible' : 'hidden',
-      }}
+    <Sidebar.Provider
+      defaultOpen={readSidebarDefaultOpen()}
+      onOpenChange={handleSidebarOpenChange}
+      navigate={navigate}
+      collapsible='icon'
+      // Constrain to viewport height + clip overflow so the *main* element
+      // becomes the scroll container instead of the document body. Without
+      // this, tall console pages caused the whole page (sidebar included)
+      // to scroll, which broke the sticky-sidebar UX.
+      className='app-layout flex !flex-col h-dvh overflow-hidden'
     >
-      <Header
-        style={{
-          padding: 0,
-          height: 'auto',
-          lineHeight: 'normal',
-          position: 'fixed',
-          width: '100%',
-          top: 0,
-          zIndex: 100,
-        }}
-      >
-        <HeaderBar
-          onMobileMenuToggle={() => setDrawerOpen((prev) => !prev)}
-          drawerOpen={drawerOpen}
-        />
-      </Header>
-      <Layout
-        style={{
-          overflow: isMobile ? 'visible' : 'auto',
-          display: 'flex',
-          flexDirection: 'column',
-        }}
-      >
-        {showSider && (
-          <Sider
-            className='app-sider'
-            style={{
-              position: 'fixed',
-              left: 0,
-              top: '64px',
-              zIndex: 99,
-              border: 'none',
-              paddingRight: '0',
-              width: 'var(--sidebar-current-width)',
-            }}
-          >
-            <SiderBar
-              onNavigate={() => {
-                if (isMobile) setDrawerOpen(false);
-              }}
-            />
-          </Sider>
-        )}
-        <Layout
+      <header className='shrink-0 z-50 w-full'>
+        <HeaderBar />
+      </header>
+
+      <div className='flex flex-1 min-h-0 w-full'>
+        {isConsoleRoute && <SiderBar />}
+
+        <main
+          className='flex-1 min-w-0 relative overflow-y-auto'
           style={{
-            marginLeft: isMobile
-              ? '0'
-              : showSider
-                ? 'var(--sidebar-current-width)'
-                : '0',
-            flex: '1 1 auto',
-            display: 'flex',
-            flexDirection: 'column',
+            padding: shouldInnerPadding ? '24px' : 0,
+            WebkitOverflowScrolling: 'touch',
           }}
         >
-          <Content
-            style={{
-              flex: '1 0 auto',
-              overflowY: isMobile ? 'visible' : 'hidden',
-              WebkitOverflowScrolling: 'touch',
-              padding: shouldInnerPadding ? (isMobile ? '5px' : '24px') : '0',
-              position: 'relative',
-            }}
-          >
-            <ErrorBoundary>
-              <App />
-            </ErrorBoundary>
-          </Content>
+          {isConsoleRoute ? <ConsolePageTrigger /> : null}
+          <ErrorBoundary key={location.pathname}>
+            <App />
+          </ErrorBoundary>
           {!shouldHideFooter && (
-            <Layout.Footer
-              style={{
-                flex: '0 0 auto',
-                width: '100%',
-              }}
-            >
+            <footer className='w-full'>
               <FooterBar />
-            </Layout.Footer>
+            </footer>
           )}
-        </Layout>
-      </Layout>
-      <ToastContainer />
-    </Layout>
+        </main>
+      </div>
+
+      <ToastViewport />
+    </Sidebar.Provider>
   );
 };
 
+// Renders <Sidebar.Trigger /> at the top-left of every console page's
+// content area — but only while the sidebar is expanded. Once the sidebar
+// collapses, the trigger moves *into* the sidebar's top (rendered by
+// CollapsedHeaderTrigger inside SiderBar.jsx) so it's anchored to whichever
+// side of the page is most useful in each state.
+function ConsolePageTrigger() {
+  const { isOpen } = useSidebar();
+  if (!isOpen) return null;
+  return (
+    <div className='mb-3 flex items-center'>
+      <Sidebar.Trigger />
+    </div>
+  );
+}
+
 export default PageLayout;
diff --git a/web/src/components/layout/SiderBar.jsx b/web/src/components/layout/SiderBar.jsx
index bcbe41237a6..aa13d3b6bc8 100644
--- a/web/src/components/layout/SiderBar.jsx
+++ b/web/src/components/layout/SiderBar.jsx
@@ -17,19 +17,18 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useMemo, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { Avatar } from '@heroui/react';
+import { Sidebar, useSidebar as useSidebarUI } from '@heroui-pro/react';
 import { getLucideIcon } from '../../helpers/render';
-import { ChevronLeft } from 'lucide-react';
-import { useSidebarCollapsed } from '../../hooks/common/useSidebarCollapsed';
+import { isAdmin, isRoot, showError, stringToColor } from '../../helpers';
 import { useSidebar } from '../../hooks/common/useSidebar';
-import { useMinimumLoadingTime } from '../../hooks/common/useMinimumLoadingTime';
-import { isAdmin, isRoot, showError } from '../../helpers';
-import SkeletonWrapper from './components/SkeletonWrapper';
-
-import { Nav, Divider, Button } from '@douyinfe/semi-ui';
+import { UserContext } from '../../context/User';
 
+// Maps an item key to its concrete route. Mirrors the router definitions in
+// `src/App.jsx`. Chat sub-items are appended dynamically below.
 const routerMap = {
   home: '/',
   channel: '/console/channel',
@@ -51,20 +50,197 @@ const routerMap = {
   personal: '/console/personal',
 };
 
-const SiderBar = ({ onNavigate = () => {} }) => {
-  const { t } = useTranslation();
-  const [collapsed, toggleCollapsed] = useSidebarCollapsed();
-  const {
-    isModuleVisible,
-    hasSectionVisibleModules,
-    loading: sidebarLoading,
-  } = useSidebar();
+// Wraps the menu items in both the desktop Sidebar and the mobile sheet.
+// Centralized here so both code paths stay structurally identical and only
+// differ in their wrapper component.
+const SidebarBody = ({
+  workspaceItems,
+  financeItems,
+  adminItems,
+  chatMenuItems,
+  hasSectionVisibleModules,
+  routerMapState,
+  selectedKeys,
+  expandedChatKeys,
+  setExpandedChatKeys,
+  userMenuFooter,
+  t,
+}) => {
+  const renderMenuItem = (item) => {
+    if (item.className === 'tableHiddle') return null;
+    const path = routerMapState[item.itemKey] || routerMap[item.itemKey] || item.to;
+    // Skip items with no resolvable route — see renderChatMenuItem comment
+    // for why a hrefless Sidebar.MenuItem breaks the menu layout.
+    if (!path) return null;
+    const isCurrent = selectedKeys.includes(item.itemKey);
 
-  const showSkeleton = useMinimumLoadingTime(sidebarLoading, 200);
+    return (
+      <Sidebar.MenuItem
+        key={item.itemKey}
+        id={item.itemKey}
+        href={path}
+        isCurrent={isCurrent}
+        textValue={item.text}
+      >
+        <Sidebar.MenuIcon>{getLucideIcon(item.itemKey, isCurrent)}</Sidebar.MenuIcon>
+        <Sidebar.MenuLabel>{item.text}</Sidebar.MenuLabel>
+      </Sidebar.MenuItem>
+    );
+  };
+
+  // Chat parent item with optional sub-list of saved chats.
+  //
+  // Two non-obvious constraints from heroui-pro <Sidebar.MenuItem>:
+  //   - Every MenuItem must be pressable (href OR onPress). A MenuItem
+  //     without either fires `PressResponder was rendered without a
+  //     pressable child` from react-aria and breaks subsequent siblings'
+  //     layout in the menu.
+  //   - The chat parent has no inherent route (no entry in routerMap, no
+  //     `to` field), so when there are no saved chats we just skip it
+  //     instead of emitting a hrefless item.
+  const renderChatMenuItem = (item) => {
+    if (item.className === 'tableHiddle') return null;
+    const isCurrent = selectedKeys.includes(item.itemKey);
+    const hasChildren = Array.isArray(item.items) && item.items.length > 0;
+
+    if (!hasChildren) {
+      // No saved chats yet — don't render an empty placeholder.
+      return null;
+    }
+
+    // Point the parent at the first saved chat so the MenuItem stays
+    // pressable; the MenuTrigger inside takes care of expanding the
+    // submenu without losing this fallback navigation.
+    const fallbackHref =
+      routerMapState[item.items[0].itemKey] || item.items[0].to;
+
+    return (
+      <Sidebar.MenuItem
+        key={item.itemKey}
+        id={item.itemKey}
+        href={fallbackHref || undefined}
+        isCurrent={isCurrent}
+        textValue={item.text}
+      >
+        <Sidebar.MenuIcon>
+          {getLucideIcon(item.itemKey, isCurrent)}
+        </Sidebar.MenuIcon>
+        <Sidebar.MenuLabel>{item.text}</Sidebar.MenuLabel>
+        <Sidebar.MenuTrigger>
+          <Sidebar.MenuIndicator />
+        </Sidebar.MenuTrigger>
+        <Sidebar.Submenu>
+          {item.items.map((subItem) => {
+            const subPath =
+              routerMapState[subItem.itemKey] || subItem.to;
+            const subIsCurrent = selectedKeys.includes(subItem.itemKey);
+            // Skip sub-items missing a route to avoid the same
+            // PressResponder error documented above.
+            if (!subPath) return null;
+            return (
+              <Sidebar.MenuItem
+                key={subItem.itemKey}
+                id={subItem.itemKey}
+                href={subPath}
+                isCurrent={subIsCurrent}
+                textValue={subItem.text}
+              >
+                <Sidebar.MenuLabel>{subItem.text}</Sidebar.MenuLabel>
+              </Sidebar.MenuItem>
+            );
+          })}
+        </Sidebar.Submenu>
+      </Sidebar.MenuItem>
+    );
+  };
+
+  const visibleSections = [
+    {
+      key: 'chat',
+      label: t('聊天'),
+      visible: hasSectionVisibleModules('chat'),
+      items: chatMenuItems,
+      renderer: renderChatMenuItem,
+    },
+    {
+      key: 'console',
+      label: t('控制台'),
+      visible: hasSectionVisibleModules('console'),
+      items: workspaceItems,
+      renderer: renderMenuItem,
+    },
+    {
+      key: 'personal',
+      label: t('个人中心'),
+      visible: hasSectionVisibleModules('personal'),
+      items: financeItems,
+      renderer: renderMenuItem,
+    },
+    {
+      key: 'admin',
+      label: t('管理员'),
+      visible: isAdmin() && hasSectionVisibleModules('admin'),
+      items: adminItems,
+      renderer: renderMenuItem,
+    },
+  ].filter((section) => section.visible && section.items.length > 0);
+
+  // Per product spec we deviate from template-dashboard in two ways:
+  //   1. The collapse trigger lives in the top navbar (rendered by HeaderBar
+  //      via <Sidebar.Trigger />), not inside the sidebar itself.
+  //   2. The user avatar / role block sits at the BOTTOM of the sidebar
+  //      (Sidebar.Footer), not at the top.
+  //
+  return (
+    <>
+      <CollapsedHeaderTrigger />
+      <Sidebar.Content>
+        {visibleSections.map((section) => (
+          <Sidebar.Group key={section.key}>
+            <Sidebar.GroupLabel>{section.label}</Sidebar.GroupLabel>
+            <Sidebar.Menu
+              aria-label={section.label}
+              expandedKeys={
+                section.key === 'chat' ? expandedChatKeys : undefined
+              }
+              onExpandedChange={
+                section.key === 'chat' ? setExpandedChatKeys : undefined
+              }
+            >
+              {section.items.map(section.renderer)}
+            </Sidebar.Menu>
+          </Sidebar.Group>
+        ))}
+      </Sidebar.Content>
+      <Sidebar.Footer>{userMenuFooter}</Sidebar.Footer>
+    </>
+  );
+};
+
+// Renders <Sidebar.Trigger /> at the top of the sidebar (inside
+// Sidebar.Header) ONLY while the sidebar is collapsed. When expanded, the
+// trigger lives outside the sidebar — see ConsolePageTrigger in PageLayout.
+// Extra `pt-6` for visual breathing room from the sidebar's top edge.
+function CollapsedHeaderTrigger() {
+  // useSidebarUI = heroui-pro's hook (renamed to avoid colliding with our
+  // own ../../hooks/common/useSidebar which manages module visibility).
+  const { isOpen } = useSidebarUI();
+  if (isOpen) return null;
+  return (
+    <Sidebar.Header className='pt-6 pb-3'>
+      <Sidebar.Trigger />
+    </Sidebar.Header>
+  );
+}
+
+const SiderBar = () => {
+  const { t } = useTranslation();
+  const [userState] = useContext(UserContext);
+  const { isModuleVisible, hasSectionVisibleModules } = useSidebar();
 
   const [selectedKeys, setSelectedKeys] = useState(['home']);
   const [chatItems, setChatItems] = useState([]);
-  const [openedKeys, setOpenedKeys] = useState([]);
+  const [expandedChatKeys, setExpandedChatKeys] = useState(new Set());
   const location = useLocation();
   const [routerMapState, setRouterMapState] = useState(routerMap);
 
@@ -73,7 +249,7 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       {
         text: t('数据看板'),
         itemKey: 'detail',
-        to: '/detail',
+        to: '/console',
         className:
           localStorage.getItem('enable_data_export') === 'true'
             ? ''
@@ -82,17 +258,17 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       {
         text: t('令牌管理'),
         itemKey: 'token',
-        to: '/token',
+        to: '/console/token',
       },
       {
         text: t('使用日志'),
         itemKey: 'log',
-        to: '/log',
+        to: '/console/log',
       },
       {
         text: t('绘图日志'),
         itemKey: 'midjourney',
-        to: '/midjourney',
+        to: '/console/midjourney',
         className:
           localStorage.getItem('enable_drawing') === 'true'
             ? ''
@@ -101,19 +277,14 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       {
         text: t('任务日志'),
         itemKey: 'task',
-        to: '/task',
+        to: '/console/task',
         className:
           localStorage.getItem('enable_task') === 'true' ? '' : 'tableHiddle',
       },
     ];
 
-    // 根据配置过滤项目
-    const filteredItems = items.filter((item) => {
-      const configVisible = isModuleVisible('console', item.itemKey);
-      return configVisible;
-    });
-
-    return filteredItems;
+    return items.filter((item) => isModuleVisible('console', item.itemKey));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     localStorage.getItem('enable_data_export'),
     localStorage.getItem('enable_drawing'),
@@ -127,22 +298,16 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       {
         text: t('钱包管理'),
         itemKey: 'topup',
-        to: '/topup',
+        to: '/console/topup',
       },
       {
         text: t('个人设置'),
         itemKey: 'personal',
-        to: '/personal',
+        to: '/console/personal',
       },
     ];
 
-    // 根据配置过滤项目
-    const filteredItems = items.filter((item) => {
-      const configVisible = isModuleVisible('personal', item.itemKey);
-      return configVisible;
-    });
-
-    return filteredItems;
+    return items.filter((item) => isModuleVisible('personal', item.itemKey));
   }, [t, isModuleVisible]);
 
   const adminItems = useMemo(() => {
@@ -150,13 +315,13 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       {
         text: t('渠道管理'),
         itemKey: 'channel',
-        to: '/channel',
+        to: '/console/channel',
         className: isAdmin() ? '' : 'tableHiddle',
       },
       {
         text: t('订阅管理'),
         itemKey: 'subscription',
-        to: '/subscription',
+        to: '/console/subscription',
         className: isAdmin() ? '' : 'tableHiddle',
       },
       {
@@ -168,36 +333,31 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       {
         text: t('模型部署'),
         itemKey: 'deployment',
-        to: '/deployment',
+        to: '/console/deployment',
         className: isAdmin() ? '' : 'tableHiddle',
       },
       {
         text: t('兑换码管理'),
         itemKey: 'redemption',
-        to: '/redemption',
+        to: '/console/redemption',
         className: isAdmin() ? '' : 'tableHiddle',
       },
       {
         text: t('用户管理'),
         itemKey: 'user',
-        to: '/user',
+        to: '/console/user',
         className: isAdmin() ? '' : 'tableHiddle',
       },
       {
         text: t('系统设置'),
         itemKey: 'setting',
-        to: '/setting',
+        to: '/console/setting',
         className: isRoot() ? '' : 'tableHiddle',
       },
     ];
 
-    // 根据配置过滤项目
-    const filteredItems = items.filter((item) => {
-      const configVisible = isModuleVisible('admin', item.itemKey);
-      return configVisible;
-    });
-
-    return filteredItems;
+    return items.filter((item) => isModuleVisible('admin', item.itemKey));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isAdmin(), isRoot(), t, isModuleVisible]);
 
   const chatMenuItems = useMemo(() => {
@@ -205,7 +365,7 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       {
         text: t('操练场'),
         itemKey: 'playground',
-        to: '/playground',
+        to: '/console/playground',
       },
       {
         text: t('聊天'),
@@ -214,16 +374,10 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       },
     ];
 
-    // 根据配置过滤项目
-    const filteredItems = items.filter((item) => {
-      const configVisible = isModuleVisible('chat', item.itemKey);
-      return configVisible;
-    });
-
-    return filteredItems;
+    return items.filter((item) => isModuleVisible('chat', item.itemKey));
   }, [chatItems, t, isModuleVisible]);
 
-  // 更新路由映射，添加聊天路由
+  // Add chat sub-routes to the router map so selection logic can match them.
   const updateRouterMapWithChats = (chats) => {
     const newRouterMap = { ...routerMap };
 
@@ -237,20 +391,19 @@ const SiderBar = ({ onNavigate = () => {} }) => {
     return newRouterMap;
   };
 
-  // 加载聊天项
   useEffect(() => {
     let chats = localStorage.getItem('chats');
     if (chats) {
       try {
         chats = JSON.parse(chats);
         if (Array.isArray(chats)) {
-          let chatItems = [];
+          let parsed = [];
           for (let i = 0; i < chats.length; i++) {
             let shouldSkip = false;
             let chat = {};
             for (let key in chats[i]) {
               let link = chats[i][key];
-              if (typeof link !== 'string') continue; // 确保链接是字符串
+              if (typeof link !== 'string') continue;
               if (link.startsWith('fluent') || link.startsWith('ccswitch')) {
                 shouldSkip = true;
                 break;
@@ -259,10 +412,10 @@ const SiderBar = ({ onNavigate = () => {} }) => {
               chat.itemKey = 'chat' + i;
               chat.to = '/console/chat/' + i;
             }
-            if (shouldSkip || !chat.text) continue; // 避免推入空项
-            chatItems.push(chat);
+            if (shouldSkip || !chat.text) continue;
+            parsed.push(chat);
           }
-          setChatItems(chatItems);
+          setChatItems(parsed);
           updateRouterMapWithChats(chats);
         }
       } catch (e) {
@@ -271,14 +424,13 @@ const SiderBar = ({ onNavigate = () => {} }) => {
     }
   }, []);
 
-  // 根据当前路径设置选中的菜单项
+  // Sync selected key + auto-expand chat group when on a chat sub-route.
   useEffect(() => {
     const currentPath = location.pathname;
     let matchingKey = Object.keys(routerMapState).find(
       (key) => routerMapState[key] === currentPath,
     );
 
-    // 处理聊天路由
     if (!matchingKey && currentPath.startsWith('/console/chat/')) {
       const chatIndex = currentPath.split('/').pop();
       if (!isNaN(chatIndex)) {
@@ -288,244 +440,96 @@ const SiderBar = ({ onNavigate = () => {} }) => {
       }
     }
 
-    // 如果找到匹配的键，更新选中的键
     if (matchingKey) {
       setSelectedKeys([matchingKey]);
+      if (matchingKey.startsWith('chat')) {
+        setExpandedChatKeys((prev) => {
+          if (prev.has('chat')) return prev;
+          const next = new Set(prev);
+          next.add('chat');
+          return next;
+        });
+      }
     }
   }, [location.pathname, routerMapState]);
 
-  // 监控折叠状态变化以更新 body class
-  useEffect(() => {
-    if (collapsed) {
-      document.body.classList.add('sidebar-collapsed');
-    } else {
-      document.body.classList.remove('sidebar-collapsed');
-    }
-  }, [collapsed]);
-
-  // 选中高亮颜色（统一）
-  const SELECTED_COLOR = 'var(--semi-color-primary)';
-
-  // 渲染自定义菜单项
-  const renderNavItem = (item) => {
-    // 跳过隐藏的项目
-    if (item.className === 'tableHiddle') return null;
-
-    const isSelected = selectedKeys.includes(item.itemKey);
-    const textColor = isSelected ? SELECTED_COLOR : 'inherit';
+  // Template-style user block: avatar + display name + role rendered as a
+  // single Sidebar.MenuItem inside Sidebar.Footer's Sidebar.Menu. Reusing
+  // Sidebar.MenuItem's slot system is what gets the avatar visible at all
+  // — Sidebar.Footer otherwise refuses to render arbitrary children with
+  // the same alignment/spacing the rest of the sidebar uses.
+  const userMenuFooter = useMemo(() => {
+    if (!userState?.user) return null;
+    const username =
+      userState.user.display_name || userState.user.username || '';
+    const initial = username ? username[0].toUpperCase() : '?';
+    const roleLabel = isRoot()
+      ? t('超级管理员')
+      : isAdmin()
+        ? t('管理员')
+        : t('用户');
+    const avatarBg = stringToColor(username);
 
     return (
-      <Nav.Item
-        key={item.itemKey}
-        itemKey={item.itemKey}
-        text={
-          <span
-            className='truncate font-medium text-sm'
-            style={{ color: textColor }}
-          >
-            {item.text}
-          </span>
-        }
-        icon={
-          <div className='sidebar-icon-container flex-shrink-0'>
-            {getLucideIcon(item.itemKey, isSelected)}
-          </div>
-        }
-        className={item.className}
-      />
-    );
-  };
-
-  // 渲染子菜单项
-  const renderSubItem = (item) => {
-    if (item.items && item.items.length > 0) {
-      const isSelected = selectedKeys.includes(item.itemKey);
-      const textColor = isSelected ? SELECTED_COLOR : 'inherit';
-
-      return (
-        <Nav.Sub
-          key={item.itemKey}
-          itemKey={item.itemKey}
-          text={
-            <span
-              className='truncate font-medium text-sm'
-              style={{ color: textColor }}
-            >
-              {item.text}
-            </span>
-          }
-          icon={
-            <div className='sidebar-icon-container flex-shrink-0'>
-              {getLucideIcon(item.itemKey, isSelected)}
-            </div>
-          }
+      <Sidebar.Menu aria-label={t('账户信息')}>
+        <Sidebar.MenuItem
+          id='__user'
+          href='/console/personal'
+          textValue={username}
         >
-          {item.items.map((subItem) => {
-            const isSubSelected = selectedKeys.includes(subItem.itemKey);
-            const subTextColor = isSubSelected ? SELECTED_COLOR : 'inherit';
+          <Sidebar.MenuIcon>
+            <Avatar
+              size='sm'
+              className='h-6 w-6 shrink-0 text-[10px] text-white'
+              style={{ backgroundColor: avatarBg }}
+              name={initial}
+            />
+          </Sidebar.MenuIcon>
+          <Sidebar.MenuLabel>
+            <span className='flex flex-col leading-tight'>
+              <span className='truncate text-sm font-medium text-foreground'>
+                {username}
+              </span>
+              <span className='truncate text-xs font-medium text-muted'>
+                {roleLabel}
+              </span>
+            </span>
+          </Sidebar.MenuLabel>
+        </Sidebar.MenuItem>
+      </Sidebar.Menu>
+    );
+  }, [userState?.user, t]);
 
-            return (
-              <Nav.Item
-                key={subItem.itemKey}
-                itemKey={subItem.itemKey}
-                text={
-                  <span
-                    className='truncate font-medium text-sm'
-                    style={{ color: subTextColor }}
-                  >
-                    {subItem.text}
-                  </span>
-                }
-              />
-            );
-          })}
-        </Nav.Sub>
-      );
-    } else {
-      return renderNavItem(item);
-    }
+  const sharedBodyProps = {
+    workspaceItems,
+    financeItems,
+    adminItems,
+    chatMenuItems,
+    hasSectionVisibleModules,
+    routerMapState,
+    selectedKeys,
+    expandedChatKeys,
+    setExpandedChatKeys,
+    userMenuFooter,
+    t,
   };
 
+  // The custom skeleton previously wrapped <SidebarBody/> using the old
+  // self-implemented sidebar's dimensions, which broke alignment when nested
+  // inside heroui-pro's <Sidebar> (which expects Sidebar.Header / .Content /
+  // .Footer children with its own internal layout). Render the real Sidebar
+  // structure immediately — visibleSections already gracefully empties while
+  // useSidebar() is still resolving, so the menu just briefly shows nothing
+  // instead of misaligned placeholder bars.
   return (
-    <div
-      className='sidebar-container'
-      style={{
-        width: 'var(--sidebar-current-width)',
-      }}
-    >
-      <SkeletonWrapper
-        loading={showSkeleton}
-        type='sidebar'
-        className=''
-        collapsed={collapsed}
-        showAdmin={isAdmin()}
-      >
-        <Nav
-          className='sidebar-nav'
-          defaultIsCollapsed={collapsed}
-          isCollapsed={collapsed}
-          onCollapseChange={toggleCollapsed}
-          selectedKeys={selectedKeys}
-          itemStyle='sidebar-nav-item'
-          hoverStyle='sidebar-nav-item:hover'
-          selectedStyle='sidebar-nav-item-selected'
-          renderWrapper={({ itemElement, props }) => {
-            const to =
-              routerMapState[props.itemKey] || routerMap[props.itemKey];
-
-            // 如果没有路由，直接返回元素
-            if (!to) return itemElement;
-
-            return (
-              <Link
-                style={{ textDecoration: 'none' }}
-                to={to}
-                onClick={onNavigate}
-              >
-                {itemElement}
-              </Link>
-            );
-          }}
-          onSelect={(key) => {
-            // 如果点击的是已经展开的子菜单的父项，则收起子菜单
-            if (openedKeys.includes(key.itemKey)) {
-              setOpenedKeys(openedKeys.filter((k) => k !== key.itemKey));
-            }
-
-            setSelectedKeys([key.itemKey]);
-          }}
-          openKeys={openedKeys}
-          onOpenChange={(data) => {
-            setOpenedKeys(data.openKeys);
-          }}
-        >
-          {/* 聊天区域 */}
-          {hasSectionVisibleModules('chat') && (
-            <div className='sidebar-section'>
-              {!collapsed && (
-                <div className='sidebar-group-label'>{t('聊天')}</div>
-              )}
-              {chatMenuItems.map((item) => renderSubItem(item))}
-            </div>
-          )}
-
-          {/* 控制台区域 */}
-          {hasSectionVisibleModules('console') && (
-            <>
-              <Divider className='sidebar-divider' />
-              <div>
-                {!collapsed && (
-                  <div className='sidebar-group-label'>{t('控制台')}</div>
-                )}
-                {workspaceItems.map((item) => renderNavItem(item))}
-              </div>
-            </>
-          )}
-
-          {/* 个人中心区域 */}
-          {hasSectionVisibleModules('personal') && (
-            <>
-              <Divider className='sidebar-divider' />
-              <div>
-                {!collapsed && (
-                  <div className='sidebar-group-label'>{t('个人中心')}</div>
-                )}
-                {financeItems.map((item) => renderNavItem(item))}
-              </div>
-            </>
-          )}
-
-          {/* 管理员区域 - 只在管理员时显示且配置允许时显示 */}
-          {isAdmin() && hasSectionVisibleModules('admin') && (
-            <>
-              <Divider className='sidebar-divider' />
-              <div>
-                {!collapsed && (
-                  <div className='sidebar-group-label'>{t('管理员')}</div>
-                )}
-                {adminItems.map((item) => renderNavItem(item))}
-              </div>
-            </>
-          )}
-        </Nav>
-      </SkeletonWrapper>
-
-      {/* 底部折叠按钮 */}
-      <div className='sidebar-collapse-button'>
-        <SkeletonWrapper
-          loading={showSkeleton}
-          type='button'
-          width={collapsed ? 36 : 156}
-          height={24}
-          className='w-full'
-        >
-          <Button
-            theme='outline'
-            type='tertiary'
-            size='small'
-            icon={
-              <ChevronLeft
-                size={16}
-                strokeWidth={2.5}
-                color='var(--semi-color-text-2)'
-                style={{
-                  transform: collapsed ? 'rotate(180deg)' : 'rotate(0deg)',
-                }}
-              />
-            }
-            onClick={toggleCollapsed}
-            icononly={collapsed}
-            style={
-              collapsed
-                ? { width: 36, height: 24, padding: 0 }
-                : { padding: '4px 12px', width: '100%' }
-            }
-          >
-            {!collapsed ? t('收起侧边栏') : null}
-          </Button>
-        </SkeletonWrapper>
-      </div>
-    </div>
+    <>
+      <Sidebar>
+        <SidebarBody {...sharedBodyProps} />
+      </Sidebar>
+      <Sidebar.Mobile>
+        <SidebarBody {...sharedBodyProps} />
+      </Sidebar.Mobile>
+    </>
   );
 };
 
diff --git a/web/src/components/layout/components/SkeletonWrapper.jsx b/web/src/components/layout/components/SkeletonWrapper.jsx
index 3d498166898..d435f144987 100644
--- a/web/src/components/layout/components/SkeletonWrapper.jsx
+++ b/web/src/components/layout/components/SkeletonWrapper.jsx
@@ -18,7 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Skeleton } from '@douyinfe/semi-ui';
+import { Skeleton } from '@heroui/react';
+
+const SkeletonBlock = ({ className = '', style }) => (
+  <Skeleton
+    className={`rounded-lg bg-surface-secondary ${className}`}
+    style={style}
+  />
+);
 
 const SkeletonWrapper = ({
   loading = false,
@@ -47,15 +54,7 @@ const SkeletonWrapper = ({
       .fill(null)
       .map((_, index) => (
         <div key={index} className={skeletonLinkClasses}>
-          <Skeleton
-            loading={true}
-            active
-            placeholder={
-              <Skeleton.Title
-                style={{ width: isMobile ? 40 : width, height }}
-              />
-            }
-          />
+          <SkeletonBlock style={{ width: isMobile ? 40 : width, height }} />
         </div>
       ));
   };
@@ -64,25 +63,11 @@ const SkeletonWrapper = ({
   const renderUserAreaSkeleton = () => {
     return (
       <div
-        className={`flex items-center p-1 rounded-full bg-semi-color-fill-0 dark:bg-semi-color-fill-1 ${className}`}
+        className={`flex items-center rounded-full bg-surface-secondary p-1 ${className}`}
       >
-        <Skeleton
-          loading={true}
-          active
-          placeholder={
-            <Skeleton.Avatar size='extra-small' className='shadow-sm' />
-          }
-        />
+        <SkeletonBlock className='h-6 w-6 rounded-full shadow-sm' />
         <div className='ml-1.5 mr-1'>
-          <Skeleton
-            loading={true}
-            active
-            placeholder={
-              <Skeleton.Title
-                style={{ width: isMobile ? 15 : width, height: 12 }}
-              />
-            }
-          />
+          <SkeletonBlock style={{ width: isMobile ? 15 : width, height: 12 }} />
         </div>
       </div>
     );
@@ -91,15 +76,9 @@ const SkeletonWrapper = ({
   // Logo图片骨架屏
   const renderImageSkeleton = () => {
     return (
-      <Skeleton
-        loading={true}
-        active
-        placeholder={
-          <Skeleton.Image
-            className={`absolute inset-0 !rounded-full ${className}`}
-            style={{ width: '100%', height: '100%' }}
-          />
-        }
+      <SkeletonBlock
+        className={`absolute inset-0 rounded-full ${className}`}
+        style={{ width: '100%', height: '100%' }}
       />
     );
   };
@@ -107,11 +86,7 @@ const SkeletonWrapper = ({
   // 系统名称骨架屏
   const renderTitleSkeleton = () => {
     return (
-      <Skeleton
-        loading={true}
-        active
-        placeholder={<Skeleton.Title style={{ width, height: 24 }} />}
-      />
+      <SkeletonBlock style={{ width, height: 24 }} />
     );
   };
 
@@ -119,11 +94,7 @@ const SkeletonWrapper = ({
   const renderTextSkeleton = () => {
     return (
       <div className={className}>
-        <Skeleton
-          loading={true}
-          active
-          placeholder={<Skeleton.Title style={{ width, height }} />}
-        />
+        <SkeletonBlock style={{ width, height }} />
       </div>
     );
   };
@@ -132,13 +103,7 @@ const SkeletonWrapper = ({
   const renderButtonSkeleton = () => {
     return (
       <div className={className}>
-        <Skeleton
-          loading={true}
-          active
-          placeholder={
-            <Skeleton.Title style={{ width, height, borderRadius: 9999 }} />
-          }
-        />
+        <SkeletonBlock className='rounded-full' style={{ width, height }} />
       </div>
     );
   };
@@ -154,24 +119,10 @@ const SkeletonWrapper = ({
         >
           {/* 图标骨架屏 */}
           <div className='sidebar-icon-container flex-shrink-0'>
-            <Skeleton
-              loading={true}
-              active
-              placeholder={
-                <Skeleton.Avatar size='extra-small' shape='square' />
-              }
-            />
+            <SkeletonBlock className='h-5 w-5 rounded-md' />
           </div>
           {/* 文本骨架屏 */}
-          <Skeleton
-            loading={true}
-            active
-            placeholder={
-              <Skeleton.Title
-                style={{ width: width || 80, height: height || 14 }}
-              />
-            }
-          />
+          <SkeletonBlock style={{ width: width || 80, height: height || 14 }} />
         </div>
       ));
   };
@@ -180,15 +131,7 @@ const SkeletonWrapper = ({
   const renderSidebarGroupTitleSkeleton = () => {
     return (
       <div className={`mb-2 ${className}`}>
-        <Skeleton
-          loading={true}
-          active
-          placeholder={
-            <Skeleton.Title
-              style={{ width: width || 60, height: height || 12 }}
-            />
-          }
-        />
+        <SkeletonBlock style={{ width: width || 60, height: height || 12 }} />
       </div>
     );
   };
@@ -204,26 +147,14 @@ const SkeletonWrapper = ({
     const TEXT_HEIGHT = 16;
 
     const renderIcon = () => (
-      <Skeleton
-        loading={true}
-        active
-        placeholder={
-          <Skeleton.Avatar
-            shape='square'
-            style={{ width: ICON_SIZE, height: ICON_SIZE }}
-          />
-        }
+      <SkeletonBlock
+        className='rounded-md'
+        style={{ width: ICON_SIZE, height: ICON_SIZE }}
       />
     );
 
     const renderLabel = (labelWidth) => (
-      <Skeleton
-        loading={true}
-        active
-        placeholder={
-          <Skeleton.Title style={{ width: labelWidth, height: TEXT_HEIGHT }} />
-        }
-      />
+      <SkeletonBlock style={{ width: labelWidth, height: TEXT_HEIGHT }} />
     );
 
     const NavRow = ({ labelWidth }) => (
@@ -252,15 +183,9 @@ const SkeletonWrapper = ({
           margin: '0 8px 4px 8px',
         }}
       >
-        <Skeleton
-          loading={true}
-          active
-          placeholder={
-            <Skeleton.Avatar
-              shape='square'
-              style={{ width: ICON_SIZE, height: ICON_SIZE }}
-            />
-          }
+        <SkeletonBlock
+          className='rounded-md'
+          style={{ width: ICON_SIZE, height: ICON_SIZE }}
         />
       </div>
     );
@@ -311,14 +236,8 @@ const SkeletonWrapper = ({
                   className='sidebar-group-label'
                   style={{ padding: '4px 15px 8px' }}
                 >
-                  <Skeleton
-                    loading={true}
-                    active
-                    placeholder={
-                      <Skeleton.Title
-                        style={{ width: sec.titleWidth, height: TITLE_HEIGHT }}
-                      />
-                    }
+                  <SkeletonBlock
+                    style={{ width: sec.titleWidth, height: TITLE_HEIGHT }}
                   />
                 </div>
                 {sec.itemWidths.map((w, i) => (
@@ -331,14 +250,8 @@ const SkeletonWrapper = ({
                   className='sidebar-group-label'
                   style={{ padding: '4px 15px 8px' }}
                 >
-                  <Skeleton
-                    loading={true}
-                    active
-                    placeholder={
-                      <Skeleton.Title
-                        style={{ width: sec.titleWidth, height: TITLE_HEIGHT }}
-                      />
-                    }
+                  <SkeletonBlock
+                    style={{ width: sec.titleWidth, height: TITLE_HEIGHT }}
                   />
                 </div>
                 {sec.itemWidths.map((w, i) => (
diff --git a/web/src/components/layout/headerbar/ActionButtons.jsx b/web/src/components/layout/headerbar/ActionButtons.jsx
index 545b5227b22..17fd7eb1e73 100644
--- a/web/src/components/layout/headerbar/ActionButtons.jsx
+++ b/web/src/components/layout/headerbar/ActionButtons.jsx
@@ -40,8 +40,10 @@ const ActionButtons = ({
   navigate,
   t,
 }) => {
+  // Returns a fragment because the parent is a `Navbar.Content` flex
+  // container — wrapping these in another <div> would break gap spacing.
   return (
-    <div className='flex items-center gap-2 md:gap-3'>
+    <>
       <NewYearButton isNewYear={isNewYear} />
 
       <NotificationButton
@@ -67,7 +69,7 @@ const ActionButtons = ({
         navigate={navigate}
         t={t}
       />
-    </div>
+    </>
   );
 };
 
diff --git a/web/src/components/layout/headerbar/HeaderLogo.jsx b/web/src/components/layout/headerbar/HeaderLogo.jsx
index 73be0516b2f..3c942f94537 100644
--- a/web/src/components/layout/headerbar/HeaderLogo.jsx
+++ b/web/src/components/layout/headerbar/HeaderLogo.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { Link } from 'react-router-dom';
-import { Typography, Tag } from '@douyinfe/semi-ui';
+import { Chip } from '@heroui/react';
 import SkeletonWrapper from '../components/SkeletonWrapper';
 
 const HeaderLogo = ({
@@ -55,22 +55,20 @@ const HeaderLogo = ({
             width={120}
             height={24}
           >
-            <Typography.Title
-              heading={4}
-              className='!text-lg !font-semibold !mb-0'
-            >
+            <h1 className='mb-0 text-lg font-semibold text-foreground'>
               {systemName}
-            </Typography.Title>
+            </h1>
           </SkeletonWrapper>
           {(isSelfUseMode || isDemoSiteMode) && !isLoading && (
-            <Tag
-              color={isSelfUseMode ? 'purple' : 'blue'}
-              className='text-xs px-1.5 py-0.5 rounded whitespace-nowrap shadow-sm'
-              size='small'
-              shape='circle'
+            <Chip
+              color={isSelfUseMode ? 'secondary' : 'primary'}
+              size='sm'
+              variant='flat'
+              radius='full'
+              className='h-6 whitespace-nowrap px-1 text-xs shadow-sm'
             >
               {isSelfUseMode ? t('自用模式') : t('演示站点')}
-            </Tag>
+            </Chip>
           )}
         </div>
       </div>
diff --git a/web/src/components/layout/headerbar/LanguageSelector.jsx b/web/src/components/layout/headerbar/LanguageSelector.jsx
index ede8b5a4aa4..5687616f861 100644
--- a/web/src/components/layout/headerbar/LanguageSelector.jsx
+++ b/web/src/components/layout/headerbar/LanguageSelector.jsx
@@ -17,69 +17,94 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import { Button, Dropdown } from '@douyinfe/semi-ui';
+import React, { useEffect, useRef, useState } from 'react';
 import { Languages } from 'lucide-react';
 
 const LanguageSelector = ({ currentLang, onLanguageChange, t }) => {
-  return (
-    <Dropdown
-      position='bottomRight'
-      render={
-        <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
-          {/* Language sorting: Order by English name (Chinese, English, French, Japanese, Russian) */}
-          <Dropdown.Item
-            onClick={() => onLanguageChange('zh-CN')}
-            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'zh-CN' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
-          >
-            简体中文
-          </Dropdown.Item>
-          <Dropdown.Item
-            onClick={() => onLanguageChange('zh-TW')}
-            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'zh-TW' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
-          >
-        	繁體中文
-          </Dropdown.Item>          <Dropdown.Item
-            onClick={() => onLanguageChange('en')}
-            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'en' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
-          >
-            English
-          </Dropdown.Item>
-          <Dropdown.Item
-            onClick={() => onLanguageChange('fr')}
-            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'fr' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
-          >
-            Français
-          </Dropdown.Item>
-          <Dropdown.Item
-            onClick={() => onLanguageChange('ja')}
-            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'ja' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
-          >
-            日本語
-          </Dropdown.Item>
-          <Dropdown.Item
-            onClick={() => onLanguageChange('ru')}
-            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'ru' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
-          >
-            Русский
-          </Dropdown.Item>
-          <Dropdown.Item
-            onClick={() => onLanguageChange('vi')}
-            className={`!px-3 !py-1.5 !text-sm !text-semi-color-text-0 dark:!text-gray-200 ${currentLang === 'vi' ? '!bg-semi-color-primary-light-default dark:!bg-blue-600 !font-semibold' : 'hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-600'}`}
-          >
-            Tiếng Việt
-          </Dropdown.Item>
-        </Dropdown.Menu>
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  // Only Chinese and English are surfaced in the navbar switcher; other
+  // locales remain in the underlying i18n bundle (so saved preferences keep
+  // working) but are intentionally hidden from the chooser.
+  const languages = [
+    ['zh-CN', '简体中文'],
+    ['en', 'English'],
+  ];
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    const handlePointerDown = (event) => {
+      if (!dropdownRef.current?.contains(event.target)) {
+        setOpen(false);
       }
-    >
-      <Button
-        icon={<Languages size={18} />}
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+
+  const handleLanguageSelect = (lang) => {
+    onLanguageChange(lang);
+    setOpen(false);
+  };
+
+  return (
+    <div className='relative' ref={dropdownRef}>
+      <button
+        type='button'
         aria-label={t('common.changeLanguage')}
-        theme='borderless'
-        type='tertiary'
-        className='!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2'
-      />
-    </Dropdown>
+        aria-haspopup='menu'
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        className='inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-surface-secondary text-foreground transition-colors hover:bg-surface-tertiary'
+      >
+        <Languages size={18} />
+      </button>
+
+      {open ? (
+        // Font-size lives on the wrapper, not the buttons: `@heroui/styles`
+        // resets `button { font-size: inherit }` outside any @layer, which
+        // beats every Tailwind utility per CSS Cascade Layers, so the
+        // buttons would otherwise inherit body's 16px. Set 14px here and
+        // let the menu items inherit it.
+        <div
+          role='menu'
+          aria-label={t('common.changeLanguage')}
+          className='absolute right-0 top-full z-50 mt-2 min-w-36 rounded-xl border border-border bg-background p-1 text-[14px] leading-5 shadow-lg'
+        >
+          {languages.map(([key, label]) => (
+            <button
+              key={key}
+              type='button'
+              role='menuitemradio'
+              aria-checked={currentLang === key}
+              onClick={() => handleLanguageSelect(key)}
+              className={`flex w-full cursor-pointer items-center rounded-md px-3 py-1.5 text-left transition-colors hover:bg-surface-secondary ${
+                currentLang === key
+                  ? 'bg-primary/10 text-primary'
+                  : 'text-foreground'
+              }`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </div>
   );
 };
 
diff --git a/web/src/components/layout/headerbar/MobileMenuButton.jsx b/web/src/components/layout/headerbar/MobileMenuButton.jsx
index 7cf7e4aa981..3dbe00f58f6 100644
--- a/web/src/components/layout/headerbar/MobileMenuButton.jsx
+++ b/web/src/components/layout/headerbar/MobileMenuButton.jsx
@@ -18,38 +18,37 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
-import { IconClose, IconMenu } from '@douyinfe/semi-icons';
-
-const MobileMenuButton = ({
-  isConsoleRoute,
-  isMobile,
-  drawerOpen,
-  collapsed,
-  onToggle,
-  t,
-}) => {
+import { Button } from '@heroui/react';
+import { useSidebar } from '@heroui-pro/react';
+import { Menu, X } from 'lucide-react';
+
+// Mobile-only sidebar drawer toggle. Reads / writes the mobile-sheet open
+// state from the surrounding `Sidebar.Provider` (mounted in PageLayout) so
+// the button stays in sync with the actual sheet rather than tracking a
+// separate piece of local state.
+const MobileMenuButton = ({ isConsoleRoute, isMobile, t }) => {
+  const { isMobileOpen, setMobileOpen } = useSidebar();
+
   if (!isConsoleRoute || !isMobile) {
     return null;
   }
 
   return (
     <Button
-      icon={
-        (isMobile ? drawerOpen : collapsed) ? (
-          <IconClose className='text-lg' />
-        ) : (
-          <IconMenu className='text-lg' />
-        )
-      }
-      aria-label={
-        (isMobile ? drawerOpen : collapsed) ? t('关闭侧边栏') : t('打开侧边栏')
-      }
-      onClick={onToggle}
-      theme='borderless'
-      type='tertiary'
-      className='!p-2 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700'
-    />
+      isIconOnly
+      size='sm'
+      radius='full'
+      variant='light'
+      aria-label={isMobileOpen ? t('关闭侧边栏') : t('打开侧边栏')}
+      onPress={() => setMobileOpen(!isMobileOpen)}
+      className='text-foreground hover:bg-surface-secondary'
+    >
+      {isMobileOpen ? (
+        <X size={19} strokeWidth={2.4} />
+      ) : (
+        <Menu size={19} strokeWidth={2.4} />
+      )}
+    </Button>
   );
 };
 
diff --git a/web/src/components/layout/headerbar/MobileNavMenu.jsx b/web/src/components/layout/headerbar/MobileNavMenu.jsx
new file mode 100644
index 00000000000..9c52db2898d
--- /dev/null
+++ b/web/src/components/layout/headerbar/MobileNavMenu.jsx
@@ -0,0 +1,48 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React from 'react';
+import { Navbar } from '@heroui-pro/react';
+import { resolveTarget, isLinkCurrent } from './Navigation';
+
+// Mobile-only navigation list rendered into `Navbar.Menu`. Pressing a
+// `Navbar.MenuItem` automatically closes the menu, which gives us the same
+// "tap a link, see the page" behavior as the desktop nav without extra state.
+const MobileNavMenu = ({
+  mainNavLinks,
+  userState,
+  pricingRequireAuth,
+  pathname,
+}) => {
+  return (
+    <Navbar.Menu>
+      {mainNavLinks.map((link) => {
+        const target = resolveTarget(link, userState, pricingRequireAuth);
+        const current = isLinkCurrent(link, pathname);
+        return (
+          <Navbar.MenuItem key={link.itemKey} href={target} isCurrent={current}>
+            {link.text}
+          </Navbar.MenuItem>
+        );
+      })}
+    </Navbar.Menu>
+  );
+};
+
+export default MobileNavMenu;
diff --git a/web/src/components/layout/headerbar/Navigation.jsx b/web/src/components/layout/headerbar/Navigation.jsx
index e2a4a696edf..de7887bbac0 100644
--- a/web/src/components/layout/headerbar/Navigation.jsx
+++ b/web/src/components/layout/headerbar/Navigation.jsx
@@ -18,71 +18,80 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Navbar } from '@heroui-pro/react';
 import SkeletonWrapper from '../components/SkeletonWrapper';
 
+// Resolve the actual destination href for a nav link, applying auth-required
+// redirects (`console`, gated `pricing`) without mutating the link config.
+const resolveTarget = (link, userState, pricingRequireAuth) => {
+  if (link.isExternal) {
+    return link.externalLink;
+  }
+  if (link.itemKey === 'console' && !userState?.user) {
+    return '/login';
+  }
+  if (link.itemKey === 'pricing' && pricingRequireAuth && !userState?.user) {
+    return '/login';
+  }
+  return link.to;
+};
+
+// Match nav-link "is current" against the current pathname. Treat `/` as an
+// exact match so the home link doesn't stay highlighted on every route.
+const isLinkCurrent = (link, pathname) => {
+  if (link.isExternal) {
+    return false;
+  }
+  const target = link.to;
+  if (!target) return false;
+  if (target === '/') {
+    return pathname === '/';
+  }
+  return pathname === target || pathname.startsWith(`${target}/`);
+};
+
+// Desktop-only navigation rendered inside `Navbar.Content`. Hidden on mobile;
+// the mobile equivalent lives in `MobileNavMenu` (Navbar.Menu).
 const Navigation = ({
   mainNavLinks,
-  isMobile,
   isLoading,
   userState,
   pricingRequireAuth,
+  pathname,
 }) => {
-  const renderNavLinks = () => {
-    const baseClasses =
-      'flex-shrink-0 flex items-center gap-1 font-semibold rounded-md transition-all duration-200 ease-in-out';
-    const hoverClasses = 'hover:text-semi-color-primary';
-    const spacingClasses = isMobile ? 'p-1' : 'p-2';
-
-    const commonLinkClasses = `${baseClasses} ${spacingClasses} ${hoverClasses}`;
-
-    return mainNavLinks.map((link) => {
-      const linkContent = <span>{link.text}</span>;
-
-      if (link.isExternal) {
-        return (
-          <a
-            key={link.itemKey}
-            href={link.externalLink}
-            target='_blank'
-            rel='noopener noreferrer'
-            className={commonLinkClasses}
-          >
-            {linkContent}
-          </a>
-        );
-      }
-
-      let targetPath = link.to;
-      if (link.itemKey === 'console' && !userState.user) {
-        targetPath = '/login';
-      }
-      if (link.itemKey === 'pricing' && pricingRequireAuth && !userState.user) {
-        targetPath = '/login';
-      }
-
-      return (
-        <Link key={link.itemKey} to={targetPath} className={commonLinkClasses}>
-          {linkContent}
-        </Link>
-      );
-    });
-  };
-
   return (
-    <nav className='flex flex-1 items-center gap-1 lg:gap-2 mx-2 md:mx-4 overflow-x-auto whitespace-nowrap scrollbar-hide'>
+    <Navbar.Content className='hidden md:flex'>
       <SkeletonWrapper
         loading={isLoading}
         type='navigation'
         count={4}
         width={60}
         height={16}
-        isMobile={isMobile}
       >
-        {renderNavLinks()}
+        {mainNavLinks.map((link) => {
+          const target = resolveTarget(link, userState, pricingRequireAuth);
+          const current = isLinkCurrent(link, pathname);
+          return (
+            // Navbar.Item ships with its own `text-muted` baseline that
+            // transitions to `text-foreground` on hover / `data-current`.
+            // The text-only color shift is subtle, so layer a surface tint
+            // on top via Tailwind utilities — both `hover:` and HeroUI's
+            // `data-[hovered=true]` selector cover mouse + a11y-driven
+            // hover (touch retains the no-bg muted baseline).
+            <Navbar.Item
+              key={link.itemKey}
+              href={target}
+              isCurrent={current}
+              className='transition-colors hover:bg-surface-secondary data-[hovered=true]:bg-surface-secondary data-[current=true]:bg-surface-secondary'
+            >
+              {link.text}
+            </Navbar.Item>
+          );
+        })}
       </SkeletonWrapper>
-    </nav>
+    </Navbar.Content>
   );
 };
 
+export { resolveTarget, isLinkCurrent };
 export default Navigation;
diff --git a/web/src/components/layout/headerbar/NewYearButton.jsx b/web/src/components/layout/headerbar/NewYearButton.jsx
index 4f007c51779..c4bb9c5be4f 100644
--- a/web/src/components/layout/headerbar/NewYearButton.jsx
+++ b/web/src/components/layout/headerbar/NewYearButton.jsx
@@ -17,11 +17,39 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import { Button, Dropdown } from '@douyinfe/semi-ui';
+import React, { useEffect, useRef, useState } from 'react';
 import fireworks from 'react-fireworks';
 
 const NewYearButton = ({ isNewYear }) => {
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    const handlePointerDown = (event) => {
+      if (!dropdownRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+
   if (!isNewYear) {
     return null;
   }
@@ -29,33 +57,42 @@ const NewYearButton = ({ isNewYear }) => {
   const handleNewYearClick = () => {
     fireworks.init('root', {});
     fireworks.start();
+    setOpen(false);
     setTimeout(() => {
       fireworks.stop();
     }, 3000);
   };
 
   return (
-    <Dropdown
-      position='bottomRight'
-      render={
-        <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
-          <Dropdown.Item
+    <div className='relative' ref={dropdownRef}>
+      <button
+        type='button'
+        aria-label='New Year'
+        aria-haspopup='menu'
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        className='inline-flex h-8 w-8 items-center justify-center rounded-full text-foreground transition-colors hover:bg-surface-secondary'
+      >
+        <span className='text-xl'>🎉</span>
+      </button>
+
+      {open ? (
+        <div
+          role='menu'
+          aria-label='New Year'
+          className='absolute right-0 top-full z-50 mt-2 min-w-44 rounded-2xl border border-border bg-background/95 p-1 shadow-xl backdrop-blur'
+        >
+          <button
+            type='button'
+            role='menuitem'
             onClick={handleNewYearClick}
-            className='!text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-gray-600'
+            className='flex w-full items-center rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-surface-secondary'
           >
             Happy New Year!!! 🎉
-          </Dropdown.Item>
-        </Dropdown.Menu>
-      }
-    >
-      <Button
-        theme='borderless'
-        type='tertiary'
-        icon={<span className='text-xl'>🎉</span>}
-        aria-label='New Year'
-        className='!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 rounded-full'
-      />
-    </Dropdown>
+          </button>
+        </div>
+      ) : null}
+    </div>
   );
 };
 
diff --git a/web/src/components/layout/headerbar/NotificationButton.jsx b/web/src/components/layout/headerbar/NotificationButton.jsx
index 54ab9dd94dd..e6eef6955dd 100644
--- a/web/src/components/layout/headerbar/NotificationButton.jsx
+++ b/web/src/components/layout/headerbar/NotificationButton.jsx
@@ -18,29 +18,32 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Badge } from '@douyinfe/semi-ui';
 import { Bell } from 'lucide-react';
 
 const NotificationButton = ({ unreadCount, onNoticeOpen, t }) => {
-  const buttonProps = {
-    icon: <Bell size={18} />,
-    'aria-label': t('系统公告'),
-    onClick: onNoticeOpen,
-    theme: 'borderless',
-    type: 'tertiary',
-    className:
-      '!p-1.5 !text-current focus:!bg-semi-color-fill-1 dark:focus:!bg-gray-700 !rounded-full !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2',
-  };
+  const button = (
+    <button
+      type='button'
+      aria-label={t('系统公告')}
+      onClick={onNoticeOpen}
+      className='inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-surface-secondary text-foreground transition-colors hover:bg-surface-secondary/70'
+    >
+      <Bell size={18} />
+    </button>
+  );
 
   if (unreadCount > 0) {
     return (
-      <Badge count={unreadCount} type='danger' overflowCount={99}>
-        <Button {...buttonProps} />
-      </Badge>
+      <span className='relative inline-flex'>
+        {button}
+        <span className='absolute -right-1 -top-1 inline-flex min-w-4 items-center justify-center rounded-full bg-danger px-1 text-[10px] font-semibold leading-4 text-white'>
+          {unreadCount > 99 ? '99+' : unreadCount}
+        </span>
+      </span>
     );
   }
 
-  return <Button {...buttonProps} />;
+  return button;
 };
 
 export default NotificationButton;
diff --git a/web/src/components/layout/headerbar/ThemeToggle.jsx b/web/src/components/layout/headerbar/ThemeToggle.jsx
index 95cf8db5fd3..528c3ddb84c 100644
--- a/web/src/components/layout/headerbar/ThemeToggle.jsx
+++ b/web/src/components/layout/headerbar/ThemeToggle.jsx
@@ -17,13 +17,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useMemo } from 'react';
-import { Button, Dropdown } from '@douyinfe/semi-ui';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { Sun, Moon, Monitor } from 'lucide-react';
 import { useActualTheme } from '../../../context/Theme';
 
 const ThemeToggle = ({ theme, onThemeToggle, t }) => {
   const actualTheme = useActualTheme();
+  const [open, setOpen] = useState(false);
+  const dropdownRef = useRef(null);
 
   const themeOptions = useMemo(
     () => [
@@ -52,59 +53,97 @@ const ThemeToggle = ({ theme, onThemeToggle, t }) => {
     [t],
   );
 
-  const getItemClassName = (isSelected) =>
-    isSelected
-      ? '!bg-semi-color-primary-light-default !font-semibold'
-      : 'hover:!bg-semi-color-fill-1';
-
   const currentButtonIcon = useMemo(() => {
     const currentOption = themeOptions.find((option) => option.key === theme);
     return currentOption?.buttonIcon || themeOptions[2].buttonIcon;
   }, [theme, themeOptions]);
 
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    const handlePointerDown = (event) => {
+      if (!dropdownRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+
+  const handleThemeSelect = (key) => {
+    onThemeToggle(key);
+    setOpen(false);
+  };
+
   return (
-    <Dropdown
-      position='bottomRight'
-      render={
-        <Dropdown.Menu>
+    <div className='relative' ref={dropdownRef}>
+      <button
+        type='button'
+        aria-label={t('切换主题')}
+        aria-haspopup='menu'
+        aria-expanded={open}
+        onClick={() => setOpen((value) => !value)}
+        className='inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-surface-secondary text-foreground transition-colors hover:bg-surface-secondary/70'
+      >
+        {currentButtonIcon}
+      </button>
+
+      {open ? (
+        // Font-size lives on the wrapper, not the buttons: `@heroui/styles`
+        // resets `button { font-size: inherit }` outside any @layer, which
+        // beats every Tailwind utility per CSS Cascade Layers, so the
+        // buttons would otherwise inherit body's 16px. Set 14px here and
+        // let the menu items inherit it; nested spans (description / auto
+        // hint) keep their own `text-xs` since spans aren't reset-targeted.
+        <div
+          role='menu'
+          aria-label={t('切换主题')}
+          className='absolute right-0 top-full z-50 mt-2 min-w-52 rounded-2xl border border-border bg-background/95 p-1 text-[14px] leading-5 shadow-xl backdrop-blur'
+        >
           {themeOptions.map((option) => (
-            <Dropdown.Item
+            <button
               key={option.key}
-              icon={option.icon}
-              onClick={() => onThemeToggle(option.key)}
-              className={getItemClassName(theme === option.key)}
+              type='button'
+              role='menuitemradio'
+              aria-checked={theme === option.key}
+              onClick={() => handleThemeSelect(option.key)}
+              className={`flex w-full cursor-pointer items-start gap-2 rounded-xl px-3 py-1.5 text-left transition-colors hover:bg-surface-secondary ${
+                theme === option.key ? 'bg-primary/10 text-primary' : ''
+              }`}
             >
-              <div className='flex flex-col'>
+              <span className='mt-0.5 text-muted'>{option.icon}</span>
+              <span className='flex flex-col'>
                 <span>{option.label}</span>
-                <span className='text-xs text-semi-color-text-2'>
+                <span className='text-xs text-muted'>
                   {option.description}
                 </span>
-              </div>
-            </Dropdown.Item>
+              </span>
+            </button>
           ))}
 
-          {theme === 'auto' && (
-            <>
-              <Dropdown.Divider />
-              <div className='px-3 py-2 text-xs text-semi-color-text-2'>
-                {t('当前跟随系统')}：
-                {actualTheme === 'dark' ? t('深色') : t('浅色')}
-              </div>
-            </>
-          )}
-        </Dropdown.Menu>
-      }
-    >
-      <span className='inline-flex'>
-        <Button
-          icon={currentButtonIcon}
-          aria-label={t('切换主题')}
-          theme='borderless'
-          type='tertiary'
-          className='!p-1.5 !text-current focus:!bg-semi-color-fill-1 !rounded-full !bg-semi-color-fill-0 hover:!bg-semi-color-fill-1'
-        />
-      </span>
-    </Dropdown>
+          {theme === 'auto' ? (
+            <div className='px-3 py-2 text-xs text-muted'>
+              {t('当前跟随系统')}：
+              {actualTheme === 'dark' ? t('深色') : t('浅色')}
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+    </div>
   );
 };
 
diff --git a/web/src/components/layout/headerbar/UserArea.jsx b/web/src/components/layout/headerbar/UserArea.jsx
index 9fc011da18a..2bb710dbb01 100644
--- a/web/src/components/layout/headerbar/UserArea.jsx
+++ b/web/src/components/layout/headerbar/UserArea.jsx
@@ -17,19 +17,37 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Avatar, Button, Dropdown, Typography } from '@douyinfe/semi-ui';
-import { ChevronDown } from 'lucide-react';
+import { Avatar } from '@heroui/react';
 import {
-  IconExit,
-  IconUserSetting,
-  IconCreditCard,
-  IconKey,
-} from '@douyinfe/semi-icons';
+  ChevronDown,
+  CreditCard,
+  KeyRound,
+  LogOut,
+  UserCog,
+} from 'lucide-react';
 import { stringToColor } from '../../../helpers';
 import SkeletonWrapper from '../components/SkeletonWrapper';
 
+const avatarPalette = {
+  amber: '#d97706',
+  blue: '#2563eb',
+  cyan: '#0891b2',
+  green: '#16a34a',
+  grey: '#64748b',
+  indigo: '#4f46e5',
+  'light-blue': '#0284c7',
+  lime: '#65a30d',
+  orange: '#ea580c',
+  pink: '#db2777',
+  purple: '#9333ea',
+  red: '#dc2626',
+  teal: '#0d9488',
+  violet: '#7c3aed',
+  yellow: '#ca8a04',
+};
+
 const UserArea = ({
   userState,
   isLoading,
@@ -40,6 +58,34 @@ const UserArea = ({
   t,
 }) => {
   const dropdownRef = useRef(null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    const handlePointerDown = (event) => {
+      if (!dropdownRef.current?.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+
+    const handleKeyDown = (event) => {
+      if (event.key === 'Escape') {
+        setOpen(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [open]);
+
   if (isLoading) {
     return (
       <SkeletonWrapper
@@ -52,143 +98,124 @@ const UserArea = ({
   }
 
   if (userState.user) {
+    const avatarColor = stringToColor(userState.user.username);
+    const menuItems = [
+      {
+        key: 'personal',
+        label: t('个人设置'),
+        icon: <UserCog size={14} />,
+        action: () => navigate('/console/personal'),
+      },
+      {
+        key: 'token',
+        label: t('令牌管理'),
+        icon: <KeyRound size={14} />,
+        action: () => navigate('/console/token'),
+      },
+      {
+        key: 'topup',
+        label: t('钱包管理'),
+        icon: <CreditCard size={14} />,
+        action: () => navigate('/console/topup'),
+      },
+      {
+        key: 'logout',
+        label: t('退出'),
+        icon: <LogOut size={14} />,
+        action: logout,
+        danger: true,
+      },
+    ];
+
+    const handleMenuAction = (item) => {
+      setOpen(false);
+      item.action();
+    };
+
     return (
       <div className='relative' ref={dropdownRef}>
-        <Dropdown
-          position='bottomRight'
-          getPopupContainer={() => dropdownRef.current}
-          render={
-            <Dropdown.Menu className='!bg-semi-color-bg-overlay !border-semi-color-border !shadow-lg !rounded-lg dark:!bg-gray-700 dark:!border-gray-600'>
-              <Dropdown.Item
-                onClick={() => {
-                  navigate('/console/personal');
-                }}
-                className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
-              >
-                <div className='flex items-center gap-2'>
-                  <IconUserSetting
-                    size='small'
-                    className='text-gray-500 dark:text-gray-400'
-                  />
-                  <span>{t('个人设置')}</span>
-                </div>
-              </Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => {
-                  navigate('/console/token');
-                }}
-                className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
-              >
-                <div className='flex items-center gap-2'>
-                  <IconKey
-                    size='small'
-                    className='text-gray-500 dark:text-gray-400'
-                  />
-                  <span>{t('令牌管理')}</span>
-                </div>
-              </Dropdown.Item>
-              <Dropdown.Item
-                onClick={() => {
-                  navigate('/console/topup');
-                }}
-                className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-blue-500 dark:hover:!text-white'
-              >
-                <div className='flex items-center gap-2'>
-                  <IconCreditCard
-                    size='small'
-                    className='text-gray-500 dark:text-gray-400'
-                  />
-                  <span>{t('钱包管理')}</span>
-                </div>
-              </Dropdown.Item>
-              <Dropdown.Item
-                onClick={logout}
-                className='!px-3 !py-1.5 !text-sm !text-semi-color-text-0 hover:!bg-semi-color-fill-1 dark:!text-gray-200 dark:hover:!bg-red-500 dark:hover:!text-white'
-              >
-                <div className='flex items-center gap-2'>
-                  <IconExit
-                    size='small'
-                    className='text-gray-500 dark:text-gray-400'
-                  />
-                  <span>{t('退出')}</span>
-                </div>
-              </Dropdown.Item>
-            </Dropdown.Menu>
-          }
+        <button
+          type='button'
+          aria-label={t('用户菜单')}
+          aria-haspopup='menu'
+          aria-expanded={open}
+          onClick={() => setOpen((value) => !value)}
+          className='inline-flex h-9 cursor-pointer items-center gap-1.5 rounded-full bg-surface-secondary px-1.5 pr-2 text-foreground transition-colors hover:bg-surface-tertiary'
         >
-          <Button
-            theme='borderless'
-            type='tertiary'
-            className='flex items-center gap-1.5 !p-1 !rounded-full hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 !bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 dark:hover:!bg-semi-color-fill-2'
-          >
-            <Avatar
-              size='extra-small'
-              color={stringToColor(userState.user.username)}
-              className='mr-1'
-            >
-              {userState.user.username[0].toUpperCase()}
-            </Avatar>
-            <span className='hidden md:inline'>
-              <Typography.Text className='!text-xs !font-medium !text-semi-color-text-1 dark:!text-gray-300 mr-1'>
-                {userState.user.username}
-              </Typography.Text>
+          <Avatar
+            size='sm'
+            className='h-7 w-7 text-xs text-white'
+            style={{
+              backgroundColor:
+                avatarPalette[avatarColor] || 'var(--app-primary)',
+            }}
+            name={userState.user.username[0].toUpperCase()}
+          />
+          <span className='hidden md:inline'>
+            <span className='mr-1 text-xs font-medium text-foreground'>
+              {userState.user.username}
             </span>
-            <ChevronDown
-              size={14}
-              className='text-xs text-semi-color-text-2 dark:text-gray-400'
-            />
-          </Button>
-        </Dropdown>
+          </span>
+          <ChevronDown
+            size={14}
+            className='text-muted'
+          />
+        </button>
+
+        {open ? (
+          // Font-size has to live on the wrapper div, not the buttons:
+          // `@heroui/styles` ships a global `button, input, textarea,
+          // select { font-size: inherit }` reset that's NOT inside any
+          // @layer, so per-CSS-Cascade-Layers it beats every Tailwind
+          // utility (including `text-sm` / `text-[14px]`). Buttons then
+          // inherit body's 16px and look oversized. Putting the size on
+          // the surrounding menu container side-steps the reset and the
+          // buttons inherit the intended 14px.
+          <div
+            role='menu'
+            aria-label={t('用户菜单')}
+            className='absolute right-0 top-full z-50 mt-2 min-w-40 rounded-xl border border-border bg-background p-1 text-[14px] leading-5 shadow-lg'
+          >
+            {menuItems.map((item) => (
+              <button
+                key={item.key}
+                type='button'
+                role='menuitem'
+                onClick={() => handleMenuAction(item)}
+                className={`flex w-full cursor-pointer items-center gap-2 rounded-md px-3 py-1.5 text-left transition-colors hover:bg-surface-secondary ${
+                  item.danger ? 'text-danger' : 'text-foreground'
+                }`}
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </button>
+            ))}
+          </div>
+        ) : null}
       </div>
     );
   } else {
     const showRegisterButton = !isSelfUseMode;
 
-    const commonSizingAndLayoutClass =
-      'flex items-center justify-center !py-[10px] !px-1.5';
-
-    const loginButtonSpecificStyling =
-      '!bg-semi-color-fill-0 dark:!bg-semi-color-fill-1 hover:!bg-semi-color-fill-1 dark:hover:!bg-gray-700 transition-colors';
-    let loginButtonClasses = `${commonSizingAndLayoutClass} ${loginButtonSpecificStyling}`;
-
-    let registerButtonClasses = `${commonSizingAndLayoutClass}`;
-
-    const loginButtonTextSpanClass =
-      '!text-xs !text-semi-color-text-1 dark:!text-gray-300 !p-1.5';
-    const registerButtonTextSpanClass = '!text-xs !text-white !p-1.5';
-
-    if (showRegisterButton) {
-      if (isMobile) {
-        loginButtonClasses += ' !rounded-full';
-      } else {
-        loginButtonClasses += ' !rounded-l-full !rounded-r-none';
-      }
-      registerButtonClasses += ' !rounded-r-full !rounded-l-none';
-    } else {
-      loginButtonClasses += ' !rounded-full';
-    }
-
     return (
       <div className='flex items-center'>
         <Link to='/login' className='flex'>
-          <Button
-            theme='borderless'
-            type='tertiary'
-            className={loginButtonClasses}
+          <span
+            className={`inline-flex h-9 items-center justify-center bg-surface-secondary px-3 text-xs font-medium text-foreground transition-colors hover:bg-surface-tertiary ${
+              showRegisterButton && !isMobile
+                ? 'rounded-l-full rounded-r-none'
+                : 'rounded-full'
+            }`}
           >
-            <span className={loginButtonTextSpanClass}>{t('登录')}</span>
-          </Button>
+            {t('登录')}
+          </span>
         </Link>
         {showRegisterButton && (
           <div className='hidden md:block'>
             <Link to='/register' className='flex -ml-px'>
-              <Button
-                theme='solid'
-                type='primary'
-                className={registerButtonClasses}
-              >
-                <span className={registerButtonTextSpanClass}>{t('注册')}</span>
-              </Button>
+              <span className='inline-flex h-9 items-center justify-center rounded-l-none rounded-r-full bg-primary px-3 text-xs font-medium text-white transition-opacity hover:opacity-90'>
+                {t('注册')}
+              </span>
             </Link>
           </div>
         )}
diff --git a/web/src/components/layout/headerbar/index.jsx b/web/src/components/layout/headerbar/index.jsx
index 81b51d7fe48..3f2e6247eee 100644
--- a/web/src/components/layout/headerbar/index.jsx
+++ b/web/src/components/layout/headerbar/index.jsx
@@ -17,7 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
+import React, { useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Navbar } from '@heroui-pro/react';
 import { useHeaderBar } from '../../../hooks/common/useHeaderBar';
 import { useNotifications } from '../../../hooks/common/useNotifications';
 import { useNavigation } from '../../../hooks/common/useNavigation';
@@ -25,14 +27,14 @@ import NoticeModal from '../NoticeModal';
 import MobileMenuButton from './MobileMenuButton';
 import HeaderLogo from './HeaderLogo';
 import Navigation from './Navigation';
+import MobileNavMenu from './MobileNavMenu';
 import ActionButtons from './ActionButtons';
 
-const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
+const HeaderBar = () => {
   const {
     userState,
     statusState,
     isMobile,
-    collapsed,
     logoLoaded,
     currentLang,
     isLoading,
@@ -49,10 +51,9 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
     logout,
     handleLanguageChange,
     handleThemeToggle,
-    handleMobileMenuToggle,
     navigate,
     t,
-  } = useHeaderBar({ onMobileMenuToggle, drawerOpen });
+  } = useHeaderBar();
 
   const {
     noticeVisible,
@@ -63,9 +64,30 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
   } = useNotifications(statusState);
 
   const { mainNavLinks } = useNavigation(t, docsLink, headerNavModules);
+  const { pathname } = useLocation();
+
+  // Bridge Navbar's `navigate` prop with react-router. External URLs are
+  // delegated to the browser (Navbar opens them in a new tab itself when the
+  // href starts with http(s)://) so we only intercept internal hrefs.
+  const handleNavbarNavigate = useCallback(
+    (href) => {
+      if (!href) return;
+      if (/^https?:\/\//i.test(href)) {
+        window.open(href, '_blank', 'noopener,noreferrer');
+        return;
+      }
+      navigate(href);
+    },
+    [navigate],
+  );
+
+  // Mobile menu (Navbar.MenuToggle + Navbar.Menu) only makes sense on public
+  // routes. On console routes the mobile menu is the sidebar drawer, which is
+  // toggled via `MobileMenuButton`.
+  const showMobileMenuToggle = !isConsoleRoute;
 
   return (
-    <header className='text-semi-color-text-0 sticky top-0 z-50 transition-colors duration-300 bg-white/75 dark:bg-zinc-900/75 backdrop-blur-lg'>
+    <>
       <NoticeModal
         visible={noticeVisible}
         onClose={handleNoticeClose}
@@ -74,18 +96,22 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
         unreadKeys={getUnreadKeys()}
       />
 
-      <div className='w-full px-2'>
-        <div className='flex items-center justify-between h-16'>
-          <div className='flex items-center'>
-            <MobileMenuButton
-              isConsoleRoute={isConsoleRoute}
-              isMobile={isMobile}
-              drawerOpen={drawerOpen}
-              collapsed={collapsed}
-              onToggle={handleMobileMenuToggle}
-              t={t}
-            />
+      <Navbar
+        position='static'
+        maxWidth='full'
+        shouldBlockScroll={false}
+        navigate={handleNavbarNavigate}
+        className='border-b border-border bg-background text-foreground'
+        aria-label={t('主导航')}
+      >
+        <Navbar.Header className='gap-2 px-2 md:gap-3 md:px-4'>
+          <MobileMenuButton
+            isConsoleRoute={isConsoleRoute}
+            isMobile={isMobile}
+            t={t}
+          />
 
+          <Navbar.Brand>
             <HeaderLogo
               isMobile={isMobile}
               isConsoleRoute={isConsoleRoute}
@@ -97,35 +123,52 @@ const HeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
               isDemoSiteMode={isDemoSiteMode}
               t={t}
             />
-          </div>
+          </Navbar.Brand>
 
           <Navigation
             mainNavLinks={mainNavLinks}
-            isMobile={isMobile}
             isLoading={isLoading}
             userState={userState}
             pricingRequireAuth={pricingRequireAuth}
+            pathname={pathname}
           />
 
-          <ActionButtons
-            isNewYear={isNewYear}
-            unreadCount={unreadCount}
-            onNoticeOpen={handleNoticeOpen}
-            theme={theme}
-            onThemeToggle={handleThemeToggle}
-            currentLang={currentLang}
-            onLanguageChange={handleLanguageChange}
+          <Navbar.Spacer />
+
+          <Navbar.Content className='gap-2 md:gap-3'>
+            <ActionButtons
+              isNewYear={isNewYear}
+              unreadCount={unreadCount}
+              onNoticeOpen={handleNoticeOpen}
+              theme={theme}
+              onThemeToggle={handleThemeToggle}
+              currentLang={currentLang}
+              onLanguageChange={handleLanguageChange}
+              userState={userState}
+              isLoading={isLoading}
+              isMobile={isMobile}
+              isSelfUseMode={isSelfUseMode}
+              logout={logout}
+              navigate={navigate}
+              t={t}
+            />
+          </Navbar.Content>
+
+          {showMobileMenuToggle && (
+            <Navbar.MenuToggle className='md:hidden' srLabel={t('打开菜单')} />
+          )}
+        </Navbar.Header>
+
+        {showMobileMenuToggle && (
+          <MobileNavMenu
+            mainNavLinks={mainNavLinks}
             userState={userState}
-            isLoading={isLoading}
-            isMobile={isMobile}
-            isSelfUseMode={isSelfUseMode}
-            logout={logout}
-            navigate={navigate}
-            t={t}
+            pricingRequireAuth={pricingRequireAuth}
+            pathname={pathname}
           />
-        </div>
-      </div>
-    </header>
+        )}
+      </Navbar>
+    </>
   );
 };
 
diff --git a/web/src/components/model-deployments/DeploymentAccessGuard.jsx b/web/src/components/model-deployments/DeploymentAccessGuard.jsx
index eef17b364fb..433954dd216 100644
--- a/web/src/components/model-deployments/DeploymentAccessGuard.jsx
+++ b/web/src/components/model-deployments/DeploymentAccessGuard.jsx
@@ -18,13 +18,11 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Button, Typography } from '@douyinfe/semi-ui';
+import { Button, Card, Spinner } from '@heroui/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Settings, Server, AlertCircle, WifiOff } from 'lucide-react';
 
-const { Title, Text } = Typography;
-
 const DeploymentAccessGuard = ({
   children,
   loading,
@@ -44,9 +42,12 @@ const DeploymentAccessGuard = ({
   if (loading) {
     return (
       <div className='mt-[60px] px-2'>
-        <Card loading={true} style={{ minHeight: '400px' }}>
-          <div style={{ textAlign: 'center', padding: '50px 0' }}>
-            <Text type='secondary'>{t('加载设置中...')}</Text>
+        <Card className='min-h-[400px] rounded-2xl border border-border bg-background/80 shadow-sm'>
+          <div className='flex flex-col items-center justify-center gap-3 py-20 text-center'>
+            <Spinner size='lg' />
+            <span className='text-sm text-muted'>
+              {t('加载设置中...')}
+            </span>
           </div>
         </Card>
       </div>
@@ -55,225 +56,63 @@ const DeploymentAccessGuard = ({
 
   if (!isEnabled) {
     return (
-      <div
-        className='mt-[60px] px-4'
-        style={{
-          minHeight: 'calc(100vh - 60px)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <div
-          style={{
-            maxWidth: '600px',
-            width: '100%',
-            textAlign: 'center',
-            padding: '0 20px',
-          }}
-        >
-          <Card
-            style={{
-              padding: '60px 40px',
-              borderRadius: '16px',
-              border: '1px solid var(--semi-color-border)',
-              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
-              background:
-                'linear-gradient(135deg, var(--semi-color-bg-0) 0%, var(--semi-color-fill-0) 100%)',
-            }}
-          >
-            {/* 图标区域 */}
-            <div style={{ marginBottom: '32px' }}>
-              <div
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: '120px',
-                  height: '120px',
-                  borderRadius: '50%',
-                  background:
-                    'linear-gradient(135deg, rgba(var(--semi-orange-4), 0.15) 0%, rgba(var(--semi-orange-5), 0.1) 100%)',
-                  border: '3px solid rgba(var(--semi-orange-4), 0.3)',
-                  marginBottom: '24px',
-                }}
-              >
-                <AlertCircle size={56} color='var(--semi-color-warning)' />
+      <div className='mt-[60px] flex min-h-[calc(100vh-60px)] items-center justify-center px-4'>
+        <div className='w-full max-w-2xl px-5 text-center'>
+          <Card className='rounded-[28px] border border-warning/30 bg-warning/5 p-10 shadow-[0_24px_80px_rgba(15,23,42,0.12)]'>
+            <div className='mb-8'>
+              <div className='mb-6 inline-flex h-28 w-28 items-center justify-center rounded-full border-4 border-warning/30 bg-warning/10 text-warning'>
+                <AlertCircle size={56} />
               </div>
             </div>
 
-            {/* 标题区域 */}
-            <div style={{ marginBottom: '24px' }}>
-              <Title
-                heading={2}
-                style={{
-                  color: 'var(--semi-color-text-0)',
-                  margin: '0 0 12px 0',
-                  fontSize: '28px',
-                  fontWeight: '700',
-                }}
-              >
+            <div className='mb-6'>
+              <h2 className='mb-3 text-3xl font-bold tracking-tight text-foreground'>
                 {t('模型部署服务未启用')}
-              </Title>
-              <Text
-                style={{
-                  fontSize: '18px',
-                  lineHeight: '1.6',
-                  color: 'var(--semi-color-text-1)',
-                  display: 'block',
-                }}
-              >
+              </h2>
+              <p className='text-lg leading-8 text-muted'>
                 {t('访问模型部署功能需要先启用 io.net 部署服务')}
-              </Text>
+              </p>
             </div>
 
-            {/* 配置要求区域 */}
-            <div
-              style={{
-                backgroundColor: 'var(--semi-color-bg-1)',
-                padding: '24px',
-                borderRadius: '12px',
-                border: '1px solid var(--semi-color-border)',
-                margin: '32px 0',
-                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.04)',
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  gap: '12px',
-                  marginBottom: '16px',
-                }}
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: '32px',
-                    height: '32px',
-                    borderRadius: '8px',
-                    backgroundColor: 'rgba(var(--semi-blue-4), 0.15)',
-                  }}
-                >
-                  <Server size={20} color='var(--semi-color-primary)' />
+            <div className='my-8 rounded-2xl border border-border bg-background/75 p-6 text-left shadow-sm'>
+              <div className='mb-4 flex items-center justify-center gap-3 text-center'>
+                <div className='flex h-9 w-9 items-center justify-center rounded-xl bg-primary/10 text-primary'>
+                  <Server size={20} />
                 </div>
-                <Text
-                  strong
-                  style={{
-                    fontSize: '16px',
-                    color: 'var(--semi-color-text-0)',
-                  }}
-                >
+                <span className='font-semibold text-foreground'>
                   {t('需要配置的项目')}
-                </Text>
+                </span>
               </div>
 
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: '12px',
-                  alignItems: 'flex-start',
-                  textAlign: 'left',
-                  maxWidth: '320px',
-                  margin: '0 auto',
-                }}
-              >
-                <div
-                  style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
-                >
-                  <div
-                    style={{
-                      width: '6px',
-                      height: '6px',
-                      borderRadius: '50%',
-                      backgroundColor: 'var(--semi-color-primary)',
-                      flexShrink: 0,
-                    }}
-                  ></div>
-                  <Text
-                    style={{
-                      fontSize: '15px',
-                      color: 'var(--semi-color-text-1)',
-                    }}
-                  >
+              <div className='mx-auto flex max-w-sm flex-col gap-3'>
+                <div className='flex items-center gap-3'>
+                  <span className='h-1.5 w-1.5 shrink-0 rounded-full bg-primary' />
+                  <span className='text-sm text-muted'>
                     {t('启用 io.net 部署开关')}
-                  </Text>
+                  </span>
                 </div>
-                <div
-                  style={{ display: 'flex', alignItems: 'center', gap: '12px' }}
-                >
-                  <div
-                    style={{
-                      width: '6px',
-                      height: '6px',
-                      borderRadius: '50%',
-                      backgroundColor: 'var(--semi-color-primary)',
-                      flexShrink: 0,
-                    }}
-                  ></div>
-                  <Text
-                    style={{
-                      fontSize: '15px',
-                      color: 'var(--semi-color-text-1)',
-                    }}
-                  >
+                <div className='flex items-center gap-3'>
+                  <span className='h-1.5 w-1.5 shrink-0 rounded-full bg-primary' />
+                  <span className='text-sm text-muted'>
                     {t('配置有效的 io.net API Key')}
-                  </Text>
+                  </span>
                 </div>
               </div>
             </div>
 
-            {/* 操作链接区域 */}
-            <div style={{ marginBottom: '20px' }}>
-              <div
-                onClick={handleGoToSettings}
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '8px',
-                  cursor: 'pointer',
-                  padding: '12px 24px',
-                  borderRadius: '8px',
-                  fontSize: '16px',
-                  fontWeight: '500',
-                  color: 'var(--semi-color-primary)',
-                  background: 'var(--semi-color-fill-0)',
-                  border: '1px solid var(--semi-color-border)',
-                  transition: 'all 0.2s ease',
-                  textDecoration: 'none',
-                }}
-                onMouseEnter={(e) => {
-                  e.currentTarget.style.background = 'var(--semi-color-fill-1)';
-                  e.currentTarget.style.transform = 'translateY(-1px)';
-                  e.currentTarget.style.boxShadow =
-                    '0 2px 8px rgba(0, 0, 0, 0.1)';
-                }}
-                onMouseLeave={(e) => {
-                  e.currentTarget.style.background = 'var(--semi-color-fill-0)';
-                  e.currentTarget.style.transform = 'translateY(0)';
-                  e.currentTarget.style.boxShadow = 'none';
-                }}
+            <div className='mb-5'>
+              <Button
+                variant='outline'
+                startContent={<Settings size={18} />}
+                onPress={handleGoToSettings}
               >
-                <Settings size={18} />
                 {t('前往设置页面')}
-              </div>
+              </Button>
             </div>
 
-            {/* 底部提示 */}
-            <Text
-              type='tertiary'
-              style={{
-                fontSize: '14px',
-                color: 'var(--semi-color-text-2)',
-                lineHeight: '1.5',
-              }}
-            >
+            <p className='text-sm leading-6 text-muted'>
               {t('配置完成后刷新页面即可使用模型部署功能')}
-            </Text>
+            </p>
           </Card>
         </div>
       </div>
@@ -283,9 +122,12 @@ const DeploymentAccessGuard = ({
   if (connectionLoading || (connectionOk === null && !connectionError)) {
     return (
       <div className='mt-[60px] px-2'>
-        <Card loading={true} style={{ minHeight: '400px' }}>
-          <div style={{ textAlign: 'center', padding: '50px 0' }}>
-            <Text type='secondary'>{t('正在检查 io.net 连接...')}</Text>
+        <Card className='min-h-[400px] rounded-2xl border border-border bg-background/80 shadow-sm'>
+          <div className='flex flex-col items-center justify-center gap-3 py-20 text-center'>
+            <Spinner size='lg' />
+            <span className='text-sm text-muted'>
+              {t('正在检查 io.net 连接...')}
+            </span>
           </div>
         </Card>
       </div>
@@ -301,101 +143,39 @@ const DeploymentAccessGuard = ({
     const detail = connectionError?.message || '';
 
     return (
-      <div
-        className='mt-[60px] px-4'
-        style={{
-          minHeight: 'calc(100vh - 60px)',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-        }}
-      >
-        <div
-          style={{
-            maxWidth: '600px',
-            width: '100%',
-            textAlign: 'center',
-            padding: '0 20px',
-          }}
-        >
-          <Card
-            style={{
-              padding: '60px 40px',
-              borderRadius: '16px',
-              border: '1px solid var(--semi-color-border)',
-              boxShadow: '0 4px 20px rgba(0, 0, 0, 0.08)',
-              background:
-                'linear-gradient(135deg, var(--semi-color-bg-0) 0%, var(--semi-color-fill-0) 100%)',
-            }}
-          >
-            <div style={{ marginBottom: '32px' }}>
-              <div
-                style={{
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  width: '120px',
-                  height: '120px',
-                  borderRadius: '50%',
-                  background:
-                    'linear-gradient(135deg, rgba(var(--semi-red-4), 0.15) 0%, rgba(var(--semi-red-5), 0.1) 100%)',
-                  border: '3px solid rgba(var(--semi-red-4), 0.3)',
-                  marginBottom: '24px',
-                }}
-              >
-                <WifiOff size={56} color='var(--semi-color-danger)' />
+      <div className='mt-[60px] flex min-h-[calc(100vh-60px)] items-center justify-center px-4'>
+        <div className='w-full max-w-2xl px-5 text-center'>
+          <Card className='rounded-[28px] border border-danger/30 bg-danger/5 p-10 shadow-[0_24px_80px_rgba(15,23,42,0.12)]'>
+            <div className='mb-8'>
+              <div className='mb-6 inline-flex h-28 w-28 items-center justify-center rounded-full border-4 border-danger/30 bg-danger/10 text-danger'>
+                <WifiOff size={56} />
               </div>
             </div>
 
-            <div style={{ marginBottom: '24px' }}>
-              <Title
-                heading={2}
-                style={{
-                  color: 'var(--semi-color-text-0)',
-                  margin: '0 0 12px 0',
-                  fontSize: '28px',
-                  fontWeight: '700',
-                }}
-              >
+            <div className='mb-6'>
+              <h2 className='mb-3 text-3xl font-bold tracking-tight text-foreground'>
                 {title}
-              </Title>
-              <Text
-                style={{
-                  fontSize: '18px',
-                  lineHeight: '1.6',
-                  color: 'var(--semi-color-text-1)',
-                  display: 'block',
-                }}
-              >
+              </h2>
+              <p className='text-lg leading-8 text-muted'>
                 {description}
-              </Text>
+              </p>
               {detail ? (
-                <Text
-                  type='tertiary'
-                  style={{
-                    fontSize: '14px',
-                    lineHeight: '1.5',
-                    display: 'block',
-                    marginTop: '8px',
-                  }}
-                >
+                <p className='mt-2 text-sm leading-6 text-muted'>
                   {detail}
-                </Text>
+                </p>
               ) : null}
             </div>
 
-            <div
-              style={{ display: 'flex', gap: '12px', justifyContent: 'center' }}
-            >
+            <div className='flex justify-center gap-3'>
               <Button
-                type='primary'
-                icon={<Settings size={18} />}
-                onClick={handleGoToSettings}
+                variant='primary'
+                startContent={<Settings size={18} />}
+                onPress={handleGoToSettings}
               >
                 {t('前往设置')}
               </Button>
               {onRetry ? (
-                <Button type='tertiary' onClick={onRetry}>
+                <Button variant='outline' onPress={onRetry}>
                   {t('重试连接')}
                 </Button>
               ) : null}
diff --git a/web/src/components/playground/ChatArea.jsx b/web/src/components/playground/ChatArea.jsx
index 2c65731f548..40335e3fc89 100644
--- a/web/src/components/playground/ChatArea.jsx
+++ b/web/src/components/playground/ChatArea.jsx
@@ -17,9 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import { Card, Chat, Typography, Button } from '@douyinfe/semi-ui';
-import { MessageSquare, Eye, EyeOff } from 'lucide-react';
+import React, { useEffect, useRef, useState } from 'react';
+import { Card, Button } from '@heroui/react';
+import { MessageSquare, Eye, EyeOff, Send, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import CustomInputRender from './CustomInputRender';
 
@@ -41,10 +41,60 @@ const ChatArea = ({
   renderChatBoxAction,
 }) => {
   const { t } = useTranslation();
+  const [draft, setDraft] = useState('');
+  const scrollRef = useRef(null);
 
-  const renderInputArea = React.useCallback((props) => {
-    return <CustomInputRender {...props} />;
-  }, []);
+  useEffect(() => {
+    const node = scrollRef.current;
+    if (node) {
+      node.scrollTop = node.scrollHeight;
+    }
+  }, [message]);
+
+  const handleSend = () => {
+    const next = draft.trim();
+    if (!next) return;
+    onMessageSend(next);
+    setDraft('');
+  };
+
+  const inputNode = (
+    <textarea
+      value={draft}
+      onChange={(event) => setDraft(event.target.value)}
+      onKeyDown={(event) => {
+        if (event.key === 'Enter' && !event.shiftKey) {
+          event.preventDefault();
+          handleSend();
+        }
+      }}
+      placeholder={t('请输入您的问题...')}
+      rows={1}
+      className='max-h-32 min-h-8 w-full resize-none bg-transparent text-sm text-foreground outline-none placeholder:text-muted'
+    />
+  );
+
+  const clearContextNode = (
+    <button
+      type='button'
+      aria-label={t('清空上下文')}
+      onClick={onClearMessages}
+      className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-surface-secondary text-muted transition hover:bg-danger hover:text-white'
+    >
+      <Trash2 size={14} />
+    </button>
+  );
+
+  const sendNode = (
+    <button
+      type='button'
+      aria-label={t('发送')}
+      onClick={handleSend}
+      className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-purple-500 text-white transition hover:bg-purple-600'
+    >
+      <Send size={14} />
+    </button>
+  );
 
   return (
     <Card
@@ -58,7 +108,7 @@ const ChatArea = ({
         overflow: 'hidden',
       }}
     >
-      {/* 聊天头部 */}
+      {/* Chat header */}
       {styleState.isMobile ? (
         <div className='pt-4'></div>
       ) : (
@@ -69,23 +119,22 @@ const ChatArea = ({
                 <MessageSquare size={20} className='text-white' />
               </div>
               <div>
-                <Typography.Title heading={5} className='!text-white mb-0'>
+                <h5 className='mb-0 text-xl font-semibold text-white'>
                   {t('AI 对话')}
-                </Typography.Title>
-                <Typography.Text className='!text-white/80 text-sm hidden sm:inline'>
+                </h5>
+                <span className='hidden text-sm text-white/80 sm:inline'>
                   {inputs.model || t('选择模型开始对话')}
-                </Typography.Text>
+                </span>
               </div>
             </div>
             <div className='flex items-center gap-2'>
               <Button
-                icon={showDebugPanel ? <EyeOff size={14} /> : <Eye size={14} />}
-                onClick={onToggleDebugPanel}
-                theme='borderless'
-                type='primary'
-                size='small'
-                className='!rounded-lg !text-white/80 hover:!text-white hover:!bg-white/10'
+                onPress={onToggleDebugPanel}
+                variant='ghost'
+                size='sm'
+                className='rounded-lg text-white/80 hover:bg-white/10 hover:text-white'
               >
+                {showDebugPanel ? <EyeOff size={14} /> : <Eye size={14} />}
                 {showDebugPanel ? t('隐藏调试') : t('显示调试')}
               </Button>
             </div>
@@ -93,33 +142,59 @@ const ChatArea = ({
         </div>
       )}
 
-      {/* 聊天内容区域 */}
-      <div className='flex-1 overflow-hidden'>
-        <Chat
-          ref={chatRef}
-          chatBoxRenderConfig={{
-            renderChatBoxContent: renderCustomChatContent,
-            renderChatBoxAction: renderChatBoxAction,
-            renderChatBoxTitle: () => null,
+      {/* Chat content */}
+      <div className='flex min-h-0 flex-1 flex-col overflow-hidden'>
+        <div
+          ref={(node) => {
+            scrollRef.current = node;
+            if (chatRef) {
+              chatRef.current = node;
+            }
           }}
-          renderInputArea={renderInputArea}
-          roleConfig={roleInfo}
-          style={{
-            height: '100%',
-            maxWidth: '100%',
-            overflow: 'hidden',
+          className='min-h-0 flex-1 space-y-3 overflow-y-auto p-3 sm:p-4'
+        >
+          {message.map((item, index) => {
+            const role = roleInfo[item.role] || { name: item.role };
+            const isUser = item.role === 'user';
+            return (
+              <div
+                key={item.id || index}
+                className={`rounded-2xl border p-4 shadow-sm ${
+                  isUser
+                    ? 'ml-auto max-w-[92%] border-blue-100 bg-blue-50/80 dark:border-blue-900/40 dark:bg-blue-950/30'
+                    : 'mr-auto max-w-[92%] border-border bg-background/80'
+                }`}
+              >
+                <div className='mb-2 flex items-center justify-between gap-3'>
+                  <div className='flex items-center gap-2 text-xs uppercase tracking-wide text-muted'>
+                    {role.avatar ? (
+                      <img
+                        src={role.avatar}
+                        alt=''
+                        className='h-5 w-5 rounded-full'
+                      />
+                    ) : null}
+                    {role.name}
+                  </div>
+                  {renderChatBoxAction?.({ message: item })}
+                </div>
+                {renderCustomChatContent({
+                  message: item,
+                  className: 'text-sm leading-6',
+                })}
+              </div>
+            );
+          })}
+        </div>
+
+        <CustomInputRender
+          detailProps={{
+            clearContextNode,
+            uploadNode: null,
+            inputNode,
+            sendNode,
+            onClick: () => {},
           }}
-          chats={message}
-          onMessageSend={onMessageSend}
-          onMessageCopy={onMessageCopy}
-          onMessageReset={onMessageReset}
-          onMessageDelete={onMessageDelete}
-          showClearContext
-          showStopGenerate
-          onStopGenerator={onStopGenerator}
-          onClear={onClearMessages}
-          className='h-full'
-          placeholder={t('请输入您的问题...')}
         />
       </div>
     </Card>
diff --git a/web/src/components/playground/CodeViewer.jsx b/web/src/components/playground/CodeViewer.jsx
index b34c647fed4..da17ee0ef01 100644
--- a/web/src/components/playground/CodeViewer.jsx
+++ b/web/src/components/playground/CodeViewer.jsx
@@ -18,15 +18,15 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { Button, Tooltip, Toast } from '@douyinfe/semi-ui';
+import { Button, Tooltip } from '@heroui/react';
 import { Copy, ChevronDown, ChevronUp } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { copy } from '../../helpers';
+import { copy, showError, showSuccess } from '../../helpers';
 
 const PERFORMANCE_CONFIG = {
-  MAX_DISPLAY_LENGTH: 50000, // 最大显示字符数
-  PREVIEW_LENGTH: 5000, // 预览长度
-  VERY_LARGE_MULTIPLIER: 2, // 超大内容倍数
+  MAX_DISPLAY_LENGTH: 50000, // Maximum display length.
+  PREVIEW_LENGTH: 5000, // Preview length.
+  VERY_LARGE_MULTIPLIER: 2, // Very large content multiplier.
 };
 
 const codeThemeStyles = {
@@ -74,7 +74,7 @@ const codeThemeStyles = {
     color: '#666',
     fontSize: '14px',
     fontStyle: 'italic',
-    backgroundColor: 'var(--semi-color-fill-0)',
+    backgroundColor: 'rgba(148, 163, 184, 0.08)',
     borderRadius: '8px',
   },
   performanceWarning: {
@@ -201,7 +201,7 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
     }
     return (
       formattedContent.substring(0, PERFORMANCE_CONFIG.PREVIEW_LENGTH) +
-      '\n\n// ... 内容被截断以提升性能 ...'
+      '\n\n// ... Content truncated for performance ...'
     );
   }, [formattedContent, contentMetrics.isLarge, isExpanded]);
 
@@ -230,14 +230,14 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
 
       const success = await copy(textToCopy);
       setCopied(true);
-      Toast.success(t('已复制到剪贴板'));
+      showSuccess(t('已复制到剪贴板'));
       setTimeout(() => setCopied(false), 2000);
 
       if (!success) {
         throw new Error('Copy operation failed');
       }
     } catch (err) {
-      Toast.error(t('复制失败'));
+      showError(t('复制失败'));
       console.error('Copy failed:', err);
     }
   }, [content, t]);
@@ -274,7 +274,7 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
 
   return (
     <div style={codeThemeStyles.container} className='h-full'>
-      {/* 性能警告 */}
+      {/* Performance warning */}
       {contentMetrics.isLarge && (
         <div style={codeThemeStyles.performanceWarning}>
           <span>⚡</span>
@@ -286,7 +286,7 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
         </div>
       )}
 
-      {/* 复制按钮 */}
+      {/* Copy button */}
       <div
         style={{
           ...codeThemeStyles.actionButton,
@@ -299,21 +299,24 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
       >
         <Tooltip content={copied ? t('已复制') : t('复制代码')}>
           <Button
-            icon={<Copy size={14} />}
-            onClick={handleCopy}
-            size='small'
-            theme='borderless'
+            isIconOnly
+            onPress={handleCopy}
+            size='sm'
+            variant='ghost'
             style={{
               backgroundColor: 'transparent',
               border: 'none',
               color: copied ? '#4ade80' : '#d4d4d4',
               padding: '6px',
             }}
-          />
+            aria-label={t('复制代码')}
+          >
+            <Copy size={14} />
+          </Button>
         </Tooltip>
       </div>
 
-      {/* 代码内容 */}
+      {/* Code content */}
       <div
         style={{
           ...codeThemeStyles.content,
@@ -351,7 +354,7 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
         )}
       </div>
 
-      {/* 展开/收起按钮 */}
+      {/* Expand/collapse button */}
       {contentMetrics.isLarge && !isProcessing && (
         <div
           style={{
@@ -363,12 +366,9 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
         >
           <Tooltip content={isExpanded ? t('收起内容') : t('显示完整内容')}>
             <Button
-              icon={
-                isExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />
-              }
-              onClick={handleToggleExpand}
-              size='small'
-              theme='borderless'
+              onPress={handleToggleExpand}
+              size='sm'
+              variant='ghost'
               style={{
                 backgroundColor: 'transparent',
                 border: 'none',
@@ -376,6 +376,7 @@ const CodeViewer = ({ content, title, language = 'json' }) => {
                 padding: '6px 12px',
               }}
             >
+              {isExpanded ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
               {isExpanded ? t('收起') : t('展开')}
               {!isExpanded && (
                 <span
diff --git a/web/src/components/playground/ConfigManager.jsx b/web/src/components/playground/ConfigManager.jsx
index 7eaa35b8ae9..1c3126e58b9 100644
--- a/web/src/components/playground/ConfigManager.jsx
+++ b/web/src/components/playground/ConfigManager.jsx
@@ -18,9 +18,10 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useRef } from 'react';
-import { Button, Typography, Toast, Modal, Dropdown } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import { Download, Upload, RotateCcw, Settings2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import { showError, showSuccess } from '../../helpers';
 import {
   exportConfig,
   importConfig,
@@ -41,7 +42,7 @@ const ConfigManager = ({
 
   const handleExport = () => {
     try {
-      // 在导出前先保存当前配置，确保导出的是最新内容
+      // Persist the current config before exporting so the file is up to date.
       const configWithTimestamp = {
         ...currentConfig,
         timestamp: new Date().toISOString(),
@@ -52,15 +53,9 @@ const ConfigManager = ({
       );
 
       exportConfig(currentConfig, messages);
-      Toast.success({
-        content: t('配置已导出到下载文件夹'),
-        duration: 3,
-      });
+      showSuccess(t('配置已导出到下载文件夹'));
     } catch (error) {
-      Toast.error({
-        content: t('导出配置失败: ') + error.message,
-        duration: 3,
-      });
+      showError(t('导出配置失败: ') + error.message);
     }
   };
 
@@ -75,72 +70,37 @@ const ConfigManager = ({
     try {
       const importedConfig = await importConfig(file);
 
-      Modal.confirm({
-        title: t('确认导入配置'),
-        content: t('导入的配置将覆盖当前设置，是否继续？'),
-        okText: t('确定导入'),
-        cancelText: t('取消'),
-        onOk: () => {
-          onConfigImport(importedConfig);
-          Toast.success({
-            content: t('配置导入成功'),
-            duration: 3,
-          });
-        },
-      });
+      const shouldImport = window.confirm(t('导入的配置将覆盖当前设置，是否继续？'));
+      if (shouldImport) {
+        onConfigImport(importedConfig);
+        showSuccess(t('配置导入成功'));
+      }
     } catch (error) {
-      Toast.error({
-        content: t('导入配置失败: ') + error.message,
-        duration: 3,
-      });
+      showError(t('导入配置失败: ') + error.message);
     } finally {
-      // 重置文件输入，允许重复选择同一文件
+      // Reset file input so the same file can be selected again.
       event.target.value = '';
     }
   };
 
   const handleReset = () => {
-    Modal.confirm({
-      title: t('重置配置'),
-      content: t(
-        '将清除所有保存的配置并恢复默认设置，此操作不可撤销。是否继续？',
+    const shouldReset = window.confirm(
+      t('将清除所有保存的配置并恢复默认设置，此操作不可撤销。是否继续？'),
+    );
+    if (!shouldReset) return;
+    // "OK" means reset messages too, "Cancel" keeps messages.
+    const resetMessages = window.confirm(
+      t(
+        '是否同时重置对话消息？选择"确定"将清空所有对话记录并恢复默认示例；选择"取消"将保留当前对话记录。',
       ),
-      okText: t('确定重置'),
-      cancelText: t('取消'),
-      okButtonProps: {
-        type: 'danger',
-      },
-      onOk: () => {
-        // 询问是否同时重置消息
-        Modal.confirm({
-          title: t('重置选项'),
-          content: t(
-            '是否同时重置对话消息？选择"是"将清空所有对话记录并恢复默认示例；选择"否"将保留当前对话记录。',
-          ),
-          okText: t('同时重置消息'),
-          cancelText: t('仅重置配置'),
-          okButtonProps: {
-            type: 'danger',
-          },
-          onOk: () => {
-            clearConfig();
-            onConfigReset({ resetMessages: true });
-            Toast.success({
-              content: t('配置和消息已全部重置'),
-              duration: 3,
-            });
-          },
-          onCancel: () => {
-            clearConfig();
-            onConfigReset({ resetMessages: false });
-            Toast.success({
-              content: t('配置已重置，对话消息已保留'),
-              duration: 3,
-            });
-          },
-        });
-      },
-    });
+    );
+    clearConfig();
+    onConfigReset({ resetMessages });
+    showSuccess(
+      resetMessages
+        ? t('配置和消息已全部重置')
+        : t('配置已重置，对话消息已保留'),
+    );
   };
 
   const getConfigStatus = () => {
@@ -155,63 +115,42 @@ const ConfigManager = ({
     return t('暂无保存的配置');
   };
 
-  const dropdownItems = [
-    {
-      node: 'item',
-      name: 'export',
-      onClick: handleExport,
-      children: (
-        <div className='flex items-center gap-2'>
-          <Download size={14} />
-          {t('导出配置')}
-        </div>
-      ),
-    },
-    {
-      node: 'item',
-      name: 'import',
-      onClick: handleImportClick,
-      children: (
-        <div className='flex items-center gap-2'>
-          <Upload size={14} />
-          {t('导入配置')}
-        </div>
-      ),
-    },
-    {
-      node: 'divider',
-    },
-    {
-      node: 'item',
-      name: 'reset',
-      onClick: handleReset,
-      children: (
-        <div className='flex items-center gap-2 text-red-600'>
-          <RotateCcw size={14} />
-          {t('重置配置')}
-        </div>
-      ),
-    },
-  ];
-
   if (styleState.isMobile) {
-    // 移动端显示简化的下拉菜单
+    // Mobile uses compact icon actions.
     return (
       <>
-        <Dropdown
-          trigger='click'
-          position='bottomLeft'
-          showTick
-          menu={dropdownItems}
-        >
+        <div className='flex items-center gap-1'>
+          <Button
+            isIconOnly
+            variant='ghost'
+            size='sm'
+            className='rounded-lg text-muted hover:text-primary'
+            onPress={handleExport}
+            aria-label={t('导出配置')}
+          >
+            <Download size={14} />
+          </Button>
+          <Button
+            isIconOnly
+            variant='ghost'
+            size='sm'
+            className='rounded-lg text-muted hover:text-primary'
+            onPress={handleImportClick}
+            aria-label={t('导入配置')}
+          >
+            <Upload size={14} />
+          </Button>
           <Button
-            icon={<Settings2 size={14} />}
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            className='!rounded-lg !text-gray-600 hover:!text-blue-600 hover:!bg-blue-50'
-          />
-        </Dropdown>
+            isIconOnly
+            variant='danger-soft'
+            size='sm'
+            className='rounded-lg'
+            onPress={handleReset}
+            aria-label={t('重置配置')}
+          >
+            <Settings2 size={14} />
+          </Button>
+        </div>
 
         <input
           ref={fileInputRef}
@@ -224,45 +163,45 @@ const ConfigManager = ({
     );
   }
 
-  // 桌面端显示紧凑的按钮组
+  // Desktop shows a compact action group.
   return (
     <div className='space-y-3'>
-      {/* 配置状态信息和重置按钮 */}
+      {/* Config status and reset action */}
       <div className='flex items-center justify-between'>
-        <Typography.Text className='text-xs text-gray-500'>
+        <span className='text-xs text-muted'>
           {getConfigStatus()}
-        </Typography.Text>
+        </span>
         <Button
-          icon={<RotateCcw size={12} />}
-          size='small'
-          theme='borderless'
-          type='danger'
-          onClick={handleReset}
-          className='!rounded-full !text-xs !px-2'
-        />
+          isIconOnly
+          size='sm'
+          variant='danger-soft'
+          onPress={handleReset}
+          className='h-6 min-w-6 rounded-full px-2 text-xs'
+          aria-label={t('重置配置')}
+        >
+          <RotateCcw size={12} />
+        </Button>
       </div>
 
-      {/* 导出和导入按钮 */}
+      {/* Export and import actions */}
       <div className='flex gap-2'>
         <Button
-          icon={<Download size={12} />}
-          size='small'
-          theme='solid'
-          type='primary'
-          onClick={handleExport}
-          className='!rounded-lg flex-1 !text-xs !h-7'
+          size='sm'
+          variant='primary'
+          onPress={handleExport}
+          className='h-7 flex-1 rounded-lg text-xs'
         >
+          <Download size={12} />
           {t('导出')}
         </Button>
 
         <Button
-          icon={<Upload size={12} />}
-          size='small'
-          theme='outline'
-          type='primary'
-          onClick={handleImportClick}
-          className='!rounded-lg flex-1 !text-xs !h-7'
+          size='sm'
+          variant='outline'
+          onPress={handleImportClick}
+          className='h-7 flex-1 rounded-lg text-xs'
         >
+          <Upload size={12} />
           {t('导入')}
         </Button>
       </div>
diff --git a/web/src/components/playground/CustomInputRender.jsx b/web/src/components/playground/CustomInputRender.jsx
index c995773a7f8..50d3484304d 100644
--- a/web/src/components/playground/CustomInputRender.jsx
+++ b/web/src/components/playground/CustomInputRender.jsx
@@ -18,9 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useRef, useEffect, useCallback } from 'react';
-import { Toast } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 import { usePlayground } from '../../contexts/PlaygroundContext';
+import { showError, showSuccess, showWarning } from '../../helpers';
 
 const CustomInputRender = (props) => {
   const { t } = useTranslation();
@@ -45,10 +45,7 @@ const CustomInputRender = (props) => {
           if (file) {
             try {
               if (!imageEnabled) {
-                Toast.warning({
-                  content: t('请先在设置中启用图片功能'),
-                  duration: 3,
-                });
+                showWarning(t('请先在设置中启用图片功能'));
                 return;
               }
 
@@ -58,31 +55,19 @@ const CustomInputRender = (props) => {
 
                 if (onPasteImage) {
                   onPasteImage(base64);
-                  Toast.success({
-                    content: t('图片已添加'),
-                    duration: 2,
-                  });
+                  showSuccess(t('图片已添加'));
                 } else {
-                  Toast.error({
-                    content: t('无法添加图片'),
-                    duration: 2,
-                  });
+                  showError(t('无法添加图片'));
                 }
               };
               reader.onerror = () => {
                 console.error('Failed to read image file:', reader.error);
-                Toast.error({
-                  content: t('粘贴图片失败'),
-                  duration: 2,
-                });
+                showError(t('粘贴图片失败'));
               };
               reader.readAsDataURL(file);
             } catch (error) {
               console.error('Failed to paste image:', error);
-              Toast.error({
-                content: t('粘贴图片失败'),
-                duration: 2,
-              });
+              showError(t('粘贴图片失败'));
             }
           }
           break;
@@ -102,10 +87,10 @@ const CustomInputRender = (props) => {
     };
   }, [handlePaste]);
 
-  // 清空按钮
+  // Clear button.
   const styledClearNode = clearContextNode
     ? React.cloneElement(clearContextNode, {
-        className: `!rounded-full !bg-gray-100 hover:!bg-red-500 hover:!text-white flex-shrink-0 transition-all ${clearContextNode.props.className || ''}`,
+        className: `!rounded-full !bg-surface-secondary hover:!bg-danger hover:!text-white flex-shrink-0 transition-all ${clearContextNode.props.className || ''}`,
         style: {
           ...clearContextNode.props.style,
           width: '32px',
@@ -119,7 +104,7 @@ const CustomInputRender = (props) => {
       })
     : null;
 
-  // 发送按钮
+  // Send button.
   const styledSendNode = React.cloneElement(sendNode, {
     className: `!rounded-full !bg-purple-500 hover:!bg-purple-600 flex-shrink-0 transition-all ${sendNode.props.className || ''}`,
     style: {
@@ -137,15 +122,14 @@ const CustomInputRender = (props) => {
   return (
     <div className='p-2 sm:p-4' ref={containerRef}>
       <div
-        className='flex items-center gap-2 sm:gap-3 p-2 bg-gray-50 rounded-xl sm:rounded-2xl shadow-sm hover:shadow-md transition-shadow'
-        style={{ border: '1px solid var(--semi-color-border)' }}
+        className='flex items-center gap-2 rounded-xl border border-border bg-surface-secondary p-2 shadow-sm transition-shadow hover:shadow-md sm:gap-3 sm:rounded-2xl'
         onClick={onClick}
         title={t('支持 Ctrl+V 粘贴图片')}
       >
-        {/* 清空对话按钮 - 左边 */}
+        {/* Clear conversation button, left side. */}
         {styledClearNode}
         <div className='flex-1'>{inputNode}</div>
-        {/* 发送按钮 - 右边 */}
+        {/* Send button, right side. */}
         {styledSendNode}
       </div>
     </div>
diff --git a/web/src/components/playground/CustomRequestEditor.jsx b/web/src/components/playground/CustomRequestEditor.jsx
index 68f0ae87195..a57ebf2e3f3 100644
--- a/web/src/components/playground/CustomRequestEditor.jsx
+++ b/web/src/components/playground/CustomRequestEditor.jsx
@@ -18,13 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useEffect } from 'react';
-import {
-  TextArea,
-  Typography,
-  Button,
-  Switch,
-  Banner,
-} from '@douyinfe/semi-ui';
+import { Button, Switch } from '@heroui/react';
 import { Code, Edit, Check, X, AlertTriangle } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
@@ -40,7 +34,7 @@ const CustomRequestEditor = ({
   const [errorMessage, setErrorMessage] = useState('');
   const [localValue, setLocalValue] = useState(customRequestBody || '');
 
-  // 当切换到自定义模式时，用默认payload初始化
+  // Initialize with the default payload when custom mode is enabled.
   useEffect(() => {
     if (
       customRequestMode &&
@@ -59,7 +53,7 @@ const CustomRequestEditor = ({
     onCustomRequestBodyChange,
   ]);
 
-  // 同步外部传入的customRequestBody到本地状态
+  // Sync external customRequestBody into local state.
   useEffect(() => {
     if (customRequestBody !== localValue) {
       setLocalValue(customRequestBody || '');
@@ -67,7 +61,7 @@ const CustomRequestEditor = ({
     }
   }, [customRequestBody]);
 
-  // 验证JSON格式
+  // Validate JSON format.
   const validateJson = (value) => {
     if (!value.trim()) {
       setIsValid(true);
@@ -90,7 +84,7 @@ const CustomRequestEditor = ({
   const handleValueChange = (value) => {
     setLocalValue(value);
     validateJson(value);
-    // 始终保存用户输入，让预览逻辑处理JSON解析错误
+    // Always save user input and let preview logic handle JSON parsing errors.
     onCustomRequestBodyChange(value);
   };
 
@@ -112,101 +106,100 @@ const CustomRequestEditor = ({
       setIsValid(true);
       setErrorMessage('');
     } catch (error) {
-      // 如果格式化失败，保持原样
+      // Keep the original value when formatting fails.
     }
   };
 
   return (
     <div className='space-y-4'>
-      {/* 自定义模式开关 */}
+      {/* Custom mode switch */}
       <div className='flex items-center justify-between'>
         <div className='flex items-center gap-2'>
-          <Code size={16} className='text-gray-500' />
-          <Typography.Text strong className='text-sm'>
+          <Code size={16} className='text-muted' />
+          <span className='text-sm font-semibold text-foreground'>
             {t('自定义请求体模式')}
-          </Typography.Text>
+          </span>
         </div>
         <Switch
-          checked={customRequestMode}
+          isSelected={customRequestMode}
           onChange={handleModeToggle}
-          checkedText={t('开')}
-          uncheckedText={t('关')}
-          size='small'
-        />
+          aria-label={t('自定义请求体模式')}
+          size='sm'
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
       </div>
 
       {customRequestMode && (
         <>
-          {/* 提示信息 */}
-          <Banner
-            type='warning'
-            description={t(
-              '启用此模式后，将使用您自定义的请求体发送API请求，模型配置面板的参数设置将被忽略。',
-            )}
-            icon={<AlertTriangle size={16} />}
-            className='!rounded-lg'
-            closeIcon={null}
-          />
+          {/* Help text */}
+          <div className='flex gap-3 rounded-lg border border-warning/30 bg-warning/10 p-3 text-sm text-warning'>
+            <AlertTriangle className='mt-0.5 shrink-0' size={16} />
+            <span>
+              {t(
+                '启用此模式后，将使用您自定义的请求体发送API请求，模型配置面板的参数设置将被忽略。',
+              )}
+            </span>
+          </div>
 
-          {/* JSON编辑器 */}
+          {/* JSON editor */}
           <div>
             <div className='flex items-center justify-between mb-2'>
-              <Typography.Text strong className='text-sm'>
+              <span className='text-sm font-semibold text-foreground'>
                 {t('请求体 JSON')}
-              </Typography.Text>
+              </span>
               <div className='flex items-center gap-2'>
                 {isValid ? (
                   <div className='flex items-center gap-1 text-green-600'>
                     <Check size={14} />
-                    <Typography.Text className='text-xs'>
-                      {t('格式正确')}
-                    </Typography.Text>
+                    <span className='text-xs'>{t('格式正确')}</span>
                   </div>
                 ) : (
                   <div className='flex items-center gap-1 text-red-600'>
                     <X size={14} />
-                    <Typography.Text className='text-xs'>
-                      {t('格式错误')}
-                    </Typography.Text>
+                    <span className='text-xs'>{t('格式错误')}</span>
                   </div>
                 )}
                 <Button
-                  theme='borderless'
-                  type='tertiary'
-                  size='small'
-                  icon={<Edit size={14} />}
-                  onClick={formatJson}
-                  disabled={!isValid}
-                  className='!rounded-lg'
+                  variant='ghost'
+                  size='sm'
+                  onPress={formatJson}
+                  isDisabled={!isValid}
+                  className='rounded-lg'
                 >
+                  <Edit size={14} />
                   {t('格式化')}
                 </Button>
               </div>
             </div>
 
-            <TextArea
+            <textarea
               value={localValue}
-              onChange={handleValueChange}
+              onChange={(event) => handleValueChange(event.target.value)}
               placeholder='{"model": "gpt-4o", "messages": [...], ...}'
-              autosize={{ minRows: 8, maxRows: 20 }}
-              className={`custom-request-textarea !rounded-lg font-mono text-sm ${!isValid ? '!border-red-500' : ''}`}
+              rows={8}
+              className={`custom-request-textarea w-full rounded-lg border bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-accent ${!isValid ? 'border-red-500' : 'border-border'}`}
               style={{
                 fontFamily: 'Consolas, Monaco, "Courier New", monospace',
                 lineHeight: '1.5',
+                maxHeight: 320,
+                resize: 'vertical',
               }}
             />
 
             {!isValid && errorMessage && (
-              <Typography.Text type='danger' className='text-xs mt-1 block'>
+              <span className='mt-1 block text-xs text-danger'>
                 {errorMessage}
-              </Typography.Text>
+              </span>
             )}
 
-            <Typography.Text className='text-xs text-gray-500 mt-2 block'>
+            <span className='mt-2 block text-xs text-muted'>
               {t(
                 '请输入有效的JSON格式的请求体。您可以参考预览面板中的默认请求体格式。',
               )}
-            </Typography.Text>
+            </span>
           </div>
         </>
       )}
diff --git a/web/src/components/playground/DebugPanel.jsx b/web/src/components/playground/DebugPanel.jsx
index 28de0153b1d..62a69c08fdb 100644
--- a/web/src/components/playground/DebugPanel.jsx
+++ b/web/src/components/playground/DebugPanel.jsx
@@ -18,14 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useEffect } from 'react';
-import {
-  Card,
-  Typography,
-  Tabs,
-  TabPane,
-  Button,
-  Dropdown,
-} from '@douyinfe/semi-ui';
+import { Card, Button } from '@heroui/react';
 import { Code, Zap, Clock, X, Eye, Send } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import CodeViewer from './CodeViewer';
@@ -52,49 +45,54 @@ const DebugPanel = ({
     onActiveDebugTabChange(key);
   };
 
-  const renderArrow = (items, pos, handleArrowClick, defaultNode) => {
-    const style = {
-      width: 32,
-      height: 32,
-      margin: '0 12px',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderRadius: '100%',
-      background: 'rgba(var(--semi-grey-1), 1)',
-      color: 'var(--semi-color-text)',
-      cursor: 'pointer',
-    };
-
-    return (
-      <Dropdown
-        render={
-          <Dropdown.Menu>
-            {items.map((item) => {
-              return (
-                <Dropdown.Item
-                  key={item.itemKey}
-                  onClick={() => handleTabChange(item.itemKey)}
-                >
-                  {item.tab}
-                </Dropdown.Item>
-              );
-            })}
-          </Dropdown.Menu>
-        }
-      >
-        {pos === 'start' ? (
-          <div style={style} onClick={handleArrowClick}>
-            ←
-          </div>
+  const tabs = [
+    {
+      key: 'preview',
+      label: t('预览请求体'),
+      icon: <Eye size={16} />,
+      badge: customRequestMode ? t('自定义') : null,
+      content: (
+        <CodeViewer
+          content={debugData.previewRequest}
+          title='preview'
+          language='json'
+        />
+      ),
+    },
+    {
+      key: 'request',
+      label: t('实际请求体'),
+      icon: <Send size={16} />,
+      content: (
+        <CodeViewer
+          content={debugData.request}
+          title='request'
+          language='json'
+        />
+      ),
+    },
+    {
+      key: 'response',
+      label: t('响应'),
+      icon: <Zap size={16} />,
+      badge:
+        debugData.sseMessages && debugData.sseMessages.length > 0
+          ? `SSE (${debugData.sseMessages.length})`
+          : null,
+      content:
+        debugData.sseMessages && debugData.sseMessages.length > 0 ? (
+          <SSEViewer sseData={debugData.sseMessages} title='response' />
         ) : (
-          <div style={style} onClick={handleArrowClick}>
-            →
-          </div>
-        )}
-      </Dropdown>
-    );
-  };
+          <CodeViewer
+            content={debugData.response}
+            title='response'
+            language='json'
+          />
+        ),
+    },
+  ];
+
+  const activeTab = tabs.find((tab) => tab.key === activeKey) || tabs[0];
 
   return (
     <Card
@@ -112,108 +110,65 @@ const DebugPanel = ({
           <div className='w-10 h-10 rounded-full bg-gradient-to-r from-green-500 to-blue-500 flex items-center justify-center mr-3'>
             <Code size={20} className='text-white' />
           </div>
-          <Typography.Title heading={5} className='mb-0'>
+          <h5 className='mb-0 text-xl font-semibold text-foreground'>
             {t('调试信息')}
-          </Typography.Title>
+          </h5>
         </div>
 
         {styleState.isMobile && onCloseDebugPanel && (
           <Button
-            icon={<X size={16} />}
-            onClick={onCloseDebugPanel}
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            className='!rounded-lg'
-          />
+            isIconOnly
+            onPress={onCloseDebugPanel}
+            variant='ghost'
+            size='sm'
+            className='rounded-lg'
+            aria-label={t('关闭调试面板')}
+          >
+            <X size={16} />
+          </Button>
         )}
       </div>
 
-      <div className='flex-1 overflow-hidden debug-panel'>
-        <Tabs
-          renderArrow={renderArrow}
-          type='card'
-          collapsible
-          className='h-full'
-          style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
-          activeKey={activeKey}
-          onChange={handleTabChange}
-        >
-          <TabPane
-            tab={
-              <div className='flex items-center gap-2'>
-                <Eye size={16} />
-                {t('预览请求体')}
-                {customRequestMode && (
-                  <span className='px-1.5 py-0.5 text-xs bg-orange-100 text-orange-600 rounded-full'>
-                    自定义
-                  </span>
-                )}
-              </div>
-            }
-            itemKey='preview'
-          >
-            <CodeViewer
-              content={debugData.previewRequest}
-              title='preview'
-              language='json'
-            />
-          </TabPane>
-
-          <TabPane
-            tab={
-              <div className='flex items-center gap-2'>
-                <Send size={16} />
-                {t('实际请求体')}
-              </div>
-            }
-            itemKey='request'
-          >
-            <CodeViewer
-              content={debugData.request}
-              title='request'
-              language='json'
-            />
-          </TabPane>
-
-          <TabPane
-            tab={
-              <div className='flex items-center gap-2'>
-                <Zap size={16} />
-                {t('响应')}
-                {debugData.sseMessages && debugData.sseMessages.length > 0 && (
-                  <span className='px-1.5 py-0.5 text-xs bg-blue-100 text-blue-600 rounded-full'>
-                    SSE ({debugData.sseMessages.length})
+      <div className='flex min-h-0 flex-1 flex-col overflow-hidden debug-panel'>
+        <div className='mb-3 flex flex-wrap gap-2'>
+          {tabs.map((tab) => {
+            const selected = tab.key === activeKey;
+            return (
+              <button
+                key={tab.key}
+                type='button'
+                className={`flex items-center gap-2 rounded-full px-3 py-1.5 text-sm transition ${
+                  selected
+                    ? 'bg-foreground text-background'
+                    : 'bg-surface-secondary text-muted hover:bg-surface-secondary/80'
+                }`}
+                onClick={() => handleTabChange(tab.key)}
+              >
+                {tab.icon}
+                {tab.label}
+                {tab.badge ? (
+                  <span className='rounded-full bg-white/20 px-1.5 py-0.5 text-xs'>
+                    {tab.badge}
                   </span>
-                )}
-              </div>
-            }
-            itemKey='response'
-          >
-            {debugData.sseMessages && debugData.sseMessages.length > 0 ? (
-              <SSEViewer sseData={debugData.sseMessages} title='response' />
-            ) : (
-              <CodeViewer
-                content={debugData.response}
-                title='response'
-                language='json'
-              />
-            )}
-          </TabPane>
-        </Tabs>
+                ) : null}
+              </button>
+            );
+          })}
+        </div>
+        <div className='min-h-0 flex-1 overflow-hidden'>{activeTab.content}</div>
       </div>
 
       <div className='flex items-center justify-between mt-4 pt-4 flex-shrink-0'>
         {(debugData.timestamp || debugData.previewTimestamp) && (
           <div className='flex items-center gap-2'>
-            <Clock size={14} className='text-gray-500' />
-            <Typography.Text className='text-xs text-gray-500'>
+            <Clock size={14} className='text-muted' />
+            <span className='text-xs text-muted'>
               {activeKey === 'preview' && debugData.previewTimestamp
                 ? `${t('预览更新')}: ${new Date(debugData.previewTimestamp).toLocaleString()}`
                 : debugData.timestamp
                   ? `${t('最后请求')}: ${new Date(debugData.timestamp).toLocaleString()}`
                   : ''}
-            </Typography.Text>
+            </span>
           </div>
         )}
       </div>
diff --git a/web/src/components/playground/FloatingButtons.jsx b/web/src/components/playground/FloatingButtons.jsx
index 3d024df4cd7..36219757c24 100644
--- a/web/src/components/playground/FloatingButtons.jsx
+++ b/web/src/components/playground/FloatingButtons.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import { Settings, Eye, EyeOff } from 'lucide-react';
 
 const FloatingButtons = ({
@@ -32,10 +32,10 @@ const FloatingButtons = ({
 
   return (
     <>
-      {/* 设置按钮 */}
+      {/* Settings button */}
       {!showSettings && (
         <Button
-          icon={<Settings size={18} />}
+          isIconOnly
           style={{
             position: 'fixed',
             right: 16,
@@ -48,20 +48,21 @@ const FloatingButtons = ({
             boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
             background: 'linear-gradient(to right, #8b5cf6, #6366f1)',
           }}
-          onClick={onToggleSettings}
-          theme='solid'
-          type='primary'
+          onPress={onToggleSettings}
+          variant='primary'
           className='lg:hidden'
-        />
+          aria-label='Settings'
+        >
+          <Settings size={18} />
+        </Button>
       )}
 
-      {/* 调试按钮 */}
+      {/* Debug button */}
       {!showSettings && (
         <Button
-          icon={showDebugPanel ? <EyeOff size={18} /> : <Eye size={18} />}
-          onClick={onToggleDebugPanel}
-          theme='solid'
-          type={showDebugPanel ? 'danger' : 'primary'}
+          isIconOnly
+          onPress={onToggleDebugPanel}
+          variant={showDebugPanel ? 'danger' : 'primary'}
           style={{
             position: 'fixed',
             right: 16,
@@ -77,7 +78,10 @@ const FloatingButtons = ({
               : 'linear-gradient(to right, #4f46e5, #6366f1)',
           }}
           className='lg:hidden'
-        />
+          aria-label='Debug'
+        >
+          {showDebugPanel ? <EyeOff size={18} /> : <Eye size={18} />}
+        </Button>
       )}
     </>
   );
diff --git a/web/src/components/playground/ImageUrlInput.jsx b/web/src/components/playground/ImageUrlInput.jsx
index 28a287818a4..d2106515569 100644
--- a/web/src/components/playground/ImageUrlInput.jsx
+++ b/web/src/components/playground/ImageUrlInput.jsx
@@ -18,8 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Input, Typography, Button, Switch } from '@douyinfe/semi-ui';
-import { IconFile } from '@douyinfe/semi-icons';
+import { Input, Button, Switch } from '@heroui/react';
 import { FileText, Plus, X, Image } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
@@ -54,57 +53,62 @@ const ImageUrlInput = ({
           <Image
             size={16}
             className={
-              imageEnabled && !disabled ? 'text-blue-500' : 'text-gray-400'
+              imageEnabled && !disabled ? 'text-primary' : 'text-muted'
             }
           />
-          <Typography.Text strong className='text-sm'>
+          <span className='text-sm font-semibold text-foreground'>
             {t('图片地址')}
-          </Typography.Text>
+          </span>
           {disabled && (
-            <Typography.Text className='text-xs text-orange-600'>
+            <span className='text-xs text-orange-600'>
               ({t('已在自定义模式中忽略')})
-            </Typography.Text>
+            </span>
           )}
         </div>
         <div className='flex items-center gap-2'>
           <Switch
-            checked={imageEnabled}
+            isSelected={imageEnabled}
             onChange={onImageEnabledChange}
-            checkedText={t('启用')}
-            uncheckedText={t('停用')}
-            size='small'
+            aria-label={t('启用图片地址')}
+            size='sm'
             className='flex-shrink-0'
-            disabled={disabled}
-          />
+            isDisabled={disabled}
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
           <Button
-            icon={<Plus size={14} />}
-            size='small'
-            theme='solid'
-            type='primary'
-            onClick={handleAddImageUrl}
-            className='!rounded-full !w-4 !h-4 !p-0 !min-w-0'
-            disabled={!imageEnabled || disabled}
-          />
+            isIconOnly
+            size='sm'
+            variant='primary'
+            onPress={handleAddImageUrl}
+            className='h-6 min-w-6 rounded-full p-0'
+            isDisabled={!imageEnabled || disabled}
+            aria-label={t('添加图片地址')}
+          >
+            <Plus size={14} />
+          </Button>
         </div>
       </div>
 
       {!imageEnabled ? (
-        <Typography.Text className='text-xs text-gray-500 mb-2 block'>
+        <span className='mb-2 block text-xs text-muted'>
           {disabled
             ? t('图片功能在自定义请求体模式下不可用')
             : t('启用后可添加图片URL进行多模态对话')}
-        </Typography.Text>
+        </span>
       ) : imageUrls.length === 0 ? (
-        <Typography.Text className='text-xs text-gray-500 mb-2 block'>
+        <span className='mb-2 block text-xs text-muted'>
           {disabled
             ? t('图片功能在自定义请求体模式下不可用')
             : t('点击 + 按钮添加图片URL进行多模态对话')}
-        </Typography.Text>
+        </span>
       ) : (
-        <Typography.Text className='text-xs text-gray-500 mb-2 block'>
+        <span className='mb-2 block text-xs text-muted'>
           {t('已添加')} {imageUrls.length} {t('张图片')}
           {disabled ? ` (${t('自定义模式下不可用')})` : ''}
-        </Typography.Text>
+        </span>
       )}
 
       <div
@@ -112,26 +116,31 @@ const ImageUrlInput = ({
       >
         {imageUrls.map((url, index) => (
           <div key={index} className='flex items-center gap-2'>
-            <div className='flex-1'>
+            <div className='relative flex-1'>
+              <FileText
+                size={14}
+                className='pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted'
+              />
               <Input
                 placeholder={`https://example.com/image${index + 1}.jpg`}
                 value={url}
-                onChange={(value) => handleUpdateImageUrl(index, value)}
-                className='!rounded-lg'
-                size='small'
-                prefix={<IconFile size='small' />}
-                disabled={!imageEnabled || disabled}
+                onChange={(event) => handleUpdateImageUrl(index, event.target.value)}
+                className='rounded-lg pl-8'
+                size='sm'
+                isDisabled={!imageEnabled || disabled}
               />
             </div>
             <Button
-              icon={<X size={12} />}
-              size='small'
-              theme='borderless'
-              type='danger'
-              onClick={() => handleRemoveImageUrl(index)}
-              className='!rounded-full !w-6 !h-6 !p-0 !min-w-0 !text-red-500 hover:!bg-red-50 flex-shrink-0'
-              disabled={!imageEnabled || disabled}
-            />
+              isIconOnly
+              size='sm'
+              variant='danger-soft'
+              onPress={() => handleRemoveImageUrl(index)}
+              className='h-6 min-w-6 flex-shrink-0 rounded-full p-0'
+              isDisabled={!imageEnabled || disabled}
+              aria-label={t('删除图片地址')}
+            >
+              <X size={12} />
+            </Button>
           </div>
         ))}
       </div>
diff --git a/web/src/components/playground/MessageActions.jsx b/web/src/components/playground/MessageActions.jsx
index 093700367f3..6e3941fc5ca 100644
--- a/web/src/components/playground/MessageActions.jsx
+++ b/web/src/components/playground/MessageActions.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Tooltip } from '@douyinfe/semi-ui';
+import { Button, Tooltip } from '@heroui/react';
 import { RefreshCw, Copy, Trash2, UserCheck, Edit } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
@@ -54,29 +54,31 @@ const MessageActions = ({
           position='top'
         >
           <Button
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            icon={<RefreshCw size={styleState.isMobile ? 12 : 14} />}
-            onClick={() => !shouldDisableActions && onMessageReset(message)}
-            disabled={shouldDisableActions}
-            className={`!rounded-full ${shouldDisableActions ? '!text-gray-300 !cursor-not-allowed' : '!text-gray-400 hover:!text-blue-600 hover:!bg-blue-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            isIconOnly
+            variant='ghost'
+            size='sm'
+            onPress={() => !shouldDisableActions && onMessageReset(message)}
+            isDisabled={shouldDisableActions}
+            className={`!rounded-full ${shouldDisableActions ? '!text-muted/50 !cursor-not-allowed' : '!text-muted hover:!text-blue-600 hover:!bg-blue-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
             aria-label={t('重试')}
-          />
+          >
+            <RefreshCw size={styleState.isMobile ? 12 : 14} />
+          </Button>
         </Tooltip>
       )}
 
       {message.content && (
         <Tooltip content={t('复制')} position='top'>
           <Button
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            icon={<Copy size={styleState.isMobile ? 12 : 14} />}
-            onClick={() => onMessageCopy(message)}
-            className={`!rounded-full !text-gray-400 hover:!text-green-600 hover:!bg-green-50 ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            isIconOnly
+            variant='ghost'
+            size='sm'
+            onPress={() => onMessageCopy(message)}
+            className={`!rounded-full !text-muted hover:!text-green-600 hover:!bg-green-50 ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
             aria-label={t('复制')}
-          />
+          >
+            <Copy size={styleState.isMobile ? 12 : 14} />
+          </Button>
         </Tooltip>
       )}
 
@@ -86,15 +88,16 @@ const MessageActions = ({
           position='top'
         >
           <Button
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            icon={<Edit size={styleState.isMobile ? 12 : 14} />}
-            onClick={() => !shouldDisableActions && onMessageEdit(message)}
-            disabled={shouldDisableActions}
-            className={`!rounded-full ${shouldDisableActions ? '!text-gray-300 !cursor-not-allowed' : '!text-gray-400 hover:!text-yellow-600 hover:!bg-yellow-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            isIconOnly
+            variant='ghost'
+            size='sm'
+            onPress={() => !shouldDisableActions && onMessageEdit(message)}
+            isDisabled={shouldDisableActions}
+            className={`!rounded-full ${shouldDisableActions ? '!text-muted/50 !cursor-not-allowed' : '!text-muted hover:!text-yellow-600 hover:!bg-yellow-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
             aria-label={t('编辑')}
-          />
+          >
+            <Edit size={styleState.isMobile ? 12 : 14} />
+          </Button>
         </Tooltip>
       )}
 
@@ -110,21 +113,22 @@ const MessageActions = ({
           position='top'
         >
           <Button
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            icon={<UserCheck size={styleState.isMobile ? 12 : 14} />}
-            onClick={() =>
+            isIconOnly
+            variant='ghost'
+            size='sm'
+            onPress={() =>
               !shouldDisableActions && onRoleToggle && onRoleToggle(message)
             }
-            disabled={shouldDisableActions}
-            className={`!rounded-full ${shouldDisableActions ? '!text-gray-300 !cursor-not-allowed' : message.role === 'system' ? '!text-purple-500 hover:!text-purple-700 hover:!bg-purple-50' : '!text-gray-400 hover:!text-purple-600 hover:!bg-purple-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            isDisabled={shouldDisableActions}
+            className={`!rounded-full ${shouldDisableActions ? '!text-muted/50 !cursor-not-allowed' : message.role === 'system' ? '!text-purple-500 hover:!text-purple-700 hover:!bg-purple-50' : '!text-muted hover:!text-purple-600 hover:!bg-purple-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
             aria-label={
               message.role === 'assistant'
                 ? t('切换为System角色')
                 : t('切换为Assistant角色')
             }
-          />
+          >
+            <UserCheck size={styleState.isMobile ? 12 : 14} />
+          </Button>
         </Tooltip>
       )}
 
@@ -134,15 +138,16 @@ const MessageActions = ({
           position='top'
         >
           <Button
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            icon={<Trash2 size={styleState.isMobile ? 12 : 14} />}
-            onClick={() => !shouldDisableActions && onMessageDelete(message)}
-            disabled={shouldDisableActions}
-            className={`!rounded-full ${shouldDisableActions ? '!text-gray-300 !cursor-not-allowed' : '!text-gray-400 hover:!text-red-600 hover:!bg-red-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
+            isIconOnly
+            variant='ghost'
+            size='sm'
+            onPress={() => !shouldDisableActions && onMessageDelete(message)}
+            isDisabled={shouldDisableActions}
+            className={`!rounded-full ${shouldDisableActions ? '!text-muted/50 !cursor-not-allowed' : '!text-muted hover:!text-red-600 hover:!bg-red-50'} ${styleState.isMobile ? '!w-6 !h-6' : '!w-7 !h-7'} !p-0 transition-all`}
             aria-label={t('删除')}
-          />
+          >
+            <Trash2 size={styleState.isMobile ? 12 : 14} />
+          </Button>
         </Tooltip>
       )}
     </div>
diff --git a/web/src/components/playground/MessageContent.jsx b/web/src/components/playground/MessageContent.jsx
index 94f494bb31f..a57e5b2efde 100644
--- a/web/src/components/playground/MessageContent.jsx
+++ b/web/src/components/playground/MessageContent.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useRef, useEffect } from 'react';
-import { Typography, TextArea, Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import MarkdownRenderer from '../common/markdown/MarkdownRenderer';
 import ThinkingContent from './ThinkingContent';
 import { Loader2, Check, X, Settings, AlertTriangle } from 'lucide-react';
@@ -69,32 +69,29 @@ const MessageContent = ({
       return (
         <div className={`${className}`}>
           <div
-            className='rounded-lg p-3 space-y-2'
-            style={{
-              background: 'var(--semi-color-bg-0)',
-              border: '1px solid var(--semi-color-border)',
-            }}
+            className='space-y-2 rounded-lg border border-border bg-background p-3'
           >
             <div className='flex items-center gap-2'>
               <AlertTriangle size={16} className='text-orange-500 shrink-0' />
-              <Typography.Text strong className='!text-[var(--semi-color-text-0)]'>
+              <span className='font-semibold text-foreground'>
                 {t('模型价格未配置')}
-              </Typography.Text>
+              </span>
             </div>
-            <Typography.Paragraph
-              className='!text-[var(--semi-color-text-1)] !text-sm !mb-0'
+            <p
+              className='mb-0 text-sm text-muted'
               style={{ wordBreak: 'break-word' }}
             >
               {errorText}
-            </Typography.Paragraph>
+            </p>
             {isAdmin() && (
               <Button
-                size='small'
-                theme='light'
-                type='warning'
-                icon={<Settings size={14} />}
-                onClick={() => window.open('/console/setting?tab=ratio', '_blank')}
+                size='sm'
+                variant='secondary'
+                onPress={() =>
+                  window.open('/console/setting?tab=ratio', '_blank')
+                }
               >
+                <Settings size={14} />
                 {t('前往设置')}
               </Button>
             )}
@@ -105,7 +102,7 @@ const MessageContent = ({
 
     return (
       <div className={`${className}`}>
-        <Typography.Text className='text-white'>{errorText}</Typography.Text>
+        <span className='text-white'>{errorText}</span>
       </div>
     );
   }
@@ -230,17 +227,16 @@ const MessageContent = ({
       {message.role === 'system' && (
         <div className='mb-2 sm:mb-4'>
           <div
-            className='flex items-center gap-2 p-2 sm:p-3 bg-gradient-to-r from-amber-50 to-orange-50 rounded-lg'
-            style={{ border: '1px solid var(--semi-color-border)' }}
+            className='flex items-center gap-2 rounded-lg border border-border bg-gradient-to-r from-amber-50 to-orange-50 p-2 sm:p-3'
           >
             <div className='w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-gradient-to-br from-amber-500 to-orange-600 flex items-center justify-center shadow-sm'>
-              <Typography.Text className='text-white text-xs font-bold'>
+              <span className='text-xs font-bold text-white'>
                 S
-              </Typography.Text>
+              </span>
             </div>
-            <Typography.Text className='text-amber-700 text-xs sm:text-sm font-medium'>
+            <span className='text-xs font-medium text-amber-700 sm:text-sm'>
               {t('系统消息')}
-            </Typography.Text>
+            </span>
           </div>
         </div>
       )}
@@ -257,38 +253,36 @@ const MessageContent = ({
 
       {isEditing ? (
         <div className='space-y-3'>
-          <TextArea
+          <textarea
             value={editValue}
-            onChange={(value) => onEditValueChange(value)}
+            onChange={(event) => onEditValueChange(event.target.value)}
             placeholder={t('请输入消息内容...')}
-            autosize={{ minRows: 3, maxRows: 12 }}
+            rows={3}
             style={{
               resize: 'vertical',
               fontSize: styleState.isMobile ? '14px' : '15px',
               lineHeight: '1.6',
             }}
-            className='!border-blue-200 focus:!border-blue-400 !bg-blue-50/50'
+            className='w-full rounded-lg border border-blue-200 bg-blue-50/50 px-3 py-2 text-foreground outline-none transition focus:border-blue-400'
           />
           <div className='flex items-center gap-2 w-full'>
             <Button
-              size='small'
-              type='danger'
-              theme='light'
-              icon={<X size={14} />}
-              onClick={onEditCancel}
+              size='sm'
+              variant='danger-soft'
+              onPress={onEditCancel}
               className='flex-1'
             >
+              <X size={14} />
               {t('取消')}
             </Button>
             <Button
-              size='small'
-              type='warning'
-              theme='solid'
-              icon={<Check size={14} />}
-              onClick={onEditSave}
-              disabled={!editValue || editValue.trim() === ''}
+              size='sm'
+              variant='secondary'
+              onPress={onEditSave}
+              isDisabled={!editValue || editValue.trim() === ''}
               className='flex-1'
             >
+              <Check size={14} />
               {t('保存')}
             </Button>
           </div>
@@ -357,10 +351,10 @@ const MessageContent = ({
                 finalDisplayableFinalContent &&
                 finalDisplayableFinalContent.trim() !== ''
               ) {
-                // 获取上一次的内容长度
+                // Track previous content length for streaming animation.
                 let prevLength = 0;
                 if (isThinkingStatus && lastContentRef.current) {
-                  // 只有当前内容包含上一次内容时，才使用上一次的长度
+                  // Only reuse previous length when current content contains it.
                   if (
                     finalDisplayableFinalContent.startsWith(
                       lastContentRef.current,
@@ -370,7 +364,7 @@ const MessageContent = ({
                   }
                 }
 
-                // 更新最后内容的引用
+                // Update the last content reference.
                 if (isThinkingStatus) {
                   lastContentRef.current = finalDisplayableFinalContent;
                 }
diff --git a/web/src/components/playground/ParameterControl.jsx b/web/src/components/playground/ParameterControl.jsx
index 82ab4b77599..c4174d2f099 100644
--- a/web/src/components/playground/ParameterControl.jsx
+++ b/web/src/components/playground/ParameterControl.jsx
@@ -18,14 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import {
-  Input,
-  InputNumber,
-  Slider,
-  Typography,
-  Button,
-  Tag,
-} from '@douyinfe/semi-ui';
+import { Input, Button } from '@heroui/react';
 import { useTranslation } from 'react-i18next';
 import {
   Hash,
@@ -47,6 +40,48 @@ const ParameterControl = ({
 }) => {
   const { t } = useTranslation();
 
+  const ValuePill = ({ children }) => (
+    <span className='rounded-full border border-border bg-surface-secondary px-2 py-0.5 text-xs font-medium text-muted'>
+      {children}
+    </span>
+  );
+
+  const ToggleButton = ({ enabled, onPress }) => (
+    <Button
+      isIconOnly
+      variant={enabled ? 'primary' : 'ghost'}
+      size='sm'
+      onPress={onPress}
+      className='h-5 min-w-5 rounded-full p-0'
+      isDisabled={disabled}
+      aria-label={enabled ? t('停用参数') : t('启用参数')}
+    >
+      {enabled ? <Check size={10} /> : <X size={10} />}
+    </Button>
+  );
+
+  const ParameterLabel = ({ icon, title, value, hint }) => (
+    <div className='flex items-center gap-2'>
+      {icon}
+      <span className='text-sm font-semibold text-foreground'>{title}</span>
+      {value !== undefined ? <ValuePill>{value}</ValuePill> : null}
+      {hint ? <span className='text-xs text-muted'>{hint}</span> : null}
+    </div>
+  );
+
+  const RangeControl = ({ value, min, max, step, onChange, isDisabled }) => (
+    <input
+      type='range'
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      onChange={(event) => onChange(Number(event.target.value))}
+      disabled={isDisabled}
+      className='mt-2 w-full accent-blue-500 disabled:cursor-not-allowed'
+    />
+  );
+
   return (
     <>
       {/* Temperature */}
@@ -54,42 +89,26 @@ const ParameterControl = ({
         className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.temperature || disabled ? 'opacity-50' : ''}`}
       >
         <div className='flex items-center justify-between mb-2'>
-          <div className='flex items-center gap-2'>
-            <Thermometer size={16} className='text-gray-500' />
-            <Typography.Text strong className='text-sm'>
-              Temperature
-            </Typography.Text>
-            <Tag size='small' shape='circle'>
-              {inputs.temperature}
-            </Tag>
-          </div>
-          <Button
-            theme={parameterEnabled.temperature ? 'solid' : 'borderless'}
-            type={parameterEnabled.temperature ? 'primary' : 'tertiary'}
-            size='small'
-            icon={
-              parameterEnabled.temperature ? (
-                <Check size={10} />
-              ) : (
-                <X size={10} />
-              )
-            }
-            onClick={() => onParameterToggle('temperature')}
-            className='!rounded-full !w-4 !h-4 !p-0 !min-w-0'
-            disabled={disabled}
+          <ParameterLabel
+            icon={<Thermometer size={16} className='text-muted' />}
+            title='Temperature'
+            value={inputs.temperature}
+          />
+          <ToggleButton
+            enabled={parameterEnabled.temperature}
+            onPress={() => onParameterToggle('temperature')}
           />
         </div>
-        <Typography.Text className='text-xs text-gray-500 mb-2'>
+        <span className='mb-2 block text-xs text-muted'>
           {t('控制输出的随机性和创造性')}
-        </Typography.Text>
-        <Slider
+        </span>
+        <RangeControl
           step={0.1}
           min={0.1}
           max={1}
           value={inputs.temperature}
           onChange={(value) => onInputChange('temperature', value)}
-          className='mt-2'
-          disabled={!parameterEnabled.temperature || disabled}
+          isDisabled={!parameterEnabled.temperature || disabled}
         />
       </div>
 
@@ -98,38 +117,26 @@ const ParameterControl = ({
         className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.top_p || disabled ? 'opacity-50' : ''}`}
       >
         <div className='flex items-center justify-between mb-2'>
-          <div className='flex items-center gap-2'>
-            <Target size={16} className='text-gray-500' />
-            <Typography.Text strong className='text-sm'>
-              Top P
-            </Typography.Text>
-            <Tag size='small' shape='circle'>
-              {inputs.top_p}
-            </Tag>
-          </div>
-          <Button
-            theme={parameterEnabled.top_p ? 'solid' : 'borderless'}
-            type={parameterEnabled.top_p ? 'primary' : 'tertiary'}
-            size='small'
-            icon={
-              parameterEnabled.top_p ? <Check size={10} /> : <X size={10} />
-            }
-            onClick={() => onParameterToggle('top_p')}
-            className='!rounded-full !w-4 !h-4 !p-0 !min-w-0'
-            disabled={disabled}
+          <ParameterLabel
+            icon={<Target size={16} className='text-muted' />}
+            title='Top P'
+            value={inputs.top_p}
+          />
+          <ToggleButton
+            enabled={parameterEnabled.top_p}
+            onPress={() => onParameterToggle('top_p')}
           />
         </div>
-        <Typography.Text className='text-xs text-gray-500 mb-2'>
+        <span className='mb-2 block text-xs text-muted'>
           {t('核采样，控制词汇选择的多样性')}
-        </Typography.Text>
-        <Slider
+        </span>
+        <RangeControl
           step={0.1}
           min={0.1}
           max={1}
           value={inputs.top_p}
           onChange={(value) => onInputChange('top_p', value)}
-          className='mt-2'
-          disabled={!parameterEnabled.top_p || disabled}
+          isDisabled={!parameterEnabled.top_p || disabled}
         />
       </div>
 
@@ -138,42 +145,26 @@ const ParameterControl = ({
         className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.frequency_penalty || disabled ? 'opacity-50' : ''}`}
       >
         <div className='flex items-center justify-between mb-2'>
-          <div className='flex items-center gap-2'>
-            <Repeat size={16} className='text-gray-500' />
-            <Typography.Text strong className='text-sm'>
-              Frequency Penalty
-            </Typography.Text>
-            <Tag size='small' shape='circle'>
-              {inputs.frequency_penalty}
-            </Tag>
-          </div>
-          <Button
-            theme={parameterEnabled.frequency_penalty ? 'solid' : 'borderless'}
-            type={parameterEnabled.frequency_penalty ? 'primary' : 'tertiary'}
-            size='small'
-            icon={
-              parameterEnabled.frequency_penalty ? (
-                <Check size={10} />
-              ) : (
-                <X size={10} />
-              )
-            }
-            onClick={() => onParameterToggle('frequency_penalty')}
-            className='!rounded-full !w-4 !h-4 !p-0 !min-w-0'
-            disabled={disabled}
+          <ParameterLabel
+            icon={<Repeat size={16} className='text-muted' />}
+            title='Frequency Penalty'
+            value={inputs.frequency_penalty}
+          />
+          <ToggleButton
+            enabled={parameterEnabled.frequency_penalty}
+            onPress={() => onParameterToggle('frequency_penalty')}
           />
         </div>
-        <Typography.Text className='text-xs text-gray-500 mb-2'>
+        <span className='mb-2 block text-xs text-muted'>
           {t('频率惩罚，减少重复词汇的出现')}
-        </Typography.Text>
-        <Slider
+        </span>
+        <RangeControl
           step={0.1}
           min={-2}
           max={2}
           value={inputs.frequency_penalty}
           onChange={(value) => onInputChange('frequency_penalty', value)}
-          className='mt-2'
-          disabled={!parameterEnabled.frequency_penalty || disabled}
+          isDisabled={!parameterEnabled.frequency_penalty || disabled}
         />
       </div>
 
@@ -182,42 +173,26 @@ const ParameterControl = ({
         className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.presence_penalty || disabled ? 'opacity-50' : ''}`}
       >
         <div className='flex items-center justify-between mb-2'>
-          <div className='flex items-center gap-2'>
-            <Ban size={16} className='text-gray-500' />
-            <Typography.Text strong className='text-sm'>
-              Presence Penalty
-            </Typography.Text>
-            <Tag size='small' shape='circle'>
-              {inputs.presence_penalty}
-            </Tag>
-          </div>
-          <Button
-            theme={parameterEnabled.presence_penalty ? 'solid' : 'borderless'}
-            type={parameterEnabled.presence_penalty ? 'primary' : 'tertiary'}
-            size='small'
-            icon={
-              parameterEnabled.presence_penalty ? (
-                <Check size={10} />
-              ) : (
-                <X size={10} />
-              )
-            }
-            onClick={() => onParameterToggle('presence_penalty')}
-            className='!rounded-full !w-4 !h-4 !p-0 !min-w-0'
-            disabled={disabled}
+          <ParameterLabel
+            icon={<Ban size={16} className='text-muted' />}
+            title='Presence Penalty'
+            value={inputs.presence_penalty}
+          />
+          <ToggleButton
+            enabled={parameterEnabled.presence_penalty}
+            onPress={() => onParameterToggle('presence_penalty')}
           />
         </div>
-        <Typography.Text className='text-xs text-gray-500 mb-2'>
+        <span className='mb-2 block text-xs text-muted'>
           {t('存在惩罚，鼓励讨论新话题')}
-        </Typography.Text>
-        <Slider
+        </span>
+        <RangeControl
           step={0.1}
           min={-2}
           max={2}
           value={inputs.presence_penalty}
           onChange={(value) => onInputChange('presence_penalty', value)}
-          className='mt-2'
-          disabled={!parameterEnabled.presence_penalty || disabled}
+          isDisabled={!parameterEnabled.presence_penalty || disabled}
         />
       </div>
 
@@ -226,36 +201,29 @@ const ParameterControl = ({
         className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.max_tokens || disabled ? 'opacity-50' : ''}`}
       >
         <div className='flex items-center justify-between mb-2'>
-          <div className='flex items-center gap-2'>
-            <Hash size={16} className='text-gray-500' />
-            <Typography.Text strong className='text-sm'>
-              Max Tokens
-            </Typography.Text>
-          </div>
-          <Button
-            theme={parameterEnabled.max_tokens ? 'solid' : 'borderless'}
-            type={parameterEnabled.max_tokens ? 'primary' : 'tertiary'}
-            size='small'
-            icon={
-              parameterEnabled.max_tokens ? (
-                <Check size={10} />
-              ) : (
-                <X size={10} />
-              )
-            }
-            onClick={() => onParameterToggle('max_tokens')}
-            className='!rounded-full !w-4 !h-4 !p-0 !min-w-0'
-            disabled={disabled}
+          <ParameterLabel
+            icon={<Hash size={16} className='text-muted' />}
+            title='Max Tokens'
+          />
+          <ToggleButton
+            enabled={parameterEnabled.max_tokens}
+            onPress={() => onParameterToggle('max_tokens')}
           />
         </div>
-        <InputNumber
+        <input
+          type='number'
           placeholder='MaxTokens'
           name='max_tokens'
-          value={inputs.max_tokens}
-          onNumberChange={(value) => onInputChange('max_tokens', value)}
+          value={inputs.max_tokens ?? ''}
+          onChange={(event) =>
+            onInputChange(
+              'max_tokens',
+              event.target.value === '' ? null : Number(event.target.value),
+            )
+          }
           min={0}
-          precision={0}
-          style={{ width: '100%' }}
+          step={1}
+          className='h-10 w-full rounded-lg border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-accent disabled:cursor-not-allowed disabled:opacity-60'
           disabled={!parameterEnabled.max_tokens || disabled}
         />
       </div>
@@ -265,23 +233,14 @@ const ParameterControl = ({
         className={`transition-opacity duration-200 mb-4 ${!parameterEnabled.seed || disabled ? 'opacity-50' : ''}`}
       >
         <div className='flex items-center justify-between mb-2'>
-          <div className='flex items-center gap-2'>
-            <Shuffle size={16} className='text-gray-500' />
-            <Typography.Text strong className='text-sm'>
-              Seed
-            </Typography.Text>
-            <Typography.Text className='text-xs text-gray-400'>
-              ({t('可选，用于复现结果')})
-            </Typography.Text>
-          </div>
-          <Button
-            theme={parameterEnabled.seed ? 'solid' : 'borderless'}
-            type={parameterEnabled.seed ? 'primary' : 'tertiary'}
-            size='small'
-            icon={parameterEnabled.seed ? <Check size={10} /> : <X size={10} />}
-            onClick={() => onParameterToggle('seed')}
-            className='!rounded-full !w-4 !h-4 !p-0 !min-w-0'
-            disabled={disabled}
+          <ParameterLabel
+            icon={<Shuffle size={16} className='text-muted' />}
+            title='Seed'
+            hint={`(${t('可选，用于复现结果')})`}
+          />
+          <ToggleButton
+            enabled={parameterEnabled.seed}
+            onPress={() => onParameterToggle('seed')}
           />
         </div>
         <Input
@@ -289,11 +248,14 @@ const ParameterControl = ({
           name='seed'
           autoComplete='new-password'
           value={inputs.seed || ''}
-          onChange={(value) =>
-            onInputChange('seed', value === '' ? null : value)
+          onChange={(event) =>
+            onInputChange(
+              'seed',
+              event.target.value === '' ? null : event.target.value,
+            )
           }
-          className='!rounded-lg'
-          disabled={!parameterEnabled.seed || disabled}
+          className='rounded-lg'
+          isDisabled={!parameterEnabled.seed || disabled}
         />
       </div>
     </>
diff --git a/web/src/components/playground/SSEViewer.jsx b/web/src/components/playground/SSEViewer.jsx
index 17768d8be5e..60291a5bf8d 100644
--- a/web/src/components/playground/SSEViewer.jsx
+++ b/web/src/components/playground/SSEViewer.jsx
@@ -18,14 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useMemo, useCallback } from 'react';
-import {
-  Button,
-  Tooltip,
-  Toast,
-  Collapse,
-  Badge,
-  Typography,
-} from '@douyinfe/semi-ui';
+import { Button, Tooltip } from '@heroui/react';
 import {
   Copy,
   ChevronDown,
@@ -35,7 +28,28 @@ import {
   XCircle,
 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
-import { copy } from '../../helpers';
+import { copy, showError, showSuccess } from '../../helpers';
+
+const PILL_TONE_CLASS = {
+  default:
+    'border-border bg-surface-secondary text-muted',
+  primary:
+    'border-blue-200 bg-blue-50 text-blue-700 dark:border-blue-900/60 dark:bg-blue-950/40 dark:text-blue-200',
+  success:
+    'border-green-200 bg-green-50 text-green-700 dark:border-green-900/60 dark:bg-green-950/40 dark:text-green-200',
+  warning:
+    'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-200',
+  danger:
+    'border-red-200 bg-red-50 text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200',
+};
+
+const Pill = ({ children, tone = 'default' }) => (
+  <span
+    className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-medium ${PILL_TONE_CLASS[tone] || PILL_TONE_CLASS.default}`}
+  >
+    {children}
+  </span>
+);
 
 /**
  * SSEViewer component for displaying Server-Sent Events in an interactive format
@@ -108,10 +122,10 @@ const SSEViewer = ({ sseData }) => {
 
       await copy(allData);
       setCopied(true);
-      Toast.success(t('已复制全部数据'));
+      showSuccess(t('已复制全部数据'));
       setTimeout(() => setCopied(false), 2000);
     } catch (err) {
-      Toast.error(t('复制失败'));
+      showError(t('复制失败'));
       console.error('Copy failed:', err);
     }
   }, [parsedSSEData, t]);
@@ -123,9 +137,9 @@ const SSEViewer = ({ sseData }) => {
           ? JSON.stringify(item.parsed, null, 2)
           : item.raw;
         await copy(textToCopy);
-        Toast.success(t('已复制'));
+        showSuccess(t('已复制'));
       } catch (err) {
-        Toast.error(t('复制失败'));
+        showError(t('复制失败'));
       }
     },
     [t],
@@ -136,9 +150,9 @@ const SSEViewer = ({ sseData }) => {
       return (
         <div className='flex items-center gap-2 p-3 bg-green-50 dark:bg-green-900/20 rounded-lg'>
           <CheckCircle size={16} className='text-green-600' />
-          <Typography.Text className='text-green-600 font-medium'>
+          <span className='font-medium text-green-600'>
             {t('流式响应完成')} [DONE]
-          </Typography.Text>
+          </span>
         </div>
       );
     }
@@ -148,11 +162,11 @@ const SSEViewer = ({ sseData }) => {
         <div className='space-y-2'>
           <div className='flex items-center gap-2 p-3 bg-red-50 dark:bg-red-900/20 rounded-lg'>
             <XCircle size={16} className='text-red-600' />
-            <Typography.Text className='text-red-600'>
+            <span className='text-red-600'>
               {t('解析错误')}: {item.error}
-            </Typography.Text>
+            </span>
           </div>
-          <div className='p-3 bg-gray-100 dark:bg-gray-800 rounded-lg font-mono text-xs overflow-auto'>
+          <div className='p-3 bg-surface-secondary rounded-lg font-mono text-xs overflow-auto'>
             <pre>{item.raw}</pre>
           </div>
         </div>
@@ -161,43 +175,43 @@ const SSEViewer = ({ sseData }) => {
 
     return (
       <div className='space-y-2'>
-        {/* JSON 格式化显示 */}
+        {/* Formatted JSON display */}
         <div className='relative'>
           <pre className='p-4 bg-gray-900 text-gray-100 rounded-lg overflow-auto text-xs font-mono leading-relaxed'>
             {JSON.stringify(item.parsed, null, 2)}
           </pre>
           <Button
-            icon={<Copy size={12} />}
-            size='small'
-            theme='borderless'
-            onClick={() => handleCopySingle(item)}
-            className='absolute top-2 right-2 !bg-gray-800/80 !text-gray-300 hover:!bg-gray-700'
-          />
+            isIconOnly
+            size='sm'
+            variant='ghost'
+            onPress={() => handleCopySingle(item)}
+            className='absolute right-2 top-2 bg-gray-800/80 text-gray-300 hover:bg-gray-700'
+            aria-label={t('复制')}
+          >
+            <Copy size={12} />
+          </Button>
         </div>
 
-        {/* 关键信息摘要 */}
+        {/* Key summary */}
         {item.parsed?.choices?.[0] && (
           <div className='flex flex-wrap gap-2 text-xs'>
             {item.parsed.choices[0].delta?.content && (
-              <Badge
-                count={`${t('内容')}: "${String(item.parsed.choices[0].delta.content).substring(0, 20)}..."`}
-                type='primary'
-              />
+              <Pill tone='primary'>
+                {`${t('内容')}: "${String(item.parsed.choices[0].delta.content).substring(0, 20)}..."`}
+              </Pill>
             )}
             {item.parsed.choices[0].delta?.reasoning_content && (
-              <Badge count={t('有 Reasoning')} type='warning' />
+              <Pill tone='warning'>{t('有 Reasoning')}</Pill>
             )}
             {item.parsed.choices[0].finish_reason && (
-              <Badge
-                count={`${t('完成')}: ${item.parsed.choices[0].finish_reason}`}
-                type='success'
-              />
+              <Pill tone='success'>
+                {`${t('完成')}: ${item.parsed.choices[0].finish_reason}`}
+              </Pill>
             )}
             {item.parsed.usage && (
-              <Badge
-                count={`${t('令牌')}: ${item.parsed.usage.prompt_tokens || 0}/${item.parsed.usage.completion_tokens || 0}`}
-                type='tertiary'
-              />
+              <Pill>
+                {`${t('令牌')}: ${item.parsed.usage.prompt_tokens || 0}/${item.parsed.usage.completion_tokens || 0}`}
+              </Pill>
             )}
           </div>
         )}
@@ -207,33 +221,33 @@ const SSEViewer = ({ sseData }) => {
 
   if (!parsedSSEData || parsedSSEData.length === 0) {
     return (
-      <div className='flex items-center justify-center h-full min-h-[200px] text-gray-500'>
+      <div className='flex items-center justify-center h-full min-h-[200px] text-muted'>
         <span>{t('暂无SSE响应数据')}</span>
       </div>
     );
   }
 
   return (
-    <div className='h-full flex flex-col bg-gray-50 dark:bg-gray-900/50 rounded-lg'>
-      {/* 头部工具栏 */}
-      <div className='flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-700 flex-shrink-0'>
+    <div className='h-full flex flex-col bg-surface-secondary rounded-lg'>
+      {/* Header toolbar */}
+      <div className='flex items-center justify-between p-4 border-b border-border flex-shrink-0'>
         <div className='flex items-center gap-3'>
           <Zap size={16} className='text-blue-500' />
-          <Typography.Text strong>{t('SSE数据流')}</Typography.Text>
-          <Badge count={stats.total} type='primary' />
+          <span className='font-semibold text-foreground'>{t('SSE数据流')}</span>
+          <Pill tone='primary'>{stats.total}</Pill>
           {stats.errors > 0 && (
-            <Badge count={`${stats.errors} ${t('错误')}`} type='danger' />
+            <Pill tone='danger'>{`${stats.errors} ${t('错误')}`}</Pill>
           )}
         </div>
 
         <div className='flex items-center gap-2'>
           <Tooltip content={t('复制全部')}>
             <Button
-              icon={<Copy size={14} />}
-              size='small'
-              onClick={handleCopyAll}
-              theme='borderless'
+              size='sm'
+              onPress={handleCopyAll}
+              variant='ghost'
             >
+              <Copy size={14} />
               {copied ? t('已复制') : t('复制全部')}
             </Button>
           </Tooltip>
@@ -245,17 +259,15 @@ const SSEViewer = ({ sseData }) => {
             }
           >
             <Button
-              icon={
-                expandedKeys.length === parsedSSEData.length ? (
-                  <ChevronUp size={14} />
-                ) : (
-                  <ChevronDown size={14} />
-                )
-              }
-              size='small'
-              onClick={handleToggleAll}
-              theme='borderless'
+              size='sm'
+              onPress={handleToggleAll}
+              variant='ghost'
             >
+              {expandedKeys.length === parsedSSEData.length ? (
+                <ChevronUp size={14} />
+              ) : (
+                <ChevronDown size={14} />
+              )}
               {expandedKeys.length === parsedSSEData.length
                 ? t('收起')
                 : t('展开')}
@@ -264,33 +276,37 @@ const SSEViewer = ({ sseData }) => {
         </div>
       </div>
 
-      {/* SSE 数据列表 */}
+      {/* SSE data list */}
       <div className='flex-1 overflow-auto p-4'>
-        <Collapse
-          activeKey={expandedKeys}
-          onChange={setExpandedKeys}
-          accordion={false}
-          className='bg-white dark:bg-gray-800 rounded-lg'
-        >
+        <div className='overflow-hidden rounded-lg bg-background'>
           {parsedSSEData.map((item) => (
-            <Collapse.Panel
-              key={item.key}
-              header={
-                <div className='flex items-center gap-2'>
-                  <Badge count={`#${item.index + 1}`} type='tertiary' />
+            <div key={item.key} className='border-b border-border last:border-b-0'>
+              <button
+                type='button'
+                className='flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-surface-secondary/60'
+                onClick={() =>
+                  setExpandedKeys((prev) =>
+                    prev.includes(item.key)
+                      ? prev.filter((key) => key !== item.key)
+                      : [...prev, item.key],
+                  )
+                }
+              >
+                <div className='flex min-w-0 items-center gap-2'>
+                  <Pill>{`#${item.index + 1}`}</Pill>
                   {item.isDone ? (
                     <span className='text-green-600 font-medium'>[DONE]</span>
                   ) : item.error ? (
                     <span className='text-red-600'>{t('解析错误')}</span>
                   ) : (
                     <>
-                      <span className='text-gray-600'>
+                      <span className='text-muted'>
                         {item.parsed?.id ||
                           item.parsed?.object ||
                           t('SSE 事件')}
                       </span>
                       {item.parsed?.choices?.[0]?.delta && (
-                        <span className='text-xs text-gray-400'>
+                        <span className='text-xs text-muted'>
                           •{' '}
                           {Object.keys(item.parsed.choices[0].delta)
                             .filter((k) => item.parsed.choices[0].delta[k])
@@ -300,12 +316,18 @@ const SSEViewer = ({ sseData }) => {
                     </>
                   )}
                 </div>
-              }
-            >
-              {renderSSEItem(item)}
-            </Collapse.Panel>
+                {expandedKeys.includes(item.key) ? (
+                  <ChevronUp className='shrink-0 text-muted' size={16} />
+                ) : (
+                  <ChevronDown className='shrink-0 text-muted' size={16} />
+                )}
+              </button>
+              {expandedKeys.includes(item.key) && (
+                <div className='px-4 pb-4'>{renderSSEItem(item)}</div>
+              )}
+            </div>
           ))}
-        </Collapse>
+        </div>
       </div>
     </div>
   );
diff --git a/web/src/components/playground/SettingsPanel.jsx b/web/src/components/playground/SettingsPanel.jsx
index 3899e596fa6..9c5bc4db460 100644
--- a/web/src/components/playground/SettingsPanel.jsx
+++ b/web/src/components/playground/SettingsPanel.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Select, Typography, Button, Switch } from '@douyinfe/semi-ui';
+import { Card, Select, Button, Switch } from '@heroui/react';
 import { Sparkles, Users, ToggleLeft, X, Settings } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { renderGroupOption, selectFilter } from '../../helpers';
@@ -67,30 +67,32 @@ const SettingsPanel = ({
         flexDirection: 'column',
       }}
     >
-      {/* 标题区域 - 与调试面板保持一致 */}
+      {/* Header area, aligned with the debug panel */}
       <div className='flex items-center justify-between mb-6 flex-shrink-0'>
         <div className='flex items-center'>
           <div className='w-10 h-10 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 flex items-center justify-center mr-3'>
             <Settings size={20} className='text-white' />
           </div>
-          <Typography.Title heading={5} className='mb-0'>
+          <h5 className='mb-0 text-xl font-semibold text-foreground'>
             {t('模型配置')}
-          </Typography.Title>
+          </h5>
         </div>
 
         {styleState.isMobile && onCloseSettings && (
           <Button
-            icon={<X size={16} />}
-            onClick={onCloseSettings}
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            className='!rounded-lg'
-          />
+            isIconOnly
+            onPress={onCloseSettings}
+            variant='ghost'
+            size='sm'
+            className='rounded-lg'
+            aria-label={t('关闭设置')}
+          >
+            <X size={16} />
+          </Button>
         )}
       </div>
 
-      {/* 移动端配置管理 */}
+      {/* Mobile config management */}
       {styleState.isMobile && (
         <div className='mb-4 flex-shrink-0'>
           <ConfigManager
@@ -104,7 +106,7 @@ const SettingsPanel = ({
       )}
 
       <div className='space-y-6 overflow-y-auto flex-1 pr-2 model-settings-scroll'>
-        {/* 自定义请求体编辑器 */}
+        {/* Custom request body editor */}
         <CustomRequestEditor
           customRequestMode={customRequestMode}
           customRequestBody={customRequestBody}
@@ -113,17 +115,17 @@ const SettingsPanel = ({
           defaultPayload={previewPayload}
         />
 
-        {/* 分组选择 */}
+        {/* Group selector */}
         <div className={customRequestMode ? 'opacity-50' : ''}>
           <div className='flex items-center gap-2 mb-2'>
-            <Users size={16} className='text-gray-500' />
-            <Typography.Text strong className='text-sm'>
+            <Users size={16} className='text-muted' />
+            <span className='text-sm font-semibold text-foreground'>
               {t('分组')}
-            </Typography.Text>
+            </span>
             {customRequestMode && (
-              <Typography.Text className='text-xs text-orange-600'>
+              <span className='text-xs text-orange-600'>
                 ({t('已在自定义模式中忽略')})
-              </Typography.Text>
+              </span>
             )}
           </div>
           <Select
@@ -141,21 +143,21 @@ const SettingsPanel = ({
             style={{ width: '100%' }}
             dropdownStyle={{ width: '100%', maxWidth: '100%' }}
             className='!rounded-lg'
-            disabled={customRequestMode}
+            isDisabled={customRequestMode}
           />
         </div>
 
-        {/* 模型选择 */}
+        {/* Model selector */}
         <div className={customRequestMode ? 'opacity-50' : ''}>
           <div className='flex items-center gap-2 mb-2'>
-            <Sparkles size={16} className='text-gray-500' />
-            <Typography.Text strong className='text-sm'>
+            <Sparkles size={16} className='text-muted' />
+            <span className='text-sm font-semibold text-foreground'>
               {t('模型')}
-            </Typography.Text>
+            </span>
             {customRequestMode && (
-              <Typography.Text className='text-xs text-orange-600'>
+              <span className='text-xs text-orange-600'>
                 ({t('已在自定义模式中忽略')})
-              </Typography.Text>
+              </span>
             )}
           </div>
           <Select
@@ -172,11 +174,11 @@ const SettingsPanel = ({
             style={{ width: '100%' }}
             dropdownStyle={{ width: '100%', maxWidth: '100%' }}
             className='!rounded-lg'
-            disabled={customRequestMode}
+            isDisabled={customRequestMode}
           />
         </div>
 
-        {/* 图片URL输入 */}
+        {/* Image URL input */}
         <div className={customRequestMode ? 'opacity-50' : ''}>
           <ImageUrlInput
             imageUrls={inputs.imageUrls}
@@ -189,7 +191,7 @@ const SettingsPanel = ({
           />
         </div>
 
-        {/* 参数控制组件 */}
+        {/* Parameter controls */}
         <div className={customRequestMode ? 'opacity-50' : ''}>
           <ParameterControl
             inputs={inputs}
@@ -200,33 +202,36 @@ const SettingsPanel = ({
           />
         </div>
 
-        {/* 流式输出开关 */}
+        {/* Stream output switch */}
         <div className={customRequestMode ? 'opacity-50' : ''}>
           <div className='flex items-center justify-between'>
             <div className='flex items-center gap-2'>
-              <ToggleLeft size={16} className='text-gray-500' />
-              <Typography.Text strong className='text-sm'>
+              <ToggleLeft size={16} className='text-muted' />
+              <span className='text-sm font-semibold text-foreground'>
                 {t('流式输出')}
-              </Typography.Text>
+              </span>
               {customRequestMode && (
-                <Typography.Text className='text-xs text-orange-600'>
+                <span className='text-xs text-orange-600'>
                   ({t('已在自定义模式中忽略')})
-                </Typography.Text>
+                </span>
               )}
             </div>
             <Switch
-              checked={inputs.stream}
+              isSelected={inputs.stream}
               onChange={(checked) => onInputChange('stream', checked)}
-              checkedText={t('开')}
-              uncheckedText={t('关')}
-              size='small'
-              disabled={customRequestMode}
-            />
+              aria-label={t('流式输出')}
+              size='sm'
+              isDisabled={customRequestMode}
+            >
+              <Switch.Control>
+                <Switch.Thumb />
+              </Switch.Control>
+            </Switch>
           </div>
         </div>
       </div>
 
-      {/* 桌面端的配置管理放在底部 */}
+      {/* Desktop config management in the footer */}
       {!styleState.isMobile && (
         <div className='flex-shrink-0 pt-3'>
           <ConfigManager
diff --git a/web/src/components/playground/ThinkingContent.jsx b/web/src/components/playground/ThinkingContent.jsx
index 9a0262ed5b3..8b0d0022d1d 100644
--- a/web/src/components/playground/ThinkingContent.jsx
+++ b/web/src/components/playground/ThinkingContent.jsx
@@ -18,7 +18,6 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useRef } from 'react';
-import { Typography } from '@douyinfe/semi-ui';
 import MarkdownRenderer from '../common/markdown/MarkdownRenderer';
 import { ChevronRight, ChevronUp, Brain, Loader2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
@@ -93,20 +92,13 @@ const ThinkingContent = ({
             />
           </div>
           <div className='flex flex-col'>
-            <Typography.Text
-              strong
-              style={{ color: 'white' }}
-              className='text-sm sm:text-base'
-            >
+            <span className='text-sm font-semibold text-white sm:text-base'>
               {headerText}
-            </Typography.Text>
+            </span>
             {thinkingSource && (
-              <Typography.Text
-                style={{ color: 'white' }}
-                className='text-xs mt-0.5 opacity-80 hidden sm:block'
-              >
+              <span className='mt-0.5 hidden text-xs text-white/80 sm:block'>
                 来源: {thinkingSource}
-              </Typography.Text>
+              </span>
             )}
           </div>
         </div>
@@ -118,12 +110,9 @@ const ThinkingContent = ({
                 className='animate-spin'
                 size={styleState.isMobile ? 14 : 18}
               />
-              <Typography.Text
-                style={{ color: 'white' }}
-                className='text-xs sm:text-sm font-medium opacity-90'
-              >
+              <span className='text-xs font-medium text-white/90 sm:text-sm'>
                 思考中
-              </Typography.Text>
+              </span>
             </div>
           )}
           {(!isThinkingStatus || message.isThinkingComplete) && (
diff --git a/web/src/components/settings/ChannelSelectorModal.jsx b/web/src/components/settings/ChannelSelectorModal.jsx
index 7864262d5a1..3c6a92b9490 100644
--- a/web/src/components/settings/ChannelSelectorModal.jsx
+++ b/web/src/components/settings/ChannelSelectorModal.jsx
@@ -18,22 +18,25 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, {
-  useState,
-  useEffect,
   forwardRef,
+  useEffect,
   useImperativeHandle,
+  useState,
 } from 'react';
 import { useIsMobile } from '../../hooks/common/useIsMobile';
 import {
-  Modal,
-  Table,
+  Button,
   Input,
-  Space,
-  Highlight,
-  Select,
-  Tag,
-} from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Search } from 'lucide-react';
 
 const OFFICIAL_RATIO_PRESET_ID = -100;
 const MODELS_DEV_PRESET_ID = -101;
@@ -42,6 +45,76 @@ const MODELS_DEV_PRESET_NAME = 'models.dev 价格预设';
 const OFFICIAL_RATIO_PRESET_BASE_URL = 'https://basellm.github.io';
 const MODELS_DEV_PRESET_BASE_URL = 'https://models.dev';
 
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background pl-9 pr-3 text-sm text-foreground outline-none transition focus:border-primary';
+const selectClass =
+  'h-8 w-full rounded-md border border-[color:var(--app-border)] bg-background px-2 text-sm text-foreground outline-none transition focus:border-primary';
+const cellInputClass =
+  'h-8 w-full rounded-md border border-[color:var(--app-border)] bg-background px-2 text-xs text-foreground outline-none transition focus:border-primary';
+
+const ENDPOINT_TYPE_OPTIONS = [
+  { label: 'ratio_config', value: 'ratio_config' },
+  { label: 'pricing', value: 'pricing' },
+  { label: 'OpenRouter', value: 'openrouter' },
+  { label: 'custom', value: 'custom' },
+];
+
+function StatusChip({ tone, children }) {
+  const cls =
+    tone === 'green'
+      ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
+      : tone === 'red'
+        ? 'bg-red-100 text-red-700 dark:bg-red-950/40 dark:text-red-300'
+        : tone === 'yellow'
+          ? 'bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300'
+          : tone === 'green-light'
+            ? 'border border-emerald-300 bg-background text-emerald-700'
+            : 'bg-surface-secondary text-muted';
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function HighlightText({ text, keyword }) {
+  if (!keyword) return <span>{text || '-'}</span>;
+  const safe = String(text || '');
+  if (!safe) return <span>-</span>;
+  const lower = safe.toLowerCase();
+  const kw = String(keyword).toLowerCase();
+  const idx = lower.indexOf(kw);
+  if (idx === -1) return <span>{safe}</span>;
+  return (
+    <span>
+      {safe.slice(0, idx)}
+      <mark className='rounded bg-amber-200/70 px-0.5 text-amber-900 dark:bg-amber-700/60 dark:text-amber-100'>
+        {safe.slice(idx, idx + kw.length)}
+      </mark>
+      {safe.slice(idx + kw.length)}
+    </span>
+  );
+}
+
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
+
 const ChannelSelectorModal = forwardRef(
   (
     {
@@ -57,11 +130,10 @@ const ChannelSelectorModal = forwardRef(
     },
     ref,
   ) => {
+    const isMobile = useIsMobile();
     const [searchText, setSearchText] = useState('');
     const [currentPage, setCurrentPage] = useState(1);
     const [pageSize, setPageSize] = useState(10);
-    const isMobile = useIsMobile();
-
     const [filteredData, setFilteredData] = useState([]);
 
     useImperativeHandle(ref, () => ({
@@ -71,7 +143,6 @@ const ChannelSelectorModal = forwardRef(
       },
     }));
 
-    // 官方渠道识别
     const isOfficialChannel = (record) => {
       const id = record?.key ?? record?.value ?? record?._originalData?.id;
       const base = record?._originalData?.base_url || '';
@@ -88,7 +159,6 @@ const ChannelSelectorModal = forwardRef(
 
     useEffect(() => {
       if (!allChannels) return;
-
       const searchLower = searchText.trim().toLowerCase();
       const matched = searchLower
         ? allChannels.filter((item) => {
@@ -103,12 +173,12 @@ const ChannelSelectorModal = forwardRef(
         const wb = isOfficialChannel(b) ? 0 : 1;
         return wa - wb;
       });
-
       setFilteredData(sorted);
+      setCurrentPage(1);
     }, [allChannels, searchText]);
 
     const total = filteredData.length;
-
+    const totalPages = Math.max(1, Math.ceil(total / pageSize));
     const paginatedData = filteredData.slice(
       (currentPage - 1) * pageSize,
       currentPage * pageSize,
@@ -120,17 +190,60 @@ const ChannelSelectorModal = forwardRef(
       }
     };
 
-    const renderEndpointCell = (text, record) => {
-      const channelId = record.key || record.value;
-      const currentEndpoint = channelEndpoints[channelId] || '';
+    const getEndpointType = (ep) => {
+      if (ep === '/api/ratio_config') return 'ratio_config';
+      if (ep === '/api/pricing') return 'pricing';
+      if (ep === 'openrouter') return 'openrouter';
+      return 'custom';
+    };
 
-      const getEndpointType = (ep) => {
-        if (ep === '/api/ratio_config') return 'ratio_config';
-        if (ep === '/api/pricing') return 'pricing';
-        if (ep === 'openrouter') return 'openrouter';
-        return 'custom';
-      };
+    const visiblePageKeys = paginatedData.map((row) => row.key ?? row.value);
+    const allPageSelected =
+      visiblePageKeys.length > 0 &&
+      visiblePageKeys.every((key) => selectedChannelIds.includes(key));
+    const somePageSelected =
+      !allPageSelected &&
+      visiblePageKeys.some((key) => selectedChannelIds.includes(key));
+
+    const togglePageSelection = (checked) => {
+      const set = new Set(selectedChannelIds);
+      if (checked) {
+        visiblePageKeys.forEach((key) => set.add(key));
+      } else {
+        visiblePageKeys.forEach((key) => set.delete(key));
+      }
+      setSelectedChannelIds(Array.from(set));
+    };
+
+    const toggleRowSelection = (key, checked) => {
+      const set = new Set(selectedChannelIds);
+      if (checked) set.add(key);
+      else set.delete(key);
+      setSelectedChannelIds(Array.from(set));
+    };
+
+    const renderStatusCell = (record) => {
+      const status = record?._originalData?.status || 0;
+      const official = isOfficialChannel(record);
+      let chip = null;
+      if (status === 1) chip = <StatusChip tone='green'>{t('已启用')}</StatusChip>;
+      else if (status === 2) chip = <StatusChip tone='red'>{t('已禁用')}</StatusChip>;
+      else if (status === 3)
+        chip = <StatusChip tone='yellow'>{t('自动禁用')}</StatusChip>;
+      else chip = <StatusChip>{t('未知状态')}</StatusChip>;
+      return (
+        <div className='flex items-center gap-1.5'>
+          {chip}
+          {official ? (
+            <StatusChip tone='green-light'>{t('官方')}</StatusChip>
+          ) : null}
+        </div>
+      );
+    };
 
+    const renderEndpointCell = (record) => {
+      const channelId = record.key || record.value;
+      const currentEndpoint = channelEndpoints[channelId] || '';
       const currentType = getEndpointType(currentEndpoint);
 
       const handleTypeChange = (val) => {
@@ -140,168 +253,216 @@ const ChannelSelectorModal = forwardRef(
           updateEndpoint(channelId, '/api/pricing');
         } else if (val === 'openrouter') {
           updateEndpoint(channelId, 'openrouter');
-        } else {
-          if (currentType !== 'custom') {
-            updateEndpoint(channelId, '');
-          }
+        } else if (currentType !== 'custom') {
+          updateEndpoint(channelId, '');
         }
       };
 
       return (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          <Select
-            size='small'
+        <div className='flex items-center gap-2'>
+          <select
             value={currentType}
-            onChange={handleTypeChange}
-            style={{ width: 120 }}
-            optionList={[
-              { label: 'ratio_config', value: 'ratio_config' },
-              { label: 'pricing', value: 'pricing' },
-              { label: 'OpenRouter', value: 'openrouter' },
-              { label: 'custom', value: 'custom' },
-            ]}
-          />
-          {currentType === 'custom' && (
+            onChange={(event) => handleTypeChange(event.target.value)}
+            aria-label={t('同步接口')}
+            className={`${selectClass} w-28`}
+          >
+            {ENDPOINT_TYPE_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          {currentType === 'custom' ? (
             <Input
-              size='small'
+              type='text'
               value={currentEndpoint}
-              onChange={(val) => updateEndpoint(channelId, val)}
+              onChange={(event) =>
+                updateEndpoint(channelId, event.target.value)
+              }
               placeholder='/your/endpoint'
-              style={{ width: 160, fontSize: 12 }}
+              aria-label={t('自定义同步接口路径')}
+              className={`${cellInputClass} w-40`}
             />
-          )}
-        </div>
-      );
-    };
-
-    const renderStatusCell = (record) => {
-      const status = record?._originalData?.status || 0;
-      const official = isOfficialChannel(record);
-      let statusTag = null;
-      switch (status) {
-        case 1:
-          statusTag = (
-            <Tag color='green' shape='circle'>
-              {t('已启用')}
-            </Tag>
-          );
-          break;
-        case 2:
-          statusTag = (
-            <Tag color='red' shape='circle'>
-              {t('已禁用')}
-            </Tag>
-          );
-          break;
-        case 3:
-          statusTag = (
-            <Tag color='yellow' shape='circle'>
-              {t('自动禁用')}
-            </Tag>
-          );
-          break;
-        default:
-          statusTag = (
-            <Tag color='grey' shape='circle'>
-              {t('未知状态')}
-            </Tag>
-          );
-      }
-      return (
-        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-          {statusTag}
-          {official && (
-            <Tag color='green' shape='circle' type='light'>
-              {t('官方')}
-            </Tag>
-          )}
+          ) : null}
         </div>
       );
     };
 
-    const renderNameCell = (text) => (
-      <Highlight sourceString={text} searchWords={[searchText]} />
-    );
-
-    const renderBaseUrlCell = (text) => (
-      <Highlight sourceString={text} searchWords={[searchText]} />
-    );
-
-    const columns = [
-      {
-        title: t('名称'),
-        dataIndex: 'label',
-        render: renderNameCell,
+    const modalState = useOverlayState({
+      isOpen: !!visible,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) onCancel?.();
       },
-      {
-        title: t('源地址'),
-        dataIndex: '_originalData.base_url',
-        render: (_, record) =>
-          renderBaseUrlCell(record._originalData?.base_url || ''),
-      },
-      {
-        title: t('状态'),
-        dataIndex: '_originalData.status',
-        render: (_, record) => renderStatusCell(record),
-      },
-      {
-        title: t('同步接口'),
-        dataIndex: 'endpoint',
-        fixed: 'right',
-        render: renderEndpointCell,
-      },
-    ];
-
-    const rowSelection = {
-      selectedRowKeys: selectedChannelIds,
-      onChange: (keys) => setSelectedChannelIds(keys),
-    };
+    });
 
     return (
-      <Modal
-        visible={visible}
-        onCancel={onCancel}
-        onOk={onOk}
-        title={
-          <span className='text-lg font-semibold'>{t('选择同步渠道')}</span>
-        }
-        size={isMobile ? 'full-width' : 'large'}
-        keepDOM
-        lazyRender={false}
-      >
-        <Space vertical style={{ width: '100%' }}>
-          <Input
-            prefix={<IconSearch size={14} />}
-            placeholder={t('搜索渠道名称或地址')}
-            value={searchText}
-            onChange={setSearchText}
-            showClear
-          />
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size={isMobile ? 'full' : 'xl'}
+            placement='center'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <span className='text-lg font-semibold'>
+                  {t('选择同步渠道')}
+                </span>
+              </ModalHeader>
+              <ModalBody className='space-y-3 px-6 py-5'>
+                <div className='relative'>
+                  <Search
+                    size={14}
+                    className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+                  />
+                  <Input
+                    type='text'
+                    value={searchText}
+                    onChange={(event) => setSearchText(event.target.value)}
+                    placeholder={t('搜索渠道名称或地址')}
+                    aria-label={t('搜索渠道名称或地址')}
+                    className={inputClass}
+                  />
+                </div>
+
+                <div className='overflow-x-auto rounded-xl border border-[color:var(--app-border)]'>
+                  <table className='w-full text-sm'>
+                    <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+                      <tr>
+                        <th className='w-10 px-3 py-2 text-left font-semibold'>
+                          <HeaderCheckbox
+                            checked={allPageSelected}
+                            indeterminate={somePageSelected}
+                            onChange={togglePageSelection}
+                            ariaLabel={t('选择当前页')}
+                          />
+                        </th>
+                        <th className='px-3 py-2 text-left font-semibold'>
+                          {t('名称')}
+                        </th>
+                        <th className='px-3 py-2 text-left font-semibold'>
+                          {t('源地址')}
+                        </th>
+                        <th className='px-3 py-2 text-left font-semibold'>
+                          {t('状态')}
+                        </th>
+                        <th className='px-3 py-2 text-left font-semibold'>
+                          {t('同步接口')}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className='divide-y divide-[color:var(--app-border)]'>
+                      {paginatedData.length === 0 ? (
+                        <tr>
+                          <td
+                            colSpan={5}
+                            className='py-10 text-center text-sm text-muted'
+                          >
+                            {t('暂无数据')}
+                          </td>
+                        </tr>
+                      ) : (
+                        paginatedData.map((record) => {
+                          const key = record.key || record.value;
+                          const checked = selectedChannelIds.includes(key);
+                          return (
+                            <tr key={key}>
+                              <td className='px-3 py-2'>
+                                <input
+                                  type='checkbox'
+                                  checked={checked}
+                                  onChange={(event) =>
+                                    toggleRowSelection(
+                                      key,
+                                      event.target.checked,
+                                    )
+                                  }
+                                  className='h-4 w-4 accent-primary'
+                                />
+                              </td>
+                              <td className='px-3 py-2 text-foreground'>
+                                <HighlightText
+                                  text={record.label}
+                                  keyword={searchText}
+                                />
+                              </td>
+                              <td className='px-3 py-2 text-muted'>
+                                <HighlightText
+                                  text={record._originalData?.base_url || ''}
+                                  keyword={searchText}
+                                />
+                              </td>
+                              <td className='px-3 py-2'>
+                                {renderStatusCell(record)}
+                              </td>
+                              <td className='px-3 py-2'>
+                                {renderEndpointCell(record)}
+                              </td>
+                            </tr>
+                          );
+                        })
+                      )}
+                    </tbody>
+                  </table>
+                </div>
 
-          <Table
-            columns={columns}
-            dataSource={paginatedData}
-            rowKey='key'
-            rowSelection={rowSelection}
-            pagination={{
-              currentPage: currentPage,
-              pageSize: pageSize,
-              total: total,
-              showSizeChanger: true,
-              showQuickJumper: true,
-              pageSizeOptions: ['10', '20', '50', '100'],
-              onChange: (page, size) => {
-                setCurrentPage(page);
-                setPageSize(size);
-              },
-              onShowSizeChange: (curr, size) => {
-                setCurrentPage(1);
-                setPageSize(size);
-              },
-            }}
-            size='small'
-          />
-        </Space>
+                <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted'>
+                  <div className='flex items-center gap-2'>
+                    <span>{t('每页')}</span>
+                    <select
+                      value={String(pageSize)}
+                      onChange={(event) => {
+                        setPageSize(Number(event.target.value));
+                        setCurrentPage(1);
+                      }}
+                      aria-label={t('每页数量')}
+                      className='h-7 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-xs outline-none focus:border-primary'
+                    >
+                      {[10, 20, 50, 100].map((n) => (
+                        <option key={n} value={n}>
+                          {n}
+                        </option>
+                      ))}
+                    </select>
+                    <span>
+                      {t('共 {{total}} 条', { total })}
+                    </span>
+                  </div>
+                  <div className='flex items-center gap-1'>
+                    <Button
+                      size='sm'
+                      variant='light'
+                      isDisabled={currentPage <= 1}
+                      onPress={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                    >
+                      {t('上一页')}
+                    </Button>
+                    <span>
+                      {currentPage} / {totalPages}
+                    </span>
+                    <Button
+                      size='sm'
+                      variant='light'
+                      isDisabled={currentPage >= totalPages}
+                      onPress={() =>
+                        setCurrentPage((p) => Math.min(totalPages, p + 1))
+                      }
+                    >
+                      {t('下一页')}
+                    </Button>
+                  </div>
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={onCancel}>
+                  {t('取消')}
+                </Button>
+                <Button color='primary' onPress={onOk}>
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
     );
   },
diff --git a/web/src/components/settings/ChatsSetting.jsx b/web/src/components/settings/ChatsSetting.jsx
index 9ead13525c1..3d2b0f2022e 100644
--- a/web/src/components/settings/ChatsSetting.jsx
+++ b/web/src/components/settings/ChatsSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin } from '@douyinfe/semi-ui';
+import { Card, Spinner } from '@heroui/react';
 import SettingsChats from '../../pages/Setting/Chat/SettingsChats';
 import { API, showError, toBoolean } from '../../helpers';
 
@@ -68,14 +68,17 @@ const ChatsSetting = () => {
   }, []);
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        {/* 聊天设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsChats options={inputs} refresh={onRefresh} />
-        </Card>
-      </Spin>
-    </>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      {/* Chat settings */}
+      <Card className='mt-2.5'>
+        <SettingsChats options={inputs} refresh={onRefresh} />
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/CustomOAuthSetting.jsx b/web/src/components/settings/CustomOAuthSetting.jsx
index 0912160bee5..44dfa0e60f8 100644
--- a/web/src/components/settings/CustomOAuthSetting.jsx
+++ b/web/src/components/settings/CustomOAuthSetting.jsx
@@ -6,11 +6,6 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
@@ -20,32 +15,97 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState } from 'react';
 import {
   Button,
-  Form,
-  Row,
-  Col,
-  Typography,
-  Modal,
-  Banner,
   Card,
-  Collapse,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
   Switch,
-  Table,
-  Tag,
-  Popconfirm,
-  Space,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
 import {
-  IconPlus,
-  IconEdit,
-  IconDelete,
-  IconRefresh,
-} from '@douyinfe/semi-icons';
-import { API, showError, showSuccess, getOAuthProviderIcon } from '../../helpers';
+  CheckCircle2,
+  ChevronDown,
+  Edit3,
+  Info,
+  Plus,
+  RefreshCw,
+  Trash2,
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
+import {
+  API,
+  showError,
+  showSuccess,
+  getOAuthProviderIcon,
+} from '../../helpers';
+import ConfirmDialog from '../common/ui/ConfirmDialog';
+
+// ----------------------------- helpers -----------------------------
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 font-mono text-xs text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function StatusChip({ tone = 'grey', children }) {
+  const TONE = {
+    green: 'bg-success/15 text-success',
+    grey: 'bg-surface-secondary text-muted',
+  };
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TONE[tone] || TONE.grey
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function InfoBanner({ tone = 'info', icon, children }) {
+  const cls =
+    tone === 'success'
+      ? 'border-success/30 bg-success/5'
+      : 'border-primary/20 bg-primary/5';
+  const fallbackIcon =
+    tone === 'success' ? (
+      <CheckCircle2 size={16} className='text-success' />
+    ) : (
+      <Info size={16} className='text-primary' />
+    );
+  return (
+    <div
+      className={`flex items-start gap-2 rounded-xl border ${cls} px-3 py-2 text-sm text-foreground`}
+    >
+      <span className='mt-0.5 shrink-0'>{icon || fallbackIcon}</span>
+      <div className='flex-1 break-words'>{children}</div>
+    </div>
+  );
+}
 
-const { Text } = Typography;
+// ----------------------------- constants -----------------------------
 
-// Preset templates for common OAuth providers
 const OAUTH_PRESETS = {
   'github-enterprise': {
     name: 'GitHub Enterprise',
@@ -189,6 +249,8 @@ const ACCESS_DENIED_TEMPLATES = {
   org_hint: '仅限指定组织或角色访问。组织={{current.org}}，角色={{current.roles}}',
 };
 
+// ----------------------------- main -----------------------------
+
 const CustomOAuthSetting = ({ serverAddress }) => {
   const { t } = useTranslation();
   const [providers, setProviders] = useState([]);
@@ -200,26 +262,29 @@ const CustomOAuthSetting = ({ serverAddress }) => {
   const [baseUrl, setBaseUrl] = useState('');
   const [discoveryLoading, setDiscoveryLoading] = useState(false);
   const [discoveryInfo, setDiscoveryInfo] = useState(null);
-  const [advancedActiveKeys, setAdvancedActiveKeys] = useState([]);
-  const formApiRef = React.useRef(null);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+
+  const modalState = useOverlayState({
+    isOpen: modalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) closeModal();
+    },
+  });
 
   const mergeFormValues = (newValues) => {
     setFormValues((prev) => ({ ...prev, ...newValues }));
-    if (!formApiRef.current) return;
-    Object.entries(newValues).forEach(([key, value]) => {
-      formApiRef.current.setValue(key, value);
-    });
   };
 
-  const getLatestFormValues = () => {
-    const values = formApiRef.current?.getValues?.();
-    return values && typeof values === 'object' ? values : formValues;
+  const setField = (field) => (value) => {
+    setFormValues((prev) => ({ ...prev, [field]: value }));
   };
 
   const normalizeBaseUrl = (url) => (url || '').trim().replace(/\/+$/, '');
 
   const inferBaseUrlFromProvider = (provider) => {
-    const endpoint = provider?.authorization_endpoint || provider?.token_endpoint;
+    const endpoint =
+      provider?.authorization_endpoint || provider?.token_endpoint;
     if (!endpoint) return '';
     try {
       const url = new URL(endpoint);
@@ -229,15 +294,13 @@ const CustomOAuthSetting = ({ serverAddress }) => {
     }
   };
 
-  const resetDiscoveryState = () => {
-    setDiscoveryInfo(null);
-  };
+  const resetDiscoveryState = () => setDiscoveryInfo(null);
 
-  const closeModal = () => {
+  function closeModal() {
     setModalVisible(false);
     resetDiscoveryState();
-    setAdvancedActiveKeys([]);
-  };
+    setAdvancedOpen(false);
+  }
 
   const fetchProviders = async () => {
     setLoading(true);
@@ -256,6 +319,7 @@ const CustomOAuthSetting = ({ serverAddress }) => {
 
   useEffect(() => {
     fetchProviders();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const handleAdd = () => {
@@ -275,7 +339,7 @@ const CustomOAuthSetting = ({ serverAddress }) => {
     setSelectedPreset('');
     setBaseUrl('');
     resetDiscoveryState();
-    setAdvancedActiveKeys([]);
+    setAdvancedOpen(false);
     setModalVisible(true);
   };
 
@@ -285,7 +349,7 @@ const CustomOAuthSetting = ({ serverAddress }) => {
     setSelectedPreset(OAUTH_PRESETS[provider.slug] ? provider.slug : '');
     setBaseUrl(inferBaseUrlFromProvider(provider));
     resetDiscoveryState();
-    setAdvancedActiveKeys([]);
+    setAdvancedOpen(false);
     setModalVisible(true);
   };
 
@@ -304,9 +368,8 @@ const CustomOAuthSetting = ({ serverAddress }) => {
   };
 
   const handleSubmit = async () => {
-    const currentValues = getLatestFormValues();
+    const currentValues = { ...formValues };
 
-    // Validate required fields
     const requiredFields = [
       'name',
       'slug',
@@ -315,10 +378,7 @@ const CustomOAuthSetting = ({ serverAddress }) => {
       'token_endpoint',
       'user_info_endpoint',
     ];
-    
-    if (!editingProvider) {
-      requiredFields.push('client_secret');
-    }
+    if (!editingProvider) requiredFields.push('client_secret');
 
     for (const field of requiredFields) {
       if (!currentValues[field]) {
@@ -327,12 +387,18 @@ const CustomOAuthSetting = ({ serverAddress }) => {
       }
     }
 
-    // Validate endpoint URLs must be full URLs
-    const endpointFields = ['authorization_endpoint', 'token_endpoint', 'user_info_endpoint'];
+    const endpointFields = [
+      'authorization_endpoint',
+      'token_endpoint',
+      'user_info_endpoint',
+    ];
     for (const field of endpointFields) {
       const value = currentValues[field];
-      if (value && !value.startsWith('http://') && !value.startsWith('https://')) {
-        // Check if user selected a preset but forgot to fill issuer URL
+      if (
+        value &&
+        !value.startsWith('http://') &&
+        !value.startsWith('https://')
+      ) {
         if (selectedPreset && !baseUrl) {
           showError(t('请先填写 Issuer URL，以自动生成完整的端点 URL'));
         } else {
@@ -351,7 +417,7 @@ const CustomOAuthSetting = ({ serverAddress }) => {
       if (editingProvider) {
         res = await API.put(
           `/api/custom-oauth-provider/${editingProvider.id}`,
-          payload
+          payload,
         );
       } else {
         res = await API.post('/api/custom-oauth-provider/', payload);
@@ -396,9 +462,7 @@ const CustomOAuthSetting = ({ serverAddress }) => {
       const data = res.data.data?.discovery || {};
       const resolvedWellKnown = res.data.data?.well_known_url || wellKnownUrl;
 
-      const discoveredValues = {
-        well_known: resolvedWellKnown,
-      };
+      const discoveredValues = { well_known: resolvedWellKnown };
       const autoFilledFields = [];
       if (data.authorization_endpoint) {
         discoveredValues.authorization_endpoint = data.authorization_endpoint;
@@ -417,8 +481,8 @@ const CustomOAuthSetting = ({ serverAddress }) => {
         ? data.scopes_supported
         : [];
       if (scopesSupported.length > 0 && !formValues.scopes) {
-        const preferredScopes = ['openid', 'profile', 'email'].filter((scope) =>
-          scopesSupported.includes(scope),
+        const preferredScopes = ['openid', 'profile', 'email'].filter(
+          (scope) => scopesSupported.includes(scope),
         );
         discoveredValues.scopes =
           preferredScopes.length > 0
@@ -495,7 +559,8 @@ const CustomOAuthSetting = ({ serverAddress }) => {
       newValues.authorization_endpoint =
         cleanUrl + presetConfig.authorization_endpoint;
       newValues.token_endpoint = cleanUrl + presetConfig.token_endpoint;
-      newValues.user_info_endpoint = cleanUrl + presetConfig.user_info_endpoint;
+      newValues.user_info_endpoint =
+        cleanUrl + presetConfig.user_info_endpoint;
     }
     mergeFormValues(newValues);
   };
@@ -505,12 +570,12 @@ const CustomOAuthSetting = ({ serverAddress }) => {
     if (url && selectedPreset && OAUTH_PRESETS[selectedPreset]) {
       const presetConfig = OAUTH_PRESETS[selectedPreset];
       const cleanUrl = normalizeBaseUrl(url);
-      const newValues = {
-        authorization_endpoint: cleanUrl + presetConfig.authorization_endpoint,
+      mergeFormValues({
+        authorization_endpoint:
+          cleanUrl + presetConfig.authorization_endpoint,
         token_endpoint: cleanUrl + presetConfig.token_endpoint,
         user_info_endpoint: cleanUrl + presetConfig.user_info_endpoint,
-      };
-      mergeFormValues(newValues);
+      });
     }
   };
 
@@ -528,524 +593,674 @@ const CustomOAuthSetting = ({ serverAddress }) => {
     showSuccess(t('已填充提示模板'));
   };
 
-  const columns = [
-    {
-      title: t('图标'),
-      dataIndex: 'icon',
-      key: 'icon',
-      width: 80,
-      render: (icon) => getOAuthProviderIcon(icon || '', 18),
-    },
-    {
-      title: t('名称'),
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: 'Slug',
-      dataIndex: 'slug',
-      key: 'slug',
-      render: (slug) => <Tag>{slug}</Tag>,
-    },
-    {
-      title: t('状态'),
-      dataIndex: 'enabled',
-      key: 'enabled',
-      render: (enabled) => (
-        <Tag color={enabled ? 'green' : 'grey'}>
-          {enabled ? t('已启用') : t('已禁用')}
-        </Tag>
-      ),
-    },
-    {
-      title: t('Client ID'),
-      dataIndex: 'client_id',
-      key: 'client_id',
-      render: (id) => {
-        if (!id) return '-';
-        return id.length > 20 ? `${id.substring(0, 20)}...` : id;
-      },
-    },
-    {
-      title: t('操作'),
-      key: 'actions',
-      render: (_, record) => (
-        <Space>
-          <Button
-            icon={<IconEdit />}
-            size="small"
-            onClick={() => handleEdit(record)}
-          >
-            {t('编辑')}
-          </Button>
-          <Popconfirm
-            title={t('确定要删除此 OAuth 提供商吗？')}
-            onConfirm={() => handleDelete(record.id)}
-          >
-            <Button icon={<IconDelete />} size="small" type="danger">
-              {t('删除')}
-            </Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ];
-
   const discoveryAutoFilledLabels = (discoveryInfo?.autoFilledFields || [])
     .map((field) => DISCOVERY_FIELD_LABELS[field] || field)
     .join(', ');
 
+  // ----------------------------- render -----------------------------
+
   return (
     <Card>
-      <Form.Section text={t('自定义 OAuth 提供商')}>
-        <Banner
-          type="info"
-          description={
-            <>
-              {t(
-                '配置自定义 OAuth 提供商，支持 GitHub Enterprise、GitLab、Gitea、Nextcloud、Keycloak、ORY 等兼容 OAuth 2.0 协议的身份提供商'
-              )}
-              <br />
-              {t('回调 URL 格式')}: {serverAddress || t('网站地址')}/oauth/
-              {'{slug}'}
-            </>
-          }
-          style={{ marginBottom: 20 }}
-        />
-
-        <Button
-          icon={<IconPlus />}
-          theme="solid"
-          onClick={handleAdd}
-          style={{ marginBottom: 16 }}
-        >
-          {t('添加 OAuth 提供商')}
-        </Button>
-
-        <Table
-          columns={columns}
-          dataSource={providers}
-          loading={loading}
-          rowKey="id"
-          pagination={false}
-          empty={t('暂无自定义 OAuth 提供商')}
-        />
-
-        <Modal
-          title={editingProvider ? t('编辑 OAuth 提供商') : t('添加 OAuth 提供商')}
-          visible={modalVisible}
-          onCancel={closeModal}
-          width={860}
-          centered
-          bodyStyle={{ maxHeight: '72vh', overflowY: 'auto', paddingRight: 6 }}
-          footer={
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'flex-end',
-                alignItems: 'center',
-                gap: 12,
-                flexWrap: 'wrap',
-              }}
-            >
-              <Space spacing={8} align='center'>
-                <Text type='secondary'>{t('启用供应商')}</Text>
-                <Switch
-                  checked={!!formValues.enabled}
-                  size='large'
-                  onChange={(checked) => mergeFormValues({ enabled: !!checked })}
-                />
-                <Tag color={formValues.enabled ? 'green' : 'grey'}>
-                  {formValues.enabled ? t('已启用') : t('已禁用')}
-                </Tag>
-              </Space>
-              <Button onClick={closeModal}>{t('取消')}</Button>
-              <Button type='primary' onClick={handleSubmit}>
-                {t('保存')}
-              </Button>
+      <Card.Content className='space-y-4 p-5'>
+        <div className='border-b border-border pb-2 text-base font-semibold text-foreground'>
+          {t('自定义 OAuth 提供商')}
+        </div>
+
+        <InfoBanner>
+          {t(
+            '配置自定义 OAuth 提供商，支持 GitHub Enterprise、GitLab、Gitea、Nextcloud、Keycloak、ORY 等兼容 OAuth 2.0 协议的身份提供商',
+          )}
+          <br />
+          {t('回调 URL 格式')}: {serverAddress || t('网站地址')}/oauth/
+          {'{slug}'}
+        </InfoBanner>
+
+        <div>
+          <Button
+            color='primary'
+            startContent={<Plus size={14} />}
+            onPress={handleAdd}
+          >
+            {t('添加 OAuth 提供商')}
+          </Button>
+        </div>
+
+        {/* 提供商列表 */}
+        <div className='relative overflow-x-auto rounded-xl border border-border'>
+          {loading && (
+            <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+              <Spinner color='primary' />
             </div>
-          }
-        >
-          <Form
-            initValues={formValues}
-            onValueChange={() => {
-              setFormValues((prev) => ({ ...prev, ...getLatestFormValues() }));
-            }}
-            getFormApi={(api) => (formApiRef.current = api)}
+          )}
+          <table className='w-full text-sm'>
+            <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+              <tr>
+                <th className='w-[80px] px-3 py-2 text-left font-medium'>
+                  {t('图标')}
+                </th>
+                <th className='px-3 py-2 text-left font-medium'>
+                  {t('名称')}
+                </th>
+                <th className='px-3 py-2 text-left font-medium'>Slug</th>
+                <th className='px-3 py-2 text-left font-medium'>
+                  {t('状态')}
+                </th>
+                <th className='px-3 py-2 text-left font-medium'>
+                  {t('Client ID')}
+                </th>
+                <th className='w-[180px] px-3 py-2 text-left font-medium'>
+                  {t('操作')}
+                </th>
+              </tr>
+            </thead>
+            <tbody className='divide-y divide-border'>
+              {providers.length === 0 && !loading ? (
+                <tr>
+                  <td
+                    colSpan={6}
+                    className='px-4 py-8 text-center text-sm text-muted'
+                  >
+                    {t('暂无自定义 OAuth 提供商')}
+                  </td>
+                </tr>
+              ) : (
+                providers.map((record) => (
+                  <tr
+                    key={record.id}
+                    className='bg-background hover:bg-surface-secondary/60'
+                  >
+                    <td className='px-3 py-3 align-middle'>
+                      {getOAuthProviderIcon(record.icon || '', 18)}
+                    </td>
+                    <td className='px-3 py-3 align-middle text-foreground'>
+                      {record.name}
+                    </td>
+                    <td className='px-3 py-3 align-middle'>
+                      <StatusChip>{record.slug}</StatusChip>
+                    </td>
+                    <td className='px-3 py-3 align-middle'>
+                      <StatusChip tone={record.enabled ? 'green' : 'grey'}>
+                        {record.enabled ? t('已启用') : t('已禁用')}
+                      </StatusChip>
+                    </td>
+                    <td className='px-3 py-3 align-middle text-foreground'>
+                      {record.client_id
+                        ? record.client_id.length > 20
+                          ? `${record.client_id.substring(0, 20)}...`
+                          : record.client_id
+                        : '-'}
+                    </td>
+                    <td className='px-3 py-3 align-middle'>
+                      <div className='flex flex-wrap gap-2'>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          startContent={<Edit3 size={14} />}
+                          onPress={() => handleEdit(record)}
+                        >
+                          {t('编辑')}
+                        </Button>
+                        <Button
+                          size='sm'
+                          color='danger'
+                          variant='flat'
+                          startContent={<Trash2 size={14} />}
+                          onPress={() => setDeleteTarget(record)}
+                        >
+                          {t('删除')}
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      </Card.Content>
+
+      {/* Add / Edit modal */}
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size='4xl'
+            placement='center'
+            className='max-w-[95vw]'
           >
-            <Text strong style={{ display: 'block', marginBottom: 8 }}>
-              {t('Configuration')}
-            </Text>
-            <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
-              {t('先填写配置，再自动填充 OAuth 端点，能显著减少手工输入')}
-            </Text>
-            {discoveryInfo && (
-              <Banner
-                type='success'
-                closeIcon={null}
-                style={{ marginBottom: 12 }}
-                description={
-                  <div>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <span>
+                  {editingProvider
+                    ? t('编辑 OAuth 提供商')
+                    : t('添加 OAuth 提供商')}
+                </span>
+              </ModalHeader>
+              <ModalBody className='max-h-[72vh] space-y-4 overflow-y-auto px-6 py-5'>
+                <div className='text-sm font-semibold text-foreground'>
+                  {t('Configuration')}
+                </div>
+                <div className='text-xs text-muted'>
+                  {t(
+                    '先填写配置，再自动填充 OAuth 端点，能显著减少手工输入',
+                  )}
+                </div>
+
+                {discoveryInfo && (
+                  <InfoBanner tone='success'>
                     <div>
                       {t('已从 Discovery 获取配置，可继续手动修改所有字段。')}
                     </div>
                     {discoveryAutoFilledLabels ? (
                       <div>
-                        {t('自动填充字段')}:
-                        {' '}
-                        {discoveryAutoFilledLabels}
+                        {t('自动填充字段')}: {discoveryAutoFilledLabels}
                       </div>
                     ) : null}
                     {discoveryInfo.scopesSupported?.length ? (
                       <div>
-                        {t('Discovery scopes')}:
-                        {' '}
+                        {t('Discovery scopes')}:{' '}
                         {discoveryInfo.scopesSupported.join(', ')}
                       </div>
                     ) : null}
                     {discoveryInfo.claimsSupported?.length ? (
                       <div>
-                        {t('Discovery claims')}:
-                        {' '}
+                        {t('Discovery claims')}:{' '}
                         {discoveryInfo.claimsSupported.join(', ')}
                       </div>
                     ) : null}
+                  </InfoBanner>
+                )}
+
+                {/* 预设 / Issuer / Discovery */}
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-12'>
+                  <div className='space-y-2 md:col-span-4'>
+                    <FieldLabel>{t('预设模板')}</FieldLabel>
+                    <select
+                      value={selectedPreset}
+                      onChange={(event) =>
+                        handlePresetChange(event.target.value)
+                      }
+                      className={inputClass}
+                    >
+                      <option value=''>{t('自定义')}</option>
+                      {Object.entries(OAUTH_PRESETS).map(([key, config]) => (
+                        <option key={key} value={key}>
+                          {config.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                  <div className='space-y-2 md:col-span-5'>
+                    <FieldLabel>
+                      {t('发行者 URL（Issuer URL）')}
+                    </FieldLabel>
+                    <input
+                      type='text'
+                      value={baseUrl}
+                      onChange={(event) =>
+                        handleBaseUrlChange(event.target.value)
+                      }
+                      placeholder={t('例如：https://gitea.example.com')}
+                      className={inputClass}
+                    />
+                    <FieldHint>
+                      {selectedPreset
+                        ? t('填写后会自动拼接预设端点')
+                        : t('可选：用于自动生成端点或 Discovery URL')}
+                    </FieldHint>
+                  </div>
+                  <div className='flex items-end md:col-span-3'>
+                    <Button
+                      variant='flat'
+                      startContent={<RefreshCw size={14} />}
+                      isPending={discoveryLoading}
+                      onPress={handleFetchFromDiscovery}
+                      className='w-full'
+                    >
+                      {t('获取 Discovery 配置')}
+                    </Button>
+                  </div>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>
+                    {t('发现文档地址（Discovery URL，可选）')}
+                  </FieldLabel>
+                  <input
+                    type='text'
+                    value={formValues.well_known || ''}
+                    onChange={(event) =>
+                      setField('well_known')(event.target.value)
+                    }
+                    placeholder={t(
+                      '例如：https://example.com/.well-known/openid-configuration',
+                    )}
+                    className={inputClass}
+                  />
+                  <FieldHint>
+                    {t(
+                      '可留空；留空时会尝试使用 Issuer URL + /.well-known/openid-configuration',
+                    )}
+                  </FieldHint>
+                </div>
+
+                {/* 名称 + Slug */}
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel required>{t('显示名称')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.name || ''}
+                      onChange={(event) =>
+                        setField('name')(event.target.value)
+                      }
+                      placeholder={t('例如：GitHub Enterprise')}
+                      className={inputClass}
+                    />
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel required>Slug</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.slug || ''}
+                      onChange={(event) =>
+                        setField('slug')(event.target.value)
+                      }
+                      placeholder={t('例如：github-enterprise')}
+                      className={inputClass}
+                    />
+                    <FieldHint>
+                      {t('URL 标识，只能包含小写字母、数字和连字符')}
+                    </FieldHint>
                   </div>
-                }
-              />
-            )}
-
-            <Row gutter={16}>
-              <Col span={8}>
-                <Form.Select
-                  field="preset"
-                  label={t('预设模板')}
-                  placeholder={t('选择预设模板（可选）')}
-                  value={selectedPreset}
-                  onChange={handlePresetChange}
-                  optionList={[
-                    { value: '', label: t('自定义') },
-                    ...Object.entries(OAUTH_PRESETS).map(([key, config]) => ({
-                      value: key,
-                      label: config.name,
-                    })),
-                  ]}
-                />
-              </Col>
-              <Col span={10}>
-                <Form.Input
-                  field="base_url"
-                  label={t('发行者 URL（Issuer URL）')}
-                  placeholder={t('例如：https://gitea.example.com')}
-                  value={baseUrl}
-                  onChange={handleBaseUrlChange}
-                  extraText={
-                    selectedPreset
-                      ? t('填写后会自动拼接预设端点')
-                      : t('可选：用于自动生成端点或 Discovery URL')
-                  }
-                />
-              </Col>
-              <Col span={6}>
-                <div style={{ display: 'flex', alignItems: 'flex-end', height: '100%' }}>
-                  <Button
-                    icon={<IconRefresh />}
-                    onClick={handleFetchFromDiscovery}
-                    loading={discoveryLoading}
-                    block
-                  >
-                    {t('获取 Discovery 配置')}
-                  </Button>
                 </div>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col span={24}>
-                <Form.Input
-                  field="well_known"
-                  label={t('发现文档地址（Discovery URL，可选）')}
-                  placeholder={t('例如：https://example.com/.well-known/openid-configuration')}
-                  extraText={t('可留空；留空时会尝试使用 Issuer URL + /.well-known/openid-configuration')}
-                />
-              </Col>
-            </Row>
-
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Input
-                  field="name"
-                  label={t('显示名称')}
-                  placeholder={t('例如：GitHub Enterprise')}
-                  rules={[{ required: true, message: t('请输入显示名称') }]}
-                />
-              </Col>
-              <Col span={12}>
-                <Form.Input
-                  field="slug"
-                  label="Slug"
-                  placeholder={t('例如：github-enterprise')}
-                  extraText={t('URL 标识，只能包含小写字母、数字和连字符')}
-                  rules={[{ required: true, message: t('请输入 Slug') }]}
-                />
-              </Col>
-            </Row>
-
-            <Row gutter={16}>
-              <Col span={18}>
-                <Form.Input
-                  field='icon'
-                  label={t('图标')}
-                  placeholder={t('例如：github / si:google / https://example.com/logo.png / 🐱')}
-                  extraText={
-                    <span>
+
+                {/* 图标 + 预览 */}
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-12'>
+                  <div className='space-y-2 md:col-span-9'>
+                    <FieldLabel>{t('图标')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.icon || ''}
+                      onChange={(event) =>
+                        setField('icon')(event.target.value)
+                      }
+                      placeholder={t(
+                        '例如：github / si:google / https://example.com/logo.png / 🐱',
+                      )}
+                      className={inputClass}
+                    />
+                    <FieldHint>
                       {t(
                         '图标使用 react-icons（Simple Icons）或 URL/emoji，例如：github、gitlab、si:google',
                       )}
-                    </span>
-                  }
-                  showClear
-                />
-              </Col>
-              <Col span={6} style={{ display: 'flex', alignItems: 'flex-end' }}>
-                <div
-                  style={{
-                    width: '100%',
-                    minHeight: 74,
-                    border: '1px solid var(--semi-color-border)',
-                    borderRadius: 8,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    marginBottom: 24,
-                    background: 'var(--semi-color-fill-0)',
-                  }}
-                >
-                  {getOAuthProviderIcon(formValues.icon || '', 24)}
+                    </FieldHint>
+                  </div>
+                  <div className='flex items-end md:col-span-3'>
+                    <div className='flex h-[74px] w-full items-center justify-center rounded-lg border border-border bg-surface-secondary'>
+                      {getOAuthProviderIcon(formValues.icon || '', 24)}
+                    </div>
+                  </div>
                 </div>
-              </Col>
-            </Row>
-
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Input
-                  field="client_id"
-                  label="Client ID"
-                  placeholder={t('OAuth Client ID')}
-                  rules={[{ required: true, message: t('请输入 Client ID') }]}
-                />
-              </Col>
-              <Col span={12}>
-                <Form.Input
-                  field="client_secret"
-                  label="Client Secret"
-                  type="password"
-                  placeholder={
-                    editingProvider
-                      ? t('留空则保持原有密钥')
-                      : t('OAuth Client Secret')
-                  }
-                  rules={
-                    editingProvider
-                      ? []
-                      : [{ required: true, message: t('请输入 Client Secret') }]
-                  }
-                />
-              </Col>
-            </Row>
-
-            <Text strong style={{ display: 'block', margin: '16px 0 8px' }}>
-              {t('OAuth 端点')}
-            </Text>
-
-            <Row gutter={16}>
-              <Col span={24}>
-                <Form.Input
-                  field="authorization_endpoint"
-                  label={t('Authorization Endpoint')}
-                  placeholder={
-                    selectedPreset && OAUTH_PRESETS[selectedPreset]
-                      ? t('填写 Issuer URL 后自动生成：') +
-                        OAUTH_PRESETS[selectedPreset].authorization_endpoint
-                      : 'https://example.com/oauth/authorize'
-                  }
-                  rules={[
-                    { required: true, message: t('请输入 Authorization Endpoint') },
-                  ]}
-                />
-              </Col>
-            </Row>
-
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Input
-                  field="token_endpoint"
-                  label={t('Token Endpoint')}
-                  placeholder={
-                    selectedPreset && OAUTH_PRESETS[selectedPreset]
-                      ? t('自动生成：') + OAUTH_PRESETS[selectedPreset].token_endpoint
-                      : 'https://example.com/oauth/token'
-                  }
-                  rules={[{ required: true, message: t('请输入 Token Endpoint') }]}
-                />
-              </Col>
-              <Col span={12}>
-                <Form.Input
-                  field="user_info_endpoint"
-                  label={t('User Info Endpoint')}
-                  placeholder={
-                    selectedPreset && OAUTH_PRESETS[selectedPreset]
-                      ? t('自动生成：') + OAUTH_PRESETS[selectedPreset].user_info_endpoint
-                      : 'https://example.com/api/user'
-                  }
-                  rules={[
-                    { required: true, message: t('请输入 User Info Endpoint') },
-                  ]}
-                />
-              </Col>
-            </Row>
-
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Input
-                  field="scopes"
-                  label={t('Scopes（可选）')}
-                  placeholder="openid profile email"
-                  extraText={
-                    discoveryInfo?.scopesSupported?.length
-                      ? t('Discovery 建议 scopes：') +
-                        discoveryInfo.scopesSupported.join(', ')
-                      : t('可手动填写，多个 scope 用空格分隔')
+
+                {/* Client ID + Secret */}
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel required>Client ID</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.client_id || ''}
+                      onChange={(event) =>
+                        setField('client_id')(event.target.value)
+                      }
+                      placeholder={t('OAuth Client ID')}
+                      className={inputClass}
+                    />
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel required={!editingProvider}>
+                      Client Secret
+                    </FieldLabel>
+                    <input
+                      type='password'
+                      value={formValues.client_secret || ''}
+                      onChange={(event) =>
+                        setField('client_secret')(event.target.value)
+                      }
+                      placeholder={
+                        editingProvider
+                          ? t('留空则保持原有密钥')
+                          : t('OAuth Client Secret')
+                      }
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+
+                {/* Endpoints */}
+                <div className='text-sm font-semibold text-foreground'>
+                  {t('OAuth 端点')}
+                </div>
+                <div className='space-y-2'>
+                  <FieldLabel required>
+                    {t('Authorization Endpoint')}
+                  </FieldLabel>
+                  <input
+                    type='text'
+                    value={formValues.authorization_endpoint || ''}
+                    onChange={(event) =>
+                      setField('authorization_endpoint')(event.target.value)
+                    }
+                    placeholder={
+                      selectedPreset && OAUTH_PRESETS[selectedPreset]
+                        ? t('填写 Issuer URL 后自动生成：') +
+                          OAUTH_PRESETS[selectedPreset].authorization_endpoint
+                        : 'https://example.com/oauth/authorize'
+                    }
+                    className={inputClass}
+                  />
+                </div>
+
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel required>{t('Token Endpoint')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.token_endpoint || ''}
+                      onChange={(event) =>
+                        setField('token_endpoint')(event.target.value)
+                      }
+                      placeholder={
+                        selectedPreset && OAUTH_PRESETS[selectedPreset]
+                          ? t('自动生成：') +
+                            OAUTH_PRESETS[selectedPreset].token_endpoint
+                          : 'https://example.com/oauth/token'
+                      }
+                      className={inputClass}
+                    />
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel required>
+                      {t('User Info Endpoint')}
+                    </FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.user_info_endpoint || ''}
+                      onChange={(event) =>
+                        setField('user_info_endpoint')(event.target.value)
+                      }
+                      placeholder={
+                        selectedPreset && OAUTH_PRESETS[selectedPreset]
+                          ? t('自动生成：') +
+                            OAUTH_PRESETS[selectedPreset].user_info_endpoint
+                          : 'https://example.com/api/user'
+                      }
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('Scopes（可选）')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.scopes || ''}
+                      onChange={(event) =>
+                        setField('scopes')(event.target.value)
+                      }
+                      placeholder='openid profile email'
+                      className={inputClass}
+                    />
+                    <FieldHint>
+                      {discoveryInfo?.scopesSupported?.length
+                        ? t('Discovery 建议 scopes：') +
+                          discoveryInfo.scopesSupported.join(', ')
+                        : t('可手动填写，多个 scope 用空格分隔')}
+                    </FieldHint>
+                  </div>
+                </div>
+
+                {/* 字段映射 */}
+                <div className='text-sm font-semibold text-foreground'>
+                  {t('字段映射')}
+                </div>
+                <div className='text-xs text-muted'>
+                  {t(
+                    '配置如何从用户信息 API 响应中提取用户数据，支持 JSONPath 语法',
+                  )}
+                </div>
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('用户 ID 字段（可选）')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.user_id_field || ''}
+                      onChange={(event) =>
+                        setField('user_id_field')(event.target.value)
+                      }
+                      placeholder={t('例如：sub、id、data.user.id')}
+                      className={inputClass}
+                    />
+                    <FieldHint>{t('用于唯一标识用户的字段路径')}</FieldHint>
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('用户名字段（可选）')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.username_field || ''}
+                      onChange={(event) =>
+                        setField('username_field')(event.target.value)
+                      }
+                      placeholder={t('例如：preferred_username、login')}
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+                <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('显示名称字段（可选）')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.display_name_field || ''}
+                      onChange={(event) =>
+                        setField('display_name_field')(event.target.value)
+                      }
+                      placeholder={t('例如：name、full_name')}
+                      className={inputClass}
+                    />
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('邮箱字段（可选）')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={formValues.email_field || ''}
+                      onChange={(event) =>
+                        setField('email_field')(event.target.value)
+                      }
+                      placeholder={t('例如：email')}
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+
+                {/* 高级选项 (collapsible) */}
+                <details
+                  className='group rounded-xl border border-border bg-background'
+                  open={advancedOpen}
+                  onToggle={(event) =>
+                    setAdvancedOpen(event.currentTarget.open)
                   }
-                />
-              </Col>
-            </Row>
-
-            <Text strong style={{ display: 'block', margin: '16px 0 8px' }}>
-              {t('字段映射')}
-            </Text>
-            <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
-              {t('配置如何从用户信息 API 响应中提取用户数据，支持 JSONPath 语法')}
-            </Text>
-
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Input
-                  field="user_id_field"
-                  label={t('用户 ID 字段（可选）')}
-                  placeholder={t('例如：sub、id、data.user.id')}
-                  extraText={t('用于唯一标识用户的字段路径')}
-                />
-              </Col>
-              <Col span={12}>
-                <Form.Input
-                  field="username_field"
-                  label={t('用户名字段（可选）')}
-                  placeholder={t('例如：preferred_username、login')}
-                />
-              </Col>
-            </Row>
-
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Input
-                  field="display_name_field"
-                  label={t('显示名称字段（可选）')}
-                  placeholder={t('例如：name、full_name')}
-                />
-              </Col>
-              <Col span={12}>
-                <Form.Input
-                  field="email_field"
-                  label={t('邮箱字段（可选）')}
-                  placeholder={t('例如：email')}
-                />
-              </Col>
-            </Row>
-
-            <Collapse
-              keepDOM
-              activeKey={advancedActiveKeys}
-              style={{ marginTop: 16 }}
-              onChange={(activeKey) => {
-                const keys = Array.isArray(activeKey) ? activeKey : [activeKey];
-                setAdvancedActiveKeys(keys.filter(Boolean));
-              }}
-            >
-              <Collapse.Panel header={t('高级选项')} itemKey='advanced'>
-                <Row gutter={16}>
-                  <Col span={12}>
-                    <Form.Select
-                      field="auth_style"
-                      label={t('认证方式')}
-                      optionList={[
-                        { value: 0, label: t('自动检测') },
-                        { value: 1, label: t('POST 参数') },
-                        { value: 2, label: t('Basic Auth 头') },
-                      ]}
+                >
+                  <summary className='flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-foreground'>
+                    <span>{t('高级选项')}</span>
+                    <ChevronDown
+                      size={16}
+                      className='text-muted transition-transform group-open:rotate-180'
                     />
-                  </Col>
-                </Row>
-
-                <Text strong style={{ display: 'block', margin: '16px 0 8px' }}>
-                  {t('准入策略')}
-                </Text>
-                <Text type="secondary" style={{ display: 'block', marginBottom: 8 }}>
-                  {t('可选：基于用户信息 JSON 做组合条件准入，条件不满足时返回自定义提示')}
-                </Text>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.TextArea
-                      field='access_policy'
-                      value={formValues.access_policy || ''}
-                      onChange={(value) => mergeFormValues({ access_policy: value })}
-                      label={t('准入策略 JSON（可选）')}
-                      rows={6}
-                      placeholder={`{
+                  </summary>
+                  <div className='space-y-4 border-t border-border px-3 py-3'>
+                    <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                      <div className='space-y-2'>
+                        <FieldLabel>{t('认证方式')}</FieldLabel>
+                        <select
+                          value={formValues.auth_style ?? 0}
+                          onChange={(event) =>
+                            setField('auth_style')(Number(event.target.value))
+                          }
+                          className={inputClass}
+                        >
+                          <option value={0}>{t('自动检测')}</option>
+                          <option value={1}>{t('POST 参数')}</option>
+                          <option value={2}>{t('Basic Auth 头')}</option>
+                        </select>
+                      </div>
+                    </div>
+
+                    <div className='text-sm font-semibold text-foreground'>
+                      {t('准入策略')}
+                    </div>
+                    <div className='text-xs text-muted'>
+                      {t(
+                        '可选：基于用户信息 JSON 做组合条件准入，条件不满足时返回自定义提示',
+                      )}
+                    </div>
+                    <div className='space-y-2'>
+                      <FieldLabel>{t('准入策略 JSON（可选）')}</FieldLabel>
+                      <textarea
+                        rows={6}
+                        value={formValues.access_policy || ''}
+                        onChange={(event) =>
+                          setField('access_policy')(event.target.value)
+                        }
+                        placeholder={`{
   "logic": "and",
   "conditions": [
     {"field": "trust_level", "op": "gte", "value": 2},
     {"field": "active", "op": "eq", "value": true}
   ]
 }`}
-                      extraText={t('支持逻辑 and/or 与嵌套 groups；操作符支持 eq/ne/gt/gte/lt/lte/in/not_in/contains/exists')}
-                      showClear
-                    />
-                    <Space spacing={8} style={{ marginTop: 8 }}>
-                      <Button size='small' theme='light' onClick={() => applyAccessPolicyTemplate('level_active')}>
-                        {t('填充模板：等级+激活')}
-                      </Button>
-                      <Button size='small' theme='light' onClick={() => applyAccessPolicyTemplate('org_or_role')}>
-                        {t('填充模板：组织或角色')}
-                      </Button>
-                    </Space>
-                  </Col>
-                </Row>
-                <Row gutter={16}>
-                  <Col span={24}>
-                    <Form.Input
-                      field='access_denied_message'
-                      value={formValues.access_denied_message || ''}
-                      onChange={(value) => mergeFormValues({ access_denied_message: value })}
-                      label={t('拒绝提示模板（可选）')}
-                      placeholder={t('例如：需要等级 {{required}}，你当前等级 {{current}}')}
-                      extraText={t('可用变量：{{provider}} {{field}} {{op}} {{required}} {{current}} 以及 {{current.path}}')}
-                      showClear
-                    />
-                    <Space spacing={8} style={{ marginTop: 8 }}>
-                      <Button size='small' theme='light' onClick={() => applyDeniedTemplate('level_hint')}>
-                        {t('填充模板：等级提示')}
-                      </Button>
-                      <Button size='small' theme='light' onClick={() => applyDeniedTemplate('org_hint')}>
-                        {t('填充模板：组织提示')}
-                      </Button>
-                    </Space>
-                  </Col>
-                </Row>
-              </Collapse.Panel>
-            </Collapse>
-          </Form>
-        </Modal>
-      </Form.Section>
+                        className={textareaClass}
+                      />
+                      <FieldHint>
+                        {t(
+                          '支持逻辑 and/or 与嵌套 groups；操作符支持 eq/ne/gt/gte/lt/lte/in/not_in/contains/exists',
+                        )}
+                      </FieldHint>
+                      <div className='mt-2 flex flex-wrap gap-2'>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          onPress={() =>
+                            applyAccessPolicyTemplate('level_active')
+                          }
+                        >
+                          {t('填充模板：等级+激活')}
+                        </Button>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          onPress={() =>
+                            applyAccessPolicyTemplate('org_or_role')
+                          }
+                        >
+                          {t('填充模板：组织或角色')}
+                        </Button>
+                      </div>
+                    </div>
+
+                    <div className='space-y-2'>
+                      <FieldLabel>{t('拒绝提示模板（可选）')}</FieldLabel>
+                      <input
+                        type='text'
+                        value={formValues.access_denied_message || ''}
+                        onChange={(event) =>
+                          setField('access_denied_message')(
+                            event.target.value,
+                          )
+                        }
+                        placeholder={t(
+                          '例如：需要等级 {{required}}，你当前等级 {{current}}',
+                        )}
+                        className={inputClass}
+                      />
+                      <FieldHint>
+                        {t(
+                          '可用变量：{{provider}} {{field}} {{op}} {{required}} {{current}} 以及 {{current.path}}',
+                        )}
+                      </FieldHint>
+                      <div className='mt-2 flex flex-wrap gap-2'>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          onPress={() => applyDeniedTemplate('level_hint')}
+                        >
+                          {t('填充模板：等级提示')}
+                        </Button>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          onPress={() => applyDeniedTemplate('org_hint')}
+                        >
+                          {t('填充模板：组织提示')}
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </details>
+              </ModalBody>
+              <ModalFooter className='flex flex-wrap items-center justify-end gap-3 border-t border-border'>
+                <div className='flex items-center gap-2'>
+                  <span className='text-sm text-muted'>
+                    {t('启用供应商')}
+                  </span>
+                  <Switch
+                    isSelected={!!formValues.enabled}
+                    onValueChange={(checked) =>
+                      mergeFormValues({ enabled: !!checked })
+                    }
+                    size='md'
+                    aria-label={t('启用供应商')}
+                  >
+                    <Switch.Control>
+                      <Switch.Thumb />
+                    </Switch.Control>
+                  </Switch>
+                  <StatusChip tone={formValues.enabled ? 'green' : 'grey'}>
+                    {formValues.enabled ? t('已启用') : t('已禁用')}
+                  </StatusChip>
+                </div>
+                <Button variant='light' onPress={closeModal}>
+                  {t('取消')}
+                </Button>
+                <Button color='primary' onPress={handleSubmit}>
+                  {t('保存')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
+
+      {/* Delete confirmation */}
+      <ConfirmDialog
+        visible={!!deleteTarget}
+        title={t('确定要删除此 OAuth 提供商吗？')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setDeleteTarget(null)}
+        onConfirm={async () => {
+          const target = deleteTarget;
+          setDeleteTarget(null);
+          if (target?.id) await handleDelete(target.id);
+        }}
+      >
+        {deleteTarget?.name
+          ? t('删除后无法恢复，确定要删除「{{name}}」吗？', {
+              name: deleteTarget.name,
+            })
+          : t('删除后无法恢复')}
+      </ConfirmDialog>
     </Card>
   );
 };
diff --git a/web/src/components/settings/DashboardSetting.jsx b/web/src/components/settings/DashboardSetting.jsx
index 7bf4249437a..e0c7c7b95cd 100644
--- a/web/src/components/settings/DashboardSetting.jsx
+++ b/web/src/components/settings/DashboardSetting.jsx
@@ -18,8 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState, useMemo } from 'react';
-import { Card, Spin, Button, Modal } from '@douyinfe/semi-ui';
+import { Card, Spinner } from '@heroui/react';
 import { API, showError, showSuccess, toBoolean } from '../../helpers';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 import SettingsAPIInfo from '../../pages/Setting/Dashboard/SettingsAPIInfo';
 import SettingsAnnouncements from '../../pages/Setting/Dashboard/SettingsAnnouncements';
 import SettingsFAQ from '../../pages/Setting/Dashboard/SettingsFAQ';
@@ -51,7 +52,7 @@ const DashboardSetting = () => {
   });
 
   let [loading, setLoading] = useState(false);
-  const [showMigrateModal, setShowMigrateModal] = useState(false); // 下个版本会删除
+  const [showMigrateModal, setShowMigrateModal] = useState(false); // Remove in the next release.
 
   const getOptions = async () => {
     const res = await API.get('/api/option/');
@@ -88,7 +89,7 @@ const DashboardSetting = () => {
     onRefresh();
   }, []);
 
-  // 用于迁移检测的旧键，下个版本会删除
+  // Legacy keys used for migration detection. Remove in the next release.
   const hasLegacyData = useMemo(() => {
     const legacyKeys = [
       'ApiInfo',
@@ -122,51 +123,52 @@ const DashboardSetting = () => {
   };
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        {/* 用于迁移检测的旧键模态框，下个版本会删除 */}
-        <Modal
-          title='配置迁移确认'
-          visible={showMigrateModal}
-          onOk={handleMigrate}
-          onCancel={() => setShowMigrateModal(false)}
-          confirmLoading={loading}
-          okText='确认迁移'
-          cancelText='取消'
-        >
-          <p>检测到旧版本的配置数据，是否要迁移到新的配置格式？</p>
-          <p style={{ color: '#f57c00', marginTop: '10px' }}>
-            <strong>注意：</strong>
-            迁移过程中会自动处理数据格式转换，迁移完成后旧配置将被清除，请在迁移前在数据库中备份好旧配置。
-          </p>
-        </Modal>
-
-        {/* 数据看板设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsDataDashboard options={inputs} refresh={onRefresh} />
-        </Card>
-
-        {/* 系统公告管理 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsAnnouncements options={inputs} refresh={onRefresh} />
-        </Card>
-
-        {/* API信息管理 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsAPIInfo options={inputs} refresh={onRefresh} />
-        </Card>
-
-        {/* 常见问答管理 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsFAQ options={inputs} refresh={onRefresh} />
-        </Card>
-
-        {/* Uptime Kuma 监控设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsUptimeKuma options={inputs} refresh={onRefresh} />
-        </Card>
-      </Spin>
-    </>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      <ConfirmDialog
+        visible={showMigrateModal}
+        title='配置迁移确认'
+        confirmText='确认迁移'
+        cancelText='取消'
+        onConfirm={handleMigrate}
+        onCancel={() => setShowMigrateModal(false)}
+      >
+        <p>检测到旧版本的配置数据，是否要迁移到新的配置格式？</p>
+        <p className='mt-2.5 text-warning'>
+          <strong>注意：</strong>
+          迁移过程中会自动处理数据格式转换，迁移完成后旧配置将被清除，请在迁移前在数据库中备份好旧配置。
+        </p>
+      </ConfirmDialog>
+
+      {/* Data dashboard settings */}
+      <Card className='mt-2.5'>
+        <SettingsDataDashboard options={inputs} refresh={onRefresh} />
+      </Card>
+
+      {/* System announcement management */}
+      <Card className='mt-2.5'>
+        <SettingsAnnouncements options={inputs} refresh={onRefresh} />
+      </Card>
+
+      {/* API info management */}
+      <Card className='mt-2.5'>
+        <SettingsAPIInfo options={inputs} refresh={onRefresh} />
+      </Card>
+
+      {/* FAQ management */}
+      <Card className='mt-2.5'>
+        <SettingsFAQ options={inputs} refresh={onRefresh} />
+      </Card>
+
+      {/* Uptime Kuma monitoring settings */}
+      <Card className='mt-2.5'>
+        <SettingsUptimeKuma options={inputs} refresh={onRefresh} />
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/DrawingSetting.jsx b/web/src/components/settings/DrawingSetting.jsx
index a714b6908d9..ae1140cc909 100644
--- a/web/src/components/settings/DrawingSetting.jsx
+++ b/web/src/components/settings/DrawingSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin } from '@douyinfe/semi-ui';
+import { Card, Spinner } from '@heroui/react';
 import SettingsDrawing from '../../pages/Setting/Drawing/SettingsDrawing';
 import { API, showError, toBoolean } from '../../helpers';
 
@@ -70,14 +70,17 @@ const DrawingSetting = () => {
   }, []);
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        {/* 绘图设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsDrawing options={inputs} refresh={onRefresh} />
-        </Card>
-      </Spin>
-    </>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      {/* Drawing settings */}
+      <Card className='mt-2.5'>
+        <SettingsDrawing options={inputs} refresh={onRefresh} />
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/HttpStatusCodeRulesInput.jsx b/web/src/components/settings/HttpStatusCodeRulesInput.jsx
index 5faf93af9e1..062731415f8 100644
--- a/web/src/components/settings/HttpStatusCodeRulesInput.jsx
+++ b/web/src/components/settings/HttpStatusCodeRulesInput.jsx
@@ -18,53 +18,56 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Form, Tag, Typography } from '@douyinfe/semi-ui';
-
-export default function HttpStatusCodeRulesInput(props) {
-  const { Text } = Typography;
-  const {
-    label,
-    field,
-    placeholder,
-    extraText,
-    onChange,
-    parsed,
-    invalidText,
-  } = props;
+import { Input } from '@heroui/react';
 
+// Status code rule editor that shows the current input together with parsed
+// chips (valid tokens) or an inline error. Receives `value` + `onChange`
+// directly so it can be used outside any Form context.
+export default function HttpStatusCodeRulesInput({
+  label,
+  value = '',
+  placeholder,
+  extraText,
+  onChange,
+  parsed,
+  invalidText,
+}) {
   return (
-    <>
-      <Form.Input
-        label={label}
+    <div className='space-y-2'>
+      {label ? (
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+      ) : null}
+      <Input
+        type='text'
+        value={value}
+        onChange={(e) => onChange?.(e.target.value)}
         placeholder={placeholder}
-        extraText={extraText}
-        field={field}
-        onChange={onChange}
+        aria-label={label}
+        className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
       />
-      {parsed?.ok && parsed.tokens?.length > 0 && (
-        <div
-          style={{
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: 8,
-            marginTop: 8,
-          }}
-        >
+      {extraText ? (
+        <div className='text-xs leading-snug text-muted'>{extraText}</div>
+      ) : null}
+      {parsed?.ok && parsed.tokens?.length > 0 ? (
+        <div className='flex flex-wrap gap-2'>
           {parsed.tokens.map((token) => (
-            <Tag key={token} size='small'>
+            <span
+              key={token}
+              className='rounded-full border border-[color:var(--app-border)] bg-[color:var(--app-surface-muted)] px-2.5 py-0.5 text-xs text-muted'
+            >
               {token}
-            </Tag>
+            </span>
           ))}
         </div>
-      )}
-      {!parsed?.ok && (
-        <Text type='danger' style={{ display: 'block', marginTop: 8 }}>
+      ) : null}
+      {!parsed?.ok && parsed ? (
+        <div className='text-xs text-rose-600'>
           {invalidText}
           {parsed?.invalidTokens && parsed.invalidTokens.length > 0
             ? `: ${parsed.invalidTokens.join(', ')}`
             : ''}
-        </Text>
-      )}
-    </>
+        </div>
+      ) : null}
+    </div>
   );
 }
diff --git a/web/src/components/settings/ModelDeploymentSetting.jsx b/web/src/components/settings/ModelDeploymentSetting.jsx
index c872f631d00..8072f267cfd 100644
--- a/web/src/components/settings/ModelDeploymentSetting.jsx
+++ b/web/src/components/settings/ModelDeploymentSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin } from '@douyinfe/semi-ui';
+import { Card, Spinner } from '@heroui/react';
 import { API, showError, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 import SettingModelDeployment from '../../pages/Setting/Model/SettingModelDeployment';
@@ -72,13 +72,16 @@ const ModelDeploymentSetting = () => {
   }, []);
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        <Card style={{ marginTop: '10px' }}>
-          <SettingModelDeployment options={inputs} refresh={onRefresh} />
-        </Card>
-      </Spin>
-    </>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      <Card className='mt-2.5'>
+        <SettingModelDeployment options={inputs} refresh={onRefresh} />
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/ModelSetting.jsx b/web/src/components/settings/ModelSetting.jsx
index fb0b844a037..9e95543fe1c 100644
--- a/web/src/components/settings/ModelSetting.jsx
+++ b/web/src/components/settings/ModelSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
+import { Card, Spinner } from '@heroui/react';
 
 import { API, showError, showSuccess, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';
@@ -107,30 +107,33 @@ const ModelSetting = () => {
   }, []);
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        {/* OpenAI */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingGlobalModel options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* Channel affinity */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsChannelAffinity options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* Gemini */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingGeminiModel options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* Claude */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingClaudeModel options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* Grok */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingGrokModel options={inputs} refresh={onRefresh} />
-        </Card>
-      </Spin>
-    </>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      {/* OpenAI */}
+      <Card className='mt-2.5'>
+        <SettingGlobalModel options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Channel affinity */}
+      <Card className='mt-2.5'>
+        <SettingsChannelAffinity options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Gemini */}
+      <Card className='mt-2.5'>
+        <SettingGeminiModel options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Claude */}
+      <Card className='mt-2.5'>
+        <SettingClaudeModel options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Grok */}
+      <Card className='mt-2.5'>
+        <SettingGrokModel options={inputs} refresh={onRefresh} />
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/OperationSetting.jsx b/web/src/components/settings/OperationSetting.jsx
index 8585a3e9027..ee7ffa8ed9b 100644
--- a/web/src/components/settings/OperationSetting.jsx
+++ b/web/src/components/settings/OperationSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin } from '@douyinfe/semi-ui';
+import { Card, Spinner } from '@heroui/react';
 import SettingsGeneral from '../../pages/Setting/Operation/SettingsGeneral';
 import SettingsHeaderNavModules from '../../pages/Setting/Operation/SettingsHeaderNavModules';
 import SettingsSidebarModulesAdmin from '../../pages/Setting/Operation/SettingsSidebarModulesAdmin';
@@ -120,42 +120,45 @@ const OperationSetting = () => {
   }, []);
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        {/* 通用设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsGeneral options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* 顶栏模块管理 */}
-        <div style={{ marginTop: '10px' }}>
-          <SettingsHeaderNavModules options={inputs} refresh={onRefresh} />
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
         </div>
-        {/* 左侧边栏模块管理（管理员） */}
-        <div style={{ marginTop: '10px' }}>
-          <SettingsSidebarModulesAdmin options={inputs} refresh={onRefresh} />
-        </div>
-        {/* 屏蔽词过滤设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsSensitiveWords options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* 日志设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsLog options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* 监控设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsMonitoring options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* 额度设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsCreditLimit options={inputs} refresh={onRefresh} />
-        </Card>
-        {/* 签到设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsCheckin options={inputs} refresh={onRefresh} />
-        </Card>
-      </Spin>
-    </>
+      ) : null}
+      {/* General settings */}
+      <Card className='mt-2.5'>
+        <SettingsGeneral options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Header navigation modules */}
+      <div className='mt-2.5'>
+        <SettingsHeaderNavModules options={inputs} refresh={onRefresh} />
+      </div>
+      {/* Admin sidebar modules */}
+      <div className='mt-2.5'>
+        <SettingsSidebarModulesAdmin options={inputs} refresh={onRefresh} />
+      </div>
+      {/* Sensitive words filter settings */}
+      <Card className='mt-2.5'>
+        <SettingsSensitiveWords options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Log settings */}
+      <Card className='mt-2.5'>
+        <SettingsLog options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Monitoring settings */}
+      <Card className='mt-2.5'>
+        <SettingsMonitoring options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Credit settings */}
+      <Card className='mt-2.5'>
+        <SettingsCreditLimit options={inputs} refresh={onRefresh} />
+      </Card>
+      {/* Checkin settings */}
+      <Card className='mt-2.5'>
+        <SettingsCheckin options={inputs} refresh={onRefresh} />
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/OtherSetting.jsx b/web/src/components/settings/OtherSetting.jsx
index f8e0b53756a..9764a41c222 100644
--- a/web/src/components/settings/OtherSetting.jsx
+++ b/web/src/components/settings/OtherSetting.jsx
@@ -6,40 +6,66 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useState } from 'react';
 import {
-  Banner,
   Button,
-  Col,
-  Form,
-  Row,
-  Modal,
-  Space,
   Card,
-} from '@douyinfe/semi-ui';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Info } from 'lucide-react';
 import { API, showError, showSuccess, timestamp2string } from '../../helpers';
 import { marked } from 'marked';
 import { useTranslation } from 'react-i18next';
 import { StatusContext } from '../../context/Status';
-import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
 const LEGAL_USER_AGREEMENT_KEY = 'legal.user_agreement';
 const LEGAL_PRIVACY_POLICY_KEY = 'legal.privacy_policy';
 
+// Replaces Semi `<Form.Section text>` with a clean section header inside
+// each settings card.
+function SectionHeader({ children }) {
+  return (
+    <h3 className='mb-4 text-base font-semibold text-foreground'>{children}</h3>
+  );
+}
+
+function FieldLabel({ children }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+const codeFontStyle = { fontFamily: 'JetBrains Mono, Consolas' };
+
 const OtherSetting = () => {
   const { t } = useTranslation();
-  let [inputs, setInputs] = useState({
+  const [inputs, setInputs] = useState({
     Notice: '',
     [LEGAL_USER_AGREEMENT_KEY]: '',
     [LEGAL_PRIVACY_POLICY_KEY]: '',
@@ -49,13 +75,19 @@ const OtherSetting = () => {
     About: '',
     HomePageContent: '',
   });
-  let [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false);
   const [showUpdateModal, setShowUpdateModal] = useState(false);
-  const [statusState, statusDispatch] = useContext(StatusContext);
+  const [statusState] = useContext(StatusContext);
   const [updateData, setUpdateData] = useState({
     tag_name: '',
     content: '',
   });
+  const updateModalState = useOverlayState({
+    isOpen: showUpdateModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowUpdateModal(false);
+    },
+  });
 
   const updateOption = async (key, value) => {
     setLoading(true);
@@ -65,7 +97,7 @@ const OtherSetting = () => {
     });
     const { success, message } = res.data;
     if (success) {
-      setInputs((inputs) => ({ ...inputs, [key]: value }));
+      setInputs((prev) => ({ ...prev, [key]: value }));
     } else {
       showError(message);
     }
@@ -83,181 +115,50 @@ const OtherSetting = () => {
     Footer: false,
     CheckUpdate: false,
   });
-  const handleInputChange = async (value, e) => {
-    const name = e.target.id;
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
-  };
 
-  // 通用设置
-  const formAPISettingGeneral = useRef();
-  // 通用设置 - Notice
-  const submitNotice = async () => {
-    try {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: true }));
-      await updateOption('Notice', inputs.Notice);
-      showSuccess(t('公告已更新'));
-    } catch (error) {
-      console.error(t('公告更新失败'), error);
-      showError(t('公告更新失败'));
-    } finally {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, Notice: false }));
-    }
-  };
-  // 通用设置 - UserAgreement
-  const submitUserAgreement = async () => {
-    try {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        [LEGAL_USER_AGREEMENT_KEY]: true,
-      }));
-      await updateOption(
-        LEGAL_USER_AGREEMENT_KEY,
-        inputs[LEGAL_USER_AGREEMENT_KEY],
-      );
-      showSuccess(t('用户协议已更新'));
-    } catch (error) {
-      console.error(t('用户协议更新失败'), error);
-      showError(t('用户协议更新失败'));
-    } finally {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        [LEGAL_USER_AGREEMENT_KEY]: false,
-      }));
-    }
-  };
-  // 通用设置 - PrivacyPolicy
-  const submitPrivacyPolicy = async () => {
-    try {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        [LEGAL_PRIVACY_POLICY_KEY]: true,
-      }));
-      await updateOption(
-        LEGAL_PRIVACY_POLICY_KEY,
-        inputs[LEGAL_PRIVACY_POLICY_KEY],
-      );
-      showSuccess(t('隐私政策已更新'));
-    } catch (error) {
-      console.error(t('隐私政策更新失败'), error);
-      showError(t('隐私政策更新失败'));
-    } finally {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        [LEGAL_PRIVACY_POLICY_KEY]: false,
-      }));
-    }
-  };
-  // 个性化设置
-  const formAPIPersonalization = useRef();
-  //  个性化设置 - SystemName
-  const submitSystemName = async () => {
-    try {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        SystemName: true,
-      }));
-      await updateOption('SystemName', inputs.SystemName);
-      showSuccess(t('系统名称已更新'));
-    } catch (error) {
-      console.error(t('系统名称更新失败'), error);
-      showError(t('系统名称更新失败'));
-    } finally {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        SystemName: false,
-      }));
-    }
+  const handleInputChange = (key, value) => {
+    setInputs((prev) => ({ ...prev, [key]: value }));
   };
 
-  // 个性化设置 - Logo
-  const submitLogo = async () => {
-    try {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: true }));
-      await updateOption('Logo', inputs.Logo);
-      showSuccess('Logo 已更新');
-    } catch (error) {
-      console.error('Logo 更新失败', error);
-      showError('Logo 更新失败');
-    } finally {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, Logo: false }));
-    }
-  };
-  // 个性化设置 - 首页内容
-  const submitOption = async (key) => {
+  const submitField = async (key, label) => {
     try {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        HomePageContent: true,
-      }));
+      setLoadingInput((prev) => ({ ...prev, [key]: true }));
       await updateOption(key, inputs[key]);
-      showSuccess('首页内容已更新');
+      showSuccess(label || `${key} 已更新`);
     } catch (error) {
-      console.error('首页内容更新失败', error);
-      showError('首页内容更新失败');
+      console.error(`${key} 更新失败`, error);
+      showError(`${key} 更新失败`);
     } finally {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        HomePageContent: false,
-      }));
-    }
-  };
-  // 个性化设置 - 关于
-  const submitAbout = async () => {
-    try {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, About: true }));
-      await updateOption('About', inputs.About);
-      showSuccess('关于内容已更新');
-    } catch (error) {
-      console.error('关于内容更新失败', error);
-      showError('关于内容更新失败');
-    } finally {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, About: false }));
-    }
-  };
-  // 个性化设置 - 页脚
-  const submitFooter = async () => {
-    try {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: true }));
-      await updateOption('Footer', inputs.Footer);
-      showSuccess('页脚内容已更新');
-    } catch (error) {
-      console.error('页脚内容更新失败', error);
-      showError('页脚内容更新失败');
-    } finally {
-      setLoadingInput((loadingInput) => ({ ...loadingInput, Footer: false }));
+      setLoadingInput((prev) => ({ ...prev, [key]: false }));
     }
   };
 
+  const submitNotice = () => submitField('Notice', t('公告已更新'));
+  const submitUserAgreement = () =>
+    submitField(LEGAL_USER_AGREEMENT_KEY, t('用户协议已更新'));
+  const submitPrivacyPolicy = () =>
+    submitField(LEGAL_PRIVACY_POLICY_KEY, t('隐私政策已更新'));
+  const submitSystemName = () => submitField('SystemName', t('系统名称已更新'));
+  const submitLogo = () => submitField('Logo', 'Logo 已更新');
+  const submitHomePageContent = () =>
+    submitField('HomePageContent', '首页内容已更新');
+  const submitAbout = () => submitField('About', '关于内容已更新');
+  const submitFooter = () => submitField('Footer', '页脚内容已更新');
+
   const checkUpdate = async () => {
     try {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        CheckUpdate: true,
-      }));
-      // Use a CORS proxy to avoid direct cross-origin requests to GitHub API
-      // Option 1: Use a public CORS proxy service
-      // const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
-      // const res = await API.get(
-      //   `${proxyUrl}https://api.github.com/repos/Calcium-Ion/new-api/releases/latest`,
-      // );
-
-      // Option 2: Use the JSON proxy approach which often works better with GitHub API
+      setLoadingInput((prev) => ({ ...prev, CheckUpdate: true }));
       const res = await fetch(
         'https://api.github.com/repos/Calcium-Ion/new-api/releases/latest',
         {
           headers: {
             Accept: 'application/json',
             'Content-Type': 'application/json',
-            // Adding User-Agent which is often required by GitHub API
             'User-Agent': 'new-api-update-checker',
           },
         },
       ).then((response) => response.json());
 
-      // Option 3: Use a local proxy endpoint
-      // Create a cached version of the response to avoid frequent GitHub API calls
-      // const res = await API.get('/api/status/github-latest-release');
-
       const { tag_name, body } = res;
       if (tag_name === statusState?.status?.version) {
         showSuccess(`已是最新版本：${tag_name}`);
@@ -272,25 +173,21 @@ const OtherSetting = () => {
       console.error('Failed to check for updates:', error);
       showError('检查更新失败，请稍后再试');
     } finally {
-      setLoadingInput((loadingInput) => ({
-        ...loadingInput,
-        CheckUpdate: false,
-      }));
+      setLoadingInput((prev) => ({ ...prev, CheckUpdate: false }));
     }
   };
+
   const getOptions = async () => {
     const res = await API.get('/api/option/');
     const { success, message, data } = res.data;
     if (success) {
-      let newInputs = {};
+      const newInputs = {};
       data.forEach((item) => {
         if (item.key in inputs) {
           newInputs[item.key] = item.value;
         }
       });
-      setInputs(newInputs);
-      formAPISettingGeneral.current.setValues(newInputs);
-      formAPIPersonalization.current.setValues(newInputs);
+      setInputs((prev) => ({ ...prev, ...newInputs }));
     } else {
       showError(message);
     }
@@ -298,9 +195,9 @@ const OtherSetting = () => {
 
   useEffect(() => {
     getOptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // Function to open GitHub release page
   const openGitHubRelease = () => {
     window.open(
       `https://github.com/Calcium-Ion/new-api/releases/tag/${updateData.tag_name}`,
@@ -314,210 +211,265 @@ const OtherSetting = () => {
   };
 
   return (
-    <Row>
-      <Col
-        span={24}
-        style={{
-          marginTop: '10px',
-          display: 'flex',
-          flexDirection: 'column',
-          gap: '10px',
-        }}
-      >
-        {/* 版本信息 */}
-        <Form>
-          <Card>
-            <Form.Section text={t('系统信息')}>
-              <Row>
-                <Col span={16}>
-                  <Space>
-                    <Text>
-                      {t('当前版本')}：
-                      {statusState?.status?.version || t('未知')}
-                    </Text>
-                    <Button
-                      type='primary'
-                      onClick={checkUpdate}
-                      loading={loadingInput['CheckUpdate']}
-                    >
-                      {t('检查更新')}
-                    </Button>
-                  </Space>
-                </Col>
-              </Row>
-              <Row>
-                <Col span={16}>
-                  <Text>
-                    {t('启动时间')}：{getStartTimeString()}
-                  </Text>
-                </Col>
-              </Row>
-            </Form.Section>
-          </Card>
-        </Form>
-        {/* 通用设置 */}
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (formAPISettingGeneral.current = formAPI)}
-        >
-          <Card>
-            <Form.Section text={t('通用设置')}>
-              <Form.TextArea
-                label={t('公告')}
-                placeholder={t(
-                  '在此输入新的公告内容，支持 Markdown & HTML 代码',
-                )}
-                field={'Notice'}
-                onChange={handleInputChange}
-                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-                autosize={{ minRows: 6, maxRows: 12 }}
-              />
-              <Button onClick={submitNotice} loading={loadingInput['Notice']}>
-                {t('设置公告')}
-              </Button>
-              <Form.TextArea
-                label={t('用户协议')}
-                placeholder={t(
-                  '在此输入用户协议内容，支持 Markdown & HTML 代码',
-                )}
-                field={LEGAL_USER_AGREEMENT_KEY}
-                onChange={handleInputChange}
-                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-                autosize={{ minRows: 6, maxRows: 12 }}
-                helpText={t(
-                  '填写用户协议内容后，用户注册时将被要求勾选已阅读用户协议',
-                )}
-              />
-              <Button
-                onClick={submitUserAgreement}
-                loading={loadingInput[LEGAL_USER_AGREEMENT_KEY]}
-              >
-                {t('设置用户协议')}
-              </Button>
-              <Form.TextArea
-                label={t('隐私政策')}
-                placeholder={t(
-                  '在此输入隐私政策内容，支持 Markdown & HTML 代码',
-                )}
-                field={LEGAL_PRIVACY_POLICY_KEY}
-                onChange={handleInputChange}
-                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-                autosize={{ minRows: 6, maxRows: 12 }}
-                helpText={t(
-                  '填写隐私政策内容后，用户注册时将被要求勾选已阅读隐私政策',
-                )}
-              />
-              <Button
-                onClick={submitPrivacyPolicy}
-                loading={loadingInput[LEGAL_PRIVACY_POLICY_KEY]}
-              >
-                {t('设置隐私政策')}
-              </Button>
-            </Form.Section>
-          </Card>
-        </Form>
-        {/* 个性化设置 */}
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (formAPIPersonalization.current = formAPI)}
-        >
-          <Card>
-            <Form.Section text={t('个性化设置')}>
-              <Form.Input
-                label={t('系统名称')}
-                placeholder={t('在此输入系统名称')}
-                field={'SystemName'}
-                onChange={handleInputChange}
-              />
-              <Button
-                onClick={submitSystemName}
-                loading={loadingInput['SystemName']}
-              >
-                {t('设置系统名称')}
-              </Button>
-              <Form.Input
-                label={t('Logo 图片地址')}
-                placeholder={t('在此输入 Logo 图片地址')}
-                field={'Logo'}
-                onChange={handleInputChange}
-              />
-              <Button onClick={submitLogo} loading={loadingInput['Logo']}>
-                {t('设置 Logo')}
-              </Button>
-              <Form.TextArea
-                label={t('首页内容')}
-                placeholder={t(
-                  '在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页',
-                )}
-                field={'HomePageContent'}
-                onChange={handleInputChange}
-                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-                autosize={{ minRows: 6, maxRows: 12 }}
-              />
-              <Button
-                onClick={() => submitOption('HomePageContent')}
-                loading={loadingInput['HomePageContent']}
-              >
-                {t('设置首页内容')}
-              </Button>
-              <Form.TextArea
-                label={t('关于')}
-                placeholder={t(
-                  '在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面',
-                )}
-                field={'About'}
-                onChange={handleInputChange}
-                style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-                autosize={{ minRows: 6, maxRows: 12 }}
-              />
-              <Button onClick={submitAbout} loading={loadingInput['About']}>
-                {t('设置关于')}
-              </Button>
-              {/*  */}
-              <Banner
-                fullMode={false}
-                type='info'
-                description={t(
-                  '移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目',
-                )}
-                closeIcon={null}
-                style={{ marginTop: 15 }}
-              />
-              <Form.Input
-                label={t('页脚')}
-                placeholder={t(
-                  '在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码',
-                )}
-                field={'Footer'}
-                onChange={handleInputChange}
-              />
-              <Button onClick={submitFooter} loading={loadingInput['Footer']}>
-                {t('设置页脚')}
-              </Button>
-            </Form.Section>
-          </Card>
-        </Form>
-      </Col>
-      <Modal
-        title={t('新版本') + '：' + updateData.tag_name}
-        visible={showUpdateModal}
-        onCancel={() => setShowUpdateModal(false)}
-        footer={[
-          <Button
-            key='details'
-            type='primary'
-            onClick={() => {
-              setShowUpdateModal(false);
-              openGitHubRelease();
-            }}
-          >
-            {t('详情')}
-          </Button>,
-        ]}
-      >
-        <div dangerouslySetInnerHTML={{ __html: updateData.content }}></div>
+    <div className='mt-2.5 flex flex-col gap-2.5'>
+      {/* 系统信息 */}
+      <Card>
+        <SectionHeader>{t('系统信息')}</SectionHeader>
+        <div className='space-y-3 text-sm text-foreground'>
+          <div className='flex flex-wrap items-center gap-3'>
+            <span>
+              {t('当前版本')}：
+              {statusState?.status?.version || t('未知')}
+            </span>
+            <Button
+              color='primary'
+              onPress={checkUpdate}
+              isPending={loadingInput['CheckUpdate']}
+            >
+              {t('检查更新')}
+            </Button>
+          </div>
+          <div>
+            {t('启动时间')}：{getStartTimeString()}
+          </div>
+        </div>
+      </Card>
+
+      {/* 通用设置 */}
+      <Card>
+        <SectionHeader>{t('通用设置')}</SectionHeader>
+        <div className='space-y-5'>
+          <div className='space-y-2'>
+            <FieldLabel>{t('公告')}</FieldLabel>
+            <textarea
+              value={inputs.Notice}
+              onChange={(event) =>
+                handleInputChange('Notice', event.target.value)
+              }
+              placeholder={t('在此输入新的公告内容，支持 Markdown & HTML 代码')}
+              rows={6}
+              style={codeFontStyle}
+              className={textareaClass}
+            />
+            <Button
+              onPress={submitNotice}
+              isPending={loadingInput['Notice']}
+              isDisabled={loading}
+            >
+              {t('设置公告')}
+            </Button>
+          </div>
+
+          <div className='space-y-2'>
+            <FieldLabel>{t('用户协议')}</FieldLabel>
+            <textarea
+              value={inputs[LEGAL_USER_AGREEMENT_KEY]}
+              onChange={(event) =>
+                handleInputChange(LEGAL_USER_AGREEMENT_KEY, event.target.value)
+              }
+              placeholder={t('在此输入用户协议内容，支持 Markdown & HTML 代码')}
+              rows={6}
+              style={codeFontStyle}
+              className={textareaClass}
+            />
+            <FieldHint>
+              {t('填写用户协议内容后，用户注册时将被要求勾选已阅读用户协议')}
+            </FieldHint>
+            <Button
+              onPress={submitUserAgreement}
+              isPending={loadingInput[LEGAL_USER_AGREEMENT_KEY]}
+              isDisabled={loading}
+            >
+              {t('设置用户协议')}
+            </Button>
+          </div>
+
+          <div className='space-y-2'>
+            <FieldLabel>{t('隐私政策')}</FieldLabel>
+            <textarea
+              value={inputs[LEGAL_PRIVACY_POLICY_KEY]}
+              onChange={(event) =>
+                handleInputChange(LEGAL_PRIVACY_POLICY_KEY, event.target.value)
+              }
+              placeholder={t('在此输入隐私政策内容，支持 Markdown & HTML 代码')}
+              rows={6}
+              style={codeFontStyle}
+              className={textareaClass}
+            />
+            <FieldHint>
+              {t('填写隐私政策内容后，用户注册时将被要求勾选已阅读隐私政策')}
+            </FieldHint>
+            <Button
+              onPress={submitPrivacyPolicy}
+              isPending={loadingInput[LEGAL_PRIVACY_POLICY_KEY]}
+              isDisabled={loading}
+            >
+              {t('设置隐私政策')}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* 个性化设置 */}
+      <Card>
+        <SectionHeader>{t('个性化设置')}</SectionHeader>
+        <div className='space-y-5'>
+          <div className='space-y-2'>
+            <FieldLabel>{t('系统名称')}</FieldLabel>
+            <input
+              type='text'
+              value={inputs.SystemName}
+              onChange={(event) =>
+                handleInputChange('SystemName', event.target.value)
+              }
+              placeholder={t('在此输入系统名称')}
+              className={inputClass}
+            />
+            <Button
+              onPress={submitSystemName}
+              isPending={loadingInput['SystemName']}
+              isDisabled={loading}
+            >
+              {t('设置系统名称')}
+            </Button>
+          </div>
+
+          <div className='space-y-2'>
+            <FieldLabel>{t('Logo 图片地址')}</FieldLabel>
+            <input
+              type='text'
+              value={inputs.Logo}
+              onChange={(event) =>
+                handleInputChange('Logo', event.target.value)
+              }
+              placeholder={t('在此输入 Logo 图片地址')}
+              className={inputClass}
+            />
+            <Button
+              onPress={submitLogo}
+              isPending={loadingInput['Logo']}
+              isDisabled={loading}
+            >
+              {t('设置 Logo')}
+            </Button>
+          </div>
+
+          <div className='space-y-2'>
+            <FieldLabel>{t('首页内容')}</FieldLabel>
+            <textarea
+              value={inputs.HomePageContent}
+              onChange={(event) =>
+                handleInputChange('HomePageContent', event.target.value)
+              }
+              placeholder={t(
+                '在此输入首页内容，支持 Markdown & HTML 代码，设置后首页的状态信息将不再显示。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为首页',
+              )}
+              rows={6}
+              style={codeFontStyle}
+              className={textareaClass}
+            />
+            <Button
+              onPress={submitHomePageContent}
+              isPending={loadingInput['HomePageContent']}
+              isDisabled={loading}
+            >
+              {t('设置首页内容')}
+            </Button>
+          </div>
+
+          <div className='space-y-2'>
+            <FieldLabel>{t('关于')}</FieldLabel>
+            <textarea
+              value={inputs.About}
+              onChange={(event) =>
+                handleInputChange('About', event.target.value)
+              }
+              placeholder={t(
+                '在此输入新的关于内容，支持 Markdown & HTML 代码。如果输入的是一个链接，则会使用该链接作为 iframe 的 src 属性，这允许你设置任意网页作为关于页面',
+              )}
+              rows={6}
+              style={codeFontStyle}
+              className={textareaClass}
+            />
+            <Button
+              onPress={submitAbout}
+              isPending={loadingInput['About']}
+              isDisabled={loading}
+            >
+              {t('设置关于')}
+            </Button>
+          </div>
+
+          {/* Copyright preservation banner */}
+          <div className='flex items-start gap-2 rounded-xl border border-primary/30 bg-primary/5 px-3 py-2 text-sm text-muted'>
+            <Info size={14} className='mt-0.5 shrink-0 text-primary' />
+            <span>
+              {t(
+                '移除 One API 的版权标识必须首先获得授权，项目维护需要花费大量精力，如果本项目对你有意义，请主动支持本项目',
+              )}
+            </span>
+          </div>
+
+          <div className='space-y-2'>
+            <FieldLabel>{t('页脚')}</FieldLabel>
+            <input
+              type='text'
+              value={inputs.Footer}
+              onChange={(event) =>
+                handleInputChange('Footer', event.target.value)
+              }
+              placeholder={t(
+                '在此输入新的页脚，留空则使用默认页脚，支持 HTML 代码',
+              )}
+              className={inputClass}
+            />
+            <Button
+              onPress={submitFooter}
+              isPending={loadingInput['Footer']}
+              isDisabled={loading}
+            >
+              {t('设置页脚')}
+            </Button>
+          </div>
+        </div>
+      </Card>
+
+      {/* New version available modal */}
+      <Modal state={updateModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='lg' scroll='inside' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {t('新版本') + '：' + updateData.tag_name}
+              </ModalHeader>
+              <ModalBody className='max-h-[60vh] overflow-y-auto px-4 py-4 md:px-6'>
+                <div
+                  className='prose prose-sm max-w-none dark:prose-invert'
+                  dangerouslySetInnerHTML={{ __html: updateData.content }}
+                />
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button
+                  variant='light'
+                  onPress={() => setShowUpdateModal(false)}
+                >
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={() => {
+                    setShowUpdateModal(false);
+                    openGitHubRelease();
+                  }}
+                >
+                  {t('详情')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
-    </Row>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/PaymentSetting.jsx b/web/src/components/settings/PaymentSetting.jsx
index 080c3e6e0ba..554b4280f21 100644
--- a/web/src/components/settings/PaymentSetting.jsx
+++ b/web/src/components/settings/PaymentSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
+import { Card, Spinner, Tabs } from '@heroui/react';
 import SettingsGeneralPayment from '../../pages/Setting/Payment/SettingsGeneralPayment';
 import SettingsPaymentGateway from '../../pages/Setting/Payment/SettingsPaymentGateway';
 import SettingsPaymentGatewayStripe from '../../pages/Setting/Payment/SettingsPaymentGatewayStripe';
@@ -155,60 +155,66 @@ const PaymentSetting = () => {
   }, []);
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        <Card style={{ marginTop: '10px' }}>
-          <Tabs
-            type='card'
-            defaultActiveKey='general'
-            contentStyle={{ paddingTop: 24 }}
-          >
-            <Tabs.TabPane tab={t('通用设置')} itemKey='general'>
-              <SettingsGeneralPayment
-                options={inputs}
-                refresh={onRefresh}
-                hideSectionTitle
-              />
-            </Tabs.TabPane>
-            <Tabs.TabPane tab={t('易支付设置')} itemKey='epay'>
-              <SettingsPaymentGateway
-                options={inputs}
-                refresh={onRefresh}
-                hideSectionTitle
-              />
-            </Tabs.TabPane>
-            <Tabs.TabPane tab={t('Stripe 设置')} itemKey='stripe'>
-              <SettingsPaymentGatewayStripe
-                options={inputs}
-                refresh={onRefresh}
-                hideSectionTitle
-              />
-            </Tabs.TabPane>
-            <Tabs.TabPane tab={t('Creem 设置')} itemKey='creem'>
-              <SettingsPaymentGatewayCreem
-                options={inputs}
-                refresh={onRefresh}
-                hideSectionTitle
-              />
-            </Tabs.TabPane>
-            <Tabs.TabPane tab={t('Waffo 设置')} itemKey='waffo'>
-              <SettingsPaymentGatewayWaffo
-                options={inputs}
-                refresh={onRefresh}
-                hideSectionTitle
-              />
-            </Tabs.TabPane>
-            {/*<Tabs.TabPane tab={t('Waffo Pancake 设置')} itemKey='waffo-pancake'>*/}
-            {/*  <SettingsPaymentGatewayWaffoPancake*/}
-            {/*    options={inputs}*/}
-            {/*    refresh={onRefresh}*/}
-            {/*    hideSectionTitle*/}
-            {/*  />*/}
-            {/*</Tabs.TabPane>*/}
-          </Tabs>
-        </Card>
-      </Spin>
-    </>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      <Card className='mt-2.5'>
+        <Tabs defaultSelectedKey='general' variant='secondary'>
+          <Tabs.List aria-label={t('支付设置')}>
+            <Tabs.Tab id='general'>{t('通用设置')}</Tabs.Tab>
+            <Tabs.Tab id='epay'>{t('易支付设置')}</Tabs.Tab>
+            <Tabs.Tab id='stripe'>{t('Stripe 设置')}</Tabs.Tab>
+            <Tabs.Tab id='creem'>{t('Creem 设置')}</Tabs.Tab>
+            <Tabs.Tab id='waffo'>{t('Waffo 设置')}</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel id='general' className='pt-6'>
+            <SettingsGeneralPayment
+              options={inputs}
+              refresh={onRefresh}
+              hideSectionTitle
+            />
+          </Tabs.Panel>
+          <Tabs.Panel id='epay' className='pt-6'>
+            <SettingsPaymentGateway
+              options={inputs}
+              refresh={onRefresh}
+              hideSectionTitle
+            />
+          </Tabs.Panel>
+          <Tabs.Panel id='stripe' className='pt-6'>
+            <SettingsPaymentGatewayStripe
+              options={inputs}
+              refresh={onRefresh}
+              hideSectionTitle
+            />
+          </Tabs.Panel>
+          <Tabs.Panel id='creem' className='pt-6'>
+            <SettingsPaymentGatewayCreem
+              options={inputs}
+              refresh={onRefresh}
+              hideSectionTitle
+            />
+          </Tabs.Panel>
+          <Tabs.Panel id='waffo' className='pt-6'>
+            <SettingsPaymentGatewayWaffo
+              options={inputs}
+              refresh={onRefresh}
+              hideSectionTitle
+            />
+          </Tabs.Panel>
+          {/*<Tabs.Panel id='waffo-pancake' className='pt-6'>*/}
+          {/*  <SettingsPaymentGatewayWaffoPancake*/}
+          {/*    options={inputs}*/}
+          {/*    refresh={onRefresh}*/}
+          {/*    hideSectionTitle*/}
+          {/*  />*/}
+          {/*</Tabs.Panel>*/}
+        </Tabs>
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/PerformanceSetting.jsx b/web/src/components/settings/PerformanceSetting.jsx
index 6f1a547acc1..1b8b2648011 100644
--- a/web/src/components/settings/PerformanceSetting.jsx
+++ b/web/src/components/settings/PerformanceSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin } from '@douyinfe/semi-ui';
+import { Card, Spinner } from '@heroui/react';
 import SettingsPerformance from '../../pages/Setting/Performance/SettingsPerformance';
 import { API, showError, toBoolean } from '../../helpers';
 
@@ -66,14 +66,17 @@ const PerformanceSetting = () => {
   }, []);
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        {/* 性能设置 */}
-        <Card style={{ marginTop: '10px' }}>
-          <SettingsPerformance options={inputs} refresh={onRefresh} />
-        </Card>
-      </Spin>
-    </>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      {/* Performance settings */}
+      <Card className='mt-2.5'>
+        <SettingsPerformance options={inputs} refresh={onRefresh} />
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/PersonalSetting.jsx b/web/src/components/settings/PersonalSetting.jsx
index 4f9ce2d6050..e03a4f61df1 100644
--- a/web/src/components/settings/PersonalSetting.jsx
+++ b/web/src/components/settings/PersonalSetting.jsx
@@ -32,10 +32,9 @@ import {
   setUserData,
 } from '../../helpers';
 import { UserContext } from '../../context/User';
-import { Modal } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 
-// 导入子组件
+// Import child components.
 import UserInfoHeader from './personal/components/UserInfoHeader';
 import AccountManagement from './personal/cards/AccountManagement';
 import NotificationSettings from './personal/cards/NotificationSettings';
@@ -199,7 +198,7 @@ const PersonalSetting = () => {
         showError(message);
       }
     } catch (error) {
-      // 忽略错误，保留默认状态
+      // Ignore errors and keep the default state.
     }
   };
 
@@ -319,10 +318,6 @@ const PersonalSetting = () => {
   };
 
   const changePassword = async () => {
-    // if (inputs.original_password === '') {
-    //   showError(t('请输入原密码！'));
-    //   return;
-    // }
     if (inputs.set_new_password === '') {
       showError(t('请输入新密码！'));
       return;
@@ -398,7 +393,7 @@ const PersonalSetting = () => {
       showSuccess(t('已复制：') + text);
     } else {
       // setSearchKeyword(text);
-      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
+      showError(`${t('无法复制到剪贴板，请手动复制')}: ${text}`);
     }
   };
 
@@ -452,10 +447,10 @@ const PersonalSetting = () => {
     <div className='mt-[60px]'>
       <div className='flex justify-center'>
         <div className='w-full max-w-7xl mx-auto px-2'>
-          {/* 顶部用户信息区域 */}
+          {/* User info header */}
           <UserInfoHeader t={t} userState={userState} />
 
-          {/* 签到日历 - 仅在启用时显示 */}
+          {/* Checkin calendar, shown only when enabled */}
           {status?.checkin_enabled && (
             <div className='mt-4 md:mt-6'>
               <CheckinCalendar
@@ -467,9 +462,9 @@ const PersonalSetting = () => {
             </div>
           )}
 
-          {/* 账户管理和其他设置 */}
+          {/* Account management and other settings */}
           <div className='grid grid-cols-1 xl:grid-cols-2 items-start gap-4 md:gap-6 mt-4 md:mt-6'>
-            {/* 左侧：账户管理设置 */}
+            {/* Left column: account management settings */}
             <div className='flex flex-col gap-4 md:gap-6'>
               <AccountManagement
                 t={t}
@@ -490,11 +485,11 @@ const PersonalSetting = () => {
                 onPasskeyDelete={handleRemovePasskey}
               />
 
-              {/* 偏好设置（语言等） */}
+              {/* Preferences, including language */}
               <PreferencesSettings t={t} />
             </div>
 
-            {/* 右侧：其他设置 */}
+            {/* Right column: notification settings */}
             <NotificationSettings
               t={t}
               notificationSettings={notificationSettings}
@@ -505,7 +500,7 @@ const PersonalSetting = () => {
         </div>
       </div>
 
-      {/* 模态框组件 */}
+      {/* Modal components */}
       <EmailBindModal
         t={t}
         showEmailBindModal={showEmailBindModal}
diff --git a/web/src/components/settings/RateLimitSetting.jsx b/web/src/components/settings/RateLimitSetting.jsx
index be83e027729..a49b1f0c795 100644
--- a/web/src/components/settings/RateLimitSetting.jsx
+++ b/web/src/components/settings/RateLimitSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin } from '@douyinfe/semi-ui';
+import { Card, Spinner } from '@heroui/react';
 
 import { API, showError, toBoolean } from '../../helpers';
 import { useTranslation } from 'react-i18next';
@@ -75,14 +75,17 @@ const RateLimitSetting = () => {
   }, []);
 
   return (
-    <>
-      <Spin spinning={loading} size='large'>
-        {/* AI请求速率限制 */}
-        <Card style={{ marginTop: '10px' }}>
-          <RequestRateLimit options={inputs} refresh={onRefresh} />
-        </Card>
-      </Spin>
-    </>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      {/* AI request rate limit */}
+      <Card className='mt-2.5'>
+        <RequestRateLimit options={inputs} refresh={onRefresh} />
+      </Card>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/RatioSetting.jsx b/web/src/components/settings/RatioSetting.jsx
index c1fa3b863cd..ad3ca2e2a00 100644
--- a/web/src/components/settings/RatioSetting.jsx
+++ b/web/src/components/settings/RatioSetting.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Card, Spin, Tabs } from '@douyinfe/semi-ui';
+import { Card, Spinner, Tabs } from '@heroui/react';
 import { useTranslation } from 'react-i18next';
 
 import ModelPricingCombined from '../../pages/Setting/Ratio/ModelPricingCombined';
@@ -61,7 +61,7 @@ const RatioSetting = () => {
           try {
             item.value = JSON.stringify(JSON.parse(item.value), null, 2);
           } catch (e) {
-            // 如果后端返回的不是合法 JSON，直接展示
+            // Keep the raw value when the backend returns invalid JSON.
           }
         }
         if (['DefaultUseAutoGroup', 'ExposeRatioEnabled'].includes(item.key)) {
@@ -93,24 +93,35 @@ const RatioSetting = () => {
   }, []);
 
   return (
-    <Spin spinning={loading} size='large'>
-      <Card style={{ marginTop: '10px' }}>
-        <Tabs type='card' defaultActiveKey='pricing'>
-          <Tabs.TabPane tab={t('模型定价设置')} itemKey='pricing'>
+    <div className='relative'>
+      {loading ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center rounded-2xl bg-background/70 backdrop-blur-sm'>
+          <Spinner size='lg' />
+        </div>
+      ) : null}
+      <Card className='mt-2.5'>
+        <Tabs defaultSelectedKey='pricing' variant='secondary'>
+          <Tabs.List aria-label={t('倍率设置')}>
+            <Tabs.Tab id='pricing'>{t('模型定价设置')}</Tabs.Tab>
+            <Tabs.Tab id='group'>{t('分组相关设置')}</Tabs.Tab>
+            <Tabs.Tab id='unset_models'>{t('未设置价格模型')}</Tabs.Tab>
+            <Tabs.Tab id='upstream_sync'>{t('上游倍率同步')}</Tabs.Tab>
+          </Tabs.List>
+          <Tabs.Panel id='pricing' className='pt-6'>
             <ModelPricingCombined options={inputs} refresh={onRefresh} />
-          </Tabs.TabPane>
-          <Tabs.TabPane tab={t('分组相关设置')} itemKey='group'>
+          </Tabs.Panel>
+          <Tabs.Panel id='group' className='pt-6'>
             <GroupRatioSettings options={inputs} refresh={onRefresh} />
-          </Tabs.TabPane>
-          <Tabs.TabPane tab={t('未设置价格模型')} itemKey='unset_models'>
+          </Tabs.Panel>
+          <Tabs.Panel id='unset_models' className='pt-6'>
             <ModelRatioNotSetEditor options={inputs} refresh={onRefresh} />
-          </Tabs.TabPane>
-          <Tabs.TabPane tab={t('上游倍率同步')} itemKey='upstream_sync'>
+          </Tabs.Panel>
+          <Tabs.Panel id='upstream_sync' className='pt-6'>
             <UpstreamRatioSync options={inputs} refresh={onRefresh} />
-          </Tabs.TabPane>
+          </Tabs.Panel>
         </Tabs>
       </Card>
-    </Spin>
+    </div>
   );
 };
 
diff --git a/web/src/components/settings/SystemSetting.jsx b/web/src/components/settings/SystemSetting.jsx
index 63b20c70f4d..c461ed40e9d 100644
--- a/web/src/components/settings/SystemSetting.jsx
+++ b/web/src/components/settings/SystemSetting.jsx
@@ -6,33 +6,17 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  Button,
-  Form,
-  Row,
-  Col,
-  Typography,
-  Modal,
-  Banner,
-  TagInput,
-  Spin,
-  Card,
-  Radio,
-  Select,
-} from '@douyinfe/semi-ui';
-const { Text } = Typography;
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Card, Spinner } from '@heroui/react';
+import axios from 'axios';
+import { useTranslation } from 'react-i18next';
+import { X } from 'lucide-react';
 import {
   API,
   removeTrailingSlash,
@@ -40,13 +24,191 @@ import {
   showSuccess,
   toBoolean,
 } from '../../helpers';
-import axios from 'axios';
-import { useTranslation } from 'react-i18next';
 import CustomOAuthSetting from './CustomOAuthSetting';
+import ConfirmDialog from '../common/ui/ConfirmDialog';
+
+// ----------------------------- helpers -----------------------------
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+function FieldLabel({ children }) {
+  if (!children) return null;
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function SectionHeader({ title }) {
+  if (!title) return null;
+  return (
+    <div className='border-b border-border pb-2 text-base font-semibold text-foreground'>
+      {title}
+    </div>
+  );
+}
+
+function InfoBanner({ children }) {
+  return (
+    <div className='flex items-start gap-2 rounded-xl border border-primary/20 bg-primary/5 px-3 py-2 text-sm text-foreground'>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+function TextInput({
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+  disabled,
+  onKeyDown,
+}) {
+  return (
+    <input
+      type={type}
+      value={value ?? ''}
+      onChange={(event) => onChange?.(event.target.value)}
+      onKeyDown={onKeyDown}
+      placeholder={placeholder}
+      disabled={disabled}
+      className={inputClass}
+    />
+  );
+}
+
+function Field({ label, hint, required, children }) {
+  return (
+    <div className='space-y-2'>
+      <FieldLabel>
+        {label}
+        {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+      </FieldLabel>
+      {children}
+      <FieldHint>{hint}</FieldHint>
+    </div>
+  );
+}
+
+function CheckboxRow({ label, hint, value, onChange }) {
+  return (
+    <div className='flex items-start gap-2'>
+      <input
+        type='checkbox'
+        checked={!!value}
+        onChange={(event) => onChange?.(event.target.checked)}
+        className='mt-0.5 h-4 w-4 shrink-0 accent-primary'
+      />
+      <div className='flex-1'>
+        <div className='text-sm text-foreground'>{label}</div>
+        {hint ? <div className='mt-1 text-xs text-muted'>{hint}</div> : null}
+      </div>
+    </div>
+  );
+}
+
+// Tag input: replaces Semi `<TagInput value onChange placeholder>`. Commits
+// on Enter / `,` / blur. Supports value-as-array of strings.
+function TagInput({ value = [], onChange, placeholder }) {
+  const [draft, setDraft] = useState('');
+  const tags = Array.isArray(value) ? value : [];
+
+  const commit = (raw) => {
+    const next = String(raw || '')
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (next.length === 0) return;
+    const merged = [...new Set([...tags, ...next])];
+    onChange?.(merged);
+    setDraft('');
+  };
+
+  const removeAt = (idx) => {
+    onChange?.(tags.filter((_, i) => i !== idx));
+  };
+
+  return (
+    <div className='flex min-h-[40px] flex-wrap items-center gap-1.5 rounded-xl border border-border bg-background px-2 py-1.5 text-sm focus-within:border-primary'>
+      {tags.map((tag, idx) => (
+        <span
+          key={`${tag}-${idx}`}
+          className='inline-flex items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs'
+        >
+          <span>{tag}</span>
+          <button
+            type='button'
+            onClick={() => removeAt(idx)}
+            aria-label='remove'
+            className='text-muted hover:text-foreground'
+          >
+            <X size={12} />
+          </button>
+        </span>
+      ))}
+      <input
+        type='text'
+        value={draft}
+        onChange={(event) => {
+          const v = event.target.value;
+          if (v.endsWith(',')) commit(v.slice(0, -1));
+          else setDraft(v);
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            commit(draft);
+          } else if (event.key === 'Backspace' && draft === '' && tags.length > 0) {
+            removeAt(tags.length - 1);
+          }
+        }}
+        onBlur={() => {
+          if (draft.trim()) commit(draft);
+        }}
+        placeholder={tags.length === 0 ? placeholder : ''}
+        className='flex-1 min-w-[120px] bg-transparent text-foreground outline-none placeholder:text-muted'
+      />
+    </div>
+  );
+}
+
+// Segmented (radio-button) control. Replaces Semi `<Radio.Group type='button'>`.
+function Segmented({ value, options, onChange }) {
+  return (
+    <div className='inline-flex overflow-hidden rounded-xl border border-border'>
+      {options.map((option) => {
+        const active = option.value === value;
+        return (
+          <button
+            key={String(option.value)}
+            type='button'
+            onClick={() => onChange?.(option.value)}
+            className={`px-4 py-1.5 text-sm font-medium transition-colors ${
+              active
+                ? 'bg-foreground text-background'
+                : 'bg-background text-muted hover:bg-surface-secondary'
+            }`}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+// ----------------------------- main -----------------------------
 
 const SystemSetting = () => {
   const { t } = useTranslation();
-  let [inputs, setInputs] = useState({
+  const [inputs, setInputs] = useState({
     PasswordLoginEnabled: '',
     PasswordRegisterEnabled: '',
     EmailVerificationEnabled: '',
@@ -84,7 +246,7 @@ const SystemSetting = () => {
     'passkey.enabled': '',
     'passkey.rp_display_name': '',
     'passkey.rp_id': '',
-    'passkey.origins': [],
+    'passkey.origins': '',
     'passkey.allow_insecure_origin': '',
     'passkey.user_verification': 'preferred',
     'passkey.attachment_preference': '',
@@ -101,11 +263,10 @@ const SystemSetting = () => {
     LinuxDOClientSecret: '',
     LinuxDOMinimumTrustLevel: '',
     ServerAddress: '',
-    // SSRF防护配置
     'fetch_setting.enable_ssrf_protection': true,
     'fetch_setting.allow_private_ip': '',
-    'fetch_setting.domain_filter_mode': false, // true 白名单，false 黑名单
-    'fetch_setting.ip_filter_mode': false, // true 白名单，false 黑名单
+    'fetch_setting.domain_filter_mode': false,
+    'fetch_setting.ip_filter_mode': false,
     'fetch_setting.domain_list': [],
     'fetch_setting.ip_list': [],
     'fetch_setting.allowed_ports': [],
@@ -115,24 +276,29 @@ const SystemSetting = () => {
   const [originInputs, setOriginInputs] = useState({});
   const [loading, setLoading] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
-  const formApiRef = useRef(null);
   const [emailDomainWhitelist, setEmailDomainWhitelist] = useState([]);
-  const [showPasswordLoginConfirmModal, setShowPasswordLoginConfirmModal] =
+  const [showPasswordLoginConfirm, setShowPasswordLoginConfirm] =
     useState(false);
-  const [linuxDOOAuthEnabled, setLinuxDOOAuthEnabled] = useState(false);
   const [emailToAdd, setEmailToAdd] = useState('');
   const [domainFilterMode, setDomainFilterMode] = useState(true);
   const [ipFilterMode, setIpFilterMode] = useState(true);
   const [domainList, setDomainList] = useState([]);
   const [ipList, setIpList] = useState([]);
   const [allowedPorts, setAllowedPorts] = useState([]);
+  // Tracks the previous PasswordLoginEnabled value so that cancelling the
+  // confirmation modal can revert the checkbox visually.
+  const previousPasswordLoginRef = useRef(null);
+
+  const setField = (key) => (value) => {
+    setInputs((prev) => ({ ...prev, [key]: value }));
+  };
 
   const getOptions = async () => {
     setLoading(true);
     const res = await API.get('/api/option/');
     const { success, message, data } = res.data;
     if (success) {
-      let newInputs = {};
+      const newInputs = {};
       data.forEach((item) => {
         switch (item.key) {
           case 'TopupGroupRatio':
@@ -193,17 +359,14 @@ const SystemSetting = () => {
             item.value = toBoolean(item.value);
             break;
           case 'passkey.origins':
-            // origins是逗号分隔的字符串，直接使用
             item.value = item.value || '';
             break;
           case 'passkey.rp_display_name':
           case 'passkey.rp_id':
           case 'passkey.attachment_preference':
-            // 确保字符串字段不为null/undefined
             item.value = item.value || '';
             break;
           case 'passkey.user_verification':
-            // 确保有默认值
             item.value = item.value || 'preferred';
             break;
           case 'Price':
@@ -215,20 +378,14 @@ const SystemSetting = () => {
         }
         newInputs[item.key] = item.value;
       });
-      setInputs(newInputs);
+      setInputs((prev) => ({ ...prev, ...newInputs }));
       setOriginInputs(newInputs);
-      // 同步模式布尔到本地状态
-      if (
-        typeof newInputs['fetch_setting.domain_filter_mode'] !== 'undefined'
-      ) {
+      if (typeof newInputs['fetch_setting.domain_filter_mode'] !== 'undefined') {
         setDomainFilterMode(!!newInputs['fetch_setting.domain_filter_mode']);
       }
       if (typeof newInputs['fetch_setting.ip_filter_mode'] !== 'undefined') {
         setIpFilterMode(!!newInputs['fetch_setting.ip_filter_mode']);
       }
-      if (formApiRef.current) {
-        formApiRef.current.setValues(newInputs);
-      }
       setIsLoaded(true);
     } else {
       showError(message);
@@ -238,12 +395,12 @@ const SystemSetting = () => {
 
   useEffect(() => {
     getOptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const updateOptions = async (options) => {
     setLoading(true);
     try {
-      // 分离 checkbox 类型的选项和其他选项
       const checkboxOptions = options.filter((opt) =>
         opt.key.toLowerCase().endsWith('enabled'),
       );
@@ -251,7 +408,6 @@ const SystemSetting = () => {
         (opt) => !opt.key.toLowerCase().endsWith('enabled'),
       );
 
-      // 处理 checkbox 类型的选项
       for (const opt of checkboxOptions) {
         const res = await API.put('/api/option/', {
           key: opt.key,
@@ -263,7 +419,6 @@ const SystemSetting = () => {
         }
       }
 
-      // 处理其他选项
       if (otherOptions.length > 0) {
         const requestQueue = otherOptions.map((opt) =>
           API.put('/api/option/', {
@@ -272,81 +427,65 @@ const SystemSetting = () => {
               typeof opt.value === 'boolean' ? opt.value.toString() : opt.value,
           }),
         );
-
         const results = await Promise.all(requestQueue);
-
-        // 检查所有请求是否成功
         const errorResults = results.filter((res) => !res.data.success);
-        errorResults.forEach((res) => {
-          showError(res.data.message);
-        });
+        errorResults.forEach((res) => showError(res.data.message));
       }
 
       showSuccess(t('更新成功'));
-      // 更新本地状态
-      const newInputs = { ...inputs };
-      options.forEach((opt) => {
-        newInputs[opt.key] = opt.value;
+      setInputs((prev) => {
+        const next = { ...prev };
+        options.forEach((opt) => {
+          next[opt.key] = opt.value;
+        });
+        return next;
       });
-      setInputs(newInputs);
     } catch (error) {
       showError(t('更新失败'));
     }
     setLoading(false);
   };
 
-  const handleFormChange = (values) => {
-    setInputs(values);
-  };
-
+  // ---------- Submit handlers ----------
   const submitWorker = async () => {
-    let WorkerUrl = removeTrailingSlash(inputs.WorkerUrl);
+    const workerUrl = removeTrailingSlash(inputs.WorkerUrl);
     const options = [
-      { key: 'WorkerUrl', value: WorkerUrl },
+      { key: 'WorkerUrl', value: workerUrl },
       {
         key: 'WorkerAllowHttpImageRequestEnabled',
         value: inputs.WorkerAllowHttpImageRequestEnabled ? 'true' : 'false',
       },
     ];
-    if (inputs.WorkerValidKey !== '' || WorkerUrl === '') {
+    if (inputs.WorkerValidKey !== '' || workerUrl === '') {
       options.push({ key: 'WorkerValidKey', value: inputs.WorkerValidKey });
     }
     await updateOptions(options);
   };
 
   const submitServerAddress = async () => {
-    let ServerAddress = removeTrailingSlash(inputs.ServerAddress);
-    await updateOptions([{ key: 'ServerAddress', value: ServerAddress }]);
+    const serverAddress = removeTrailingSlash(inputs.ServerAddress);
+    await updateOptions([{ key: 'ServerAddress', value: serverAddress }]);
   };
 
   const submitSMTP = async () => {
     const options = [];
-
-    if (originInputs['SMTPServer'] !== inputs.SMTPServer) {
+    if (originInputs['SMTPServer'] !== inputs.SMTPServer)
       options.push({ key: 'SMTPServer', value: inputs.SMTPServer });
-    }
-    if (originInputs['SMTPAccount'] !== inputs.SMTPAccount) {
+    if (originInputs['SMTPAccount'] !== inputs.SMTPAccount)
       options.push({ key: 'SMTPAccount', value: inputs.SMTPAccount });
-    }
-    if (originInputs['SMTPFrom'] !== inputs.SMTPFrom) {
+    if (originInputs['SMTPFrom'] !== inputs.SMTPFrom)
       options.push({ key: 'SMTPFrom', value: inputs.SMTPFrom });
-    }
     if (
       originInputs['SMTPPort'] !== inputs.SMTPPort &&
       inputs.SMTPPort !== ''
-    ) {
+    )
       options.push({ key: 'SMTPPort', value: inputs.SMTPPort });
-    }
     if (
       originInputs['SMTPToken'] !== inputs.SMTPToken &&
       inputs.SMTPToken !== ''
-    ) {
+    )
       options.push({ key: 'SMTPToken', value: inputs.SMTPToken });
-    }
-
-    if (options.length > 0) {
-      await updateOptions(options);
-    }
+    if (options.length > 0) await updateOptions(options);
   };
 
   const submitEmailDomainWhitelist = async () => {
@@ -364,8 +503,6 @@ const SystemSetting = () => {
 
   const submitSSRF = async () => {
     const options = [];
-
-    // 处理域名过滤模式与列表
     options.push({
       key: 'fetch_setting.domain_filter_mode',
       value: domainFilterMode,
@@ -376,8 +513,6 @@ const SystemSetting = () => {
         value: JSON.stringify(domainList),
       });
     }
-
-    // 处理IP过滤模式与列表
     options.push({
       key: 'fetch_setting.ip_filter_mode',
       value: ipFilterMode,
@@ -388,38 +523,28 @@ const SystemSetting = () => {
         value: JSON.stringify(ipList),
       });
     }
-
-    // 处理端口配置
     if (Array.isArray(allowedPorts)) {
       options.push({
         key: 'fetch_setting.allowed_ports',
         value: JSON.stringify(allowedPorts),
       });
     }
-
-    if (options.length > 0) {
-      await updateOptions(options);
-    }
+    if (options.length > 0) await updateOptions(options);
   };
 
   const handleAddEmail = () => {
     if (emailToAdd && emailToAdd.trim() !== '') {
       const domain = emailToAdd.trim();
-
-      // 验证域名格式
       const domainRegex =
         /^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,}$/;
       if (!domainRegex.test(domain)) {
         showError(t('邮箱域名格式不正确，请输入有效的域名，如 gmail.com'));
         return;
       }
-
-      // 检查是否已存在
       if (emailDomainWhitelist.includes(domain)) {
         showError(t('该域名已存在于白名单中'));
         return;
       }
-
       setEmailDomainWhitelist([...emailDomainWhitelist, domain]);
       setEmailToAdd('');
       showSuccess(t('已添加到白名单'));
@@ -428,7 +553,6 @@ const SystemSetting = () => {
 
   const submitWeChat = async () => {
     const options = [];
-
     if (originInputs['WeChatServerAddress'] !== inputs.WeChatServerAddress) {
       options.push({
         key: 'WeChatServerAddress',
@@ -453,18 +577,13 @@ const SystemSetting = () => {
         value: inputs.WeChatServerToken,
       });
     }
-
-    if (options.length > 0) {
-      await updateOptions(options);
-    }
+    if (options.length > 0) await updateOptions(options);
   };
 
   const submitGitHubOAuth = async () => {
     const options = [];
-
-    if (originInputs['GitHubClientId'] !== inputs.GitHubClientId) {
+    if (originInputs['GitHubClientId'] !== inputs.GitHubClientId)
       options.push({ key: 'GitHubClientId', value: inputs.GitHubClientId });
-    }
     if (
       originInputs['GitHubClientSecret'] !== inputs.GitHubClientSecret &&
       inputs.GitHubClientSecret !== ''
@@ -474,15 +593,11 @@ const SystemSetting = () => {
         value: inputs.GitHubClientSecret,
       });
     }
-
-    if (options.length > 0) {
-      await updateOptions(options);
-    }
+    if (options.length > 0) await updateOptions(options);
   };
 
   const submitDiscordOAuth = async () => {
     const options = [];
-
     if (originInputs['discord.client_id'] !== inputs['discord.client_id']) {
       options.push({
         key: 'discord.client_id',
@@ -499,10 +614,7 @@ const SystemSetting = () => {
         value: inputs['discord.client_secret'],
       });
     }
-
-    if (options.length > 0) {
-      await updateOptions(options);
-    }
+    if (options.length > 0) await updateOptions(options);
   };
 
   const submitOIDCSettings = async () => {
@@ -516,10 +628,12 @@ const SystemSetting = () => {
       }
       try {
         const res = await axios.create().get(inputs['oidc.well_known']);
-        inputs['oidc.authorization_endpoint'] =
-          res.data['authorization_endpoint'];
-        inputs['oidc.token_endpoint'] = res.data['token_endpoint'];
-        inputs['oidc.user_info_endpoint'] = res.data['userinfo_endpoint'];
+        setInputs((prev) => ({
+          ...prev,
+          'oidc.authorization_endpoint': res.data['authorization_endpoint'],
+          'oidc.token_endpoint': res.data['token_endpoint'],
+          'oidc.user_info_endpoint': res.data['userinfo_endpoint'],
+        }));
         showSuccess(t('获取 OIDC 配置成功！'));
       } catch (err) {
         console.error(err);
@@ -531,7 +645,6 @@ const SystemSetting = () => {
     }
 
     const options = [];
-
     if (originInputs['oidc.well_known'] !== inputs['oidc.well_known']) {
       options.push({
         key: 'oidc.well_known',
@@ -539,7 +652,10 @@ const SystemSetting = () => {
       });
     }
     if (originInputs['oidc.client_id'] !== inputs['oidc.client_id']) {
-      options.push({ key: 'oidc.client_id', value: inputs['oidc.client_id'] });
+      options.push({
+        key: 'oidc.client_id',
+        value: inputs['oidc.client_id'],
+      });
     }
     if (
       originInputs['oidc.client_secret'] !== inputs['oidc.client_secret'] &&
@@ -559,7 +675,9 @@ const SystemSetting = () => {
         value: inputs['oidc.authorization_endpoint'],
       });
     }
-    if (originInputs['oidc.token_endpoint'] !== inputs['oidc.token_endpoint']) {
+    if (
+      originInputs['oidc.token_endpoint'] !== inputs['oidc.token_endpoint']
+    ) {
       options.push({
         key: 'oidc.token_endpoint',
         value: inputs['oidc.token_endpoint'],
@@ -574,26 +692,23 @@ const SystemSetting = () => {
         value: inputs['oidc.user_info_endpoint'],
       });
     }
-
-    if (options.length > 0) {
-      await updateOptions(options);
-    }
+    if (options.length > 0) await updateOptions(options);
   };
 
   const submitTelegramSettings = async () => {
-    const options = [
+    await updateOptions([
       { key: 'TelegramBotToken', value: inputs.TelegramBotToken },
       { key: 'TelegramBotName', value: inputs.TelegramBotName },
-    ];
-    await updateOptions(options);
+    ]);
   };
 
   const submitTurnstile = async () => {
     const options = [];
-
-    if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey) {
-      options.push({ key: 'TurnstileSiteKey', value: inputs.TurnstileSiteKey });
-    }
+    if (originInputs['TurnstileSiteKey'] !== inputs.TurnstileSiteKey)
+      options.push({
+        key: 'TurnstileSiteKey',
+        value: inputs.TurnstileSiteKey,
+      });
     if (
       originInputs['TurnstileSecretKey'] !== inputs.TurnstileSecretKey &&
       inputs.TurnstileSecretKey !== ''
@@ -603,18 +718,13 @@ const SystemSetting = () => {
         value: inputs.TurnstileSecretKey,
       });
     }
-
-    if (options.length > 0) {
-      await updateOptions(options);
-    }
+    if (options.length > 0) await updateOptions(options);
   };
 
   const submitLinuxDOOAuth = async () => {
     const options = [];
-
-    if (originInputs['LinuxDOClientId'] !== inputs.LinuxDOClientId) {
+    if (originInputs['LinuxDOClientId'] !== inputs.LinuxDOClientId)
       options.push({ key: 'LinuxDOClientId', value: inputs.LinuxDOClientId });
-    }
     if (
       originInputs['LinuxDOClientSecret'] !== inputs.LinuxDOClientSecret &&
       inputs.LinuxDOClientSecret !== ''
@@ -633,1040 +743,866 @@ const SystemSetting = () => {
         value: inputs.LinuxDOMinimumTrustLevel,
       });
     }
-
-    if (options.length > 0) {
-      await updateOptions(options);
-    }
+    if (options.length > 0) await updateOptions(options);
   };
 
   const submitPasskeySettings = async () => {
-    // 使用formApi直接获取当前表单值
-    const formValues = formApiRef.current?.getValues() || {};
-
-    const options = [];
-
-    options.push({
-      key: 'passkey.rp_display_name',
-      value:
-        formValues['passkey.rp_display_name'] ||
-        inputs['passkey.rp_display_name'] ||
-        '',
-    });
-    options.push({
-      key: 'passkey.rp_id',
-      value: formValues['passkey.rp_id'] || inputs['passkey.rp_id'] || '',
-    });
-    options.push({
-      key: 'passkey.user_verification',
-      value:
-        formValues['passkey.user_verification'] ||
-        inputs['passkey.user_verification'] ||
-        'preferred',
-    });
-    options.push({
-      key: 'passkey.attachment_preference',
-      value:
-        formValues['passkey.attachment_preference'] ||
-        inputs['passkey.attachment_preference'] ||
-        '',
-    });
-    options.push({
-      key: 'passkey.origins',
-      value: formValues['passkey.origins'] || inputs['passkey.origins'] || '',
-    });
-
+    const options = [
+      {
+        key: 'passkey.rp_display_name',
+        value: inputs['passkey.rp_display_name'] || '',
+      },
+      {
+        key: 'passkey.rp_id',
+        value: inputs['passkey.rp_id'] || '',
+      },
+      {
+        key: 'passkey.user_verification',
+        value: inputs['passkey.user_verification'] || 'preferred',
+      },
+      {
+        key: 'passkey.attachment_preference',
+        value: inputs['passkey.attachment_preference'] || '',
+      },
+      {
+        key: 'passkey.origins',
+        value: inputs['passkey.origins'] || '',
+      },
+    ];
     await updateOptions(options);
   };
 
-  const handleCheckboxChange = async (optionKey, event) => {
-    const value = event.target.checked;
-
+  const handleCheckboxToggle = (optionKey) => async (value) => {
     if (optionKey === 'PasswordLoginEnabled' && !value) {
-      setShowPasswordLoginConfirmModal(true);
-    } else {
-      await updateOptions([{ key: optionKey, value }]);
-    }
-    if (optionKey === 'LinuxDOOAuthEnabled') {
-      setLinuxDOOAuthEnabled(value);
+      previousPasswordLoginRef.current = inputs.PasswordLoginEnabled;
+      setShowPasswordLoginConfirm(true);
+      return;
     }
+    setField(optionKey)(value);
+    await updateOptions([{ key: optionKey, value }]);
   };
 
   const handlePasswordLoginConfirm = async () => {
+    setShowPasswordLoginConfirm(false);
+    setField('PasswordLoginEnabled')(false);
     await updateOptions([{ key: 'PasswordLoginEnabled', value: false }]);
-    setShowPasswordLoginConfirmModal(false);
   };
 
+  const handlePasswordLoginCancel = () => {
+    setShowPasswordLoginConfirm(false);
+    setField('PasswordLoginEnabled')(true);
+  };
+
+  // ----------------------------- render -----------------------------
+
+  if (!isLoaded) {
+    return (
+      <div className='flex h-screen items-center justify-center'>
+        <Spinner color='primary' />
+      </div>
+    );
+  }
+
   return (
-    <div>
-      {isLoaded ? (
-        <Form
-          initValues={inputs}
-          onValueChange={handleFormChange}
-          getFormApi={(api) => (formApiRef.current = api)}
-        >
-          {({ formState, values, formApi }) => (
-            <div
-              style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '10px',
-                marginTop: '10px',
+    <div className='relative flex flex-col gap-3'>
+      {loading && (
+        <div className='pointer-events-none absolute inset-0 z-10 flex items-center justify-center bg-background/40'>
+          <Spinner color='primary' />
+        </div>
+      )}
+
+      {/* 通用设置 */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('通用设置')} />
+          <Field
+            label={t('服务器地址')}
+            hint={t(
+              '该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置',
+            )}
+          >
+            <TextInput
+              value={inputs.ServerAddress}
+              onChange={setField('ServerAddress')}
+              placeholder='https://yourdomain.com'
+            />
+          </Field>
+          <Button color='primary' onPress={submitServerAddress}>
+            {t('更新服务器地址')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* 代理设置 */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('代理设置')} />
+          <InfoBanner>
+            {t(
+              '此代理仅用于图片请求转发，Webhook通知发送等，AI API请求仍然由服务器直接发出，可在渠道设置中单独配置代理',
+            )}
+          </InfoBanner>
+          <div className='text-sm text-foreground'>
+            {t('仅支持')}{' '}
+            <a
+              href='https://github.com/Calcium-Ion/new-api-worker'
+              target='_blank'
+              rel='noreferrer'
+              className='text-primary hover:underline'
+            >
+              new-api-worker
+            </a>{' '}
+            {t('或其兼容new-api-worker格式的其他版本')}
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field label={t('Worker地址')}>
+              <TextInput
+                value={inputs.WorkerUrl}
+                onChange={setField('WorkerUrl')}
+                placeholder='例如：https://workername.yourdomain.workers.dev'
+              />
+            </Field>
+            <Field label={t('Worker密钥')}>
+              <TextInput
+                type='password'
+                value={inputs.WorkerValidKey}
+                onChange={setField('WorkerValidKey')}
+                placeholder='敏感信息不会发送到前端显示'
+              />
+            </Field>
+          </div>
+          <CheckboxRow
+            label={t('允许 HTTP 协议图片请求（适用于自部署代理）')}
+            value={inputs.WorkerAllowHttpImageRequestEnabled}
+            onChange={handleCheckboxToggle(
+              'WorkerAllowHttpImageRequestEnabled',
+            )}
+          />
+          <Button color='primary' onPress={submitWorker}>
+            {t('更新Worker设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* SSRF 防护设置 */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('SSRF防护设置')} />
+          <div className='text-sm text-foreground'>
+            {t('配置服务器端请求伪造(SSRF)防护，用于保护内网资源安全')}
+          </div>
+          <div className='space-y-3'>
+            <CheckboxRow
+              label={t('启用SSRF防护（推荐开启以保护服务器安全）')}
+              hint={t('SSRF防护开关详细说明')}
+              value={inputs['fetch_setting.enable_ssrf_protection']}
+              onChange={handleCheckboxToggle(
+                'fetch_setting.enable_ssrf_protection',
+              )}
+            />
+            <CheckboxRow
+              label={t(
+                '允许访问私有IP地址（127.0.0.1、192.168.x.x等内网地址）',
+              )}
+              hint={t('私有IP访问详细说明')}
+              value={inputs['fetch_setting.allow_private_ip']}
+              onChange={handleCheckboxToggle(
+                'fetch_setting.allow_private_ip',
+              )}
+            />
+            <CheckboxRow
+              label={t('对域名启用 IP 过滤（推荐开启）')}
+              hint={t('域名IP过滤详细说明')}
+              value={inputs['fetch_setting.apply_ip_filter_for_domain']}
+              onChange={handleCheckboxToggle(
+                'fetch_setting.apply_ip_filter_for_domain',
+              )}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <div className='text-sm font-semibold text-foreground'>
+              {t(domainFilterMode ? '域名白名单' : '域名黑名单')}
+            </div>
+            <div className='text-xs text-muted'>
+              {t('支持通配符格式，如：example.com, *.api.example.com')}
+            </div>
+            <Segmented
+              value={domainFilterMode ? 'whitelist' : 'blacklist'}
+              options={[
+                { value: 'whitelist', label: t('白名单') },
+                { value: 'blacklist', label: t('黑名单') },
+              ]}
+              onChange={(v) => {
+                const isWhitelist = v === 'whitelist';
+                setDomainFilterMode(isWhitelist);
+                setInputs((prev) => ({
+                  ...prev,
+                  'fetch_setting.domain_filter_mode': isWhitelist,
+                }));
+              }}
+            />
+            <TagInput
+              value={domainList}
+              onChange={(value) => {
+                setDomainList(value);
+                setInputs((prev) => ({
+                  ...prev,
+                  'fetch_setting.domain_list': value,
+                }));
+              }}
+              placeholder={t('输入域名后回车，如：example.com')}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <div className='text-sm font-semibold text-foreground'>
+              {t(ipFilterMode ? 'IP白名单' : 'IP黑名单')}
+            </div>
+            <div className='text-xs text-muted'>
+              {t('支持CIDR格式，如：8.8.8.8, 192.168.1.0/24')}
+            </div>
+            <Segmented
+              value={ipFilterMode ? 'whitelist' : 'blacklist'}
+              options={[
+                { value: 'whitelist', label: t('白名单') },
+                { value: 'blacklist', label: t('黑名单') },
+              ]}
+              onChange={(v) => {
+                const isWhitelist = v === 'whitelist';
+                setIpFilterMode(isWhitelist);
+                setInputs((prev) => ({
+                  ...prev,
+                  'fetch_setting.ip_filter_mode': isWhitelist,
+                }));
+              }}
+            />
+            <TagInput
+              value={ipList}
+              onChange={(value) => {
+                setIpList(value);
+                setInputs((prev) => ({
+                  ...prev,
+                  'fetch_setting.ip_list': value,
+                }));
               }}
+              placeholder={t('输入IP地址后回车，如：8.8.8.8')}
+            />
+          </div>
+
+          <div className='space-y-2'>
+            <div className='text-sm font-semibold text-foreground'>
+              {t('允许的端口')}
+            </div>
+            <div className='text-xs text-muted'>
+              {t('支持单个端口和端口范围，如：80, 443, 8000-8999')}
+            </div>
+            <TagInput
+              value={allowedPorts}
+              onChange={(value) => {
+                setAllowedPorts(value);
+                setInputs((prev) => ({
+                  ...prev,
+                  'fetch_setting.allowed_ports': value,
+                }));
+              }}
+              placeholder={t('输入端口后回车，如：80 或 8000-8999')}
+            />
+            <FieldHint>{t('端口配置详细说明')}</FieldHint>
+          </div>
+
+          <Button color='primary' onPress={submitSSRF}>
+            {t('更新SSRF防护设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* 配置登录注册 */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置登录注册')} />
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <div className='space-y-3'>
+              <CheckboxRow
+                label={t('允许通过密码进行登录')}
+                value={inputs.PasswordLoginEnabled}
+                onChange={handleCheckboxToggle('PasswordLoginEnabled')}
+              />
+              <CheckboxRow
+                label={t('允许通过密码进行注册')}
+                value={inputs.PasswordRegisterEnabled}
+                onChange={handleCheckboxToggle('PasswordRegisterEnabled')}
+              />
+              <CheckboxRow
+                label={t('通过密码注册时需要进行邮箱验证')}
+                value={inputs.EmailVerificationEnabled}
+                onChange={handleCheckboxToggle('EmailVerificationEnabled')}
+              />
+              <CheckboxRow
+                label={t('允许新用户注册')}
+                value={inputs.RegisterEnabled}
+                onChange={handleCheckboxToggle('RegisterEnabled')}
+              />
+              <CheckboxRow
+                label={t('允许 Turnstile 用户校验')}
+                value={inputs.TurnstileCheckEnabled}
+                onChange={handleCheckboxToggle('TurnstileCheckEnabled')}
+              />
+            </div>
+            <div className='space-y-3'>
+              <CheckboxRow
+                label={t('允许通过 GitHub 账户登录 & 注册')}
+                value={inputs.GitHubOAuthEnabled}
+                onChange={handleCheckboxToggle('GitHubOAuthEnabled')}
+              />
+              <CheckboxRow
+                label={t('允许通过 Discord 账户登录 & 注册')}
+                value={inputs['discord.enabled']}
+                onChange={handleCheckboxToggle('discord.enabled')}
+              />
+              <CheckboxRow
+                label={t('允许通过 Linux DO 账户登录 & 注册')}
+                value={inputs.LinuxDOOAuthEnabled}
+                onChange={handleCheckboxToggle('LinuxDOOAuthEnabled')}
+              />
+              <CheckboxRow
+                label={t('允许通过微信登录 & 注册')}
+                value={inputs.WeChatAuthEnabled}
+                onChange={handleCheckboxToggle('WeChatAuthEnabled')}
+              />
+              <CheckboxRow
+                label={t('允许通过 Telegram 进行登录')}
+                value={inputs.TelegramOAuthEnabled}
+                onChange={handleCheckboxToggle('TelegramOAuthEnabled')}
+              />
+              <CheckboxRow
+                label={t('允许通过 OIDC 进行登录')}
+                value={inputs['oidc.enabled']}
+                onChange={handleCheckboxToggle('oidc.enabled')}
+              />
+            </div>
+          </div>
+        </Card.Content>
+      </Card>
+
+      {/* 配置 Passkey */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 Passkey')} />
+          <div className='text-sm text-foreground'>
+            {t('用以支持基于 WebAuthn 的无密码登录注册')}
+          </div>
+          <InfoBanner>
+            {t(
+              'Passkey 是基于 WebAuthn 标准的无密码身份验证方法，支持指纹、面容、硬件密钥等认证方式',
+            )}
+          </InfoBanner>
+          <CheckboxRow
+            label={t('允许通过 Passkey 登录 & 认证')}
+            value={inputs['passkey.enabled']}
+            onChange={handleCheckboxToggle('passkey.enabled')}
+          />
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field
+              label={t('服务显示名称')}
+              hint={t("用户注册时看到的网站名称，比如'我的网站'")}
+            >
+              <TextInput
+                value={inputs['passkey.rp_display_name']}
+                onChange={setField('passkey.rp_display_name')}
+                placeholder={t('默认使用系统名称')}
+              />
+            </Field>
+            <Field
+              label={t('网站域名标识')}
+              hint={t(
+                '留空则默认使用服务器地址，注意不能携带http://或者https://',
+              )}
+            >
+              <TextInput
+                value={inputs['passkey.rp_id']}
+                onChange={setField('passkey.rp_id')}
+                placeholder={t('例如：example.com')}
+              />
+            </Field>
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field
+              label={t('安全验证级别')}
+              hint={t('推荐：用户可以选择是否使用指纹等验证')}
             >
-              <Card>
-                <Form.Section text={t('通用设置')}>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Form.Input
-                        field='ServerAddress'
-                        label={t('服务器地址')}
-                        placeholder='https://yourdomain.com'
-                        extraText={t(
-                          '该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置',
-                        )}
-                      />
-                    </Col>
-                  </Row>
-                  <Button onClick={submitServerAddress}>
-                    {t('更新服务器地址')}
-                  </Button>
-                </Form.Section>
-              </Card>
-
-              <Card>
-                <Form.Section text={t('代理设置')}>
-                  <Banner
-                    type='info'
-                    description={t(
-                      '此代理仅用于图片请求转发，Webhook通知发送等，AI API请求仍然由服务器直接发出，可在渠道设置中单独配置代理',
-                    )}
-                    style={{ marginBottom: 20, marginTop: 16 }}
-                  />
-                  <Text>
-                    {t('仅支持')}{' '}
-                    <a
-                      href='https://github.com/Calcium-Ion/new-api-worker'
-                      target='_blank'
-                      rel='noreferrer'
-                    >
-                      new-api-worker
-                    </a>{' '}
-                    {t('或其兼容new-api-worker格式的其他版本')}
-                  </Text>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field='WorkerUrl'
-                        label={t('Worker地址')}
-                        placeholder='例如：https://workername.yourdomain.workers.dev'
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field='WorkerValidKey'
-                        label={t('Worker密钥')}
-                        placeholder='敏感信息不会发送到前端显示'
-                        type='password'
-                      />
-                    </Col>
-                  </Row>
-                  <Form.Checkbox
-                    field='WorkerAllowHttpImageRequestEnabled'
-                    noLabel
-                  >
-                    {t('允许 HTTP 协议图片请求（适用于自部署代理）')}
-                  </Form.Checkbox>
-                  <Button onClick={submitWorker}>{t('更新Worker设置')}</Button>
-                </Form.Section>
-              </Card>
-
-              <Card>
-                <Form.Section text={t('SSRF防护设置')}>
-                  <Text extraText={t('SSRF防护详细说明')}>
-                    {t('配置服务器端请求伪造(SSRF)防护，用于保护内网资源安全')}
-                  </Text>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Form.Checkbox
-                        field='fetch_setting.enable_ssrf_protection'
-                        noLabel
-                        extraText={t('SSRF防护开关详细说明')}
-                        onChange={(e) =>
-                          handleCheckboxChange(
-                            'fetch_setting.enable_ssrf_protection',
-                            e,
-                          )
-                        }
-                      >
-                        {t('启用SSRF防护（推荐开启以保护服务器安全）')}
-                      </Form.Checkbox>
-                    </Col>
-                  </Row>
-
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                    style={{ marginTop: 16 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Form.Checkbox
-                        field='fetch_setting.allow_private_ip'
-                        noLabel
-                        extraText={t('私有IP访问详细说明')}
-                        onChange={(e) =>
-                          handleCheckboxChange(
-                            'fetch_setting.allow_private_ip',
-                            e,
-                          )
-                        }
-                      >
-                        {t(
-                          '允许访问私有IP地址（127.0.0.1、192.168.x.x等内网地址）',
-                        )}
-                      </Form.Checkbox>
-                    </Col>
-                  </Row>
-
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                    style={{ marginTop: 16 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Form.Checkbox
-                        field='fetch_setting.apply_ip_filter_for_domain'
-                        noLabel
-                        extraText={t('域名IP过滤详细说明')}
-                        onChange={(e) =>
-                          handleCheckboxChange(
-                            'fetch_setting.apply_ip_filter_for_domain',
-                            e,
-                          )
-                        }
-                        style={{ marginBottom: 8 }}
-                      >
-                        {t('对域名启用 IP 过滤（推荐开启）')}
-                      </Form.Checkbox>
-                      <Text strong>
-                        {t(domainFilterMode ? '域名白名单' : '域名黑名单')}
-                      </Text>
-                      <Text
-                        type='secondary'
-                        style={{ display: 'block', marginBottom: 8 }}
-                      >
-                        {t(
-                          '支持通配符格式，如：example.com, *.api.example.com',
-                        )}
-                      </Text>
-                      <Radio.Group
-                        type='button'
-                        value={domainFilterMode ? 'whitelist' : 'blacklist'}
-                        onChange={(val) => {
-                          const selected =
-                            val && val.target ? val.target.value : val;
-                          const isWhitelist = selected === 'whitelist';
-                          setDomainFilterMode(isWhitelist);
-                          setInputs((prev) => ({
-                            ...prev,
-                            'fetch_setting.domain_filter_mode': isWhitelist,
-                          }));
-                        }}
-                        style={{ marginBottom: 8 }}
-                      >
-                        <Radio value='whitelist'>{t('白名单')}</Radio>
-                        <Radio value='blacklist'>{t('黑名单')}</Radio>
-                      </Radio.Group>
-                      <TagInput
-                        value={domainList}
-                        onChange={(value) => {
-                          setDomainList(value);
-                          // 触发Form的onChange事件
-                          setInputs((prev) => ({
-                            ...prev,
-                            'fetch_setting.domain_list': value,
-                          }));
-                        }}
-                        placeholder={t('输入域名后回车，如：example.com')}
-                        style={{ width: '100%' }}
-                      />
-                    </Col>
-                  </Row>
-
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                    style={{ marginTop: 16 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Text strong>
-                        {t(ipFilterMode ? 'IP白名单' : 'IP黑名单')}
-                      </Text>
-                      <Text
-                        type='secondary'
-                        style={{ display: 'block', marginBottom: 8 }}
-                      >
-                        {t('支持CIDR格式，如：8.8.8.8, 192.168.1.0/24')}
-                      </Text>
-                      <Radio.Group
-                        type='button'
-                        value={ipFilterMode ? 'whitelist' : 'blacklist'}
-                        onChange={(val) => {
-                          const selected =
-                            val && val.target ? val.target.value : val;
-                          const isWhitelist = selected === 'whitelist';
-                          setIpFilterMode(isWhitelist);
-                          setInputs((prev) => ({
-                            ...prev,
-                            'fetch_setting.ip_filter_mode': isWhitelist,
-                          }));
-                        }}
-                        style={{ marginBottom: 8 }}
-                      >
-                        <Radio value='whitelist'>{t('白名单')}</Radio>
-                        <Radio value='blacklist'>{t('黑名单')}</Radio>
-                      </Radio.Group>
-                      <TagInput
-                        value={ipList}
-                        onChange={(value) => {
-                          setIpList(value);
-                          // 触发Form的onChange事件
-                          setInputs((prev) => ({
-                            ...prev,
-                            'fetch_setting.ip_list': value,
-                          }));
-                        }}
-                        placeholder={t('输入IP地址后回车，如：8.8.8.8')}
-                        style={{ width: '100%' }}
-                      />
-                    </Col>
-                  </Row>
-
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                    style={{ marginTop: 16 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Text strong>{t('允许的端口')}</Text>
-                      <Text
-                        type='secondary'
-                        style={{ display: 'block', marginBottom: 8 }}
-                      >
-                        {t('支持单个端口和端口范围，如：80, 443, 8000-8999')}
-                      </Text>
-                      <TagInput
-                        value={allowedPorts}
-                        onChange={(value) => {
-                          setAllowedPorts(value);
-                          // 触发Form的onChange事件
-                          setInputs((prev) => ({
-                            ...prev,
-                            'fetch_setting.allowed_ports': value,
-                          }));
-                        }}
-                        placeholder={t('输入端口后回车，如：80 或 8000-8999')}
-                        style={{ width: '100%' }}
-                      />
-                      <Text
-                        type='secondary'
-                        style={{ display: 'block', marginBottom: 8 }}
-                      >
-                        {t('端口配置详细说明')}
-                      </Text>
-                    </Col>
-                  </Row>
-
-                  <Button onClick={submitSSRF} style={{ marginTop: 16 }}>
-                    {t('更新SSRF防护设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-
-              <Card>
-                <Form.Section text={t('配置登录注册')}>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Checkbox
-                        field='PasswordLoginEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('PasswordLoginEnabled', e)
-                        }
-                      >
-                        {t('允许通过密码进行登录')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='PasswordRegisterEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('PasswordRegisterEnabled', e)
-                        }
-                      >
-                        {t('允许通过密码进行注册')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='EmailVerificationEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('EmailVerificationEnabled', e)
-                        }
-                      >
-                        {t('通过密码注册时需要进行邮箱验证')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='RegisterEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('RegisterEnabled', e)
-                        }
-                      >
-                        {t('允许新用户注册')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='TurnstileCheckEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('TurnstileCheckEnabled', e)
-                        }
-                      >
-                        {t('允许 Turnstile 用户校验')}
-                      </Form.Checkbox>
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Checkbox
-                        field='GitHubOAuthEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('GitHubOAuthEnabled', e)
-                        }
-                      >
-                        {t('允许通过 GitHub 账户登录 & 注册')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='discord.enabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('discord.enabled', e)
-                        }
-                      >
-                        {t('允许通过 Discord 账户登录 & 注册')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='LinuxDOOAuthEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('LinuxDOOAuthEnabled', e)
-                        }
-                      >
-                        {t('允许通过 Linux DO 账户登录 & 注册')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='WeChatAuthEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('WeChatAuthEnabled', e)
-                        }
-                      >
-                        {t('允许通过微信登录 & 注册')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='TelegramOAuthEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('TelegramOAuthEnabled', e)
-                        }
-                      >
-                        {t('允许通过 Telegram 进行登录')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field="['oidc.enabled']"
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('oidc.enabled', e)
-                        }
-                      >
-                        {t('允许通过 OIDC 进行登录')}
-                      </Form.Checkbox>
-                    </Col>
-                  </Row>
-                </Form.Section>
-              </Card>
-
-              <Card>
-                <Form.Section text={t('配置 Passkey')}>
-                  <Text>{t('用以支持基于 WebAuthn 的无密码登录注册')}</Text>
-                  <Banner
-                    type='info'
-                    description={t(
-                      'Passkey 是基于 WebAuthn 标准的无密码身份验证方法，支持指纹、面容、硬件密钥等认证方式',
-                    )}
-                    style={{ marginBottom: 20, marginTop: 16 }}
-                  />
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Form.Checkbox
-                        field="['passkey.enabled']"
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('passkey.enabled', e)
-                        }
-                      >
-                        {t('允许通过 Passkey 登录 & 认证')}
-                      </Form.Checkbox>
-                    </Col>
-                  </Row>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['passkey.rp_display_name']"
-                        label={t('服务显示名称')}
-                        placeholder={t('默认使用系统名称')}
-                        extraText={t(
-                          "用户注册时看到的网站名称，比如'我的网站'",
-                        )}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['passkey.rp_id']"
-                        label={t('网站域名标识')}
-                        placeholder={t('例如：example.com')}
-                        extraText={t(
-                          '留空则默认使用服务器地址，注意不能携带http://或者https://',
-                        )}
-                      />
-                    </Col>
-                  </Row>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                    style={{ marginTop: 16 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Select
-                        field="['passkey.user_verification']"
-                        label={t('安全验证级别')}
-                        placeholder={t('是否要求指纹/面容等生物识别')}
-                        optionList={[
-                          {
-                            label: t('推荐使用（用户可选）'),
-                            value: 'preferred',
-                          },
-                          { label: t('强制要求'), value: 'required' },
-                          { label: t('不建议使用'), value: 'discouraged' },
-                        ]}
-                        extraText={t('推荐：用户可以选择是否使用指纹等验证')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Select
-                        field="['passkey.attachment_preference']"
-                        label={t('设备类型偏好')}
-                        placeholder={t('选择支持的认证设备类型')}
-                        optionList={[
-                          { label: t('不限制'), value: '' },
-                          { label: t('本设备内置'), value: 'platform' },
-                          { label: t('外接设备'), value: 'cross-platform' },
-                        ]}
-                        extraText={t(
-                          '本设备：手机指纹/面容，外接：USB安全密钥',
-                        )}
-                      />
-                    </Col>
-                  </Row>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                    style={{ marginTop: 16 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Form.Checkbox
-                        field="['passkey.allow_insecure_origin']"
-                        noLabel
-                        extraText={t('仅用于开发环境，生产环境应使用 HTTPS')}
-                        onChange={(e) =>
-                          handleCheckboxChange(
-                            'passkey.allow_insecure_origin',
-                            e,
-                          )
-                        }
-                      >
-                        {t('允许不安全的 Origin（HTTP）')}
-                      </Form.Checkbox>
-                    </Col>
-                  </Row>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                    style={{ marginTop: 16 }}
-                  >
-                    <Col xs={24} sm={24} md={24} lg={24} xl={24}>
-                      <Form.Input
-                        field="['passkey.origins']"
-                        label={t('允许的 Origins')}
-                        placeholder={t('填写带https的域名，逗号分隔')}
-                        extraText={t(
-                          '为空则默认使用服务器地址，多个 Origin 用逗号分隔，例如 https://newapi.pro,https://newapi.com ,注意不能携带[]，需使用https',
-                        )}
-                      />
-                    </Col>
-                  </Row>
-                  <Button
-                    onClick={submitPasskeySettings}
-                    style={{ marginTop: 16 }}
-                  >
-                    {t('保存 Passkey 设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-
-              <Card>
-                <Form.Section text={t('配置邮箱域名白名单')}>
-                  <Text>{t('用以防止恶意用户利用临时邮箱批量注册')}</Text>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Checkbox
-                        field='EmailDomainRestrictionEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange(
-                            'EmailDomainRestrictionEnabled',
-                            e,
-                          )
-                        }
-                      >
-                        启用邮箱域名白名单
-                      </Form.Checkbox>
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Checkbox
-                        field='EmailAliasRestrictionEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange(
-                            'EmailAliasRestrictionEnabled',
-                            e,
-                          )
-                        }
-                      >
-                        启用邮箱别名限制
-                      </Form.Checkbox>
-                    </Col>
-                  </Row>
-                  <TagInput
-                    value={emailDomainWhitelist}
-                    onChange={setEmailDomainWhitelist}
-                    placeholder={t('输入域名后回车')}
-                    style={{ width: '100%', marginTop: 16 }}
-                  />
-                  <Form.Input
-                    placeholder={t('输入要添加的邮箱域名')}
-                    value={emailToAdd}
-                    onChange={(value) => setEmailToAdd(value)}
-                    style={{ marginTop: 16 }}
-                    suffix={
-                      <Button
-                        theme='solid'
-                        type='primary'
-                        onClick={handleAddEmail}
-                      >
-                        {t('添加')}
-                      </Button>
-                    }
-                    onEnterPress={handleAddEmail}
-                  />
-                  <Button
-                    onClick={submitEmailDomainWhitelist}
-                    style={{ marginTop: 10 }}
-                  >
-                    {t('保存邮箱域名白名单设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-              <Card>
-                <Form.Section text={t('配置 SMTP')}>
-                  <Text>{t('用以支持系统的邮件发送')}</Text>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Input
-                        field='SMTPServer'
-                        label={t('SMTP 服务器地址')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Input field='SMTPPort' label={t('SMTP 端口')} />
-                    </Col>
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Input field='SMTPAccount' label={t('SMTP 账户')} />
-                    </Col>
-                  </Row>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                    style={{ marginTop: 16 }}
-                  >
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Input
-                        field='SMTPFrom'
-                        label={t('SMTP 发送者邮箱')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Input
-                        field='SMTPToken'
-                        label={t('SMTP 访问凭证')}
-                        type='password'
-                        placeholder='敏感信息不会发送到前端显示'
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Checkbox
-                        field='SMTPSSLEnabled'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('SMTPSSLEnabled', e)
-                        }
-                      >
-                        {t('启用SMTP SSL')}
-                      </Form.Checkbox>
-                      <Form.Checkbox
-                        field='SMTPForceAuthLogin'
-                        noLabel
-                        onChange={(e) =>
-                          handleCheckboxChange('SMTPForceAuthLogin', e)
-                        }
-                      >
-                        {t('强制使用 AUTH LOGIN')}
-                      </Form.Checkbox>
-                    </Col>
-                  </Row>
-                  <Button onClick={submitSMTP}>{t('保存 SMTP 设置')}</Button>
-                </Form.Section>
-              </Card>
-              <Card>
-                <Form.Section text={t('配置 OIDC')}>
-                  <Text>
-                    {t(
-                      '用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP',
-                    )}
-                  </Text>
-                  <Banner
-                    type='info'
-                    description={`${t('主页链接填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}，${t('重定向 URL 填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}/oauth/oidc`}
-                    style={{ marginBottom: 20, marginTop: 16 }}
-                  />
-                  <Text>
-                    {t(
-                      '若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置',
-                    )}
-                  </Text>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['oidc.well_known']"
-                        label={t('Well-Known URL')}
-                        placeholder={t('请输入 OIDC 的 Well-Known URL')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['oidc.client_id']"
-                        label={t('Client ID')}
-                        placeholder={t('输入 OIDC 的 Client ID')}
-                      />
-                    </Col>
-                  </Row>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['oidc.client_secret']"
-                        label={t('Client Secret')}
-                        type='password'
-                        placeholder={t('敏感信息不会发送到前端显示')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['oidc.authorization_endpoint']"
-                        label={t('Authorization Endpoint')}
-                        placeholder={t('输入 OIDC 的 Authorization Endpoint')}
-                      />
-                    </Col>
-                  </Row>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['oidc.token_endpoint']"
-                        label={t('Token Endpoint')}
-                        placeholder={t('输入 OIDC 的 Token Endpoint')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['oidc.user_info_endpoint']"
-                        label={t('User Info Endpoint')}
-                        placeholder={t('输入 OIDC 的 Userinfo Endpoint')}
-                      />
-                    </Col>
-                  </Row>
-                  <Button onClick={submitOIDCSettings}>
-                    {t('保存 OIDC 设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-
-              <Card>
-                <Form.Section text={t('配置 GitHub OAuth App')}>
-                  <Text>{t('用以支持通过 GitHub 进行登录注册')}</Text>
-                  <Banner
-                    type='info'
-                    description={`${t('Homepage URL 填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}，${t('Authorization callback URL 填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}/oauth/github`}
-                    style={{ marginBottom: 20, marginTop: 16 }}
-                  />
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field='GitHubClientId'
-                        label={t('GitHub Client ID')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field='GitHubClientSecret'
-                        label={t('GitHub Client Secret')}
-                        type='password'
-                        placeholder={t('敏感信息不会发送到前端显示')}
-                      />
-                    </Col>
-                  </Row>
-                  <Button onClick={submitGitHubOAuth}>
-                    {t('保存 GitHub OAuth 设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-              <Card>
-                <Form.Section text={t('配置 Discord OAuth')}>
-                  <Text>{t('用以支持通过 Discord 进行登录注册')}</Text>
-                  <Banner
-                    type='info'
-                    description={`${t('Homepage URL 填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}，${t('Authorization callback URL 填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}/oauth/discord`}
-                    style={{ marginBottom: 20, marginTop: 16 }}
-                  />
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['discord.client_id']"
-                        label={t('Discord Client ID')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field="['discord.client_secret']"
-                        label={t('Discord Client Secret')}
-                        type='password'
-                        placeholder={t('敏感信息不会发送到前端显示')}
-                      />
-                    </Col>
-                  </Row>
-                  <Button onClick={submitDiscordOAuth}>
-                    {t('保存 Discord OAuth 设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-              <Card>
-                <Form.Section text={t('配置 Linux DO OAuth')}>
-                  <Text>
-                    {t('用以支持通过 Linux DO 进行登录注册')}
-                    <a
-                      href='https://connect.linux.do/'
-                      target='_blank'
-                      rel='noreferrer'
-                      style={{
-                        display: 'inline-block',
-                        marginLeft: 4,
-                        marginRight: 4,
-                      }}
-                    >
-                      {t('点击此处')}
-                    </a>
-                    {t('管理你的 LinuxDO OAuth App')}
-                  </Text>
-                  <Banner
-                    type='info'
-                    description={`${t('回调 URL 填')} ${inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')}/oauth/linuxdo`}
-                    style={{ marginBottom: 20, marginTop: 16 }}
-                  />
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={10} lg={10} xl={10}>
-                      <Form.Input
-                        field='LinuxDOClientId'
-                        label={t('Linux DO Client ID')}
-                        placeholder={t('输入你注册的 LinuxDO OAuth APP 的 ID')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={10} lg={10} xl={10}>
-                      <Form.Input
-                        field='LinuxDOClientSecret'
-                        label={t('Linux DO Client Secret')}
-                        type='password'
-                        placeholder={t('敏感信息不会发送到前端显示')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={4} lg={4} xl={4}>
-                      <Form.Input
-                        field='LinuxDOMinimumTrustLevel'
-                        label='LinuxDO Minimum Trust Level'
-                        placeholder='允许注册的最低信任等级'
-                      />
-                    </Col>
-                  </Row>
-                  <Button onClick={submitLinuxDOOAuth}>
-                    {t('保存 Linux DO OAuth 设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-
-              <CustomOAuthSetting serverAddress={inputs.ServerAddress} />
-
-              <Card>
-                <Form.Section text={t('配置 WeChat Server')}>
-                  <Text>{t('用以支持通过微信进行登录注册')}</Text>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Input
-                        field='WeChatServerAddress'
-                        label={t('WeChat Server 服务器地址')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Input
-                        field='WeChatServerToken'
-                        label={t('WeChat Server 访问凭证')}
-                        type='password'
-                        placeholder={t('敏感信息不会发送到前端显示')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-                      <Form.Input
-                        field='WeChatAccountQRCodeImageURL'
-                        label={t('微信公众号二维码图片链接')}
-                      />
-                    </Col>
-                  </Row>
-                  <Button onClick={submitWeChat}>
-                    {t('保存 WeChat Server 设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-
-              <Card>
-                <Form.Section text={t('配置 Telegram 登录')}>
-                  <Text>{t('用以支持通过 Telegram 进行登录注册')}</Text>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field='TelegramBotToken'
-                        label={t('Telegram Bot Token')}
-                        placeholder={t('敏感信息不会发送到前端显示')}
-                        type='password'
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field='TelegramBotName'
-                        label={t('Telegram Bot 名称')}
-                      />
-                    </Col>
-                  </Row>
-                  <Button onClick={submitTelegramSettings}>
-                    {t('保存 Telegram 登录设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-
-              <Card>
-                <Form.Section text={t('配置 Turnstile')}>
-                  <Text>{t('用以支持用户校验')}</Text>
-                  <Row
-                    gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-                  >
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field='TurnstileSiteKey'
-                        label={t('Turnstile Site Key')}
-                      />
-                    </Col>
-                    <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-                      <Form.Input
-                        field='TurnstileSecretKey'
-                        label={t('Turnstile Secret Key')}
-                        type='password'
-                        placeholder={t('敏感信息不会发送到前端显示')}
-                      />
-                    </Col>
-                  </Row>
-                  <Button onClick={submitTurnstile}>
-                    {t('保存 Turnstile 设置')}
-                  </Button>
-                </Form.Section>
-              </Card>
-
-              <Modal
-                title={t('确认取消密码登录')}
-                visible={showPasswordLoginConfirmModal}
-                onOk={handlePasswordLoginConfirm}
-                onCancel={() => {
-                  setShowPasswordLoginConfirmModal(false);
-                  formApiRef.current.setValue('PasswordLoginEnabled', true);
-                }}
-                okText={t('确认')}
-                cancelText={t('取消')}
+              <select
+                value={inputs['passkey.user_verification'] || 'preferred'}
+                onChange={(event) =>
+                  setField('passkey.user_verification')(event.target.value)
+                }
+                className={inputClass}
               >
-                <p>
-                  {t(
-                    '您确定要取消密码登录功能吗？这可能会影响用户的登录方式。',
-                  )}
-                </p>
-              </Modal>
+                <option value='preferred'>{t('推荐使用（用户可选）')}</option>
+                <option value='required'>{t('强制要求')}</option>
+                <option value='discouraged'>{t('不建议使用')}</option>
+              </select>
+            </Field>
+            <Field
+              label={t('设备类型偏好')}
+              hint={t('本设备：手机指纹/面容，外接：USB安全密钥')}
+            >
+              <select
+                value={inputs['passkey.attachment_preference'] || ''}
+                onChange={(event) =>
+                  setField('passkey.attachment_preference')(
+                    event.target.value,
+                  )
+                }
+                className={inputClass}
+              >
+                <option value=''>{t('不限制')}</option>
+                <option value='platform'>{t('本设备内置')}</option>
+                <option value='cross-platform'>{t('外接设备')}</option>
+              </select>
+            </Field>
+          </div>
+          <CheckboxRow
+            label={t('允许不安全的 Origin（HTTP）')}
+            hint={t('仅用于开发环境，生产环境应使用 HTTPS')}
+            value={inputs['passkey.allow_insecure_origin']}
+            onChange={handleCheckboxToggle('passkey.allow_insecure_origin')}
+          />
+          <Field
+            label={t('允许的 Origins')}
+            hint={t(
+              '为空则默认使用服务器地址，多个 Origin 用逗号分隔，例如 https://newapi.pro,https://newapi.com ,注意不能携带[]，需使用https',
+            )}
+          >
+            <TextInput
+              value={inputs['passkey.origins']}
+              onChange={setField('passkey.origins')}
+              placeholder={t('填写带https的域名，逗号分隔')}
+            />
+          </Field>
+          <Button color='primary' onPress={submitPasskeySettings}>
+            {t('保存 Passkey 设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* 邮箱域名白名单 */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置邮箱域名白名单')} />
+          <div className='text-sm text-foreground'>
+            {t('用以防止恶意用户利用临时邮箱批量注册')}
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <CheckboxRow
+              label='启用邮箱域名白名单'
+              value={inputs.EmailDomainRestrictionEnabled}
+              onChange={handleCheckboxToggle('EmailDomainRestrictionEnabled')}
+            />
+            <CheckboxRow
+              label='启用邮箱别名限制'
+              value={inputs.EmailAliasRestrictionEnabled}
+              onChange={handleCheckboxToggle('EmailAliasRestrictionEnabled')}
+            />
+          </div>
+          <TagInput
+            value={emailDomainWhitelist}
+            onChange={setEmailDomainWhitelist}
+            placeholder={t('输入域名后回车')}
+          />
+          <div className='flex gap-2'>
+            <input
+              type='text'
+              value={emailToAdd}
+              onChange={(event) => setEmailToAdd(event.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  handleAddEmail();
+                }
+              }}
+              placeholder={t('输入要添加的邮箱域名')}
+              className={inputClass}
+            />
+            <Button color='primary' onPress={handleAddEmail}>
+              {t('添加')}
+            </Button>
+          </div>
+          <Button color='primary' onPress={submitEmailDomainWhitelist}>
+            {t('保存邮箱域名白名单设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* SMTP */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 SMTP')} />
+          <div className='text-sm text-foreground'>
+            {t('用以支持系统的邮件发送')}
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+            <Field label={t('SMTP 服务器地址')}>
+              <TextInput
+                value={inputs.SMTPServer}
+                onChange={setField('SMTPServer')}
+              />
+            </Field>
+            <Field label={t('SMTP 端口')}>
+              <TextInput
+                value={inputs.SMTPPort}
+                onChange={setField('SMTPPort')}
+              />
+            </Field>
+            <Field label={t('SMTP 账户')}>
+              <TextInput
+                value={inputs.SMTPAccount}
+                onChange={setField('SMTPAccount')}
+              />
+            </Field>
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+            <Field label={t('SMTP 发送者邮箱')}>
+              <TextInput
+                value={inputs.SMTPFrom}
+                onChange={setField('SMTPFrom')}
+              />
+            </Field>
+            <Field label={t('SMTP 访问凭证')}>
+              <TextInput
+                type='password'
+                value={inputs.SMTPToken}
+                onChange={setField('SMTPToken')}
+                placeholder='敏感信息不会发送到前端显示'
+              />
+            </Field>
+            <div className='space-y-3'>
+              <CheckboxRow
+                label={t('启用SMTP SSL')}
+                value={inputs.SMTPSSLEnabled}
+                onChange={handleCheckboxToggle('SMTPSSLEnabled')}
+              />
+              <CheckboxRow
+                label={t('强制使用 AUTH LOGIN')}
+                value={inputs.SMTPForceAuthLogin}
+                onChange={handleCheckboxToggle('SMTPForceAuthLogin')}
+              />
             </div>
-          )}
-        </Form>
-      ) : (
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            height: '100vh',
-          }}
-        >
-          <Spin size='large' />
-        </div>
-      )}
+          </div>
+          <Button color='primary' onPress={submitSMTP}>
+            {t('保存 SMTP 设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* OIDC */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 OIDC')} />
+          <div className='text-sm text-foreground'>
+            {t(
+              '用以支持通过 OIDC 登录，例如 Okta、Auth0 等兼容 OIDC 协议的 IdP',
+            )}
+          </div>
+          <InfoBanner>
+            {`${t('主页链接填')} ${
+              inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')
+            }，${t('重定向 URL 填')} ${
+              inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')
+            }/oauth/oidc`}
+          </InfoBanner>
+          <div className='text-sm text-foreground'>
+            {t(
+              '若你的 OIDC Provider 支持 Discovery Endpoint，你可以仅填写 OIDC Well-Known URL，系统会自动获取 OIDC 配置',
+            )}
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field label={t('Well-Known URL')}>
+              <TextInput
+                value={inputs['oidc.well_known']}
+                onChange={setField('oidc.well_known')}
+                placeholder={t('请输入 OIDC 的 Well-Known URL')}
+              />
+            </Field>
+            <Field label={t('Client ID')}>
+              <TextInput
+                value={inputs['oidc.client_id']}
+                onChange={setField('oidc.client_id')}
+                placeholder={t('输入 OIDC 的 Client ID')}
+              />
+            </Field>
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field label={t('Client Secret')}>
+              <TextInput
+                type='password'
+                value={inputs['oidc.client_secret']}
+                onChange={setField('oidc.client_secret')}
+                placeholder={t('敏感信息不会发送到前端显示')}
+              />
+            </Field>
+            <Field label={t('Authorization Endpoint')}>
+              <TextInput
+                value={inputs['oidc.authorization_endpoint']}
+                onChange={setField('oidc.authorization_endpoint')}
+                placeholder={t('输入 OIDC 的 Authorization Endpoint')}
+              />
+            </Field>
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field label={t('Token Endpoint')}>
+              <TextInput
+                value={inputs['oidc.token_endpoint']}
+                onChange={setField('oidc.token_endpoint')}
+                placeholder={t('输入 OIDC 的 Token Endpoint')}
+              />
+            </Field>
+            <Field label={t('User Info Endpoint')}>
+              <TextInput
+                value={inputs['oidc.user_info_endpoint']}
+                onChange={setField('oidc.user_info_endpoint')}
+                placeholder={t('输入 OIDC 的 Userinfo Endpoint')}
+              />
+            </Field>
+          </div>
+          <Button color='primary' onPress={submitOIDCSettings}>
+            {t('保存 OIDC 设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* GitHub OAuth */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 GitHub OAuth App')} />
+          <div className='text-sm text-foreground'>
+            {t('用以支持通过 GitHub 进行登录注册')}
+          </div>
+          <InfoBanner>
+            {`${t('Homepage URL 填')} ${
+              inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')
+            }，${t('Authorization callback URL 填')} ${
+              inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')
+            }/oauth/github`}
+          </InfoBanner>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field label={t('GitHub Client ID')}>
+              <TextInput
+                value={inputs.GitHubClientId}
+                onChange={setField('GitHubClientId')}
+              />
+            </Field>
+            <Field label={t('GitHub Client Secret')}>
+              <TextInput
+                type='password'
+                value={inputs.GitHubClientSecret}
+                onChange={setField('GitHubClientSecret')}
+                placeholder={t('敏感信息不会发送到前端显示')}
+              />
+            </Field>
+          </div>
+          <Button color='primary' onPress={submitGitHubOAuth}>
+            {t('保存 GitHub OAuth 设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* Discord OAuth */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 Discord OAuth')} />
+          <div className='text-sm text-foreground'>
+            {t('用以支持通过 Discord 进行登录注册')}
+          </div>
+          <InfoBanner>
+            {`${t('Homepage URL 填')} ${
+              inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')
+            }，${t('Authorization callback URL 填')} ${
+              inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')
+            }/oauth/discord`}
+          </InfoBanner>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field label={t('Discord Client ID')}>
+              <TextInput
+                value={inputs['discord.client_id']}
+                onChange={setField('discord.client_id')}
+              />
+            </Field>
+            <Field label={t('Discord Client Secret')}>
+              <TextInput
+                type='password'
+                value={inputs['discord.client_secret']}
+                onChange={setField('discord.client_secret')}
+                placeholder={t('敏感信息不会发送到前端显示')}
+              />
+            </Field>
+          </div>
+          <Button color='primary' onPress={submitDiscordOAuth}>
+            {t('保存 Discord OAuth 设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* Linux DO */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 Linux DO OAuth')} />
+          <div className='text-sm text-foreground'>
+            {t('用以支持通过 Linux DO 进行登录注册')}
+            <a
+              href='https://connect.linux.do/'
+              target='_blank'
+              rel='noreferrer'
+              className='mx-1 text-primary hover:underline'
+            >
+              {t('点击此处')}
+            </a>
+            {t('管理你的 LinuxDO OAuth App')}
+          </div>
+          <InfoBanner>
+            {`${t('回调 URL 填')} ${
+              inputs.ServerAddress ? inputs.ServerAddress : t('网站地址')
+            }/oauth/linuxdo`}
+          </InfoBanner>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-12'>
+            <div className='space-y-2 md:col-span-5'>
+              <FieldLabel>{t('Linux DO Client ID')}</FieldLabel>
+              <TextInput
+                value={inputs.LinuxDOClientId}
+                onChange={setField('LinuxDOClientId')}
+                placeholder={t('输入你注册的 LinuxDO OAuth APP 的 ID')}
+              />
+            </div>
+            <div className='space-y-2 md:col-span-5'>
+              <FieldLabel>{t('Linux DO Client Secret')}</FieldLabel>
+              <TextInput
+                type='password'
+                value={inputs.LinuxDOClientSecret}
+                onChange={setField('LinuxDOClientSecret')}
+                placeholder={t('敏感信息不会发送到前端显示')}
+              />
+            </div>
+            <div className='space-y-2 md:col-span-2'>
+              <FieldLabel>LinuxDO Minimum Trust Level</FieldLabel>
+              <TextInput
+                value={inputs.LinuxDOMinimumTrustLevel}
+                onChange={setField('LinuxDOMinimumTrustLevel')}
+                placeholder='允许注册的最低信任等级'
+              />
+            </div>
+          </div>
+          <Button color='primary' onPress={submitLinuxDOOAuth}>
+            {t('保存 Linux DO OAuth 设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* 自定义 OAuth */}
+      <CustomOAuthSetting serverAddress={inputs.ServerAddress} />
+
+      {/* WeChat Server */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 WeChat Server')} />
+          <div className='text-sm text-foreground'>
+            {t('用以支持通过微信进行登录注册')}
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+            <Field label={t('WeChat Server 服务器地址')}>
+              <TextInput
+                value={inputs.WeChatServerAddress}
+                onChange={setField('WeChatServerAddress')}
+              />
+            </Field>
+            <Field label={t('WeChat Server 访问凭证')}>
+              <TextInput
+                type='password'
+                value={inputs.WeChatServerToken}
+                onChange={setField('WeChatServerToken')}
+                placeholder={t('敏感信息不会发送到前端显示')}
+              />
+            </Field>
+            <Field label={t('微信公众号二维码图片链接')}>
+              <TextInput
+                value={inputs.WeChatAccountQRCodeImageURL}
+                onChange={setField('WeChatAccountQRCodeImageURL')}
+              />
+            </Field>
+          </div>
+          <Button color='primary' onPress={submitWeChat}>
+            {t('保存 WeChat Server 设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* Telegram */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 Telegram 登录')} />
+          <div className='text-sm text-foreground'>
+            {t('用以支持通过 Telegram 进行登录注册')}
+          </div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field label={t('Telegram Bot Token')}>
+              <TextInput
+                type='password'
+                value={inputs.TelegramBotToken}
+                onChange={setField('TelegramBotToken')}
+                placeholder={t('敏感信息不会发送到前端显示')}
+              />
+            </Field>
+            <Field label={t('Telegram Bot 名称')}>
+              <TextInput
+                value={inputs.TelegramBotName}
+                onChange={setField('TelegramBotName')}
+              />
+            </Field>
+          </div>
+          <Button color='primary' onPress={submitTelegramSettings}>
+            {t('保存 Telegram 登录设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* Turnstile */}
+      <Card>
+        <Card.Content className='space-y-4 p-5'>
+          <SectionHeader title={t('配置 Turnstile')} />
+          <div className='text-sm text-foreground'>{t('用以支持用户校验')}</div>
+          <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+            <Field label={t('Turnstile Site Key')}>
+              <TextInput
+                value={inputs.TurnstileSiteKey}
+                onChange={setField('TurnstileSiteKey')}
+              />
+            </Field>
+            <Field label={t('Turnstile Secret Key')}>
+              <TextInput
+                type='password'
+                value={inputs.TurnstileSecretKey}
+                onChange={setField('TurnstileSecretKey')}
+                placeholder={t('敏感信息不会发送到前端显示')}
+              />
+            </Field>
+          </div>
+          <Button color='primary' onPress={submitTurnstile}>
+            {t('保存 Turnstile 设置')}
+          </Button>
+        </Card.Content>
+      </Card>
+
+      {/* 取消密码登录确认 */}
+      <ConfirmDialog
+        visible={showPasswordLoginConfirm}
+        title={t('确认取消密码登录')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={handlePasswordLoginCancel}
+        onConfirm={handlePasswordLoginConfirm}
+      >
+        {t('您确定要取消密码登录功能吗？这可能会影响用户的登录方式。')}
+      </ConfirmDialog>
     </div>
   );
 };
diff --git a/web/src/components/settings/personal/cards/AccountManagement.jsx b/web/src/components/settings/personal/cards/AccountManagement.jsx
index 29249caa162..8d879e5fbe2 100644
--- a/web/src/components/settings/personal/cards/AccountManagement.jsx
+++ b/web/src/components/settings/personal/cards/AccountManagement.jsx
@@ -6,43 +6,43 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import {
+  Avatar,
   Button,
   Card,
-  Input,
-  Space,
-  Typography,
-  Avatar,
-  Tabs,
-  TabPane,
-  Popover,
   Modal,
-} from '@douyinfe/semi-ui';
-import {
-  IconMail,
-  IconShield,
-  IconGithubLogo,
-  IconKey,
-  IconLock,
-  IconDelete,
-} from '@douyinfe/semi-icons';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  Tooltip,
+  useOverlayState,
+} from '@heroui/react';
+import { Segment } from '@heroui-pro/react';
 import { SiTelegram, SiWechat, SiLinux, SiDiscord } from 'react-icons/si';
-import { UserPlus, ShieldCheck } from 'lucide-react';
+import {
+  Copy,
+  Github,
+  KeyRound,
+  Lock,
+  Mail,
+  ShieldCheck,
+  Trash2,
+  UserPlus,
+  X,
+} from 'lucide-react';
 import TelegramLoginButton from 'react-telegram-login';
 import {
   API,
+  copy as copyToClipboard,
   showError,
   showSuccess,
   onGitHubOAuthClicked,
@@ -52,8 +52,24 @@ import {
   onCustomOAuthClicked,
   getOAuthProviderIcon,
 } from '../../../../helpers';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 import TwoFASetting from '../components/TwoFASetting';
 
+// ----------------------------- helpers -----------------------------
+
+// Round icon container used by binding rows and security rows. Sticks with a
+// neutral surface background so the colored CTA buttons own the visual focus.
+function IconTile({ size = 'md', children }) {
+  const sizeCls = size === 'lg' ? 'h-11 w-11' : 'h-10 w-10';
+  return (
+    <div
+      className={`${sizeCls} flex shrink-0 items-center justify-center rounded-full bg-surface-secondary text-muted`}
+    >
+      {children}
+    </div>
+  );
+}
+
 const AccountManagement = ({
   t,
   userState,
@@ -72,37 +88,59 @@ const AccountManagement = ({
   onPasskeyRegister,
   onPasskeyDelete,
 }) => {
-  const renderAccountInfo = (accountId, label) => {
+  const [activeTab, setActiveTab] = useState('binding');
+  const [showTelegramBindModal, setShowTelegramBindModal] = useState(false);
+  const [customOAuthBindings, setCustomOAuthBindings] = useState([]);
+  const [customOAuthLoading, setCustomOAuthLoading] = useState({});
+
+  // Inline confirm dialog state (replaces Semi imperative `Modal.confirm`)
+  const [unbindCustomTarget, setUnbindCustomTarget] = useState(null);
+  const [unbindPasskey, setUnbindPasskey] = useState(false);
+
+  const telegramModalState = useOverlayState({
+    isOpen: showTelegramBindModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowTelegramBindModal(false);
+    },
+  });
+
+  const renderAccountInfo = (accountId) => {
     if (!accountId || accountId === '') {
-      return <span className='text-gray-500'>{t('未绑定')}</span>;
+      return <span className='text-muted'>{t('未绑定')}</span>;
     }
 
-    const popContent = (
-      <div className='text-xs p-2'>
-        <Typography.Paragraph copyable={{ content: accountId }}>
-          {accountId}
-        </Typography.Paragraph>
-        {label ? (
-          <div className='mt-1 text-[11px] text-gray-500'>{label}</div>
-        ) : null}
-      </div>
-    );
-
     return (
-      <Popover content={popContent} position='top' trigger='hover'>
-        <span className='block max-w-full truncate text-gray-600 hover:text-blue-600 cursor-pointer'>
+      <Tooltip
+        content={
+          <div className='flex items-center gap-2 px-2 py-1 text-xs'>
+            <code className='select-all rounded bg-background/40 px-1.5 py-0.5 font-mono'>
+              {accountId}
+            </code>
+            <button
+              type='button'
+              className='inline-flex items-center text-primary hover:underline'
+              onClick={async () => {
+                const ok = await copyToClipboard(accountId);
+                if (ok) showSuccess(t('已复制'));
+                else showError(t('复制失败'));
+              }}
+              aria-label={t('复制')}
+            >
+              <Copy size={12} className='mr-1' />
+              {t('复制')}
+            </button>
+          </div>
+        }
+      >
+        <span className='block max-w-full cursor-pointer truncate text-muted hover:text-primary'>
           {accountId}
         </span>
-      </Popover>
+      </Tooltip>
     );
   };
+
   const isBound = (accountId) => Boolean(accountId);
-  const [showTelegramBindModal, setShowTelegramBindModal] =
-    React.useState(false);
-  const [customOAuthBindings, setCustomOAuthBindings] = React.useState([]);
-  const [customOAuthLoading, setCustomOAuthLoading] = React.useState({});
 
-  // Fetch custom OAuth bindings
   const loadCustomOAuthBindings = async () => {
     try {
       const res = await API.get('/api/user/oauth/bindings');
@@ -112,55 +150,54 @@ const AccountManagement = ({
         showError(res.data.message || t('获取绑定信息失败'));
       }
     } catch (error) {
-      showError(error.response?.data?.message || error.message || t('获取绑定信息失败'));
+      showError(
+        error.response?.data?.message ||
+          error.message ||
+          t('获取绑定信息失败'),
+      );
     }
   };
 
-  // Unbind custom OAuth provider
   const handleUnbindCustomOAuth = async (providerId, providerName) => {
-    Modal.confirm({
-      title: t('确认解绑'),
-      content: t('确定要解绑 {{name}} 吗？', { name: providerName }),
-      okText: t('确认'),
-      cancelText: t('取消'),
-      onOk: async () => {
-        setCustomOAuthLoading((prev) => ({ ...prev, [providerId]: true }));
-        try {
-          const res = await API.delete(`/api/user/oauth/bindings/${providerId}`);
-          if (res.data.success) {
-            showSuccess(t('解绑成功'));
-            await loadCustomOAuthBindings();
-          } else {
-            showError(res.data.message);
-          }
-        } catch (error) {
-          showError(error.response?.data?.message || error.message || t('操作失败'));
-        } finally {
-          setCustomOAuthLoading((prev) => ({ ...prev, [providerId]: false }));
-        }
-      },
-    });
+    setCustomOAuthLoading((prev) => ({ ...prev, [providerId]: true }));
+    try {
+      const res = await API.delete(`/api/user/oauth/bindings/${providerId}`);
+      if (res.data.success) {
+        showSuccess(t('解绑成功'));
+        await loadCustomOAuthBindings();
+      } else {
+        showError(res.data.message);
+      }
+    } catch (error) {
+      showError(
+        error.response?.data?.message || error.message || t('操作失败'),
+      );
+    } finally {
+      setCustomOAuthLoading((prev) => ({ ...prev, [providerId]: false }));
+    }
   };
 
-  // Handle bind custom OAuth
   const handleBindCustomOAuth = (provider) => {
     onCustomOAuthClicked(provider);
   };
 
-  // Check if custom OAuth provider is bound
   const isCustomOAuthBound = (providerId) => {
     const normalizedId = Number(providerId);
-    return customOAuthBindings.some((b) => Number(b.provider_id) === normalizedId);
+    return customOAuthBindings.some(
+      (b) => Number(b.provider_id) === normalizedId,
+    );
   };
 
-  // Get binding info for a provider
   const getCustomOAuthBinding = (providerId) => {
     const normalizedId = Number(providerId);
-    return customOAuthBindings.find((b) => Number(b.provider_id) === normalizedId);
+    return customOAuthBindings.find(
+      (b) => Number(b.provider_id) === normalizedId,
+    );
   };
 
-  React.useEffect(() => {
+  useEffect(() => {
     loadCustomOAuthBindings();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const passkeyEnabled = passkeyStatus?.enabled;
@@ -168,605 +205,532 @@ const AccountManagement = ({
     ? new Date(passkeyStatus.last_used_at).toLocaleString()
     : t('尚未使用');
 
-  return (
-    <Card className='!rounded-2xl'>
-      {/* 卡片头部 */}
-      <div className='flex items-center mb-4'>
-        <Avatar size='small' color='teal' className='mr-3 shadow-md'>
-          <UserPlus size={16} />
-        </Avatar>
-        <div>
-          <Typography.Text className='text-lg font-medium'>
-            {t('账户管理')}
-          </Typography.Text>
-          <div className='text-xs text-gray-600'>
-            {t('账户绑定、安全设置和身份验证')}
+  // ----------------------------- BindingRow ----------------------------- //
+  const BindingRow = ({ icon, title, info, action }) => (
+    <Card className='!rounded-xl' shadow='none'>
+      <Card.Content className='p-4'>
+        <div className='flex items-center justify-between gap-3'>
+          <div className='flex min-w-0 flex-1 items-center gap-3'>
+            <IconTile size='md'>{icon}</IconTile>
+            <div className='min-w-0 flex-1'>
+              <div className='text-sm font-semibold text-foreground'>
+                {title}
+              </div>
+              <div className='truncate text-xs text-muted'>{info}</div>
+            </div>
           </div>
+          <div className='shrink-0'>{action}</div>
         </div>
-      </div>
+      </Card.Content>
+    </Card>
+  );
 
-      <Tabs type='card' defaultActiveKey='binding'>
-        {/* 账户绑定 Tab */}
-        <TabPane
-          tab={
-            <div className='flex items-center'>
-              <UserPlus size={16} className='mr-2' />
-              {t('账户绑定')}
+  // ----------------------------- SecurityRow ----------------------------- //
+  const SecurityRow = ({ icon, title, hint, extra, action }) => (
+    <Card className='!w-full !rounded-xl' shadow='none'>
+      <Card.Content className='p-5'>
+        <div className='flex flex-col items-start gap-4 sm:flex-row sm:justify-between'>
+          <div className='flex w-full items-start gap-4 sm:w-auto'>
+            <IconTile size='lg'>{icon}</IconTile>
+            <div className='flex-1'>
+              <div className='mb-1 text-sm font-semibold text-foreground'>
+                {title}
+              </div>
+              <div className='text-xs text-muted'>{hint}</div>
+              {extra}
             </div>
-          }
-          itemKey='binding'
+          </div>
+          <div className='w-full sm:w-auto'>{action}</div>
+        </div>
+      </Card.Content>
+    </Card>
+  );
+
+  return (
+    <Card className='!rounded-2xl' shadow='none'>
+      <Card.Content className='p-5'>
+        {/* Card header */}
+        <div className='mb-4 flex items-center gap-3'>
+          <Avatar size='sm' color='success' className='shadow-md'>
+            <Avatar.Fallback>
+              <UserPlus size={16} />
+            </Avatar.Fallback>
+          </Avatar>
+          <div className='flex flex-col'>
+            <span className='text-base font-semibold text-foreground'>
+              {t('账户管理')}
+            </span>
+            <span className='text-xs text-muted'>
+              {t('账户绑定、安全设置和身份验证')}
+            </span>
+          </div>
+        </div>
+
+        {/* Segmented control */}
+        <Segment
+          aria-label={t('账户管理')}
+          selectedKey={activeTab}
+          onSelectionChange={(key) => setActiveTab(String(key))}
+          className='mb-4'
         >
-          <div className='py-4'>
-            <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
-              {/* 邮箱绑定 */}
-              <Card className='!rounded-xl'>
-                <div className='flex items-center justify-between gap-3'>
-                  <div className='flex items-center flex-1 min-w-0'>
-                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                      <IconMail
-                        size='default'
-                        className='text-slate-600 dark:text-slate-300'
-                      />
-                    </div>
-                    <div className='flex-1 min-w-0'>
-                      <div className='font-medium text-gray-900'>
-                        {t('邮箱')}
-                      </div>
-                      <div className='text-sm text-gray-500 truncate'>
-                        {renderAccountInfo(
-                          userState.user?.email,
-                          t('邮箱地址'),
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className='flex-shrink-0'>
-                    <Button
-                      type='primary'
-                      theme='outline'
-                      size='small'
-                      onClick={() => setShowEmailBindModal(true)}
-                    >
-                      {isBound(userState.user?.email)
-                        ? t('修改绑定')
-                        : t('绑定')}
+          <Segment.Item id='binding'>
+            <Segment.Separator />
+            <UserPlus size={14} />
+            {t('账户绑定')}
+          </Segment.Item>
+          <Segment.Item id='security'>
+            <Segment.Separator />
+            <ShieldCheck size={14} />
+            {t('安全设置')}
+          </Segment.Item>
+        </Segment>
+
+        {/* 账户绑定 Tab */}
+        {activeTab === 'binding' && (
+          <div className='py-2'>
+            <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+              {/* Email */}
+              <BindingRow
+                icon={<Mail size={20} />}
+                title={t('邮箱')}
+                info={renderAccountInfo(userState.user?.email)}
+                action={
+                  <Button
+                    variant={
+                      isBound(userState.user?.email) ? 'outline' : 'primary'
+                    }
+                    size='sm'
+                    onPress={() => setShowEmailBindModal(true)}
+                  >
+                    {isBound(userState.user?.email)
+                      ? t('修改绑定')
+                      : t('绑定')}
+                  </Button>
+                }
+              />
+
+              {/* WeChat */}
+              <BindingRow
+                icon={<SiWechat size={20} />}
+                title={t('微信')}
+                info={
+                  !status.wechat_login
+                    ? t('未启用')
+                    : isBound(userState.user?.wechat_id)
+                      ? t('已绑定')
+                      : t('未绑定')
+                }
+                action={
+                  !status.wechat_login ? (
+                    <Button variant='tertiary' size='sm' isDisabled>
+                      {t('未启用')}
                     </Button>
-                  </div>
-                </div>
-              </Card>
-
-              {/* 微信绑定 */}
-              <Card className='!rounded-xl'>
-                <div className='flex items-center justify-between gap-3'>
-                  <div className='flex items-center flex-1 min-w-0'>
-                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                      <SiWechat
-                        size={20}
-                        className='text-slate-600 dark:text-slate-300'
-                      />
-                    </div>
-                    <div className='flex-1 min-w-0'>
-                      <div className='font-medium text-gray-900'>
-                        {t('微信')}
-                      </div>
-                      <div className='text-sm text-gray-500 truncate'>
-                        {!status.wechat_login
-                          ? t('未启用')
-                          : isBound(userState.user?.wechat_id)
-                            ? t('已绑定')
-                            : t('未绑定')}
-                      </div>
-                    </div>
-                  </div>
-                  <div className='flex-shrink-0'>
+                  ) : (
                     <Button
-                      type='primary'
-                      theme='outline'
-                      size='small'
-                      disabled={!status.wechat_login}
-                      onClick={() => setShowWeChatBindModal(true)}
+                      variant={
+                        isBound(userState.user?.wechat_id)
+                          ? 'outline'
+                          : 'primary'
+                      }
+                      size='sm'
+                      onPress={() => setShowWeChatBindModal(true)}
                     >
                       {isBound(userState.user?.wechat_id)
                         ? t('修改绑定')
-                        : status.wechat_login
-                          ? t('绑定')
-                          : t('未启用')}
+                        : t('绑定')}
                     </Button>
-                  </div>
-                </div>
-              </Card>
-
-              {/* GitHub绑定 */}
-              <Card className='!rounded-xl'>
-                <div className='flex items-center justify-between gap-3'>
-                  <div className='flex items-center flex-1 min-w-0'>
-                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                      <IconGithubLogo
-                        size='default'
-                        className='text-slate-600 dark:text-slate-300'
-                      />
-                    </div>
-                    <div className='flex-1 min-w-0'>
-                      <div className='font-medium text-gray-900'>
-                        {t('GitHub')}
-                      </div>
-                      <div className='text-sm text-gray-500 truncate'>
-                        {renderAccountInfo(
-                          userState.user?.github_id,
-                          t('GitHub ID'),
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className='flex-shrink-0'>
+                  )
+                }
+              />
+
+              {/* GitHub */}
+              <BindingRow
+                icon={<Github size={20} />}
+                title={t('GitHub')}
+                info={renderAccountInfo(userState.user?.github_id)}
+                action={
+                  !status.github_oauth ? (
+                    <Button variant='tertiary' size='sm' isDisabled>
+                      {t('未启用')}
+                    </Button>
+                  ) : isBound(userState.user?.github_id) ? (
+                    <Button variant='outline' size='sm' isDisabled>
+                      {t('已绑定')}
+                    </Button>
+                  ) : (
                     <Button
-                      type='primary'
-                      theme='outline'
-                      size='small'
-                      onClick={() =>
+                      variant='primary'
+                      size='sm'
+                      onPress={() =>
                         onGitHubOAuthClicked(status.github_client_id)
                       }
-                      disabled={
-                        isBound(userState.user?.github_id) ||
-                        !status.github_oauth
-                      }
                     >
-                      {status.github_oauth ? t('绑定') : t('未启用')}
+                      {t('绑定')}
                     </Button>
-                  </div>
-                </div>
-              </Card>
-
-              {/* Discord绑定 */}
-              <Card className='!rounded-xl'>
-                <div className='flex items-center justify-between gap-3'>
-                  <div className='flex items-center flex-1 min-w-0'>
-                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                      <SiDiscord
-                        size={20}
-                        className='text-slate-600 dark:text-slate-300'
-                      />
-                    </div>
-                    <div className='flex-1 min-w-0'>
-                      <div className='font-medium text-gray-900'>
-                        {t('Discord')}
-                      </div>
-                      <div className='text-sm text-gray-500 truncate'>
-                        {renderAccountInfo(
-                          userState.user?.discord_id,
-                          t('Discord ID'),
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className='flex-shrink-0'>
+                  )
+                }
+              />
+
+              {/* Discord */}
+              <BindingRow
+                icon={<SiDiscord size={20} />}
+                title={t('Discord')}
+                info={renderAccountInfo(userState.user?.discord_id)}
+                action={
+                  !status.discord_oauth ? (
+                    <Button variant='tertiary' size='sm' isDisabled>
+                      {t('未启用')}
+                    </Button>
+                  ) : isBound(userState.user?.discord_id) ? (
+                    <Button variant='outline' size='sm' isDisabled>
+                      {t('已绑定')}
+                    </Button>
+                  ) : (
                     <Button
-                      type='primary'
-                      theme='outline'
-                      size='small'
-                      onClick={() =>
+                      variant='primary'
+                      size='sm'
+                      onPress={() =>
                         onDiscordOAuthClicked(status.discord_client_id)
                       }
-                      disabled={
-                        isBound(userState.user?.discord_id) ||
-                        !status.discord_oauth
-                      }
                     >
-                      {status.discord_oauth ? t('绑定') : t('未启用')}
+                      {t('绑定')}
                     </Button>
-                  </div>
-                </div>
-              </Card>
-
-              {/* OIDC绑定 */}
-              <Card className='!rounded-xl'>
-                <div className='flex items-center justify-between gap-3'>
-                  <div className='flex items-center flex-1 min-w-0'>
-                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                      <IconShield
-                        size='default'
-                        className='text-slate-600 dark:text-slate-300'
-                      />
-                    </div>
-                    <div className='flex-1 min-w-0'>
-                      <div className='font-medium text-gray-900'>
-                        {t('OIDC')}
-                      </div>
-                      <div className='text-sm text-gray-500 truncate'>
-                        {renderAccountInfo(
-                          userState.user?.oidc_id,
-                          t('OIDC ID'),
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className='flex-shrink-0'>
+                  )
+                }
+              />
+
+              {/* OIDC */}
+              <BindingRow
+                icon={<ShieldCheck size={20} />}
+                title={t('OIDC')}
+                info={renderAccountInfo(userState.user?.oidc_id)}
+                action={
+                  !status.oidc_enabled ? (
+                    <Button variant='tertiary' size='sm' isDisabled>
+                      {t('未启用')}
+                    </Button>
+                  ) : isBound(userState.user?.oidc_id) ? (
+                    <Button variant='outline' size='sm' isDisabled>
+                      {t('已绑定')}
+                    </Button>
+                  ) : (
                     <Button
-                      type='primary'
-                      theme='outline'
-                      size='small'
-                      onClick={() =>
+                      variant='primary'
+                      size='sm'
+                      onPress={() =>
                         onOIDCClicked(
                           status.oidc_authorization_endpoint,
                           status.oidc_client_id,
                         )
                       }
-                      disabled={
-                        isBound(userState.user?.oidc_id) || !status.oidc_enabled
-                      }
                     >
-                      {status.oidc_enabled ? t('绑定') : t('未启用')}
+                      {t('绑定')}
                     </Button>
-                  </div>
-                </div>
-              </Card>
-
-              {/* Telegram绑定 */}
-              <Card className='!rounded-xl'>
-                <div className='flex items-center justify-between gap-3'>
-                  <div className='flex items-center flex-1 min-w-0'>
-                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                      <SiTelegram
-                        size={20}
-                        className='text-slate-600 dark:text-slate-300'
-                      />
-                    </div>
-                    <div className='flex-1 min-w-0'>
-                      <div className='font-medium text-gray-900'>
-                        {t('Telegram')}
-                      </div>
-                      <div className='text-sm text-gray-500 truncate'>
-                        {renderAccountInfo(
-                          userState.user?.telegram_id,
-                          t('Telegram ID'),
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className='flex-shrink-0'>
-                    {status.telegram_oauth ? (
-                      isBound(userState.user?.telegram_id) ? (
-                        <Button
-                          disabled
-                          size='small'
-                          type='primary'
-                          theme='outline'
-                        >
-                          {t('已绑定')}
-                        </Button>
-                      ) : (
-                        <Button
-                          type='primary'
-                          theme='outline'
-                          size='small'
-                          onClick={() => setShowTelegramBindModal(true)}
-                        >
-                          {t('绑定')}
-                        </Button>
-                      )
-                    ) : (
-                      <Button
-                        disabled
-                        size='small'
-                        type='primary'
-                        theme='outline'
-                      >
-                        {t('未启用')}
-                      </Button>
-                    )}
-                  </div>
-                </div>
-              </Card>
-              <Modal
-                title={t('绑定 Telegram')}
-                visible={showTelegramBindModal}
-                onCancel={() => setShowTelegramBindModal(false)}
-                footer={null}
-              >
-                <div className='my-3 text-sm text-gray-600'>
-                  {t('点击下方按钮通过 Telegram 完成绑定')}
-                </div>
-                <div className='flex justify-center'>
-                  <div className='scale-90'>
-                    <TelegramLoginButton
-                      dataAuthUrl='/api/oauth/telegram/bind'
-                      botName={status.telegram_bot_name}
-                    />
-                  </div>
-                </div>
-              </Modal>
-
-              {/* LinuxDO绑定 */}
-              <Card className='!rounded-xl'>
-                <div className='flex items-center justify-between gap-3'>
-                  <div className='flex items-center flex-1 min-w-0'>
-                    <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                      <SiLinux
-                        size={20}
-                        className='text-slate-600 dark:text-slate-300'
-                      />
-                    </div>
-                    <div className='flex-1 min-w-0'>
-                      <div className='font-medium text-gray-900'>
-                        {t('LinuxDO')}
-                      </div>
-                      <div className='text-sm text-gray-500 truncate'>
-                        {renderAccountInfo(
-                          userState.user?.linux_do_id,
-                          t('LinuxDO ID'),
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className='flex-shrink-0'>
+                  )
+                }
+              />
+
+              {/* Telegram */}
+              <BindingRow
+                icon={<SiTelegram size={20} />}
+                title={t('Telegram')}
+                info={renderAccountInfo(userState.user?.telegram_id)}
+                action={
+                  !status.telegram_oauth ? (
+                    <Button variant='tertiary' size='sm' isDisabled>
+                      {t('未启用')}
+                    </Button>
+                  ) : isBound(userState.user?.telegram_id) ? (
+                    <Button variant='outline' size='sm' isDisabled>
+                      {t('已绑定')}
+                    </Button>
+                  ) : (
+                    <Button
+                      variant='primary'
+                      size='sm'
+                      onPress={() => setShowTelegramBindModal(true)}
+                    >
+                      {t('绑定')}
+                    </Button>
+                  )
+                }
+              />
+
+              {/* LinuxDO */}
+              <BindingRow
+                icon={<SiLinux size={20} />}
+                title={t('LinuxDO')}
+                info={renderAccountInfo(userState.user?.linux_do_id)}
+                action={
+                  !status.linuxdo_oauth ? (
+                    <Button variant='tertiary' size='sm' isDisabled>
+                      {t('未启用')}
+                    </Button>
+                  ) : isBound(userState.user?.linux_do_id) ? (
+                    <Button variant='outline' size='sm' isDisabled>
+                      {t('已绑定')}
+                    </Button>
+                  ) : (
                     <Button
-                      type='primary'
-                      theme='outline'
-                      size='small'
-                      onClick={() =>
+                      variant='primary'
+                      size='sm'
+                      onPress={() =>
                         onLinuxDOOAuthClicked(status.linuxdo_client_id)
                       }
-                      disabled={
-                        isBound(userState.user?.linux_do_id) ||
-                        !status.linuxdo_oauth
-                      }
                     >
-                      {status.linuxdo_oauth ? t('绑定') : t('未启用')}
+                      {t('绑定')}
                     </Button>
-                  </div>
-                </div>
-              </Card>
+                  )
+                }
+              />
 
-              {/* 自定义 OAuth 提供商绑定 */}
+              {/* Custom OAuth providers */}
               {status.custom_oauth_providers &&
                 status.custom_oauth_providers.map((provider) => {
                   const bound = isCustomOAuthBound(provider.id);
                   const binding = getCustomOAuthBinding(provider.id);
                   return (
-                    <Card key={provider.slug} className='!rounded-xl'>
-                      <div className='flex items-center justify-between gap-3'>
-                        <div className='flex items-center flex-1 min-w-0'>
-                          <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                            {getOAuthProviderIcon(
-                              provider.icon || binding?.provider_icon || '',
-                              20,
-                            )}
-                          </div>
-                          <div className='flex-1 min-w-0'>
-                            <div className='font-medium text-gray-900'>
-                              {provider.name}
-                            </div>
-                            <div className='text-sm text-gray-500 truncate'>
-                              {bound
-                                ? renderAccountInfo(
-                                    binding?.provider_user_id,
-                                    t('{{name}} ID', { name: provider.name }),
-                                  )
-                                : t('未绑定')}
-                            </div>
-                          </div>
-                        </div>
-                        <div className='flex-shrink-0'>
-                          {bound ? (
-                            <Button
-                              type='danger'
-                              theme='outline'
-                              size='small'
-                              loading={customOAuthLoading[provider.id]}
-                              onClick={() =>
-                                handleUnbindCustomOAuth(provider.id, provider.name)
-                              }
-                            >
-                              {t('解绑')}
-                            </Button>
-                          ) : (
-                            <Button
-                              type='primary'
-                              theme='outline'
-                              size='small'
-                              onClick={() => handleBindCustomOAuth(provider)}
-                            >
-                              {t('绑定')}
-                            </Button>
-                          )}
-                        </div>
-                      </div>
-                    </Card>
+                    <BindingRow
+                      key={provider.slug}
+                      icon={getOAuthProviderIcon(
+                        provider.icon || binding?.provider_icon || '',
+                        20,
+                      )}
+                      title={provider.name}
+                      info={
+                        bound
+                          ? renderAccountInfo(binding?.provider_user_id)
+                          : t('未绑定')
+                      }
+                      action={
+                        bound ? (
+                          <Button
+                            variant='danger-soft'
+                            size='sm'
+                            isPending={customOAuthLoading[provider.id]}
+                            onPress={() =>
+                              setUnbindCustomTarget({
+                                id: provider.id,
+                                name: provider.name,
+                              })
+                            }
+                          >
+                            {t('解绑')}
+                          </Button>
+                        ) : (
+                          <Button
+                            variant='primary'
+                            size='sm'
+                            onPress={() => handleBindCustomOAuth(provider)}
+                          >
+                            {t('绑定')}
+                          </Button>
+                        )
+                      }
+                    />
                   );
                 })}
             </div>
           </div>
-        </TabPane>
+        )}
 
         {/* 安全设置 Tab */}
-        <TabPane
-          tab={
-            <div className='flex items-center'>
-              <ShieldCheck size={16} className='mr-2' />
-              {t('安全设置')}
-            </div>
-          }
-          itemKey='security'
-        >
-          <div className='py-4'>
-            <div className='space-y-6'>
-              <Space vertical className='w-full'>
-                {/* 系统访问令牌 */}
-                <Card className='!rounded-xl w-full'>
-                  <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
-                    <div className='flex items-start w-full sm:w-auto'>
-                      <div className='w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0'>
-                        <IconKey size='large' className='text-slate-600' />
-                      </div>
-                      <div className='flex-1'>
-                        <Typography.Title heading={6} className='mb-1'>
-                          {t('系统访问令牌')}
-                        </Typography.Title>
-                        <Typography.Text type='tertiary' className='text-sm'>
-                          {t('用于API调用的身份验证令牌，请妥善保管')}
-                        </Typography.Text>
-                        {systemToken && (
-                          <div className='mt-3'>
-                            <Input
-                              readonly
-                              value={systemToken}
-                              onClick={handleSystemTokenClick}
-                              size='large'
-                              prefix={<IconKey />}
-                            />
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <Button
-                      type='primary'
-                      theme='solid'
-                      onClick={generateAccessToken}
-                      className='!bg-slate-600 hover:!bg-slate-700 w-full sm:w-auto'
-                      icon={<IconKey />}
-                    >
-                      {systemToken ? t('重新生成') : t('生成令牌')}
-                    </Button>
-                  </div>
-                </Card>
-
-                {/* 密码管理 */}
-                <Card className='!rounded-xl w-full'>
-                  <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
-                    <div className='flex items-start w-full sm:w-auto'>
-                      <div className='w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0'>
-                        <IconLock size='large' className='text-slate-600' />
-                      </div>
-                      <div>
-                        <Typography.Title heading={6} className='mb-1'>
-                          {t('密码管理')}
-                        </Typography.Title>
-                        <Typography.Text type='tertiary' className='text-sm'>
-                          {t('定期更改密码可以提高账户安全性')}
-                        </Typography.Text>
-                      </div>
+        {activeTab === 'security' && (
+          <div className='space-y-4 py-2'>
+            {/* 系统访问令牌 */}
+            <SecurityRow
+              icon={<KeyRound size={20} />}
+              title={t('系统访问令牌')}
+              hint={t('用于API调用的身份验证令牌，请妥善保管')}
+              extra={
+                systemToken && (
+                  <div className='mt-3'>
+                    <div className='relative'>
+                      <KeyRound
+                        size={16}
+                        className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+                      />
+                      <input
+                        type='text'
+                        readOnly
+                        value={systemToken}
+                        onClick={handleSystemTokenClick}
+                        className='h-11 w-full cursor-pointer rounded-xl border border-border bg-background pl-9 pr-3 text-sm text-foreground outline-none transition focus:border-primary'
+                      />
                     </div>
-                    <Button
-                      type='primary'
-                      theme='solid'
-                      onClick={() => setShowChangePasswordModal(true)}
-                      className='!bg-slate-600 hover:!bg-slate-700 w-full sm:w-auto'
-                      icon={<IconLock />}
-                    >
-                      {t('修改密码')}
-                    </Button>
                   </div>
-                </Card>
-
-                {/* Passkey 设置 */}
-                <Card className='!rounded-xl w-full'>
-                  <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
-                    <div className='flex items-start w-full sm:w-auto'>
-                      <div className='w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0'>
-                        <IconKey size='large' className='text-slate-600' />
-                      </div>
-                      <div>
-                        <Typography.Title heading={6} className='mb-1'>
-                          {t('Passkey 登录')}
-                        </Typography.Title>
-                        <Typography.Text type='tertiary' className='text-sm'>
-                          {passkeyEnabled
-                            ? t('已启用 Passkey，无需密码即可登录')
-                            : t('使用 Passkey 实现免密且更安全的登录体验')}
-                        </Typography.Text>
-                        <div className='mt-2 text-xs text-gray-500 space-y-1'>
-                          <div>
-                            {t('最后使用时间')}：{lastUsedLabel}
-                          </div>
-                          {/*{passkeyEnabled && (*/}
-                          {/*  <div>*/}
-                          {/*    {t('备份支持')}：*/}
-                          {/*    {passkeyStatus?.backup_eligible*/}
-                          {/*      ? t('支持备份')*/}
-                          {/*      : t('不支持')}*/}
-                          {/*    ，{t('备份状态')}：*/}
-                          {/*    {passkeyStatus?.backup_state ? t('已备份') : t('未备份')}*/}
-                          {/*  </div>*/}
-                          {/*)}*/}
-                          {!passkeySupported && (
-                            <div className='text-amber-600'>
-                              {t('当前设备不支持 Passkey')}
-                            </div>
-                          )}
-                        </div>
-                      </div>
-                    </div>
-                    <Button
-                      type={passkeyEnabled ? 'danger' : 'primary'}
-                      theme={passkeyEnabled ? 'solid' : 'solid'}
-                      onClick={
-                        passkeyEnabled
-                          ? () => {
-                              Modal.confirm({
-                                title: t('确认解绑 Passkey'),
-                                content: t(
-                                  '解绑后将无法使用 Passkey 登录，确定要继续吗？',
-                                ),
-                                okText: t('确认解绑'),
-                                cancelText: t('取消'),
-                                okType: 'danger',
-                                onOk: onPasskeyDelete,
-                              });
-                            }
-                          : onPasskeyRegister
-                      }
-                      className={`w-full sm:w-auto ${passkeyEnabled ? '!bg-slate-500 hover:!bg-slate-600' : ''}`}
-                      icon={<IconKey />}
-                      disabled={!passkeySupported && !passkeyEnabled}
-                      loading={
-                        passkeyEnabled
-                          ? passkeyDeleteLoading
-                          : passkeyRegisterLoading
-                      }
-                    >
-                      {passkeyEnabled ? t('解绑 Passkey') : t('注册 Passkey')}
-                    </Button>
+                )
+              }
+              action={
+                <Button
+                  variant='primary'
+                  size='sm'
+                  onPress={generateAccessToken}
+                  className='w-full sm:w-auto'
+                >
+                  <KeyRound size={14} />
+                  {systemToken ? t('重新生成') : t('生成令牌')}
+                </Button>
+              }
+            />
+
+            {/* Password management */}
+            <SecurityRow
+              icon={<Lock size={20} />}
+              title={t('密码管理')}
+              hint={t('定期更改密码可以提高账户安全性')}
+              action={
+                <Button
+                  variant='primary'
+                  size='sm'
+                  onPress={() => setShowChangePasswordModal(true)}
+                  className='w-full sm:w-auto'
+                >
+                  <Lock size={14} />
+                  {t('修改密码')}
+                </Button>
+              }
+            />
+
+            {/* Passkey */}
+            <SecurityRow
+              icon={<KeyRound size={20} />}
+              title={t('Passkey 登录')}
+              hint={
+                passkeyEnabled
+                  ? t('已启用 Passkey，无需密码即可登录')
+                  : t('使用 Passkey 实现免密且更安全的登录体验')
+              }
+              extra={
+                <div className='mt-2 space-y-1 text-xs text-muted'>
+                  <div>
+                    {t('最后使用时间')}：{lastUsedLabel}
                   </div>
-                </Card>
-
-                {/* 两步验证设置 */}
-                <TwoFASetting t={t} />
-
-                {/* 危险区域 */}
-                <Card className='!rounded-xl w-full'>
-                  <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
-                    <div className='flex items-start w-full sm:w-auto'>
-                      <div className='w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mr-4 flex-shrink-0'>
-                        <IconDelete size='large' className='text-slate-600' />
-                      </div>
-                      <div>
-                        <Typography.Title
-                          heading={6}
-                          className='mb-1 text-slate-700'
-                        >
-                          {t('删除账户')}
-                        </Typography.Title>
-                        <Typography.Text type='tertiary' className='text-sm'>
-                          {t('此操作不可逆，所有数据将被永久删除')}
-                        </Typography.Text>
-                      </div>
+                  {!passkeySupported && (
+                    <div className='text-warning'>
+                      {t('当前设备不支持 Passkey')}
                     </div>
-                    <Button
-                      type='danger'
-                      theme='solid'
-                      onClick={() => setShowAccountDeleteModal(true)}
-                      className='w-full sm:w-auto !bg-slate-500 hover:!bg-slate-600'
-                      icon={<IconDelete />}
-                    >
-                      {t('删除账户')}
-                    </Button>
-                  </div>
-                </Card>
-              </Space>
-            </div>
+                  )}
+                </div>
+              }
+              action={
+                <Button
+                  variant={passkeyEnabled ? 'danger-soft' : 'primary'}
+                  size='sm'
+                  isDisabled={!passkeySupported && !passkeyEnabled}
+                  isPending={
+                    passkeyEnabled
+                      ? passkeyDeleteLoading
+                      : passkeyRegisterLoading
+                  }
+                  onPress={
+                    passkeyEnabled
+                      ? () => setUnbindPasskey(true)
+                      : onPasskeyRegister
+                  }
+                  className='w-full sm:w-auto'
+                >
+                  <KeyRound size={14} />
+                  {passkeyEnabled ? t('解绑 Passkey') : t('注册 Passkey')}
+                </Button>
+              }
+            />
+
+            {/* 2FA */}
+            <TwoFASetting t={t} />
+
+            {/* Danger zone */}
+            <SecurityRow
+              icon={<Trash2 size={20} />}
+              title={t('删除账户')}
+              hint={t('此操作不可逆，所有数据将被永久删除')}
+              action={
+                <Button
+                  variant='danger'
+                  size='sm'
+                  onPress={() => setShowAccountDeleteModal(true)}
+                  className='w-full sm:w-auto'
+                >
+                  <Trash2 size={14} />
+                  {t('删除账户')}
+                </Button>
+              }
+            />
           </div>
-        </TabPane>
-      </Tabs>
+        )}
+      </Card.Content>
+
+      {/* Telegram bind modal */}
+      <Modal state={telegramModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='md' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='flex items-center justify-between border-b border-border'>
+                <span>{t('绑定 Telegram')}</span>
+                <Button
+                  isIconOnly
+                  variant='light'
+                  size='sm'
+                  aria-label={t('关闭')}
+                  onPress={() => setShowTelegramBindModal(false)}
+                >
+                  <X size={16} />
+                </Button>
+              </ModalHeader>
+              <ModalBody className='space-y-3 px-6 py-5'>
+                <div className='text-sm text-muted'>
+                  {t('点击下方按钮通过 Telegram 完成绑定')}
+                </div>
+                <div className='flex justify-center'>
+                  <div className='scale-90'>
+                    <TelegramLoginButton
+                      dataAuthUrl='/api/oauth/telegram/bind'
+                      botName={status.telegram_bot_name}
+                    />
+                  </div>
+                </div>
+              </ModalBody>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
+
+      {/* 解绑自定义 OAuth */}
+      <ConfirmDialog
+        visible={!!unbindCustomTarget}
+        title={t('确认解绑')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setUnbindCustomTarget(null)}
+        onConfirm={async () => {
+          const target = unbindCustomTarget;
+          setUnbindCustomTarget(null);
+          if (target) {
+            await handleUnbindCustomOAuth(target.id, target.name);
+          }
+        }}
+      >
+        {unbindCustomTarget
+          ? t('确定要解绑 {{name}} 吗？', { name: unbindCustomTarget.name })
+          : ''}
+      </ConfirmDialog>
+
+      {/* 解绑 Passkey */}
+      <ConfirmDialog
+        visible={unbindPasskey}
+        title={t('确认解绑 Passkey')}
+        cancelText={t('取消')}
+        confirmText={t('确认解绑')}
+        danger
+        onCancel={() => setUnbindPasskey(false)}
+        onConfirm={() => {
+          setUnbindPasskey(false);
+          onPasskeyDelete?.();
+        }}
+      >
+        {t('解绑后将无法使用 Passkey 登录，确定要继续吗？')}
+      </ConfirmDialog>
     </Card>
   );
 };
diff --git a/web/src/components/settings/personal/cards/CheckinCalendar.jsx b/web/src/components/settings/personal/cards/CheckinCalendar.jsx
index 2298ae94d9d..2d79193fbca 100644
--- a/web/src/components/settings/personal/cards/CheckinCalendar.jsx
+++ b/web/src/components/settings/personal/cards/CheckinCalendar.jsx
@@ -20,25 +20,143 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useState, useEffect, useMemo } from 'react';
 import {
   Card,
-  Calendar,
   Button,
-  Typography,
-  Avatar,
-  Spin,
   Tooltip,
-  Collapsible,
+  Spinner,
   Modal,
-} from '@douyinfe/semi-ui';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import {
   CalendarCheck,
   Gift,
   Check,
   ChevronDown,
+  ChevronLeft,
+  ChevronRight,
   ChevronUp,
 } from 'lucide-react';
 import Turnstile from 'react-turnstile';
 import { API, showError, showSuccess, renderQuota } from '../../../../helpers';
 
+const WEEKDAY_KEYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+function formatDate(date) {
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
+  return `${year}-${month}-${day}`;
+}
+
+function buildMonthGrid(yearMonth) {
+  const [year, month] = yearMonth.split('-').map((v) => parseInt(v, 10));
+  const firstOfMonth = new Date(year, month - 1, 1);
+  const startWeekday = firstOfMonth.getDay();
+  const startDate = new Date(year, month - 1, 1 - startWeekday);
+  const cells = [];
+  for (let i = 0; i < 42; i++) {
+    const date = new Date(
+      startDate.getFullYear(),
+      startDate.getMonth(),
+      startDate.getDate() + i,
+    );
+    cells.push(date);
+  }
+  return cells;
+}
+
+function MonthCalendar({ yearMonth, onMonthChange, dateRender, t }) {
+  const [year, month] = yearMonth.split('-').map((v) => parseInt(v, 10));
+  const todayKey = formatDate(new Date());
+  const cells = useMemo(() => buildMonthGrid(yearMonth), [yearMonth]);
+
+  const goPrev = () => {
+    const prev = new Date(year, month - 2, 1);
+    onMonthChange?.(prev);
+  };
+  const goNext = () => {
+    const next = new Date(year, month, 1);
+    onMonthChange?.(next);
+  };
+  const goToday = () => onMonthChange?.(new Date());
+
+  const monthLabel = `${year} / ${String(month).padStart(2, '0')}`;
+  const weekdays = WEEKDAY_KEYS.map((key) => t(key));
+
+  return (
+    <div className='overflow-hidden rounded-lg border border-[color:var(--app-border)] text-sm'>
+      <div className='flex items-center justify-between border-b border-[color:var(--app-border)] bg-[color:var(--app-background)] px-3 py-2'>
+        <div className='flex items-center gap-1'>
+          <Button isIconOnly variant='light' size='sm' onPress={goPrev} aria-label='prev'>
+            <ChevronLeft size={14} />
+          </Button>
+          <Button variant='light' size='sm' onPress={goToday}>
+            {t('今天')}
+          </Button>
+          <Button isIconOnly variant='light' size='sm' onPress={goNext} aria-label='next'>
+            <ChevronRight size={14} />
+          </Button>
+        </div>
+        <div className='text-sm font-semibold text-foreground'>{monthLabel}</div>
+        <div className='w-[120px]' />
+      </div>
+
+      <table className='w-full table-fixed'>
+        <thead>
+          <tr className='border-b border-[color:var(--app-border)]'>
+            {weekdays.map((wd) => (
+              <th
+                key={wd}
+                className='py-1 text-center text-xs font-semibold text-muted'
+              >
+                {wd}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: 6 }).map((_, weekIndex) => (
+            <tr key={weekIndex}>
+              {Array.from({ length: 7 }).map((__, dayIndex) => {
+                const cellDate = cells[weekIndex * 7 + dayIndex];
+                const cellKey = formatDate(cellDate);
+                const isCurrentMonth = cellDate.getMonth() === month - 1;
+                const isToday = cellKey === todayKey;
+                const renderResult = dateRender?.(cellKey, cellDate);
+                return (
+                  <td
+                    key={cellKey}
+                    className={`relative h-14 align-top ${
+                      isCurrentMonth
+                        ? ''
+                        : 'opacity-40'
+                    }`}
+                  >
+                    <div
+                      className={`absolute left-1/2 top-1 z-[1] flex h-5 w-5 -translate-x-1/2 items-center justify-center text-xs ${
+                        isToday
+                          ? 'rounded-full bg-primary font-semibold text-white'
+                          : 'text-foreground'
+                      }`}
+                    >
+                      {cellDate.getDate()}
+                    </div>
+                    {renderResult}
+                  </td>
+                );
+              })}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
 const CheckinCalendar = ({ t, status, turnstileEnabled, turnstileSiteKey }) => {
   const [loading, setLoading] = useState(false);
   const [checkinLoading, setCheckinLoading] = useState(false);
@@ -57,12 +175,9 @@ const CheckinCalendar = ({ t, status, turnstileEnabled, turnstileSiteKey }) => {
   const [currentMonth, setCurrentMonth] = useState(
     new Date().toISOString().slice(0, 7),
   );
-  // 初始加载状态，用于避免折叠状态闪烁
   const [initialLoaded, setInitialLoaded] = useState(false);
-  // 折叠状态：null 表示未确定（等待首次加载）
   const [isCollapsed, setIsCollapsed] = useState(null);
 
-  // 创建日期到额度的映射，方便快速查找
   const checkinRecordsMap = useMemo(() => {
     const map = {};
     const records = checkinData.stats?.records || [];
@@ -72,7 +187,6 @@ const CheckinCalendar = ({ t, status, turnstileEnabled, turnstileSiteKey }) => {
     return map;
   }, [checkinData.stats?.records]);
 
-  // 计算本月获得的额度
   const monthlyQuota = useMemo(() => {
     const records = checkinData.stats?.records || [];
     return records.reduce(
@@ -81,7 +195,6 @@ const CheckinCalendar = ({ t, status, turnstileEnabled, turnstileSiteKey }) => {
     );
   }, [checkinData.stats?.records]);
 
-  // 获取签到状态
   const fetchCheckinStatus = async (month) => {
     const isFirstLoad = !initialLoaded;
     setLoading(true);
@@ -90,7 +203,6 @@ const CheckinCalendar = ({ t, status, turnstileEnabled, turnstileSiteKey }) => {
       const { success, data, message } = res.data;
       if (success) {
         setCheckinData(data);
-        // 首次加载时，根据签到状态设置折叠状态
         if (isFirstLoad) {
           setIsCollapsed(data.stats?.checked_in_today ?? false);
           setInitialLoaded(true);
@@ -135,7 +247,6 @@ const CheckinCalendar = ({ t, status, turnstileEnabled, turnstileSiteKey }) => {
         showSuccess(
           t('签到成功！获得') + ' ' + renderQuota(data.quota_awarded),
         );
-        // 刷新签到状态
         fetchCheckinStatus(currentMonth);
         setTurnstileModalVisible(false);
       } else {
@@ -163,220 +274,162 @@ const CheckinCalendar = ({ t, status, turnstileEnabled, turnstileSiteKey }) => {
     if (status?.checkin_enabled) {
       fetchCheckinStatus(currentMonth);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [status?.checkin_enabled, currentMonth]);
 
-  // 如果签到功能未启用，不显示组件
+  const turnstileModalState = useOverlayState({
+    isOpen: turnstileModalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) {
+        setTurnstileModalVisible(false);
+        setTurnstileWidgetKey((v) => v + 1);
+      }
+    },
+  });
+
   if (!status?.checkin_enabled) {
     return null;
   }
 
-  // 日期渲染函数 - 显示签到状态和获得的额度
-  const dateRender = (dateString) => {
-    // Semi Calendar 传入的 dateString 是 Date.toString() 格式
-    // 需要转换为 YYYY-MM-DD 格式来匹配后端数据
-    const date = new Date(dateString);
-    if (isNaN(date.getTime())) {
-      return null;
-    }
-    // 使用本地时间格式化，避免时区问题
-    const year = date.getFullYear();
-    const month = String(date.getMonth() + 1).padStart(2, '0');
-    const day = String(date.getDate()).padStart(2, '0');
-    const formattedDate = `${year}-${month}-${day}`; // YYYY-MM-DD
-    const quotaAwarded = checkinRecordsMap[formattedDate];
+  const dateRender = (cellKey) => {
+    const quotaAwarded = checkinRecordsMap[cellKey];
     const isCheckedIn = quotaAwarded !== undefined;
-
-    if (isCheckedIn) {
-      return (
-        <Tooltip
-          content={`${t('获得')} ${renderQuota(quotaAwarded)}`}
-          position='top'
-        >
-          <div className='absolute inset-0 flex flex-col items-center justify-center cursor-pointer'>
-            <div className='w-6 h-6 rounded-full bg-green-500 flex items-center justify-center mb-0.5 shadow-sm'>
-              <Check size={14} className='text-white' strokeWidth={3} />
-            </div>
-            <div className='text-[10px] font-medium text-green-600 dark:text-green-400 leading-none'>
-              {renderQuota(quotaAwarded)}
-            </div>
+    if (!isCheckedIn) return null;
+    return (
+      <Tooltip
+        content={`${t('获得')} ${renderQuota(quotaAwarded)}`}
+        placement='top'
+      >
+        <div className='absolute inset-0 flex cursor-pointer flex-col items-center justify-center pt-5'>
+          <div className='mb-0.5 flex h-6 w-6 items-center justify-center rounded-full bg-emerald-500 shadow-sm'>
+            <Check size={14} className='text-white' strokeWidth={3} />
           </div>
-        </Tooltip>
-      );
-    }
-    return null;
+          <div className='text-[10px] font-medium leading-none text-emerald-600 dark:text-emerald-400'>
+            {renderQuota(quotaAwarded)}
+          </div>
+        </div>
+      </Tooltip>
+    );
   };
 
-  // 处理月份变化
   const handleMonthChange = (date) => {
     const month = date.toISOString().slice(0, 7);
     setCurrentMonth(month);
   };
 
   return (
-    <Card className='!rounded-2xl'>
-      <Modal
-        title='Security Check'
-        visible={turnstileModalVisible}
-        footer={null}
-        centered
-        onCancel={() => {
-          setTurnstileModalVisible(false);
-          setTurnstileWidgetKey((v) => v + 1);
-        }}
-      >
-        <div className='flex justify-center py-2'>
-          <Turnstile
-            key={turnstileWidgetKey}
-            sitekey={turnstileSiteKey}
-            onVerify={(token) => {
-              doCheckin(token);
-            }}
-            onExpire={() => {
-              setTurnstileWidgetKey((v) => v + 1);
-            }}
-          />
-        </div>
-      </Modal>
+    <Card className='!rounded-2xl border border-[color:var(--app-border)]'>
+      <Card.Content className='space-y-0 p-5'>
+        <Modal state={turnstileModalState}>
+          <ModalBackdrop variant='blur'>
+            <ModalContainer size='sm' placement='center'>
+              <ModalDialog className='bg-background/95 backdrop-blur'>
+                <ModalHeader className='border-b border-border'>
+                  Security Check
+                </ModalHeader>
+                <ModalBody className='flex justify-center px-6 py-5'>
+                  <Turnstile
+                    key={turnstileWidgetKey}
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => doCheckin(token)}
+                    onExpire={() => setTurnstileWidgetKey((v) => v + 1)}
+                  />
+                </ModalBody>
+              </ModalDialog>
+            </ModalContainer>
+          </ModalBackdrop>
+        </Modal>
 
-      {/* 卡片头部 */}
-      <div className='flex items-center justify-between'>
-        <div
-          className='flex items-center flex-1 cursor-pointer'
-          onClick={() => setIsCollapsed(!isCollapsed)}
-        >
-          <Avatar size='small' color='green' className='mr-3 shadow-md'>
-            <CalendarCheck size={16} />
-          </Avatar>
-          <div className='flex-1'>
-            <div className='flex items-center gap-2'>
-              <Typography.Text className='text-lg font-medium'>
-                {t('每日签到')}
-              </Typography.Text>
-              {isCollapsed ? (
-                <ChevronDown size={16} className='text-gray-400' />
-              ) : (
-                <ChevronUp size={16} className='text-gray-400' />
-              )}
-            </div>
-            <div className='text-xs text-gray-500 dark:text-gray-400'>
-              {!initialLoaded
-                ? t('正在加载签到状态...')
-                : checkinData.stats?.checked_in_today
-                  ? t('今日已签到，累计签到') +
-                    ` ${checkinData.stats?.total_checkins || 0} ` +
-                    t('天')
-                  : t('每日签到可获得随机额度奖励')}
+        <div className='flex items-center justify-between'>
+          <div
+            className='flex flex-1 cursor-pointer items-center'
+            onClick={() => setIsCollapsed(!isCollapsed)}
+          >
+            <span className='mr-3 inline-flex h-8 w-8 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 shadow-md dark:bg-emerald-950/40 dark:text-emerald-300'>
+              <CalendarCheck size={16} />
+            </span>
+            <div className='flex-1'>
+              <div className='flex items-center gap-2 text-base font-medium text-foreground'>
+                <span>{t('每日签到')}</span>
+                {isCollapsed ? (
+                  <ChevronDown size={16} className='text-muted' />
+                ) : (
+                  <ChevronUp size={16} className='text-muted' />
+                )}
+              </div>
+              <div className='text-xs text-muted'>
+                {!initialLoaded
+                  ? t('正在加载签到状态...')
+                  : checkinData.stats?.checked_in_today
+                    ? t('今日已签到，累计签到') +
+                      ` ${checkinData.stats?.total_checkins || 0} ` +
+                      t('天')
+                    : t('每日签到可获得随机额度奖励')}
+              </div>
             </div>
           </div>
+          <Button
+            color='success'
+            startContent={<Gift size={14} />}
+            onPress={() => doCheckin()}
+            isPending={checkinLoading || !initialLoaded}
+            isDisabled={!initialLoaded || checkinData.stats?.checked_in_today}
+          >
+            {!initialLoaded
+              ? t('加载中...')
+              : checkinData.stats?.checked_in_today
+                ? t('今日已签到')
+                : t('立即签到')}
+          </Button>
         </div>
-        <Button
-          type='primary'
-          theme='solid'
-          icon={<Gift size={16} />}
-          onClick={() => doCheckin()}
-          loading={checkinLoading || !initialLoaded}
-          disabled={!initialLoaded || checkinData.stats?.checked_in_today}
-          className='!bg-green-600 hover:!bg-green-700'
-        >
-          {!initialLoaded
-            ? t('加载中...')
-            : checkinData.stats?.checked_in_today
-              ? t('今日已签到')
-              : t('立即签到')}
-        </Button>
-      </div>
 
-      {/* 可折叠内容 */}
-      <Collapsible isOpen={isCollapsed === false} keepDOM>
-        {/* 签到统计 */}
-        <div className='grid grid-cols-3 gap-3 mb-4 mt-4'>
-          <div className='text-center p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg'>
-            <div className='text-xl font-bold text-green-600'>
-              {checkinData.stats?.total_checkins || 0}
-            </div>
-            <div className='text-xs text-gray-500'>{t('累计签到')}</div>
-          </div>
-          <div className='text-center p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg'>
-            <div className='text-xl font-bold text-orange-600'>
-              {renderQuota(monthlyQuota, 6)}
+        {isCollapsed === false ? (
+          <div className='mt-4 space-y-4'>
+            <div className='grid grid-cols-3 gap-3'>
+              <div className='rounded-lg bg-surface-secondary p-2.5 text-center'>
+                <div className='text-xl font-bold text-emerald-600'>
+                  {checkinData.stats?.total_checkins || 0}
+                </div>
+                <div className='text-xs text-muted'>{t('累计签到')}</div>
+              </div>
+              <div className='rounded-lg bg-surface-secondary p-2.5 text-center'>
+                <div className='text-xl font-bold text-orange-600'>
+                  {renderQuota(monthlyQuota, 6)}
+                </div>
+                <div className='text-xs text-muted'>{t('本月获得')}</div>
+              </div>
+              <div className='rounded-lg bg-surface-secondary p-2.5 text-center'>
+                <div className='text-xl font-bold text-sky-600'>
+                  {renderQuota(checkinData.stats?.total_quota || 0, 6)}
+                </div>
+                <div className='text-xs text-muted'>{t('累计获得')}</div>
+              </div>
             </div>
-            <div className='text-xs text-gray-500'>{t('本月获得')}</div>
-          </div>
-          <div className='text-center p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg'>
-            <div className='text-xl font-bold text-blue-600'>
-              {renderQuota(checkinData.stats?.total_quota || 0, 6)}
+
+            <div className='relative'>
+              {loading ? (
+                <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60'>
+                  <Spinner size='sm' />
+                </div>
+              ) : null}
+              <MonthCalendar
+                yearMonth={currentMonth}
+                onMonthChange={handleMonthChange}
+                dateRender={dateRender}
+                t={t}
+              />
             </div>
-            <div className='text-xs text-gray-500'>{t('累计获得')}</div>
-          </div>
-        </div>
 
-        {/* 签到日历 - 使用更紧凑的样式 */}
-        <Spin spinning={loading}>
-          <div className='border rounded-lg overflow-hidden checkin-calendar'>
-            <style>{`
-            .checkin-calendar .semi-calendar {
-              font-size: 13px;
-            }
-            .checkin-calendar .semi-calendar-month-header {
-              padding: 8px 12px;
-            }
-            .checkin-calendar .semi-calendar-month-week-row {
-              height: 28px;
-            }
-            .checkin-calendar .semi-calendar-month-week-row th {
-              font-size: 12px;
-              padding: 4px 0;
-            }
-            .checkin-calendar .semi-calendar-month-grid-row {
-              height: auto;
-            }
-            .checkin-calendar .semi-calendar-month-grid-row td {
-              height: 56px;
-              padding: 2px;
-            }
-            .checkin-calendar .semi-calendar-month-grid-row-cell {
-              position: relative;
-              height: 100%;
-            }
-            .checkin-calendar .semi-calendar-month-grid-row-cell-day {
-              position: absolute;
-              top: 4px;
-              left: 50%;
-              transform: translateX(-50%);
-              font-size: 12px;
-              z-index: 1;
-            }
-            .checkin-calendar .semi-calendar-month-same {
-              background: transparent;
-            }
-            .checkin-calendar .semi-calendar-month-today .semi-calendar-month-grid-row-cell-day {
-              background: var(--semi-color-primary);
-              color: white;border-radius: 50%;
-              width: 20px;
-              height: 20px;
-              display: flex;
-              align-items: center;
-              justify-content: center;}
-          `}</style>
-            <Calendar
-              mode='month'
-              onChange={handleMonthChange}
-              dateGridRender={(dateString, date) => dateRender(dateString)}
-            />
+            <div className='rounded-lg bg-surface-secondary p-2.5'>
+              <ul className='list-inside list-disc space-y-0.5 text-xs text-muted'>
+                <li>{t('每日签到可获得随机额度奖励')}</li>
+                <li>{t('签到奖励将直接添加到您的账户余额')}</li>
+                <li>{t('每日仅可签到一次，请勿重复签到')}</li>
+              </ul>
+            </div>
           </div>
-        </Spin>
-
-        {/* 签到说明 */}
-        <div className='mt-3 p-2.5 bg-slate-50 dark:bg-slate-800 rounded-lg'>
-          <Typography.Text type='tertiary' className='text-xs'>
-            <ul className='list-disc list-inside space-y-0.5'>
-              <li>{t('每日签到可获得随机额度奖励')}</li>
-              <li>{t('签到奖励将直接添加到您的账户余额')}</li>
-              <li>{t('每日仅可签到一次，请勿重复签到')}</li>
-            </ul>
-          </Typography.Text>
-        </div>
-      </Collapsible>
+        ) : null}
+      </Card.Content>
     </Card>
   );
 };
diff --git a/web/src/components/settings/personal/cards/NotificationSettings.jsx b/web/src/components/settings/personal/cards/NotificationSettings.jsx
index 5e8d4fd8299..fcdafcaabf4 100644
--- a/web/src/components/settings/personal/cards/NotificationSettings.jsx
+++ b/web/src/components/settings/personal/cards/NotificationSettings.jsx
@@ -6,34 +6,25 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef, useEffect, useState, useContext } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import { Avatar, Button, Card, ListBox, Switch } from '@heroui/react';
+import { CellSelect, Segment } from '@heroui-pro/react';
 import {
-  Button,
-  Typography,
-  Card,
-  Avatar,
-  Form,
-  Radio,
-  Toast,
-  Tabs,
-  TabPane,
-  Switch,
-  Row,
-  Col,
-} from '@douyinfe/semi-ui';
-import { IconMail, IconKey, IconBell, IconLink } from '@douyinfe/semi-icons';
-import { ShieldCheck, Bell, DollarSign, Settings } from 'lucide-react';
+  Bell,
+  ChevronsUpDown,
+  DollarSign,
+  Key,
+  Link as LinkIcon,
+  Mail,
+  Settings,
+  ShieldCheck,
+} from 'lucide-react';
 import {
   renderQuotaWithPrompt,
   API,
@@ -49,26 +40,100 @@ import {
   useSidebar,
 } from '../../../../hooks/common/useSidebar';
 
+// ----------------------------- helpers -----------------------------
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function FieldError({ children }) {
+  if (!children) return null;
+  return <div className='mt-1 text-xs text-danger'>{children}</div>;
+}
+
+function SwitchRow({ label, hint, value, onChange }) {
+  return (
+    <div className='mb-4'>
+      <div className='flex items-start justify-between gap-3'>
+        <div className='space-y-1'>
+          <div className='text-sm font-medium text-foreground'>{label}</div>
+          {hint ? <div className='text-xs text-muted'>{hint}</div> : null}
+        </div>
+        <Switch
+          isSelected={!!value}
+          onValueChange={onChange}
+          size='md'
+          aria-label={label}
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </div>
+    </div>
+  );
+}
+
+// PrefixedInput: native `<input>` with an absolute-positioned lucide icon
+// prefix (replicates Semi `<Form.Input prefix>`).
+function PrefixedInput({
+  type = 'text',
+  value,
+  onChange,
+  placeholder,
+  prefixIcon,
+  list,
+  className = '',
+}) {
+  return (
+    <div className='relative'>
+      {prefixIcon ? (
+        <span className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'>
+          {prefixIcon}
+        </span>
+      ) : null}
+      <input
+        type={type}
+        value={value ?? ''}
+        onChange={(event) => onChange?.(event.target.value)}
+        placeholder={placeholder}
+        list={list}
+        className={`${inputClass} ${prefixIcon ? 'pl-9' : ''} ${className}`}
+      />
+    </div>
+  );
+}
+
+// ----------------------------- main -----------------------------
+
 const NotificationSettings = ({
   t,
   notificationSettings,
   handleNotificationSettingChange,
   saveNotificationSettings,
 }) => {
-  const formApiRef = useRef(null);
   const [statusState] = useContext(StatusContext);
   const [userState] = useContext(UserContext);
   const isAdminOrRoot = (userState?.user?.role || 0) >= 10;
 
-  // 左侧边栏设置相关状态
   const [sidebarLoading, setSidebarLoading] = useState(false);
   const [activeTabKey, setActiveTabKey] = useState('notification');
+  const [errors, setErrors] = useState({});
   const [sidebarModulesUser, setSidebarModulesUser] = useState({
-    chat: {
-      enabled: true,
-      playground: true,
-      chat: true,
-    },
+    chat: { enabled: true, playground: true, chat: true },
     console: {
       enabled: true,
       detail: true,
@@ -77,11 +142,7 @@ const NotificationSettings = ({
       midjourney: true,
       task: true,
     },
-    personal: {
-      enabled: true,
-      topup: true,
-      personal: true,
-    },
+    personal: { enabled: true, topup: true, personal: true },
     admin: {
       enabled: true,
       channel: true,
@@ -95,43 +156,27 @@ const NotificationSettings = ({
   });
   const [adminConfig, setAdminConfig] = useState(null);
 
-  // 使用后端权限验证替代前端角色判断
   const {
-    permissions,
-    loading: permissionsLoading,
     hasSidebarSettingsPermission,
     isSidebarSectionAllowed,
     isSidebarModuleAllowed,
   } = useUserPermissions();
 
-  // 使用useSidebar钩子获取刷新方法
   const { refreshUserConfig } = useSidebar();
 
-  // 左侧边栏设置处理函数
-  const handleSectionChange = (sectionKey) => {
-    return (checked) => {
-      const newModules = {
-        ...sidebarModulesUser,
-        [sectionKey]: {
-          ...sidebarModulesUser[sectionKey],
-          enabled: checked,
-        },
-      };
-      setSidebarModulesUser(newModules);
-    };
+  // Sidebar handlers
+  const handleSectionChange = (sectionKey) => (checked) => {
+    setSidebarModulesUser((prev) => ({
+      ...prev,
+      [sectionKey]: { ...prev[sectionKey], enabled: checked },
+    }));
   };
 
-  const handleModuleChange = (sectionKey, moduleKey) => {
-    return (checked) => {
-      const newModules = {
-        ...sidebarModulesUser,
-        [sectionKey]: {
-          ...sidebarModulesUser[sectionKey],
-          [moduleKey]: checked,
-        },
-      };
-      setSidebarModulesUser(newModules);
-    };
+  const handleModuleChange = (sectionKey, moduleKey) => (checked) => {
+    setSidebarModulesUser((prev) => ({
+      ...prev,
+      [sectionKey]: { ...prev[sectionKey], [moduleKey]: checked },
+    }));
   };
 
   const saveSidebarSettings = async () => {
@@ -142,8 +187,6 @@ const NotificationSettings = ({
       });
       if (res.data.success) {
         showSuccess(t('侧边栏设置保存成功'));
-
-        // 刷新useSidebar钩子中的用户配置，实现实时更新
         await refreshUserConfig();
       } else {
         showError(res.data.message);
@@ -155,7 +198,7 @@ const NotificationSettings = ({
   };
 
   const resetSidebarModules = () => {
-    const defaultConfig = {
+    setSidebarModulesUser({
       chat: { enabled: true, playground: true, chat: true },
       console: {
         enabled: true,
@@ -176,15 +219,12 @@ const NotificationSettings = ({
         user: true,
         setting: true,
       },
-    };
-    setSidebarModulesUser(defaultConfig);
+    });
   };
 
-  // 加载左侧边栏配置
   useEffect(() => {
     const loadSidebarConfigs = async () => {
       try {
-        // 获取管理员全局配置
         if (statusState?.status?.SidebarModulesAdmin) {
           try {
             const adminConf = JSON.parse(
@@ -198,7 +238,6 @@ const NotificationSettings = ({
           setAdminConfig(mergeAdminConfig(null));
         }
 
-        // 获取用户个人配置
         const userRes = await API.get('/api/user/self');
         if (userRes.data.success && userRes.data.data.sidebar_modules) {
           let userConf;
@@ -217,732 +256,734 @@ const NotificationSettings = ({
     loadSidebarConfigs();
   }, [statusState]);
 
-  // 初始化表单值
-  useEffect(() => {
-    if (formApiRef.current && notificationSettings) {
-      formApiRef.current.setValues(notificationSettings);
-    }
-  }, [notificationSettings]);
-
-  // 处理表单字段变化
-  const handleFormChange = (field, value) => {
+  const setField = (field) => (value) => {
     handleNotificationSettingChange(field, value);
+    if (errors[field]) {
+      setErrors((prev) => ({ ...prev, [field]: undefined }));
+    }
   };
 
-  // 检查功能是否被管理员允许
   const isAllowedByAdmin = (sectionKey, moduleKey = null) => {
     if (!adminConfig) return true;
-
     if (moduleKey) {
       return (
         adminConfig[sectionKey]?.enabled && adminConfig[sectionKey]?.[moduleKey]
       );
-    } else {
-      return adminConfig[sectionKey]?.enabled;
     }
+    return adminConfig[sectionKey]?.enabled;
   };
 
-  // 区域配置数据（根据权限过滤）
-  const sectionConfigs = [
-    {
-      key: 'chat',
-      title: t('聊天区域'),
-      description: t('操练场和聊天功能'),
-      modules: [
+  const sectionConfigs = useMemo(
+    () =>
+      [
         {
-          key: 'playground',
-          title: t('操练场'),
-          description: t('AI模型测试环境'),
+          key: 'chat',
+          title: t('聊天区域'),
+          description: t('操练场和聊天功能'),
+          modules: [
+            {
+              key: 'playground',
+              title: t('操练场'),
+              description: t('AI模型测试环境'),
+            },
+            { key: 'chat', title: t('聊天'), description: t('聊天会话管理') },
+          ],
         },
-        { key: 'chat', title: t('聊天'), description: t('聊天会话管理') },
-      ],
-    },
-    {
-      key: 'console',
-      title: t('控制台区域'),
-      description: t('数据管理和日志查看'),
-      modules: [
-        { key: 'detail', title: t('数据看板'), description: t('系统数据统计') },
-        { key: 'token', title: t('令牌管理'), description: t('API令牌管理') },
-        { key: 'log', title: t('使用日志'), description: t('API使用记录') },
         {
-          key: 'midjourney',
-          title: t('绘图日志'),
-          description: t('绘图任务记录'),
+          key: 'console',
+          title: t('控制台区域'),
+          description: t('数据管理和日志查看'),
+          modules: [
+            {
+              key: 'detail',
+              title: t('数据看板'),
+              description: t('系统数据统计'),
+            },
+            { key: 'token', title: t('令牌管理'), description: t('API令牌管理') },
+            { key: 'log', title: t('使用日志'), description: t('API使用记录') },
+            {
+              key: 'midjourney',
+              title: t('绘图日志'),
+              description: t('绘图任务记录'),
+            },
+            { key: 'task', title: t('任务日志'), description: t('系统任务记录') },
+          ],
         },
-        { key: 'task', title: t('任务日志'), description: t('系统任务记录') },
-      ],
-    },
-    {
-      key: 'personal',
-      title: t('个人中心区域'),
-      description: t('用户个人功能'),
-      modules: [
-        { key: 'topup', title: t('钱包管理'), description: t('余额充值管理') },
         {
           key: 'personal',
-          title: t('个人设置'),
-          description: t('个人信息设置'),
-        },
-      ],
-    },
-    // 管理员区域：根据后端权限控制显示
-    {
-      key: 'admin',
-      title: t('管理员区域'),
-      description: t('系统管理功能'),
-      modules: [
-        { key: 'channel', title: t('渠道管理'), description: t('API渠道配置') },
-        { key: 'models', title: t('模型管理'), description: t('AI模型配置') },
-        {
-          key: 'deployment',
-          title: t('模型部署'),
-          description: t('模型部署管理'),
-        },
-        {
-          key: 'subscription',
-          title: t('订阅管理'),
-          description: t('订阅套餐管理'),
+          title: t('个人中心区域'),
+          description: t('用户个人功能'),
+          modules: [
+            { key: 'topup', title: t('钱包管理'), description: t('余额充值管理') },
+            {
+              key: 'personal',
+              title: t('个人设置'),
+              description: t('个人信息设置'),
+            },
+          ],
         },
         {
-          key: 'redemption',
-          title: t('兑换码管理'),
-          description: t('兑换码生成管理'),
+          key: 'admin',
+          title: t('管理员区域'),
+          description: t('系统管理功能'),
+          modules: [
+            { key: 'channel', title: t('渠道管理'), description: t('API渠道配置') },
+            { key: 'models', title: t('模型管理'), description: t('AI模型配置') },
+            {
+              key: 'deployment',
+              title: t('模型部署'),
+              description: t('模型部署管理'),
+            },
+            {
+              key: 'subscription',
+              title: t('订阅管理'),
+              description: t('订阅套餐管理'),
+            },
+            {
+              key: 'redemption',
+              title: t('兑换码管理'),
+              description: t('兑换码生成管理'),
+            },
+            { key: 'user', title: t('用户管理'), description: t('用户账户管理') },
+            {
+              key: 'setting',
+              title: t('系统设置'),
+              description: t('系统参数配置'),
+            },
+          ],
         },
-        { key: 'user', title: t('用户管理'), description: t('用户账户管理') },
-        {
-          key: 'setting',
-          title: t('系统设置'),
-          description: t('系统参数配置'),
-        },
-      ],
-    },
-  ]
-    .filter((section) => {
-      // 使用后端权限验证替代前端角色判断
-      return isSidebarSectionAllowed(section.key);
-    })
-    .map((section) => ({
-      ...section,
-      modules: section.modules.filter((module) =>
-        isSidebarModuleAllowed(section.key, module.key),
-      ),
-    }))
-    .filter(
-      (section) =>
-        // 过滤掉没有可用模块的区域
-        section.modules.length > 0 && isAllowedByAdmin(section.key),
-    );
-
-  // 表单提交
+      ]
+        .filter((section) => isSidebarSectionAllowed(section.key))
+        .map((section) => ({
+          ...section,
+          modules: section.modules.filter((module) =>
+            isSidebarModuleAllowed(section.key, module.key),
+          ),
+        }))
+        .filter(
+          (section) =>
+            section.modules.length > 0 && isAllowedByAdmin(section.key),
+        ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [adminConfig, isSidebarSectionAllowed, isSidebarModuleAllowed, t],
+  );
+
+  // ---- Validation (replaces Semi `<Form rules>`) ----
+  const validate = () => {
+    const next = {};
+    const settings = notificationSettings || {};
+
+    if (!settings.warningType) {
+      next.warningType = t('请选择通知方式');
+    }
+
+    const numValue = Number(settings.warningThreshold);
+    if (
+      settings.warningThreshold === '' ||
+      settings.warningThreshold == null
+    ) {
+      next.warningThreshold = t('请输入预警阈值');
+    } else if (Number.isNaN(numValue) || numValue <= 0) {
+      next.warningThreshold = t('预警阈值必须为正数');
+    }
+
+    if (settings.warningType === 'webhook') {
+      if (!settings.webhookUrl) {
+        next.webhookUrl = t('请输入Webhook地址');
+      } else if (!/^https:\/\/.+/.test(settings.webhookUrl)) {
+        next.webhookUrl = t('Webhook地址必须以https://开头');
+      }
+    }
+
+    if (settings.warningType === 'bark') {
+      if (!settings.barkUrl) {
+        next.barkUrl = t('请输入Bark推送URL');
+      } else if (!/^https?:\/\/.+/.test(settings.barkUrl)) {
+        next.barkUrl = t('Bark推送URL必须以http://或https://开头');
+      }
+    }
+
+    if (settings.warningType === 'gotify') {
+      if (!settings.gotifyUrl) {
+        next.gotifyUrl = t('请输入Gotify服务器地址');
+      } else if (!/^https?:\/\/.+/.test(settings.gotifyUrl)) {
+        next.gotifyUrl = t('Gotify服务器地址必须以http://或https://开头');
+      }
+      if (!settings.gotifyToken) {
+        next.gotifyToken = t('请输入Gotify应用令牌');
+      }
+    }
+
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
   const handleSubmit = () => {
-    if (formApiRef.current) {
-      formApiRef.current
-        .validate()
-        .then(() => {
-          saveNotificationSettings();
-        })
-        .catch((errors) => {
-          console.log('表单验证失败:', errors);
-          Toast.error(t('请检查表单填写是否正确'));
-        });
-    } else {
-      saveNotificationSettings();
+    if (!validate()) {
+      showError(t('请检查表单填写是否正确'));
+      return;
     }
+    saveNotificationSettings();
   };
 
+  // ---- Constants ----
+  const NOTIFICATION_OPTIONS = [
+    { value: 'email', label: t('邮件通知') },
+    { value: 'webhook', label: t('Webhook通知') },
+    { value: 'bark', label: t('Bark通知') },
+    { value: 'gotify', label: t('Gotify通知') },
+  ];
+
+  const THRESHOLD_PRESETS = [
+    { value: 100000, label: '0.2$' },
+    { value: 500000, label: '1$' },
+    { value: 1000000, label: '2$' },
+    { value: 5000000, label: '10$' },
+  ];
+
+  const GOTIFY_PRIORITY_PRESETS = [
+    { value: 0, label: t('0 - 最低') },
+    { value: 2, label: t('2 - 低') },
+    { value: 5, label: t('5 - 正常（默认）') },
+    { value: 8, label: t('8 - 高') },
+    { value: 10, label: t('10 - 最高') },
+  ];
+
+  const tabs = [
+    { key: 'notification', label: t('通知配置'), icon: <Bell size={16} /> },
+    { key: 'pricing', label: t('价格设置'), icon: <DollarSign size={16} /> },
+    {
+      key: 'privacy',
+      label: t('隐私设置'),
+      icon: <ShieldCheck size={16} />,
+    },
+    ...(hasSidebarSettingsPermission()
+      ? [
+          {
+            key: 'sidebar',
+            label: t('边栏设置'),
+            icon: <Settings size={16} />,
+          },
+        ]
+      : []),
+  ];
+
   return (
-    <Card
-      className='!rounded-2xl shadow-sm border-0'
-      footer={
-        <div className='flex justify-end gap-3'>
-          {activeTabKey === 'sidebar' ? (
-            // 边栏设置标签页的按钮
-            <>
-              <Button
-                type='tertiary'
-                onClick={resetSidebarModules}
-                className='!rounded-lg'
-              >
-                {t('重置为默认')}
-              </Button>
-              <Button
-                type='primary'
-                onClick={saveSidebarSettings}
-                loading={sidebarLoading}
-                className='!rounded-lg'
-              >
-                {t('保存设置')}
-              </Button>
-            </>
-          ) : (
-            // 其他标签页的通用保存按钮
-            <Button type='primary' onClick={handleSubmit}>
-              {t('保存设置')}
-            </Button>
-          )}
-        </div>
-      }
-    >
-      {/* 卡片头部 */}
-      <div className='flex items-center mb-4'>
-        <Avatar size='small' color='blue' className='mr-3 shadow-md'>
-          <Bell size={16} />
-        </Avatar>
-        <div>
-          <Typography.Text className='text-lg font-medium'>
-            {t('其他设置')}
-          </Typography.Text>
-          <div className='text-xs text-gray-600'>
-            {t('通知、价格和隐私相关设置')}
+    <Card className='!rounded-2xl' shadow='none'>
+      <Card.Content className='p-5'>
+        {/* Card header */}
+        <div className='mb-4 flex items-center gap-3'>
+          <Avatar size='sm' className='shadow-md'>
+            <Avatar.Fallback className='!bg-primary/10 !text-primary'>
+              <Bell size={16} />
+            </Avatar.Fallback>
+          </Avatar>
+          <div className='flex flex-col'>
+            <span className='text-base font-semibold text-foreground'>
+              {t('其他设置')}
+            </span>
+            <span className='text-xs text-muted'>
+              {t('通知、价格和隐私相关设置')}
+            </span>
           </div>
         </div>
-      </div>
 
-      <Form
-        getFormApi={(api) => (formApiRef.current = api)}
-        initValues={notificationSettings}
-        onSubmit={handleSubmit}
-      >
-        {() => (
-          <Tabs
-            type='card'
-            defaultActiveKey='notification'
-            onChange={(key) => setActiveTabKey(key)}
-          >
-            {/* 通知配置 Tab */}
-            <TabPane
-              tab={
-                <div className='flex items-center'>
-                  <Bell size={16} className='mr-2' />
-                  {t('通知配置')}
-                </div>
-              }
-              itemKey='notification'
-            >
-              <div className='py-4'>
-                <Form.RadioGroup
-                  field='warningType'
-                  label={t('通知方式')}
-                  initValue={notificationSettings.warningType}
-                  onChange={(value) => handleFormChange('warningType', value)}
-                  rules={[{ required: true, message: t('请选择通知方式') }]}
-                >
-                  <Radio value='email'>{t('邮件通知')}</Radio>
-                  <Radio value='webhook'>{t('Webhook通知')}</Radio>
-                  <Radio value='bark'>{t('Bark通知')}</Radio>
-                  <Radio value='gotify'>{t('Gotify通知')}</Radio>
-                </Form.RadioGroup>
-
-                <Form.AutoComplete
-                  field='warningThreshold'
-                  label={
-                    <span>
-                      {t('额度预警阈值')}{' '}
-                      {renderQuotaWithPrompt(
-                        notificationSettings.warningThreshold,
-                      )}
-                    </span>
-                  }
-                  placeholder={t('请输入预警额度')}
-                  data={[
-                    { value: 100000, label: '0.2$' },
-                    { value: 500000, label: '1$' },
-                    { value: 1000000, label: '2$' },
-                    { value: 5000000, label: '10$' },
-                  ]}
-                  onChange={(val) => handleFormChange('warningThreshold', val)}
-                  prefix={<IconBell />}
-                  extraText={t(
-                    '当钱包或订阅剩余额度低于此数值时，系统将通过选择的方式发送通知',
+        {/* Segmented control */}
+        <Segment
+          aria-label={t('其他设置')}
+          selectedKey={activeTabKey}
+          onSelectionChange={(key) => setActiveTabKey(String(key))}
+          className='mb-4 max-w-full overflow-x-auto'
+        >
+          {tabs.map((tab) => (
+            <Segment.Item key={tab.key} id={tab.key}>
+              <Segment.Separator />
+              {tab.icon}
+              {tab.label}
+            </Segment.Item>
+          ))}
+        </Segment>
+
+        {/* Notification config tab */}
+        {activeTabKey === 'notification' && (
+          <div className='py-2'>
+            {/* Notification method segmented control */}
+            <div className='mb-4 space-y-2'>
+              <FieldLabel required>{t('通知方式')}</FieldLabel>
+              <Segment
+                aria-label={t('通知方式')}
+                selectedKey={notificationSettings.warningType}
+                onSelectionChange={(key) =>
+                  setField('warningType')(String(key))
+                }
+                className='max-w-full overflow-x-auto'
+              >
+                {NOTIFICATION_OPTIONS.map((option) => (
+                  <Segment.Item key={option.value} id={option.value}>
+                    <Segment.Separator />
+                    {option.label}
+                  </Segment.Item>
+                ))}
+              </Segment>
+              <FieldError>{errors.warningType}</FieldError>
+            </div>
+
+            {/* 额度预警阈值 */}
+            <div className='mb-4 max-w-[300px] space-y-2'>
+              <FieldLabel required>
+                <span>
+                  {t('额度预警阈值')}{' '}
+                  {renderQuotaWithPrompt(
+                    notificationSettings.warningThreshold,
                   )}
-                  style={{ width: '100%', maxWidth: '300px' }}
-                  rules={[
-                    { required: true, message: t('请输入预警阈值') },
-                    {
-                      validator: (rule, value) => {
-                        const numValue = Number(value);
-                        if (isNaN(numValue) || numValue <= 0) {
-                          return Promise.reject(t('预警阈值必须为正数'));
-                        }
-                        return Promise.resolve();
-                      },
-                    },
-                  ]}
-                />
-
-                {isAdminOrRoot && (
-                  <Form.Switch
-                    field='upstreamModelUpdateNotifyEnabled'
-                    label={t('接收上游模型更新通知')}
-                    checkedText={t('开')}
-                    uncheckedText={t('关')}
-                    onChange={(value) =>
-                      handleFormChange('upstreamModelUpdateNotifyEnabled', value)
-                    }
-                    extraText={t(
-                      '仅管理员可用。开启后，当系统定时检测全部渠道发现上游模型变更或检测异常时，将按你选择的通知方式发送汇总通知；渠道或模型过多时会自动省略部分明细。',
-                    )}
+                </span>
+              </FieldLabel>
+              <PrefixedInput
+                type='number'
+                value={notificationSettings.warningThreshold}
+                onChange={(value) =>
+                  setField('warningThreshold')(value === '' ? '' : Number(value))
+                }
+                placeholder={t('请输入预警额度')}
+                prefixIcon={<Bell size={14} />}
+                list='warning-threshold-presets'
+              />
+              <datalist id='warning-threshold-presets'>
+                {THRESHOLD_PRESETS.map((preset) => (
+                  <option
+                    key={preset.value}
+                    value={preset.value}
+                    label={preset.label}
                   />
+                ))}
+              </datalist>
+              <FieldError>{errors.warningThreshold}</FieldError>
+              <FieldHint>
+                {t(
+                  '当钱包或订阅剩余额度低于此数值时，系统将通过选择的方式发送通知',
                 )}
+              </FieldHint>
+            </div>
+
+            {isAdminOrRoot && (
+              <SwitchRow
+                label={t('接收上游模型更新通知')}
+                hint={t(
+                  '仅管理员可用。开启后，当系统定时检测全部渠道发现上游模型变更或检测异常时，将按你选择的通知方式发送汇总通知；渠道或模型过多时会自动省略部分明细。',
+                )}
+                value={notificationSettings.upstreamModelUpdateNotifyEnabled}
+                onChange={setField('upstreamModelUpdateNotifyEnabled')}
+              />
+            )}
 
-                {/* 邮件通知设置 */}
-                {notificationSettings.warningType === 'email' && (
-                  <Form.Input
-                    field='notificationEmail'
-                    label={t('通知邮箱')}
-                    placeholder={t('留空则使用账号绑定的邮箱')}
-                    onChange={(val) =>
-                      handleFormChange('notificationEmail', val)
-                    }
-                    prefix={<IconMail />}
-                    extraText={t(
-                      '设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱',
+            {/* 邮件通知设置 */}
+            {notificationSettings.warningType === 'email' && (
+              <div className='mb-4 space-y-2'>
+                <FieldLabel>{t('通知邮箱')}</FieldLabel>
+                <PrefixedInput
+                  value={notificationSettings.notificationEmail}
+                  onChange={setField('notificationEmail')}
+                  placeholder={t('留空则使用账号绑定的邮箱')}
+                  prefixIcon={<Mail size={14} />}
+                />
+                <FieldHint>
+                  {t(
+                    '设置用于接收额度预警的邮箱地址，不填则使用账号绑定的邮箱',
+                  )}
+                </FieldHint>
+              </div>
+            )}
+
+            {/* Webhook 通知设置 */}
+            {notificationSettings.warningType === 'webhook' && (
+              <>
+                <div className='mb-4 space-y-2'>
+                  <FieldLabel required>{t('Webhook地址')}</FieldLabel>
+                  <PrefixedInput
+                    value={notificationSettings.webhookUrl}
+                    onChange={setField('webhookUrl')}
+                    placeholder={t(
+                      '请输入Webhook地址，例如: https://example.com/webhook',
                     )}
-                    showClear
+                    prefixIcon={<LinkIcon size={14} />}
                   />
-                )}
+                  <FieldError>{errors.webhookUrl}</FieldError>
+                  <FieldHint>
+                    {t(
+                      '只支持HTTPS，系统将以POST方式发送通知，请确保地址可以接收POST请求',
+                    )}
+                  </FieldHint>
+                </div>
 
-                {/* Webhook通知设置 */}
-                {notificationSettings.warningType === 'webhook' && (
-                  <>
-                    <Form.Input
-                      field='webhookUrl'
-                      label={t('Webhook地址')}
-                      placeholder={t(
-                        '请输入Webhook地址，例如: https://example.com/webhook',
-                      )}
-                      onChange={(val) => handleFormChange('webhookUrl', val)}
-                      prefix={<IconLink />}
-                      extraText={t(
-                        '只支持HTTPS，系统将以POST方式发送通知，请确保地址可以接收POST请求',
-                      )}
-                      showClear
-                      rules={[
-                        {
-                          required:
-                            notificationSettings.warningType === 'webhook',
-                          message: t('请输入Webhook地址'),
-                        },
-                        {
-                          pattern: /^https:\/\/.+/,
-                          message: t('Webhook地址必须以https://开头'),
-                        },
-                      ]}
-                    />
-
-                    <Form.Input
-                      field='webhookSecret'
-                      label={t('接口凭证')}
-                      placeholder={t('请输入密钥')}
-                      onChange={(val) => handleFormChange('webhookSecret', val)}
-                      prefix={<IconKey />}
-                      extraText={t(
-                        '密钥将以Bearer方式添加到请求头中，用于验证webhook请求的合法性',
-                      )}
-                      showClear
-                    />
+                <div className='mb-4 space-y-2'>
+                  <FieldLabel>{t('接口凭证')}</FieldLabel>
+                  <PrefixedInput
+                    value={notificationSettings.webhookSecret}
+                    onChange={setField('webhookSecret')}
+                    placeholder={t('请输入密钥')}
+                    prefixIcon={<Key size={14} />}
+                  />
+                  <FieldHint>
+                    {t(
+                      '密钥将以Bearer方式添加到请求头中，用于验证webhook请求的合法性',
+                    )}
+                  </FieldHint>
+                </div>
 
-                    <Form.Slot label={t('Webhook请求结构说明')}>
+                <div className='mb-4 space-y-2'>
+                  <FieldLabel>{t('Webhook请求结构说明')}</FieldLabel>
+                  <div>
+                    <div className='mb-3 h-[200px]'>
+                      <CodeViewer
+                        content={{
+                          type: 'quota_exceed',
+                          title: '额度预警通知',
+                          content:
+                            '您的额度即将用尽，当前剩余额度为 {{value}}',
+                          values: ['$0.99'],
+                          timestamp: 1739950503,
+                        }}
+                        title='webhook'
+                        language='json'
+                      />
+                    </div>
+                    <div className='space-y-1 text-xs leading-relaxed text-muted'>
                       <div>
-                        <div style={{ height: '200px', marginBottom: '12px' }}>
-                          <CodeViewer
-                            content={{
-                              type: 'quota_exceed',
-                              title: '额度预警通知',
-                              content:
-                                '您的额度即将用尽，当前剩余额度为 {{value}}',
-                              values: ['$0.99'],
-                              timestamp: 1739950503,
-                            }}
-                            title='webhook'
-                            language='json'
-                          />
-                        </div>
-                        <div className='text-xs text-gray-500 leading-relaxed'>
-                          <div>
-                            <strong>type:</strong>{' '}
-                            {t('通知类型 (quota_exceed: 额度预警)')}{' '}
-                          </div>
-                          <div>
-                            <strong>title:</strong> {t('通知标题')}
-                          </div>
-                          <div>
-                            <strong>content:</strong>{' '}
-                            {t('通知内容，支持 {{value}} 变量占位符')}
-                          </div>
-                          <div>
-                            <strong>values:</strong>{' '}
-                            {t('按顺序替换content中的变量占位符')}
-                          </div>
-                          <div>
-                            <strong>timestamp:</strong> {t('Unix时间戳')}
-                          </div>
-                        </div>
+                        <strong>type:</strong>{' '}
+                        {t('通知类型 (quota_exceed: 额度预警)')}
                       </div>
-                    </Form.Slot>
-                  </>
-                )}
-
-                {/* Bark推送设置 */}
-                {notificationSettings.warningType === 'bark' && (
-                  <>
-                    <Form.Input
-                      field='barkUrl'
-                      label={t('Bark推送URL')}
-                      placeholder={t(
-                        '请输入Bark推送URL，例如: https://api.day.app/yourkey/{{title}}/{{content}}',
-                      )}
-                      onChange={(val) => handleFormChange('barkUrl', val)}
-                      prefix={<IconLink />}
-                      extraText={t(
-                        '支持HTTP和HTTPS，模板变量: {{title}} (通知标题), {{content}} (通知内容)',
-                      )}
-                      showClear
-                      rules={[
-                        {
-                          required: notificationSettings.warningType === 'bark',
-                          message: t('请输入Bark推送URL'),
-                        },
-                        {
-                          pattern: /^https?:\/\/.+/,
-                          message: t('Bark推送URL必须以http://或https://开头'),
-                        },
-                      ]}
-                    />
-
-                    <div className='mt-3 p-4 bg-gray-50/50 rounded-xl'>
-                      <div className='text-sm text-gray-700 mb-3'>
-                        <strong>{t('模板示例')}</strong>
-                      </div>
-                      <div className='text-xs text-gray-600 font-mono bg-white p-3 rounded-lg shadow-sm mb-4'>
-                        https://api.day.app/yourkey/{'{{title}}'}/
-                        {'{{content}}'}?sound=alarm&group=quota
+                      <div>
+                        <strong>title:</strong> {t('通知标题')}
                       </div>
-                      <div className='text-xs text-gray-500 space-y-2'>
-                        <div>
-                          • <strong>{'title'}:</strong> {t('通知标题')}
-                        </div>
-                        <div>
-                          • <strong>{'content'}:</strong> {t('通知内容')}
-                        </div>
-                        <div className='mt-3 pt-3 border-t border-gray-200'>
-                          <span className='text-gray-400'>
-                            {t('更多参数请参考')}
-                          </span>{' '}
-                          <a
-                            href='https://github.com/Finb/Bark'
-                            target='_blank'
-                            rel='noopener noreferrer'
-                            className='text-blue-500 hover:text-blue-600 font-medium'
-                          >
-                            Bark {t('官方文档')}
-                          </a>
-                        </div>
+                      <div>
+                        <strong>content:</strong>{' '}
+                        {t('通知内容，支持 {{value}} 变量占位符')}
                       </div>
-                    </div>
-                  </>
-                )}
-
-                {/* Gotify推送设置 */}
-                {notificationSettings.warningType === 'gotify' && (
-                  <>
-                    <Form.Input
-                      field='gotifyUrl'
-                      label={t('Gotify服务器地址')}
-                      placeholder={t(
-                        '请输入Gotify服务器地址，例如: https://gotify.example.com',
-                      )}
-                      onChange={(val) => handleFormChange('gotifyUrl', val)}
-                      prefix={<IconLink />}
-                      extraText={t(
-                        '支持HTTP和HTTPS，填写Gotify服务器的完整URL地址',
-                      )}
-                      showClear
-                      rules={[
-                        {
-                          required:
-                            notificationSettings.warningType === 'gotify',
-                          message: t('请输入Gotify服务器地址'),
-                        },
-                        {
-                          pattern: /^https?:\/\/.+/,
-                          message: t(
-                            'Gotify服务器地址必须以http://或https://开头',
-                          ),
-                        },
-                      ]}
-                    />
-
-                    <Form.Input
-                      field='gotifyToken'
-                      label={t('Gotify应用令牌')}
-                      placeholder={t('请输入Gotify应用令牌')}
-                      onChange={(val) => handleFormChange('gotifyToken', val)}
-                      prefix={<IconKey />}
-                      extraText={t(
-                        '在Gotify服务器创建应用后获得的令牌，用于发送通知',
-                      )}
-                      showClear
-                      rules={[
-                        {
-                          required:
-                            notificationSettings.warningType === 'gotify',
-                          message: t('请输入Gotify应用令牌'),
-                        },
-                      ]}
-                    />
-
-                    <Form.AutoComplete
-                      field='gotifyPriority'
-                      label={t('消息优先级')}
-                      placeholder={t('请选择消息优先级')}
-                      data={[
-                        { value: 0, label: t('0 - 最低') },
-                        { value: 2, label: t('2 - 低') },
-                        { value: 5, label: t('5 - 正常（默认）') },
-                        { value: 8, label: t('8 - 高') },
-                        { value: 10, label: t('10 - 最高') },
-                      ]}
-                      onChange={(val) =>
-                        handleFormChange('gotifyPriority', val)
-                      }
-                      prefix={<IconBell />}
-                      extraText={t('消息优先级，范围0-10，默认为5')}
-                      style={{ width: '100%', maxWidth: '300px' }}
-                    />
-
-                    <div className='mt-3 p-4 bg-gray-50/50 rounded-xl'>
-                      <div className='text-sm text-gray-700 mb-3'>
-                        <strong>{t('配置说明')}</strong>
+                      <div>
+                        <strong>values:</strong>{' '}
+                        {t('按顺序替换content中的变量占位符')}
                       </div>
-                      <div className='text-xs text-gray-500 space-y-2'>
-                        <div>
-                          1. {t('在Gotify服务器的应用管理中创建新应用')}
-                        </div>
-                        <div>
-                          2.{' '}
-                          {t(
-                            '复制应用的令牌（Token）并填写到上方的应用令牌字段',
-                          )}
-                        </div>
-                        <div>3. {t('填写Gotify服务器的完整URL地址')}</div>
-                        <div className='mt-3 pt-3 border-t border-gray-200'>
-                          <span className='text-gray-400'>
-                            {t('更多信息请参考')}
-                          </span>{' '}
-                          <a
-                            href='https://gotify.net/'
-                            target='_blank'
-                            rel='noopener noreferrer'
-                            className='text-blue-500 hover:text-blue-600 font-medium'
-                          >
-                            Gotify {t('官方文档')}
-                          </a>
-                        </div>
+                      <div>
+                        <strong>timestamp:</strong> {t('Unix时间戳')}
                       </div>
                     </div>
-                  </>
-                )}
-              </div>
-            </TabPane>
-
-            {/* 价格设置 Tab */}
-            <TabPane
-              tab={
-                <div className='flex items-center'>
-                  <DollarSign size={16} className='mr-2' />
-                  {t('价格设置')}
+                  </div>
                 </div>
-              }
-              itemKey='pricing'
-            >
-              <div className='py-4'>
-                <Form.Switch
-                  field='acceptUnsetModelRatioModel'
-                  label={t('接受未设置价格模型')}
-                  checkedText={t('开')}
-                  uncheckedText={t('关')}
-                  onChange={(value) =>
-                    handleFormChange('acceptUnsetModelRatioModel', value)
-                  }
-                  extraText={t(
-                    '当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用',
-                  )}
-                />
-              </div>
-            </TabPane>
-
-            {/* 隐私设置 Tab */}
-            <TabPane
-              tab={
-                <div className='flex items-center'>
-                  <ShieldCheck size={16} className='mr-2' />
-                  {t('隐私设置')}
+              </>
+            )}
+
+            {/* Bark 推送设置 */}
+            {notificationSettings.warningType === 'bark' && (
+              <>
+                <div className='mb-4 space-y-2'>
+                  <FieldLabel required>{t('Bark推送URL')}</FieldLabel>
+                  <PrefixedInput
+                    value={notificationSettings.barkUrl}
+                    onChange={setField('barkUrl')}
+                    placeholder={t(
+                      '请输入Bark推送URL，例如: https://api.day.app/yourkey/{{title}}/{{content}}',
+                    )}
+                    prefixIcon={<LinkIcon size={14} />}
+                  />
+                  <FieldError>{errors.barkUrl}</FieldError>
+                  <FieldHint>
+                    {t(
+                      '支持HTTP和HTTPS，模板变量: {{title}} (通知标题), {{content}} (通知内容)',
+                    )}
+                  </FieldHint>
                 </div>
-              }
-              itemKey='privacy'
-            >
-              <div className='py-4'>
-                <Form.Switch
-                  field='recordIpLog'
-                  label={t('记录请求与错误日志IP')}
-                  checkedText={t('开')}
-                  uncheckedText={t('关')}
-                  onChange={(value) => handleFormChange('recordIpLog', value)}
-                  extraText={t(
-                    '开启后，仅"消费"和"错误"日志将记录您的客户端IP地址',
-                  )}
-                />
-              </div>
-            </TabPane>
-
-            {/* 左侧边栏设置 Tab - 根据后端权限控制显示 */}
-            {hasSidebarSettingsPermission() && (
-              <TabPane
-                tab={
-                  <div className='flex items-center'>
-                    <Settings size={16} className='mr-2' />
-                    {t('边栏设置')}
+
+                <div className='mt-3 rounded-xl bg-surface-secondary/50 p-4'>
+                  <div className='mb-3 text-sm font-semibold text-foreground'>
+                    {t('模板示例')}
                   </div>
-                }
-                itemKey='sidebar'
-              >
-                <div className='py-4'>
-                  <div className='mb-4'>
-                    <Typography.Text
-                      type='secondary'
-                      size='small'
-                      style={{
-                        fontSize: '12px',
-                        lineHeight: '1.5',
-                        color: 'var(--semi-color-text-2)',
-                      }}
-                    >
-                      {t('您可以个性化设置侧边栏的要显示功能')}
-                    </Typography.Text>
+                  <div className='mb-4 rounded-lg bg-background p-3 font-mono text-xs text-muted shadow-sm'>
+                    https://api.day.app/yourkey/{'{{title}}'}/
+                    {'{{content}}'}?sound=alarm&group=quota
+                  </div>
+                  <div className='space-y-2 text-xs text-muted'>
+                    <div>
+                      • <strong>{'title'}:</strong> {t('通知标题')}
+                    </div>
+                    <div>
+                      • <strong>{'content'}:</strong> {t('通知内容')}
+                    </div>
+                    <div className='mt-3 border-t border-border pt-3'>
+                      <span className='text-muted'>
+                        {t('更多参数请参考')}
+                      </span>{' '}
+                      <a
+                        href='https://github.com/Finb/Bark'
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        className='font-medium text-primary hover:underline'
+                      >
+                        Bark {t('官方文档')}
+                      </a>
+                    </div>
                   </div>
-                  {/* 边栏设置功能区域容器 */}
-                  <div
-                    className='border rounded-xl p-4'
-                    style={{
-                      borderColor: 'var(--semi-color-border)',
-                      backgroundColor: 'var(--semi-color-bg-1)',
+                </div>
+              </>
+            )}
+
+            {/* Gotify 推送设置 */}
+            {notificationSettings.warningType === 'gotify' && (
+              <>
+                <div className='mb-4 space-y-2'>
+                  <FieldLabel required>{t('Gotify服务器地址')}</FieldLabel>
+                  <PrefixedInput
+                    value={notificationSettings.gotifyUrl}
+                    onChange={setField('gotifyUrl')}
+                    placeholder={t(
+                      '请输入Gotify服务器地址，例如: https://gotify.example.com',
+                    )}
+                    prefixIcon={<LinkIcon size={14} />}
+                  />
+                  <FieldError>{errors.gotifyUrl}</FieldError>
+                  <FieldHint>
+                    {t('支持HTTP和HTTPS，填写Gotify服务器的完整URL地址')}
+                  </FieldHint>
+                </div>
+
+                <div className='mb-4 space-y-2'>
+                  <FieldLabel required>{t('Gotify应用令牌')}</FieldLabel>
+                  <PrefixedInput
+                    value={notificationSettings.gotifyToken}
+                    onChange={setField('gotifyToken')}
+                    placeholder={t('请输入Gotify应用令牌')}
+                    prefixIcon={<Key size={14} />}
+                  />
+                  <FieldError>{errors.gotifyToken}</FieldError>
+                  <FieldHint>
+                    {t(
+                      '在Gotify服务器创建应用后获得的令牌，用于发送通知',
+                    )}
+                  </FieldHint>
+                </div>
+
+                <div className='mb-4 max-w-[300px] space-y-2'>
+                  <FieldLabel>{t('消息优先级')}</FieldLabel>
+                  <CellSelect
+                    aria-label={t('消息优先级')}
+                    placeholder={t('请选择消息优先级')}
+                    selectedKey={
+                      notificationSettings.gotifyPriority === '' ||
+                      notificationSettings.gotifyPriority == null
+                        ? null
+                        : String(notificationSettings.gotifyPriority)
+                    }
+                    onSelectionChange={(key) => {
+                      setField('gotifyPriority')(
+                        key == null ? '' : Number(key),
+                      );
                     }}
                   >
-                    {sectionConfigs.map((section) => (
-                      <div key={section.key} className='mb-6'>
-                        {/* 区域标题和总开关 */}
-                        <div
-                          className='flex justify-between items-center mb-4 p-4 rounded-lg'
-                          style={{
-                            backgroundColor: 'var(--semi-color-fill-0)',
-                            border: '1px solid var(--semi-color-border-light)',
-                            borderColor: 'var(--semi-color-fill-1)',
-                          }}
-                        >
-                          <div>
-                            <div className='font-semibold text-base text-gray-900 mb-1'>
-                              {section.title}
-                            </div>
-                            <Typography.Text
-                              type='secondary'
-                              size='small'
-                              style={{
-                                fontSize: '12px',
-                                lineHeight: '1.5',
-                                color: 'var(--semi-color-text-2)',
-                              }}
-                            >
-                              {section.description}
-                            </Typography.Text>
-                          </div>
-                          <Switch
-                            checked={
-                              sidebarModulesUser[section.key]?.enabled !== false
-                            }
-                            onChange={handleSectionChange(section.key)}
-                            size='default'
-                          />
-                        </div>
-
-                        {/* 功能模块网格 */}
-                        <Row gutter={[12, 12]}>
-                          {section.modules
-                            .filter((module) =>
-                              isAllowedByAdmin(section.key, module.key),
-                            )
-                            .map((module) => (
-                              <Col
-                                key={module.key}
-                                xs={24}
-                                sm={24}
-                                md={12}
-                                lg={8}
-                                xl={8}
-                              >
-                                <Card
-                                  className={`!rounded-xl border border-gray-200 hover:border-blue-300 transition-all duration-200 ${
-                                    sidebarModulesUser[section.key]?.enabled !==
-                                    false
-                                      ? ''
-                                      : 'opacity-50'
-                                  }`}
-                                  bodyStyle={{ padding: '16px' }}
-                                  hoverable
-                                >
-                                  <div className='flex justify-between items-center h-full'>
-                                    <div className='flex-1 text-left'>
-                                      <div className='font-semibold text-sm text-gray-900 mb-1'>
-                                        {module.title}
-                                      </div>
-                                      <Typography.Text
-                                        type='secondary'
-                                        size='small'
-                                        className='block'
-                                        style={{
-                                          fontSize: '12px',
-                                          lineHeight: '1.5',
-                                          color: 'var(--semi-color-text-2)',
-                                          marginTop: '4px',
-                                        }}
-                                      >
-                                        {module.description}
-                                      </Typography.Text>
-                                    </div>
-                                    <div className='ml-4'>
-                                      <Switch
-                                        checked={
-                                          sidebarModulesUser[section.key]?.[
-                                            module.key
-                                          ] !== false
-                                        }
-                                        onChange={handleModuleChange(
-                                          section.key,
-                                          module.key,
-                                        )}
-                                        size='default'
-                                        disabled={
-                                          sidebarModulesUser[section.key]
-                                            ?.enabled === false
-                                        }
-                                      />
-                                    </div>
-                                  </div>
-                                </Card>
-                              </Col>
-                            ))}
-                        </Row>
-                      </div>
-                    ))}
-                  </div>{' '}
-                  {/* 关闭边栏设置功能区域容器 */}
+                    <CellSelect.Trigger>
+                      <CellSelect.Label>
+                        <Bell size={14} className='mr-1.5 inline text-muted' />
+                        {t('优先级')}
+                      </CellSelect.Label>
+                      <CellSelect.Value />
+                      <CellSelect.Indicator>
+                        <ChevronsUpDown size={14} />
+                      </CellSelect.Indicator>
+                    </CellSelect.Trigger>
+                    <CellSelect.Popover>
+                      <ListBox>
+                        {GOTIFY_PRIORITY_PRESETS.map((preset) => (
+                          <ListBox.Item
+                            key={preset.value}
+                            id={String(preset.value)}
+                            textValue={preset.label}
+                          >
+                            {preset.label}
+                            <ListBox.ItemIndicator />
+                          </ListBox.Item>
+                        ))}
+                      </ListBox>
+                    </CellSelect.Popover>
+                  </CellSelect>
+                  <FieldHint>{t('消息优先级，范围0-10，默认为5')}</FieldHint>
+                </div>
+
+                <div className='mt-3 rounded-xl bg-surface-secondary/50 p-4'>
+                  <div className='mb-3 text-sm font-semibold text-foreground'>
+                    {t('配置说明')}
+                  </div>
+                  <div className='space-y-2 text-xs text-muted'>
+                    <div>
+                      1. {t('在Gotify服务器的应用管理中创建新应用')}
+                    </div>
+                    <div>
+                      2.{' '}
+                      {t(
+                        '复制应用的令牌（Token）并填写到上方的应用令牌字段',
+                      )}
+                    </div>
+                    <div>3. {t('填写Gotify服务器的完整URL地址')}</div>
+                    <div className='mt-3 border-t border-border pt-3'>
+                      <span className='text-muted'>
+                        {t('更多信息请参考')}
+                      </span>{' '}
+                      <a
+                        href='https://gotify.net/'
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        className='font-medium text-primary hover:underline'
+                      >
+                        Gotify {t('官方文档')}
+                      </a>
+                    </div>
+                  </div>
                 </div>
-              </TabPane>
+              </>
             )}
-          </Tabs>
+          </div>
+        )}
+
+        {/* 价格设置 Tab */}
+        {activeTabKey === 'pricing' && (
+          <div className='py-2'>
+            <SwitchRow
+              label={t('接受未设置价格模型')}
+              hint={t(
+                '当模型没有设置价格时仍接受调用，仅当您信任该网站时使用，可能会产生高额费用',
+              )}
+              value={notificationSettings.acceptUnsetModelRatioModel}
+              onChange={setField('acceptUnsetModelRatioModel')}
+            />
+          </div>
+        )}
+
+        {/* 隐私设置 Tab */}
+        {activeTabKey === 'privacy' && (
+          <div className='py-2'>
+            <SwitchRow
+              label={t('记录请求与错误日志IP')}
+              hint={t(
+                '开启后，仅"消费"和"错误"日志将记录您的客户端IP地址',
+              )}
+              value={notificationSettings.recordIpLog}
+              onChange={setField('recordIpLog')}
+            />
+          </div>
+        )}
+
+        {/* 边栏设置 Tab */}
+        {activeTabKey === 'sidebar' && hasSidebarSettingsPermission() && (
+          <div className='py-2'>
+            <div className='mb-4'>
+              <span className='text-xs leading-relaxed text-muted'>
+                {t('您可以个性化设置侧边栏的要显示功能')}
+              </span>
+            </div>
+            <div className='rounded-xl border border-border bg-background p-4'>
+              {sectionConfigs.map((section) => (
+                <div key={section.key} className='mb-6'>
+                  {/* 区域标题和总开关 */}
+                  <div className='mb-4 flex items-center justify-between rounded-lg border border-border bg-surface-secondary p-4'>
+                    <div>
+                      <div className='mb-1 text-base font-semibold text-foreground'>
+                        {section.title}
+                      </div>
+                      <span className='text-xs leading-relaxed text-muted'>
+                        {section.description}
+                      </span>
+                    </div>
+                    <Switch
+                      isSelected={
+                        sidebarModulesUser[section.key]?.enabled !== false
+                      }
+                      onValueChange={handleSectionChange(section.key)}
+                      size='md'
+                      aria-label={section.title}
+                    >
+                      <Switch.Control>
+                        <Switch.Thumb />
+                      </Switch.Control>
+                    </Switch>
+                  </div>
+
+                  {/* 模块网格 */}
+                  <div className='grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3'>
+                    {section.modules
+                      .filter((module) =>
+                        isAllowedByAdmin(section.key, module.key),
+                      )
+                      .map((module) => {
+                        const sectionEnabled =
+                          sidebarModulesUser[section.key]?.enabled !== false;
+                        return (
+                          <Card
+                            key={module.key}
+                            className={`!rounded-xl border border-border transition-all duration-200 hover:border-primary/40 ${
+                              sectionEnabled ? '' : 'opacity-50'
+                            }`}
+                          >
+                            <Card.Content className='p-4'>
+                              <div className='flex items-center justify-between'>
+                                <div className='flex-1 text-left'>
+                                  <div className='mb-1 text-sm font-semibold text-foreground'>
+                                    {module.title}
+                                  </div>
+                                  <span className='block text-xs leading-relaxed text-muted'>
+                                    {module.description}
+                                  </span>
+                                </div>
+                                <div className='ml-4'>
+                                  <Switch
+                                    isSelected={
+                                      sidebarModulesUser[section.key]?.[
+                                        module.key
+                                      ] !== false
+                                    }
+                                    onValueChange={handleModuleChange(
+                                      section.key,
+                                      module.key,
+                                    )}
+                                    size='md'
+                                    isDisabled={!sectionEnabled}
+                                    aria-label={module.title}
+                                  >
+                                    <Switch.Control>
+                                      <Switch.Thumb />
+                                    </Switch.Control>
+                                  </Switch>
+                                </div>
+                              </div>
+                            </Card.Content>
+                          </Card>
+                        );
+                      })}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </Card.Content>
+
+      {/* Footer */}
+      <Card.Footer className='flex justify-end gap-3 border-t border-border px-5 py-3'>
+        {activeTabKey === 'sidebar' ? (
+          <>
+            <Button variant='light' onPress={resetSidebarModules}>
+              {t('重置为默认')}
+            </Button>
+            <Button
+              color='primary'
+              isPending={sidebarLoading}
+              onPress={saveSidebarSettings}
+            >
+              {t('保存设置')}
+            </Button>
+          </>
+        ) : (
+          <Button color='primary' onPress={handleSubmit}>
+            {t('保存设置')}
+          </Button>
         )}
-      </Form>
+      </Card.Footer>
     </Card>
   );
 };
diff --git a/web/src/components/settings/personal/cards/PreferencesSettings.jsx b/web/src/components/settings/personal/cards/PreferencesSettings.jsx
index b30550bec2f..16326c1737f 100644
--- a/web/src/components/settings/personal/cards/PreferencesSettings.jsx
+++ b/web/src/components/settings/personal/cards/PreferencesSettings.jsx
@@ -17,166 +17,178 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect, useContext } from "react";
-import { Card, Select, Typography, Avatar } from "@douyinfe/semi-ui";
-import { Languages } from "lucide-react";
-import { useTranslation } from "react-i18next";
-import { API, showSuccess, showError } from "../../../../helpers";
-import { UserContext } from "../../../../context/User";
-import { normalizeLanguage } from "../../../../i18n/language";
-
-// Language options with native names
+import React, { useState, useEffect, useContext } from 'react';
+import { Avatar, Card, ListBox } from '@heroui/react';
+import { CellSelect } from '@heroui-pro/react';
+import { ChevronsUpDown, Languages } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { API, showSuccess, showError } from '../../../../helpers';
+import { UserContext } from '../../../../context/User';
+import { normalizeLanguage } from '../../../../i18n/language';
+
+// Only Chinese and English are surfaced as user-pickable options; other
+// locales remain bundled so saved preferences keep working.
 const languageOptions = [
-	{ value: "zh-CN", label: "简体中文" },
-	{ value: "zh-TW", label: "繁體中文" },
-	{ value: "en", label: "English" },
-	{ value: 'fr', label: 'Français'},
-	{ value: 'ru', label: 'Русский'},
-	{ value: 'ja', label: '日本語'},
-	{ value: "vi", label: "Tiếng Việt" },
+  { value: 'zh-CN', label: '简体中文' },
+  { value: 'en', label: 'English' },
 ];
 
 const PreferencesSettings = ({ t }) => {
-	const { i18n } = useTranslation();
-	const [userState, userDispatch] = useContext(UserContext);
-	const [currentLanguage, setCurrentLanguage] = useState(
-		normalizeLanguage(i18n.language) || "zh-CN",
-	);
-	const [loading, setLoading] = useState(false);
-
-	// Load saved language preference from user settings
-	useEffect(() => {
-		if (userState?.user?.setting) {
-			try {
-				const settings = JSON.parse(userState.user.setting);
-				if (settings.language) {
-					const lang = normalizeLanguage(settings.language);
-					setCurrentLanguage(lang);
-					// Sync i18n with saved preference
-					if (i18n.language !== lang) {
-						i18n.changeLanguage(lang);
-					}
-				}
-			} catch (e) {
-				// Ignore parse errors
-			}
-		}
-	}, [userState?.user?.setting, i18n]);
-
-	const handleLanguagePreferenceChange = async (lang) => {
-		if (lang === currentLanguage) return;
-
-		setLoading(true);
-		const previousLang = currentLanguage;
-
-		try {
-			// Update language immediately for responsive UX
-			setCurrentLanguage(lang);
-			i18n.changeLanguage(lang);
-			localStorage.setItem('i18nextLng', lang);
-
-			// Save to backend
-			const res = await API.put("/api/user/self", {
-				language: lang,
-			});
-
-			if (res.data.success) {
-				showSuccess(t("语言偏好已保存"));
-				// Keep backend preference, context state, and local cache aligned.
-				let settings = {};
-				if (userState?.user?.setting) {
-					try {
-						settings = JSON.parse(userState.user.setting) || {};
-					} catch (e) {
-						settings = {};
-					}
-				}
-				settings.language = lang;
-				const nextUser = {
-					...userState.user,
-					setting: JSON.stringify(settings),
-				};
-				userDispatch({
-					type: "login",
-					payload: nextUser,
-				});
-				localStorage.setItem("user", JSON.stringify(nextUser));
-			} else {
-				showError(res.data.message || t("保存失败"));
-				// Revert on error
-				setCurrentLanguage(previousLang);
-				i18n.changeLanguage(previousLang);
-				localStorage.setItem("i18nextLng", previousLang);
-			}
-		} catch (error) {
-			showError(t("保存失败，请重试"));
-			// Revert on error
-			setCurrentLanguage(previousLang);
-			i18n.changeLanguage(previousLang);
-			localStorage.setItem("i18nextLng", previousLang);
-		} finally {
-			setLoading(false);
-		}
-	};
-
-	return (
-		<Card className="!rounded-2xl shadow-sm border-0">
-			{/* Card Header */}
-			<div className="flex items-center mb-4">
-				<Avatar size="small" color="violet" className="mr-3 shadow-md">
-					<Languages size={16} />
-				</Avatar>
-				<div>
-					<Typography.Text className="text-lg font-medium">
-						{t("偏好设置")}
-					</Typography.Text>
-					<div className="text-xs text-gray-600 dark:text-gray-400">
-						{t("界面语言和其他个人偏好")}
-					</div>
-				</div>
-			</div>
-			{/* Language Setting Card */}
-			<Card className="!rounded-xl border dark:border-gray-700">
-				<div className="flex flex-col sm:flex-row items-start sm:items-center sm:justify-between gap-4">
-					<div className="flex items-start w-full sm:w-auto">
-						<div className="w-12 h-12 rounded-full bg-violet-50 dark:bg-violet-900/30 flex items-center justify-center mr-4 flex-shrink-0">
-							<Languages
-								size={20}
-								className="text-violet-600 dark:text-violet-400"
-							/>
-						</div>
-						<div>
-							<Typography.Title heading={6} className="mb-1">
-								{t("语言偏好")}
-							</Typography.Title>
-							<Typography.Text type="tertiary" className="text-sm">
-								{t("选择您的首选界面语言，设置将自动保存并同步到所有设备")}
-							</Typography.Text>
-						</div>
-					</div>
-					<Select
-						value={currentLanguage}
-						onChange={handleLanguagePreferenceChange}
-						style={{ width: 180 }}
-						loading={loading}
-						optionList={languageOptions.map((opt) => ({
-							value: opt.value,
-							label: opt.label,
-						}))}
-					/>
-				</div>
-			</Card>
-
-			{/* Additional info */}
-			<div className="mt-4 text-xs text-gray-500 dark:text-gray-400">
-				<Typography.Text type="tertiary">
-					{t(
-						"提示：语言偏好会同步到您登录的所有设备，并影响API返回的错误消息语言。",
-					)}
-				</Typography.Text>
-			</div>
-		</Card>
-	);
+  const { i18n } = useTranslation();
+  const [userState, userDispatch] = useContext(UserContext);
+  const [currentLanguage, setCurrentLanguage] = useState(
+    normalizeLanguage(i18n.language) || 'zh-CN',
+  );
+  const [loading, setLoading] = useState(false);
+
+  // Load saved language preference from user settings
+  useEffect(() => {
+    if (userState?.user?.setting) {
+      try {
+        const settings = JSON.parse(userState.user.setting);
+        if (settings.language) {
+          const lang = normalizeLanguage(settings.language);
+          setCurrentLanguage(lang);
+          if (i18n.language !== lang) {
+            i18n.changeLanguage(lang);
+          }
+        }
+      } catch (e) {
+        // ignore
+      }
+    }
+  }, [userState?.user?.setting, i18n]);
+
+  const handleLanguagePreferenceChange = async (lang) => {
+    if (lang === currentLanguage) return;
+
+    setLoading(true);
+
+    // Apply UI change immediately and persist locally so the preference
+    // always sticks on this device, even if backend persistence fails.
+    setCurrentLanguage(lang);
+    i18n.changeLanguage(lang);
+    localStorage.setItem('i18nextLng', lang);
+
+    // Mirror into cached user.setting so layout effects don't override it.
+    let settings = {};
+    if (userState?.user?.setting) {
+      try {
+        settings = JSON.parse(userState.user.setting) || {};
+      } catch (e) {
+        settings = {};
+      }
+    }
+    settings.language = lang;
+    if (userState?.user) {
+      const nextUser = {
+        ...userState.user,
+        setting: JSON.stringify(settings),
+      };
+      userDispatch({ type: 'login', payload: nextUser });
+      localStorage.setItem('user', JSON.stringify(nextUser));
+    }
+
+    try {
+      const res = await API.put(
+        '/api/user/self',
+        { language: lang },
+        { skipErrorHandler: true },
+      );
+
+      if (res.data?.success) {
+        showSuccess(t('语言偏好已保存'));
+      } else {
+        showError(res.data?.message || t('保存失败'));
+      }
+    } catch (error) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Card className='!rounded-2xl' shadow='none'>
+      <Card.Content className='p-5'>
+        {/* Card header */}
+        <div className='mb-4 flex items-center gap-3'>
+          <Avatar size='sm' className='shadow-md'>
+            <Avatar.Fallback className='!bg-violet-100 !text-violet-600 dark:!bg-violet-900/30 dark:!text-violet-300'>
+              <Languages size={16} />
+            </Avatar.Fallback>
+          </Avatar>
+          <div className='flex flex-col'>
+            <span className='text-base font-semibold text-foreground'>
+              {t('偏好设置')}
+            </span>
+            <span className='text-xs text-muted'>
+              {t('界面语言和其他个人偏好')}
+            </span>
+          </div>
+        </div>
+
+        {/* Language preference row */}
+        <Card className='!rounded-xl' shadow='none'>
+          <Card.Content className='flex flex-col gap-3 p-4'>
+            <div className='flex items-start gap-3'>
+              <div className='flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-violet-100 dark:bg-violet-900/30'>
+                <Languages
+                  size={20}
+                  className='text-violet-600 dark:text-violet-400'
+                />
+              </div>
+              <div className='min-w-0 flex-1'>
+                <div className='mb-1 text-sm font-semibold text-foreground'>
+                  {t('语言偏好')}
+                </div>
+                <p className='text-xs text-muted'>
+                  {t('选择您的首选界面语言，设置将自动保存并同步到所有设备')}
+                </p>
+              </div>
+            </div>
+            <CellSelect
+              aria-label={t('语言偏好')}
+              isDisabled={loading}
+              selectedKey={currentLanguage}
+              onSelectionChange={(key) => {
+                if (key) handleLanguagePreferenceChange(String(key));
+              }}
+            >
+              <CellSelect.Trigger>
+                <CellSelect.Label>{t('界面语言')}</CellSelect.Label>
+                <CellSelect.Value />
+                <CellSelect.Indicator>
+                  <ChevronsUpDown size={14} />
+                </CellSelect.Indicator>
+              </CellSelect.Trigger>
+              <CellSelect.Popover>
+                <ListBox>
+                  {languageOptions.map((opt) => (
+                    <ListBox.Item
+                      key={opt.value}
+                      id={opt.value}
+                      textValue={opt.label}
+                    >
+                      {opt.label}
+                      <ListBox.ItemIndicator />
+                    </ListBox.Item>
+                  ))}
+                </ListBox>
+              </CellSelect.Popover>
+            </CellSelect>
+          </Card.Content>
+        </Card>
+
+        {/* Helper text */}
+        <div className='mt-4 text-xs text-muted'>
+          {t(
+            '提示：语言偏好会同步到您登录的所有设备，并影响API返回的错误消息语言。',
+          )}
+        </div>
+      </Card.Content>
+    </Card>
+  );
 };
 
 export default PreferencesSettings;
diff --git a/web/src/components/settings/personal/components/TwoFASetting.jsx b/web/src/components/settings/personal/components/TwoFASetting.jsx
index 10ee2373f28..50c1fbbaf0c 100644
--- a/web/src/components/settings/personal/components/TwoFASetting.jsx
+++ b/web/src/components/settings/personal/components/TwoFASetting.jsx
@@ -6,42 +6,130 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import { API, showError, showSuccess, showWarning } from '../../../../helpers';
+
+import React, { useEffect, useState } from 'react';
 import {
-  Banner,
   Button,
   Card,
-  Checkbox,
-  Divider,
   Input,
   Modal,
-  Tag,
-  Typography,
-  Steps,
-  Space,
-  Badge,
-} from '@douyinfe/semi-ui';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import {
-  IconShield,
-  IconAlertTriangle,
-  IconRefresh,
-  IconCopy,
-} from '@douyinfe/semi-icons';
-import React, { useEffect, useState } from 'react';
-
+  AlertTriangle,
+  Copy,
+  RefreshCw,
+  Shield,
+} from 'lucide-react';
 import { QRCodeSVG } from 'qrcode.react';
+import { API, showError, showSuccess, showWarning } from '../../../../helpers';
+
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  red: 'bg-danger/15 text-danger',
+  orange: 'bg-warning/15 text-warning',
+};
 
-const { Text, Paragraph } = Typography;
+function StatusChip({ tone, children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.green
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function Dot({ tone = 'warning' }) {
+  const cls =
+    tone === 'success'
+      ? 'bg-success'
+      : tone === 'danger'
+        ? 'bg-danger'
+        : 'bg-warning';
+  return (
+    <span
+      className={`mt-1.5 inline-block h-1.5 w-1.5 shrink-0 rounded-full ${cls}`}
+    />
+  );
+}
+
+function InfoBanner({ tone = 'warning', children }) {
+  const cls =
+    tone === 'warning'
+      ? 'border-warning/30 bg-warning/5'
+      : 'border-primary/20 bg-primary/5';
+  return (
+    <div
+      className={`flex items-start gap-2 rounded-xl border ${cls} px-3 py-2 text-sm text-foreground`}
+    >
+      <AlertTriangle
+        size={16}
+        className={
+          tone === 'warning'
+            ? 'mt-0.5 shrink-0 text-warning'
+            : 'mt-0.5 shrink-0 text-primary'
+        }
+      />
+      <span>{children}</span>
+    </div>
+  );
+}
+
+const inputClass =
+  'h-11 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+// Mirrors Semi `<Steps type='basic' size='small' current>`: a top
+// progress bar with numbered circles, current step highlighted, prior
+// steps marked done.
+function Steps({ steps, current }) {
+  return (
+    <ol className='flex w-full items-start gap-3'>
+      {steps.map((step, idx) => {
+        const done = idx < current;
+        const active = idx === current;
+        const circleCls = done
+          ? 'bg-primary text-background'
+          : active
+            ? 'border-2 border-primary bg-background text-primary'
+            : 'border border-border bg-background text-muted';
+        const labelCls = active
+          ? 'text-foreground'
+          : done
+            ? 'text-foreground'
+            : 'text-muted';
+        return (
+          <li key={idx} className='flex flex-1 items-start gap-2'>
+            <div
+              className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-xs font-semibold ${circleCls}`}
+            >
+              {idx + 1}
+            </div>
+            <div className='min-w-0'>
+              <div className={`text-sm font-medium ${labelCls}`}>
+                {step.title}
+              </div>
+              <div className='text-xs text-muted'>{step.description}</div>
+            </div>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
 
 const TwoFASetting = ({ t }) => {
   const [loading, setLoading] = useState(false);
@@ -51,20 +139,58 @@ const TwoFASetting = ({ t }) => {
     backup_codes_remaining: 0,
   });
 
-  // 模态框状态
+  // Modal visibility
   const [setupModalVisible, setSetupModalVisible] = useState(false);
-  const [enableModalVisible, setEnableModalVisible] = useState(false);
   const [disableModalVisible, setDisableModalVisible] = useState(false);
   const [backupModalVisible, setBackupModalVisible] = useState(false);
 
-  // 表单数据
+  // Form data
   const [setupData, setSetupData] = useState(null);
   const [verificationCode, setVerificationCode] = useState('');
   const [backupCodes, setBackupCodes] = useState([]);
   const [confirmDisable, setConfirmDisable] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
 
-  // 获取2FA状态
+  const setupModalState = useOverlayState({
+    isOpen: setupModalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) closeSetupModal();
+    },
+  });
+
+  const disableModalState = useOverlayState({
+    isOpen: disableModalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) closeDisableModal();
+    },
+  });
+
+  const backupModalState = useOverlayState({
+    isOpen: backupModalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) closeBackupModal();
+    },
+  });
+
+  function closeSetupModal() {
+    setSetupModalVisible(false);
+    setSetupData(null);
+    setCurrentStep(0);
+    setVerificationCode('');
+  }
+
+  function closeDisableModal() {
+    setDisableModalVisible(false);
+    setVerificationCode('');
+    setConfirmDisable(false);
+  }
+
+  function closeBackupModal() {
+    setBackupModalVisible(false);
+    setVerificationCode('');
+    setBackupCodes([]);
+  }
+
   const fetchStatus = async () => {
     try {
       const res = await API.get('/api/user/2fa/status');
@@ -78,9 +204,9 @@ const TwoFASetting = ({ t }) => {
 
   useEffect(() => {
     fetchStatus();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  // 初始化2FA设置
   const handleSetup2FA = async () => {
     setLoading(true);
     try {
@@ -99,13 +225,11 @@ const TwoFASetting = ({ t }) => {
     }
   };
 
-  // 启用2FA
   const handleEnable2FA = async () => {
     if (!verificationCode) {
       showWarning(t('请输入验证码'));
       return;
     }
-
     setLoading(true);
     try {
       const res = await API.post('/api/user/2fa/enable', {
@@ -113,10 +237,7 @@ const TwoFASetting = ({ t }) => {
       });
       if (res.data.success) {
         showSuccess(t('两步验证启用成功！'));
-        setEnableModalVisible(false);
-        setSetupModalVisible(false);
-        setVerificationCode('');
-        setCurrentStep(0);
+        closeSetupModal();
         fetchStatus();
       } else {
         showError(res.data.message);
@@ -128,18 +249,15 @@ const TwoFASetting = ({ t }) => {
     }
   };
 
-  // 禁用2FA
   const handleDisable2FA = async () => {
     if (!verificationCode) {
       showWarning(t('请输入验证码或备用码'));
       return;
     }
-
     if (!confirmDisable) {
       showWarning(t('请确认您已了解禁用两步验证的后果'));
       return;
     }
-
     setLoading(true);
     try {
       const res = await API.post('/api/user/2fa/disable', {
@@ -147,9 +265,7 @@ const TwoFASetting = ({ t }) => {
       });
       if (res.data.success) {
         showSuccess(t('两步验证已禁用'));
-        setDisableModalVisible(false);
-        setVerificationCode('');
-        setConfirmDisable(false);
+        closeDisableModal();
         fetchStatus();
       } else {
         showError(res.data.message);
@@ -161,13 +277,11 @@ const TwoFASetting = ({ t }) => {
     }
   };
 
-  // 重新生成备用码
   const handleRegenerateBackupCodes = async () => {
     if (!verificationCode) {
       showWarning(t('请输入验证码'));
       return;
     }
-
     setLoading(true);
     try {
       const res = await API.post('/api/user/2fa/backup_codes', {
@@ -188,16 +302,11 @@ const TwoFASetting = ({ t }) => {
     }
   };
 
-  // 通用复制函数
   const copyTextToClipboard = (text, successMessage = t('已复制到剪贴板')) => {
     navigator.clipboard
       .writeText(text)
-      .then(() => {
-        showSuccess(successMessage);
-      })
-      .catch(() => {
-        showError(t('复制失败，请手动复制'));
-      });
+      .then(() => showSuccess(successMessage))
+      .catch(() => showError(t('复制失败，请手动复制')));
   };
 
   const copyBackupCodes = () => {
@@ -205,516 +314,446 @@ const TwoFASetting = ({ t }) => {
     copyTextToClipboard(codesText, t('备用码已复制到剪贴板'));
   };
 
-  // 备用码展示组件
-  const BackupCodesDisplay = ({ codes, title, onCopy }) => {
-    return (
-      <Card className='!rounded-xl' style={{ width: '100%' }}>
-        <div className='space-y-3'>
-          <div className='flex items-center justify-between'>
-            <Text strong className='text-slate-700 dark:text-slate-200'>
-              {title}
-            </Text>
-          </div>
-
-          <div className='grid grid-cols-1 sm:grid-cols-2 gap-2'>
-            {codes.map((code, index) => (
-              <div key={index} className='rounded-lg p-3'>
-                <div className='flex items-center justify-between'>
-                  <Text
-                    code
-                    className='text-sm font-mono text-slate-700 dark:text-slate-200'
-                  >
-                    {code}
-                  </Text>
-                  <Text type='quaternary' className='text-xs'>
-                    #{(index + 1).toString().padStart(2, '0')}
-                  </Text>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          <Divider margin={12} />
-          <Button
-            type='primary'
-            theme='solid'
-            icon={<IconCopy />}
-            onClick={onCopy}
-            className='!rounded-lg !bg-slate-600 hover:!bg-slate-700 w-full'
-          >
-            {t('复制所有代码')}
-          </Button>
+  const BackupCodesDisplay = ({ codes, title, onCopy }) => (
+    <Card className='!w-full !rounded-xl'>
+      <Card.Content className='space-y-3 p-4'>
+        <div className='text-sm font-semibold text-foreground'>{title}</div>
+        <div className='grid grid-cols-1 gap-2 sm:grid-cols-2'>
+          {codes.map((code, index) => (
+            <div
+              key={index}
+              className='flex items-center justify-between rounded-lg bg-surface-secondary px-3 py-2'
+            >
+              <code className='font-mono text-sm text-foreground'>{code}</code>
+              <span className='text-xs text-muted'>
+                #{(index + 1).toString().padStart(2, '0')}
+              </span>
+            </div>
+          ))}
         </div>
-      </Card>
-    );
-  };
-
-  // 渲染设置模态框footer
-  const renderSetupModalFooter = () => {
-    return (
-      <>
-        {currentStep > 0 && (
-          <Button
-            onClick={() => setCurrentStep(currentStep - 1)}
-            className='!rounded-lg'
-          >
-            {t('上一步')}
-          </Button>
-        )}
-        {currentStep < 2 ? (
-          <Button
-            type='primary'
-            theme='solid'
-            onClick={() => setCurrentStep(currentStep + 1)}
-            className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
-          >
-            {t('下一步')}
-          </Button>
-        ) : (
-          <Button
-            type='primary'
-            theme='solid'
-            loading={loading}
-            onClick={() => {
-              if (!verificationCode) {
-                showWarning(t('请输入验证码'));
-                return;
-              }
-              handleEnable2FA();
-            }}
-            className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
-          >
-            {t('完成设置并启用两步验证')}
-          </Button>
-        )}
-      </>
-    );
-  };
-
-  // 渲染禁用模态框footer
-  const renderDisableModalFooter = () => {
-    return (
-      <>
-        <Button
-          onClick={() => {
-            setDisableModalVisible(false);
-            setVerificationCode('');
-            setConfirmDisable(false);
-          }}
-          className='!rounded-lg'
-        >
-          {t('取消')}
-        </Button>
-        <Button
-          type='danger'
-          theme='solid'
-          loading={loading}
-          disabled={!confirmDisable || !verificationCode}
-          onClick={handleDisable2FA}
-          className='!rounded-lg !bg-slate-500 hover:!bg-slate-600'
-        >
-          {t('确认禁用')}
-        </Button>
-      </>
-    );
-  };
-
-  // 渲染重新生成模态框footer
-  const renderRegenerateModalFooter = () => {
-    if (backupCodes.length > 0) {
-      return (
-        <Button
-          type='primary'
-          theme='solid'
-          onClick={() => {
-            setBackupModalVisible(false);
-            setVerificationCode('');
-            setBackupCodes([]);
-          }}
-          className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
-        >
-          {t('完成')}
-        </Button>
-      );
-    }
-
-    return (
-      <>
+        <div className='border-t border-border' />
         <Button
-          onClick={() => {
-            setBackupModalVisible(false);
-            setVerificationCode('');
-            setBackupCodes([]);
-          }}
-          className='!rounded-lg'
+          color='primary'
+          className='w-full !bg-foreground/85 hover:!bg-foreground'
+          startContent={<Copy size={14} />}
+          onPress={onCopy}
         >
-          {t('取消')}
+          {t('复制所有代码')}
         </Button>
-        <Button
-          type='primary'
-          theme='solid'
-          loading={loading}
-          disabled={!verificationCode}
-          onClick={handleRegenerateBackupCodes}
-          className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
-        >
-          {t('生成新的备用码')}
-        </Button>
-      </>
-    );
-  };
+      </Card.Content>
+    </Card>
+  );
 
   return (
     <>
-      <Card className='!rounded-xl w-full'>
-        <div className='flex flex-col sm:flex-row items-start sm:justify-between gap-4'>
-          <div className='flex items-start w-full sm:w-auto'>
-            <div className='w-12 h-12 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-4 flex-shrink-0'>
-              <IconShield
-                size='large'
-                className='text-slate-600 dark:text-slate-300'
-              />
-            </div>
-            <div className='flex-1'>
-              <div className='flex items-center gap-2 mb-1'>
-                <Typography.Title heading={6} className='mb-0'>
-                  {t('两步验证设置')}
-                </Typography.Title>
-                {status.enabled ? (
-                  <Tag color='green' shape='circle' size='small'>
-                    {t('已启用')}
-                  </Tag>
-                ) : (
-                  <Tag color='red' shape='circle' size='small'>
-                    {t('未启用')}
-                  </Tag>
-                )}
-                {status.locked && (
-                  <Tag color='orange' shape='circle' size='small'>
-                    {t('账户已锁定')}
-                  </Tag>
-                )}
+      <Card className='!w-full !rounded-xl'>
+        <Card.Content className='p-5'>
+          <div className='flex flex-col items-start gap-4 sm:flex-row sm:justify-between'>
+            <div className='flex w-full items-start sm:w-auto'>
+              <div className='mr-4 flex h-12 w-12 shrink-0 items-center justify-center rounded-full bg-surface-secondary'>
+                <Shield size={20} className='text-muted' />
               </div>
-              <Typography.Text type='tertiary' className='text-sm'>
-                {t(
-                  '两步验证（2FA）为您的账户提供额外的安全保护。启用后，登录时需要输入密码和验证器应用生成的验证码。',
-                )}
-              </Typography.Text>
-              {status.enabled && (
-                <div className='mt-2'>
-                  <Text size='small' type='secondary'>
+              <div className='flex-1'>
+                <div className='mb-1 flex flex-wrap items-center gap-2'>
+                  <h6 className='m-0 text-base font-semibold text-foreground'>
+                    {t('两步验证设置')}
+                  </h6>
+                  {status.enabled ? (
+                    <StatusChip tone='green'>{t('已启用')}</StatusChip>
+                  ) : (
+                    <StatusChip tone='red'>{t('未启用')}</StatusChip>
+                  )}
+                  {status.locked && (
+                    <StatusChip tone='orange'>
+                      {t('账户已锁定')}
+                    </StatusChip>
+                  )}
+                </div>
+                <div className='text-sm text-muted'>
+                  {t(
+                    '两步验证（2FA）为您的账户提供额外的安全保护。启用后，登录时需要输入密码和验证器应用生成的验证码。',
+                  )}
+                </div>
+                {status.enabled && (
+                  <div className='mt-2 text-xs text-muted'>
                     {t('剩余备用码：')}
                     {status.backup_codes_remaining || 0}
                     {t('个')}
-                  </Text>
-                </div>
-              )}
+                  </div>
+                )}
+              </div>
             </div>
-          </div>
-          <div className='flex flex-col space-y-2 w-full sm:w-auto'>
-            {!status.enabled ? (
-              <Button
-                type='primary'
-                theme='solid'
-                size='default'
-                onClick={handleSetup2FA}
-                loading={loading}
-                className='!rounded-lg !bg-slate-600 hover:!bg-slate-700'
-                icon={<IconShield />}
-              >
-                {t('启用验证')}
-              </Button>
-            ) : (
-              <div className='flex flex-col space-y-2'>
+            <div className='flex w-full flex-col gap-2 sm:w-auto'>
+              {!status.enabled ? (
                 <Button
-                  type='danger'
-                  theme='solid'
-                  size='default'
-                  onClick={() => setDisableModalVisible(true)}
-                  className='!rounded-lg !bg-slate-500 hover:!bg-slate-600'
-                  icon={<IconAlertTriangle />}
+                  color='primary'
+                  isPending={loading}
+                  startContent={<Shield size={14} />}
+                  onPress={handleSetup2FA}
+                  className='!bg-foreground/85 hover:!bg-foreground'
                 >
-                  {t('禁用两步验证')}
+                  {t('启用验证')}
                 </Button>
-                <Button
-                  type='primary'
-                  theme='solid'
-                  size='default'
-                  onClick={() => setBackupModalVisible(true)}
-                  className='!rounded-lg'
-                  icon={<IconRefresh />}
-                >
-                  {t('重新生成备用码')}
-                </Button>
-              </div>
-            )}
+              ) : (
+                <>
+                  <Button
+                    color='danger'
+                    startContent={<AlertTriangle size={14} />}
+                    onPress={() => setDisableModalVisible(true)}
+                    className='!bg-foreground/70 hover:!bg-foreground/85'
+                  >
+                    {t('禁用两步验证')}
+                  </Button>
+                  <Button
+                    color='primary'
+                    variant='flat'
+                    startContent={<RefreshCw size={14} />}
+                    onPress={() => setBackupModalVisible(true)}
+                  >
+                    {t('重新生成备用码')}
+                  </Button>
+                </>
+              )}
+            </div>
           </div>
-        </div>
+        </Card.Content>
       </Card>
 
-      {/* 2FA设置模态框 */}
-      <Modal
-        title={
-          <div className='flex items-center'>
-            <IconShield className='mr-2 text-slate-600' />
-            {t('设置两步验证')}
-          </div>
-        }
-        visible={setupModalVisible}
-        onCancel={() => {
-          setSetupModalVisible(false);
-          setSetupData(null);
-          setCurrentStep(0);
-          setVerificationCode('');
-        }}
-        footer={renderSetupModalFooter()}
-        width={650}
-        style={{ maxWidth: '90vw' }}
-      >
-        {setupData && (
-          <div className='space-y-6'>
-            {/* 步骤进度 */}
-            <Steps type='basic' size='small' current={currentStep}>
-              <Steps.Step
-                title={t('扫描二维码')}
-                description={t('使用认证器应用扫描二维码')}
-              />
-              <Steps.Step
-                title={t('保存备用码')}
-                description={t('保存备用码以备不时之需')}
-              />
-              <Steps.Step
-                title={t('验证设置')}
-                description={t('输入验证码完成设置')}
-              />
-            </Steps>
-
-            {/* 步骤内容 */}
-            <div className='rounded-xl'>
-              {currentStep === 0 && (
-                <div>
-                  <Paragraph className='text-gray-600 dark:text-gray-300 mb-4'>
-                    {t(
-                      '使用认证器应用（如 Google Authenticator、Microsoft Authenticator）扫描下方二维码：',
-                    )}
-                  </Paragraph>
-                  <div className='flex justify-center mb-4'>
-                    <div className='bg-white p-4 rounded-lg shadow-sm'>
-                      <QRCodeSVG value={setupData.qr_code_data} size={180} />
-                    </div>
-                  </div>
-                  <div className='bg-blue-50 dark:bg-blue-900 rounded-lg p-3'>
-                    <Text className='text-blue-800 dark:text-blue-200 text-sm'>
-                      {t('或手动输入密钥：')}
-                      <Text code copyable className='ml-2'>
-                        {setupData.secret}
-                      </Text>
-                    </Text>
-                  </div>
+      {/* 2FA setup modal */}
+      <Modal state={setupModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size='2xl'
+            placement='center'
+            className='max-w-[90vw]'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <div className='flex items-center gap-2'>
+                  <Shield size={16} className='text-muted' />
+                  <span>{t('设置两步验证')}</span>
                 </div>
-              )}
-
-              {currentStep === 1 && (
-                <div className='space-y-4'>
-                  {/* 备用码展示 */}
-                  <BackupCodesDisplay
-                    codes={setupData.backup_codes}
-                    title={t('备用恢复代码')}
-                    onCopy={() => {
-                      const codesText = setupData.backup_codes.join('\n');
-                      copyTextToClipboard(codesText, t('备用码已复制到剪贴板'));
+              </ModalHeader>
+              <ModalBody className='space-y-6 px-6 py-5'>
+                {setupData && (
+                  <>
+                    <Steps
+                      current={currentStep}
+                      steps={[
+                        {
+                          title: t('扫描二维码'),
+                          description: t('使用认证器应用扫描二维码'),
+                        },
+                        {
+                          title: t('保存备用码'),
+                          description: t('保存备用码以备不时之需'),
+                        },
+                        {
+                          title: t('验证设置'),
+                          description: t('输入验证码完成设置'),
+                        },
+                      ]}
+                    />
+
+                    <div>
+                      {currentStep === 0 && (
+                        <div>
+                          <p className='mb-4 text-sm text-muted'>
+                            {t(
+                              '使用认证器应用（如 Google Authenticator、Microsoft Authenticator）扫描下方二维码：',
+                            )}
+                          </p>
+                          <div className='mb-4 flex justify-center'>
+                            <div className='rounded-lg bg-white p-4 shadow-sm'>
+                              <QRCodeSVG
+                                value={setupData.qr_code_data}
+                                size={180}
+                              />
+                            </div>
+                          </div>
+                          <div className='rounded-lg bg-primary/10 p-3 text-sm text-primary'>
+                            <span>{t('或手动输入密钥：')}</span>
+                            <code className='ml-2 select-all rounded bg-background/40 px-1.5 py-0.5 font-mono text-xs text-foreground'>
+                              {setupData.secret}
+                            </code>
+                            <button
+                              type='button'
+                              className='ml-2 inline-flex items-center text-xs text-primary hover:underline'
+                              onClick={() =>
+                                copyTextToClipboard(setupData.secret)
+                              }
+                              aria-label={t('复制')}
+                            >
+                              <Copy size={12} className='mr-1' />
+                              {t('复制')}
+                            </button>
+                          </div>
+                        </div>
+                      )}
+
+                      {currentStep === 1 && (
+                        <BackupCodesDisplay
+                          codes={setupData.backup_codes}
+                          title={t('备用恢复代码')}
+                          onCopy={() => {
+                            const codesText =
+                              setupData.backup_codes.join('\n');
+                            copyTextToClipboard(
+                              codesText,
+                              t('备用码已复制到剪贴板'),
+                            );
+                          }}
+                        />
+                      )}
+
+                      {currentStep === 2 && (
+                        <Input
+                          value={verificationCode}
+                          onValueChange={setVerificationCode}
+                          maxLength={6}
+                          placeholder={t(
+                            '输入认证器应用显示的6位数字验证码',
+                          )}
+                          size='lg'
+                        >
+                          <Input.Control>
+                            <Input.Element />
+                          </Input.Control>
+                        </Input>
+                      )}
+                    </div>
+                  </>
+                )}
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                {currentStep > 0 && (
+                  <Button
+                    variant='light'
+                    onPress={() => setCurrentStep(currentStep - 1)}
+                  >
+                    {t('上一步')}
+                  </Button>
+                )}
+                {currentStep < 2 ? (
+                  <Button
+                    color='primary'
+                    className='!bg-foreground/85 hover:!bg-foreground'
+                    onPress={() => setCurrentStep(currentStep + 1)}
+                  >
+                    {t('下一步')}
+                  </Button>
+                ) : (
+                  <Button
+                    color='primary'
+                    isPending={loading}
+                    className='!bg-foreground/85 hover:!bg-foreground'
+                    onPress={() => {
+                      if (!verificationCode) {
+                        showWarning(t('请输入验证码'));
+                        return;
+                      }
+                      handleEnable2FA();
                     }}
-                  />
-                </div>
-              )}
-
-              {currentStep === 2 && (
-                <Input
-                  placeholder={t('输入认证器应用显示的6位数字验证码')}
-                  value={verificationCode}
-                  onChange={setVerificationCode}
-                  size='large'
-                  maxLength={6}
-                  className='!rounded-lg'
-                />
-              )}
-            </div>
-          </div>
-        )}
+                  >
+                    {t('完成设置并启用两步验证')}
+                  </Button>
+                )}
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
-      {/* 禁用2FA模态框 */}
-      <Modal
-        title={
-          <div className='flex items-center'>
-            <IconAlertTriangle className='mr-2 text-red-500' />
-            {t('禁用两步验证')}
-          </div>
-        }
-        visible={disableModalVisible}
-        onCancel={() => {
-          setDisableModalVisible(false);
-          setVerificationCode('');
-          setConfirmDisable(false);
-        }}
-        footer={renderDisableModalFooter()}
-        width={550}
-        style={{ maxWidth: '90vw' }}
-      >
-        <div className='space-y-6'>
-          {/* 警告提示 */}
-          <div className='rounded-xl'>
-            <Banner
-              type='warning'
-              description={t(
-                '警告：禁用两步验证将永久删除您的验证设置和所有备用码，此操作不可撤销！',
-              )}
-              className='!rounded-lg'
-            />
-          </div>
+      {/* Disable 2FA modal */}
+      <Modal state={disableModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size='xl'
+            placement='center'
+            className='max-w-[90vw]'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <div className='flex items-center gap-2'>
+                  <AlertTriangle size={16} className='text-danger' />
+                  <span>{t('禁用两步验证')}</span>
+                </div>
+              </ModalHeader>
+              <ModalBody className='space-y-6 px-6 py-5'>
+                <InfoBanner tone='warning'>
+                  {t(
+                    '警告：禁用两步验证将永久删除您的验证设置和所有备用码，此操作不可撤销！',
+                  )}
+                </InfoBanner>
 
-          {/* 内容区域 */}
-          <div className='space-y-4'>
-            <div>
-              <Text
-                strong
-                className='block mb-2 text-slate-700 dark:text-slate-200'
-              >
-                {t('禁用后的影响：')}
-              </Text>
-              <ul className='space-y-2 text-sm text-slate-600 dark:text-slate-300'>
-                <li className='flex items-start gap-2'>
-                  <Badge dot type='warning' />
-                  {t('降低您账户的安全性')}
-                </li>
-                <li className='flex items-start gap-2'>
-                  <Badge dot type='warning' />
-                  {t('需要重新完整设置才能再次启用')}
-                </li>
-                <li className='flex items-start gap-2'>
-                  <Badge dot type='danger' />
-                  {t('永久删除您的两步验证设置')}
-                </li>
-                <li className='flex items-start gap-2'>
-                  <Badge dot type='danger' />
-                  {t('永久删除所有备用码（包括未使用的）')}
-                </li>
-              </ul>
-            </div>
+                <div className='space-y-4'>
+                  <div>
+                    <div className='mb-2 text-sm font-semibold text-foreground'>
+                      {t('禁用后的影响：')}
+                    </div>
+                    <ul className='space-y-2 text-sm text-foreground'>
+                      <li className='flex items-start gap-2'>
+                        <Dot tone='warning' />
+                        <span>{t('降低您账户的安全性')}</span>
+                      </li>
+                      <li className='flex items-start gap-2'>
+                        <Dot tone='warning' />
+                        <span>{t('需要重新完整设置才能再次启用')}</span>
+                      </li>
+                      <li className='flex items-start gap-2'>
+                        <Dot tone='danger' />
+                        <span>{t('永久删除您的两步验证设置')}</span>
+                      </li>
+                      <li className='flex items-start gap-2'>
+                        <Dot tone='danger' />
+                        <span>
+                          {t('永久删除所有备用码（包括未使用的）')}
+                        </span>
+                      </li>
+                    </ul>
+                  </div>
 
-            <Divider margin={16} />
+                  <div className='border-t border-border' />
 
-            <div className='space-y-4'>
-              <div>
-                <Text
-                  strong
-                  className='block mb-2 text-slate-700 dark:text-slate-200'
-                >
-                  {t('验证身份')}
-                </Text>
-                <Input
-                  placeholder={t('请输入认证器验证码或备用码')}
-                  value={verificationCode}
-                  onChange={setVerificationCode}
-                  size='large'
-                  className='!rounded-lg'
-                />
-              </div>
+                  <div>
+                    <div className='mb-2 text-sm font-semibold text-foreground'>
+                      {t('验证身份')}
+                    </div>
+                    <Input
+                      value={verificationCode}
+                      onValueChange={setVerificationCode}
+                      placeholder={t('请输入认证器验证码或备用码')}
+                      size='lg'
+                    >
+                      <Input.Control>
+                        <Input.Element />
+                      </Input.Control>
+                    </Input>
+                  </div>
 
-              <div>
-                <Checkbox
-                  checked={confirmDisable}
-                  onChange={(e) => setConfirmDisable(e.target.checked)}
-                  className='text-sm'
+                  <label className='flex items-start gap-2 text-sm text-foreground'>
+                    <input
+                      type='checkbox'
+                      checked={confirmDisable}
+                      onChange={(event) =>
+                        setConfirmDisable(event.target.checked)
+                      }
+                      className='mt-0.5 h-4 w-4 accent-primary'
+                    />
+                    <span>
+                      {t(
+                        '我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销',
+                      )}
+                    </span>
+                  </label>
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={closeDisableModal}>
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='danger'
+                  isPending={loading}
+                  isDisabled={!confirmDisable || !verificationCode}
+                  className='!bg-foreground/70 hover:!bg-foreground/85'
+                  onPress={handleDisable2FA}
                 >
-                  {t(
-                    '我已了解禁用两步验证将永久删除所有相关设置和备用码，此操作不可撤销',
-                  )}
-                </Checkbox>
-              </div>
-            </div>
-          </div>
-        </div>
+                  {t('确认禁用')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
-      {/* 重新生成备用码模态框 */}
-      <Modal
-        title={
-          <div className='flex items-center'>
-            <IconRefresh className='mr-2 text-slate-600' />
-            {t('重新生成备用码')}
-          </div>
-        }
-        visible={backupModalVisible}
-        onCancel={() => {
-          setBackupModalVisible(false);
-          setVerificationCode('');
-          setBackupCodes([]);
-        }}
-        footer={renderRegenerateModalFooter()}
-        width={500}
-        style={{ maxWidth: '90vw' }}
-      >
-        <div className='space-y-6'>
-          {backupCodes.length === 0 ? (
-            <>
-              {/* 警告提示 */}
-              <div className='rounded-xl'>
-                <Banner
-                  type='warning'
-                  description={t(
-                    '重新生成备用码将使现有的备用码失效，请确保您已保存了当前的备用码。',
-                  )}
-                  className='!rounded-lg'
-                />
-              </div>
-
-              {/* 验证区域 */}
-              <div className='space-y-4'>
-                <div>
-                  <Text
-                    strong
-                    className='block mb-2 text-slate-700 dark:text-slate-200'
-                  >
-                    {t('验证身份')}
-                  </Text>
-                  <Input
-                    placeholder={t('请输入认证器验证码')}
-                    value={verificationCode}
-                    onChange={setVerificationCode}
-                    size='large'
-                    className='!rounded-lg'
-                  />
+      {/* Regenerate backup codes modal */}
+      <Modal state={backupModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size='lg'
+            placement='center'
+            className='max-w-[90vw]'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <div className='flex items-center gap-2'>
+                  <RefreshCw size={16} className='text-muted' />
+                  <span>{t('重新生成备用码')}</span>
                 </div>
-              </div>
-            </>
-          ) : (
-            <>
-              {/* 成功提示 */}
-              <Space vertical style={{ width: '100%' }}>
-                <div className='flex items-center justify-center gap-2'>
-                  <Badge dot type='success' />
-                  <Text
-                    strong
-                    className='text-lg text-slate-700 dark:text-slate-200'
+              </ModalHeader>
+              <ModalBody className='space-y-6 px-6 py-5'>
+                {backupCodes.length === 0 ? (
+                  <>
+                    <InfoBanner tone='warning'>
+                      {t(
+                        '重新生成备用码将使现有的备用码失效，请确保您已保存了当前的备用码。',
+                      )}
+                    </InfoBanner>
+                    <div>
+                      <div className='mb-2 text-sm font-semibold text-foreground'>
+                        {t('验证身份')}
+                      </div>
+                      <Input
+                        value={verificationCode}
+                        onValueChange={setVerificationCode}
+                        placeholder={t('请输入认证器验证码')}
+                        size='lg'
+                      >
+                        <Input.Control>
+                          <Input.Element />
+                        </Input.Control>
+                      </Input>
+                    </div>
+                  </>
+                ) : (
+                  <div className='flex flex-col gap-3'>
+                    <div className='flex items-center justify-center gap-2'>
+                      <span className='inline-block h-2 w-2 rounded-full bg-success' />
+                      <span className='text-lg font-semibold text-foreground'>
+                        {t('新的备用码已生成')}
+                      </span>
+                    </div>
+                    <div className='text-center text-sm text-muted'>
+                      {t('旧的备用码已失效，请保存新的备用码')}
+                    </div>
+                    <BackupCodesDisplay
+                      codes={backupCodes}
+                      title={t('新的备用恢复代码')}
+                      onCopy={copyBackupCodes}
+                    />
+                  </div>
+                )}
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                {backupCodes.length > 0 ? (
+                  <Button
+                    color='primary'
+                    className='!bg-foreground/85 hover:!bg-foreground'
+                    onPress={closeBackupModal}
                   >
-                    {t('新的备用码已生成')}
-                  </Text>
-                </div>
-                <Text className='text-slate-500 dark:text-slate-400 text-sm'>
-                  {t('旧的备用码已失效，请保存新的备用码')}
-                </Text>
-
-                {/* 备用码展示 */}
-                <BackupCodesDisplay
-                  codes={backupCodes}
-                  title={t('新的备用恢复代码')}
-                  onCopy={copyBackupCodes}
-                />
-              </Space>
-            </>
-          )}
-        </div>
+                    {t('完成')}
+                  </Button>
+                ) : (
+                  <>
+                    <Button variant='light' onPress={closeBackupModal}>
+                      {t('取消')}
+                    </Button>
+                    <Button
+                      color='primary'
+                      isPending={loading}
+                      isDisabled={!verificationCode}
+                      className='!bg-foreground/85 hover:!bg-foreground'
+                      onPress={handleRegenerateBackupCodes}
+                    >
+                      {t('生成新的备用码')}
+                    </Button>
+                  </>
+                )}
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
     </>
   );
diff --git a/web/src/components/settings/personal/components/UserInfoHeader.jsx b/web/src/components/settings/personal/components/UserInfoHeader.jsx
index 3209a17ee84..511e87c0f0d 100644
--- a/web/src/components/settings/personal/components/UserInfoHeader.jsx
+++ b/web/src/components/settings/personal/components/UserInfoHeader.jsx
@@ -18,201 +18,153 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import {
-  Avatar,
-  Card,
-  Tag,
-  Divider,
-  Typography,
-  Badge,
-} from '@douyinfe/semi-ui';
+import { Card, Chip } from '@heroui/react';
 import {
   isRoot,
   isAdmin,
   renderQuota,
   stringToColor,
 } from '../../../../helpers';
-import { Coins, BarChart2, Users } from 'lucide-react';
+import { Coins, BarChart2, Users, Wallet } from 'lucide-react';
 
 const UserInfoHeader = ({ t, userState }) => {
-  const getUsername = () => {
-    if (userState.user) {
-      return userState.user.username;
-    } else {
-      return 'null';
-    }
+  // Map our color seed to a tailwind class for the avatar background.
+  const avatarColorClasses = {
+    amber: 'bg-amber-500',
+    blue: 'bg-blue-500',
+    cyan: 'bg-cyan-500',
+    green: 'bg-green-500',
+    grey: 'bg-muted',
+    indigo: 'bg-indigo-500',
+    'light-blue': 'bg-sky-500',
+    lime: 'bg-lime-500',
+    orange: 'bg-orange-500',
+    pink: 'bg-pink-500',
+    purple: 'bg-purple-500',
+    red: 'bg-red-500',
+    teal: 'bg-teal-500',
+    violet: 'bg-violet-500',
+    yellow: 'bg-yellow-500',
   };
 
+  const username = userState?.user?.username || 'null';
+
   const getAvatarText = () => {
-    const username = getUsername();
     if (username && username.length > 0) {
       return username.slice(0, 2).toUpperCase();
     }
     return 'NA';
   };
 
+  const roleLabel = isRoot()
+    ? t('超级管理员')
+    : isAdmin()
+      ? t('管理员')
+      : t('普通用户');
+  const avatarColorClass =
+    avatarColorClasses[stringToColor(username)] || 'bg-muted';
+
+  const StatItem = ({ icon, label, value }) => (
+    <div className='flex flex-col min-w-0 xl:flex-row xl:items-center xl:gap-2'>
+      <span className='flex items-center gap-1.5 text-xs text-muted xl:text-sm'>
+        <span className='text-muted'>{icon}</span>
+        <span className='truncate'>{label}</span>
+      </span>
+      <span className='text-sm font-semibold text-foreground truncate'>
+        {value}
+      </span>
+    </div>
+  );
+
   return (
-    <Card
-      className='!rounded-2xl overflow-hidden'
-      cover={
-        <div
-          className='relative h-32'
-          style={{
-            '--palette-primary-darkerChannel': '0 75 80',
-            backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
-            backgroundSize: 'cover',
-            backgroundPosition: 'center',
-            backgroundRepeat: 'no-repeat',
-          }}
-        >
-          {/* 用户信息内容 */}
-          <div className='relative z-10 h-full flex flex-col justify-end p-6'>
-            <div className='flex items-center'>
-              <div className='flex items-stretch gap-3 sm:gap-4 flex-1 min-w-0'>
-                <Avatar size='large' color={stringToColor(getUsername())}>
-                  {getAvatarText()}
-                </Avatar>
-                <div className='flex-1 min-w-0 flex flex-col justify-between'>
-                  <div
-                    className='text-3xl font-bold truncate'
-                    style={{ color: 'white' }}
-                  >
-                    {getUsername()}
-                  </div>
-                  <div className='flex flex-wrap items-center gap-2'>
-                    {isRoot() ? (
-                      <Tag
-                        size='large'
-                        shape='circle'
-                        style={{ color: 'white' }}
-                      >
-                        {t('超级管理员')}
-                      </Tag>
-                    ) : isAdmin() ? (
-                      <Tag
-                        size='large'
-                        shape='circle'
-                        style={{ color: 'white' }}
-                      >
-                        {t('管理员')}
-                      </Tag>
-                    ) : (
-                      <Tag
-                        size='large'
-                        shape='circle'
-                        style={{ color: 'white' }}
-                      >
-                        {t('普通用户')}
-                      </Tag>
-                    )}
-                    <Tag size='large' shape='circle' style={{ color: 'white' }}>
-                      ID: {userState?.user?.id}
-                    </Tag>
-                  </div>
-                </div>
-              </div>
+    <Card className='overflow-hidden rounded-2xl' shadow='none'>
+      {/* Cover header with avatar, username, role and id */}
+      <div
+        className='relative h-32'
+        style={{
+          '--palette-primary-darkerChannel': '0 75 80',
+          backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
+          backgroundSize: 'cover',
+          backgroundPosition: 'center',
+          backgroundRepeat: 'no-repeat',
+        }}
+      >
+        <div className='relative z-10 flex h-full items-end p-4 sm:p-6'>
+          <div className='flex min-w-0 flex-1 items-center gap-3 sm:gap-4'>
+            <div
+              className={`flex h-16 w-16 shrink-0 items-center justify-center rounded-full text-lg font-semibold text-white shadow-lg ${avatarColorClass}`}
+            >
+              {getAvatarText()}
             </div>
-          </div>
-        </div>
-      }
-    >
-      {/* 当前余额和桌面版统计信息 */}
-      <div className='flex items-start justify-between gap-6'>
-        {/* 当前余额显示 */}
-        <Badge count={t('当前余额')} position='rightTop' type='danger'>
-          <div className='text-2xl sm:text-3xl md:text-4xl font-bold tracking-wide'>
-            {renderQuota(userState?.user?.quota)}
-          </div>
-        </Badge>
-
-        {/* 桌面版统计信息（Semi UI 卡片） */}
-        <div className='hidden lg:block flex-shrink-0'>
-          <Card
-            size='small'
-            className='!rounded-xl'
-            bodyStyle={{ padding: '12px 16px' }}
-          >
-            <div className='flex items-center gap-4'>
-              <div className='flex items-center gap-2'>
-                <Coins size={16} />
-                <Typography.Text size='small' type='tertiary'>
-                  {t('历史消耗')}
-                </Typography.Text>
-                <Typography.Text size='small' type='tertiary' strong>
-                  {renderQuota(userState?.user?.used_quota)}
-                </Typography.Text>
+            <div className='flex min-w-0 flex-1 flex-col gap-1.5'>
+              <div className='truncate text-2xl sm:text-3xl font-bold text-white'>
+                {username}
               </div>
-              <Divider layout='vertical' />
-              <div className='flex items-center gap-2'>
-                <BarChart2 size={16} />
-                <Typography.Text size='small' type='tertiary'>
-                  {t('请求次数')}
-                </Typography.Text>
-                <Typography.Text size='small' type='tertiary' strong>
-                  {userState.user?.request_count || 0}
-                </Typography.Text>
-              </div>
-              <Divider layout='vertical' />
-              <div className='flex items-center gap-2'>
-                <Users size={16} />
-                <Typography.Text size='small' type='tertiary'>
-                  {t('用户分组')}
-                </Typography.Text>
-                <Typography.Text size='small' type='tertiary' strong>
-                  {userState?.user?.group || t('默认')}
-                </Typography.Text>
+              <div className='flex flex-wrap items-center gap-1.5'>
+                <Chip
+                  size='sm'
+                  variant='flat'
+                  className='!bg-white/20 !text-white backdrop-blur-sm'
+                >
+                  {roleLabel}
+                </Chip>
+                <Chip
+                  size='sm'
+                  variant='flat'
+                  className='!bg-white/20 !text-white backdrop-blur-sm'
+                >
+                  ID: {userState?.user?.id}
+                </Chip>
               </div>
             </div>
-          </Card>
+          </div>
         </div>
       </div>
 
-      {/* 移动端和中等屏幕统计信息卡片 */}
-      <div className='lg:hidden mt-2'>
-        <Card
-          size='small'
-          className='!rounded-xl'
-          bodyStyle={{ padding: '12px 16px' }}
-        >
-          <div className='space-y-3'>
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-2'>
-                <Coins size={16} />
-                <Typography.Text size='small' type='tertiary'>
-                  {t('历史消耗')}
-                </Typography.Text>
-              </div>
-              <Typography.Text size='small' type='tertiary' strong>
-                {renderQuota(userState?.user?.used_quota)}
-              </Typography.Text>
-            </div>
-            <Divider margin='8px' />
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-2'>
-                <BarChart2 size={16} />
-                <Typography.Text size='small' type='tertiary'>
-                  {t('请求次数')}
-                </Typography.Text>
-              </div>
-              <Typography.Text size='small' type='tertiary' strong>
-                {userState.user?.request_count || 0}
-              </Typography.Text>
-            </div>
-            <Divider margin='8px' />
-            <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-2'>
-                <Users size={16} />
-                <Typography.Text size='small' type='tertiary'>
-                  {t('用户分组')}
-                </Typography.Text>
-              </div>
-              <Typography.Text size='small' type='tertiary' strong>
-                {userState?.user?.group || t('默认')}
-              </Typography.Text>
+      <Card.Content className='p-4 sm:p-6'>
+        {/* Balance + stats row (stacks on small screens) */}
+        <div className='flex flex-col gap-4 xl:flex-row xl:items-center xl:justify-between'>
+          {/* Current balance */}
+          <div className='flex items-center gap-3'>
+            <span className='flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-primary'>
+              <Wallet size={18} />
+            </span>
+            <div className='flex flex-col'>
+              <span className='text-xs text-muted'>{t('当前余额')}</span>
+              <span className='text-2xl sm:text-3xl font-bold tracking-tight text-foreground'>
+                {renderQuota(userState?.user?.quota)}
+              </span>
             </div>
           </div>
-        </Card>
-      </div>
+
+          {/* Stats grid – three columns on tablet, inline pill on xl */}
+          <div className='grid grid-cols-3 gap-3 rounded-xl border border-border bg-surface-secondary/40 px-3 py-2.5 xl:flex xl:items-center xl:gap-4 xl:px-4'>
+            <StatItem
+              icon={<Coins size={16} />}
+              label={t('历史消耗')}
+              value={renderQuota(userState?.user?.used_quota)}
+            />
+            <span
+              className='hidden xl:block h-5 w-px bg-border'
+              aria-hidden
+            />
+            <StatItem
+              icon={<BarChart2 size={16} />}
+              label={t('请求次数')}
+              value={userState?.user?.request_count || 0}
+            />
+            <span
+              className='hidden xl:block h-5 w-px bg-border'
+              aria-hidden
+            />
+            <StatItem
+              icon={<Users size={16} />}
+              label={t('用户分组')}
+              value={userState?.user?.group || t('默认')}
+            />
+          </div>
+        </div>
+      </Card.Content>
     </Card>
   );
 };
diff --git a/web/src/components/settings/personal/modals/AccountDeleteModal.jsx b/web/src/components/settings/personal/modals/AccountDeleteModal.jsx
index b2bc40f6935..a2739b511cb 100644
--- a/web/src/components/settings/personal/modals/AccountDeleteModal.jsx
+++ b/web/src/components/settings/personal/modals/AccountDeleteModal.jsx
@@ -18,8 +18,19 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Banner, Input, Modal, Typography } from '@douyinfe/semi-ui';
-import { IconDelete, IconUser } from '@douyinfe/semi-icons';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { TriangleAlert, Trash2, User } from 'lucide-react';
 import Turnstile from 'react-turnstile';
 
 const AccountDeleteModal = ({
@@ -34,59 +45,82 @@ const AccountDeleteModal = ({
   turnstileSiteKey,
   setTurnstileToken,
 }) => {
+  const modalState = useOverlayState({
+    isOpen: showAccountDeleteModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowAccountDeleteModal(false);
+    },
+  });
+
   return (
-    <Modal
-      title={
-        <div className='flex items-center'>
-          <IconDelete className='mr-2 text-red-500' />
-          {t('删除账户确认')}
-        </div>
-      }
-      visible={showAccountDeleteModal}
-      onCancel={() => setShowAccountDeleteModal(false)}
-      onOk={deleteAccount}
-      size={'small'}
-      centered={true}
-      className='modern-modal'
-    >
-      <div className='space-y-4 py-4'>
-        <Banner
-          type='danger'
-          description={t('您正在删除自己的帐户，将清空所有数据且不可恢复')}
-          closeIcon={null}
-          className='!rounded-lg'
-        />
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='sm' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <Trash2 className='text-red-500' size={18} />
+                {t('删除账户确认')}
+              </div>
+            </ModalHeader>
+            <ModalBody className='space-y-4 py-4'>
+              <div className='flex gap-3 rounded-lg border border-danger/30 bg-danger/10 p-3 text-sm text-danger'>
+                <TriangleAlert className='mt-0.5 shrink-0' size={16} />
+                <span>{t('您正在删除自己的帐户，将清空所有数据且不可恢复')}</span>
+              </div>
 
-        <div>
-          <Typography.Text strong className='block mb-2 text-red-600'>
-            {t('请输入您的用户名以确认删除')}
-          </Typography.Text>
-          <Input
-            placeholder={t('输入你的账户名{{username}}以确认删除', {
-              username: ` ${userState?.user?.username} `,
-            })}
-            name='self_account_deletion_confirmation'
-            value={inputs.self_account_deletion_confirmation}
-            onChange={(value) =>
-              handleInputChange('self_account_deletion_confirmation', value)
-            }
-            size='large'
-            className='!rounded-lg'
-            prefix={<IconUser />}
-          />
-        </div>
+              <div>
+                <label className='mb-2 block text-sm font-semibold text-red-600'>
+                  {t('请输入您的用户名以确认删除')}
+                </label>
+                <div className='relative'>
+                  <User
+                    size={16}
+                    className='pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted'
+                  />
+                  <Input
+                    placeholder={t('输入你的账户名{{username}}以确认删除', {
+                      username: ` ${userState?.user?.username} `,
+                    })}
+                    name='self_account_deletion_confirmation'
+                    value={inputs.self_account_deletion_confirmation}
+                    onChange={(event) =>
+                      handleInputChange(
+                        'self_account_deletion_confirmation',
+                        event.target.value,
+                      )
+                    }
+                    size='lg'
+                    className='rounded-lg pl-9'
+                  />
+                </div>
+              </div>
 
-        {turnstileEnabled && (
-          <div className='flex justify-center'>
-            <Turnstile
-              sitekey={turnstileSiteKey}
-              onVerify={(token) => {
-                setTurnstileToken(token);
-              }}
-            />
-          </div>
-        )}
-      </div>
+              {turnstileEnabled && (
+                <div className='flex justify-center'>
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                </div>
+              )}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button
+                variant='ghost'
+                onPress={() => setShowAccountDeleteModal(false)}
+              >
+                {t('取消')}
+              </Button>
+              <Button variant='danger' onPress={deleteAccount}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/settings/personal/modals/ChangePasswordModal.jsx b/web/src/components/settings/personal/modals/ChangePasswordModal.jsx
index 4134a865ba8..ce5684e50de 100644
--- a/web/src/components/settings/personal/modals/ChangePasswordModal.jsx
+++ b/web/src/components/settings/personal/modals/ChangePasswordModal.jsx
@@ -18,8 +18,19 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Input, Modal, Typography } from '@douyinfe/semi-ui';
-import { IconLock } from '@douyinfe/semi-icons';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { LockKeyhole } from 'lucide-react';
 import Turnstile from 'react-turnstile';
 
 const ChangePasswordModal = ({
@@ -33,83 +44,89 @@ const ChangePasswordModal = ({
   turnstileSiteKey,
   setTurnstileToken,
 }) => {
-  return (
-    <Modal
-      title={
-        <div className='flex items-center'>
-          <IconLock className='mr-2 text-orange-500' />
-          {t('修改密码')}
-        </div>
-      }
-      visible={showChangePasswordModal}
-      onCancel={() => setShowChangePasswordModal(false)}
-      onOk={changePassword}
-      size={'small'}
-      centered={true}
-      className='modern-modal'
-    >
-      <div className='space-y-4 py-4'>
-        <div>
-          <Typography.Text strong className='block mb-2'>
-            {t('原密码')}
-          </Typography.Text>
-          <Input
-            name='original_password'
-            placeholder={t('请输入原密码')}
-            type='password'
-            value={inputs.original_password}
-            onChange={(value) => handleInputChange('original_password', value)}
-            size='large'
-            className='!rounded-lg'
-            prefix={<IconLock />}
-          />
-        </div>
+  const modalState = useOverlayState({
+    isOpen: showChangePasswordModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowChangePasswordModal(false);
+    },
+  });
 
-        <div>
-          <Typography.Text strong className='block mb-2'>
-            {t('新密码')}
-          </Typography.Text>
-          <Input
-            name='set_new_password'
-            placeholder={t('请输入新密码')}
-            type='password'
-            value={inputs.set_new_password}
-            onChange={(value) => handleInputChange('set_new_password', value)}
-            size='large'
-            className='!rounded-lg'
-            prefix={<IconLock />}
-          />
-        </div>
+  const renderPasswordInput = (name, label, placeholder) => (
+    <div>
+      <label className='mb-2 block text-sm font-semibold text-foreground'>
+        {label}
+      </label>
+      <div className='relative'>
+        <LockKeyhole
+          size={16}
+          className='pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted'
+        />
+        <Input
+          name={name}
+          placeholder={placeholder}
+          type='password'
+          value={inputs[name]}
+          onChange={(event) => handleInputChange(name, event.target.value)}
+          size='lg'
+          className='rounded-lg pl-9'
+        />
+      </div>
+    </div>
+  );
 
-        <div>
-          <Typography.Text strong className='block mb-2'>
-            {t('确认新密码')}
-          </Typography.Text>
-          <Input
-            name='set_new_password_confirmation'
-            placeholder={t('请再次输入新密码')}
-            type='password'
-            value={inputs.set_new_password_confirmation}
-            onChange={(value) =>
-              handleInputChange('set_new_password_confirmation', value)
-            }
-            size='large'
-            className='!rounded-lg'
-            prefix={<IconLock />}
-          />
-        </div>
+  return (
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='sm' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <LockKeyhole className='text-orange-500' size={18} />
+                {t('修改密码')}
+              </div>
+            </ModalHeader>
+            <ModalBody className='space-y-4 py-4'>
+              {renderPasswordInput(
+                'original_password',
+                t('原密码'),
+                t('请输入原密码'),
+              )}
+              {renderPasswordInput(
+                'set_new_password',
+                t('新密码'),
+                t('请输入新密码'),
+              )}
+              {renderPasswordInput(
+                'set_new_password_confirmation',
+                t('确认新密码'),
+                t('请再次输入新密码'),
+              )}
 
-        {turnstileEnabled && (
-          <div className='flex justify-center'>
-            <Turnstile
-              sitekey={turnstileSiteKey}
-              onVerify={(token) => {
-                setTurnstileToken(token);
-              }}
-            />
-          </div>
-        )}
-      </div>
+              {turnstileEnabled && (
+                <div className='flex justify-center'>
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                </div>
+              )}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button
+                variant='ghost'
+                onPress={() => setShowChangePasswordModal(false)}
+              >
+                {t('取消')}
+              </Button>
+              <Button variant='primary' onPress={changePassword}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/settings/personal/modals/EmailBindModal.jsx b/web/src/components/settings/personal/modals/EmailBindModal.jsx
index 1cd1c735d1a..a0e21b49650 100644
--- a/web/src/components/settings/personal/modals/EmailBindModal.jsx
+++ b/web/src/components/settings/personal/modals/EmailBindModal.jsx
@@ -18,8 +18,19 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Input, Modal } from '@douyinfe/semi-ui';
-import { IconMail, IconKey } from '@douyinfe/semi-icons';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { KeyRound, Mail } from 'lucide-react';
 import Turnstile from 'react-turnstile';
 
 const EmailBindModal = ({
@@ -37,70 +48,102 @@ const EmailBindModal = ({
   turnstileSiteKey,
   setTurnstileToken,
 }) => {
+  const modalState = useOverlayState({
+    isOpen: showEmailBindModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowEmailBindModal(false);
+    },
+  });
+
   return (
-    <Modal
-      title={
-        <div className='flex items-center'>
-          <IconMail className='mr-2 text-blue-500' />
-          {t('绑定邮箱地址')}
-        </div>
-      }
-      visible={showEmailBindModal}
-      onCancel={() => setShowEmailBindModal(false)}
-      onOk={bindEmail}
-      size={'small'}
-      centered={true}
-      maskClosable={false}
-      className='modern-modal'
-    >
-      <div className='space-y-4 py-4'>
-        <div className='flex gap-3'>
-          <Input
-            placeholder={t('输入邮箱地址')}
-            onChange={(value) => handleInputChange('email', value)}
-            name='email'
-            type='email'
-            size='large'
-            className='!rounded-lg flex-1'
-            prefix={<IconMail />}
-          />
-          <Button
-            onClick={sendVerificationCode}
-            disabled={disableButton || loading}
-            className='!rounded-lg'
-            type='primary'
-            theme='outline'
-            size='large'
-          >
-            {disableButton
-              ? `${t('重新发送')} (${countdown})`
-              : t('获取验证码')}
-          </Button>
-        </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur' isDismissable={false}>
+        <ModalContainer size='sm' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <Mail className='text-blue-500' size={18} />
+                {t('绑定邮箱地址')}
+              </div>
+            </ModalHeader>
+            <ModalBody className='space-y-4 py-4'>
+              <div className='flex gap-3'>
+                <div className='relative flex-1'>
+                  <Mail
+                    size={16}
+                    className='pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted'
+                  />
+                  <Input
+                    placeholder={t('输入邮箱地址')}
+                    value={inputs.email}
+                    onChange={(event) =>
+                      handleInputChange('email', event.target.value)
+                    }
+                    name='email'
+                    type='email'
+                    size='lg'
+                    className='rounded-lg pl-9'
+                  />
+                </div>
+                <Button
+                  onPress={sendVerificationCode}
+                  isDisabled={disableButton || loading}
+                  isPending={loading}
+                  className='rounded-lg'
+                  variant='outline'
+                  size='lg'
+                >
+                  {disableButton
+                    ? `${t('重新发送')} (${countdown})`
+                    : t('获取验证码')}
+                </Button>
+              </div>
 
-        <Input
-          placeholder={t('验证码')}
-          name='email_verification_code'
-          value={inputs.email_verification_code}
-          onChange={(value) =>
-            handleInputChange('email_verification_code', value)
-          }
-          size='large'
-          className='!rounded-lg'
-          prefix={<IconKey />}
-        />
+              <div className='relative'>
+                <KeyRound
+                  size={16}
+                  className='pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted'
+                />
+                <Input
+                  placeholder={t('验证码')}
+                  name='email_verification_code'
+                  value={inputs.email_verification_code}
+                  onChange={(event) =>
+                    handleInputChange(
+                      'email_verification_code',
+                      event.target.value,
+                    )
+                  }
+                  size='lg'
+                  className='rounded-lg pl-9'
+                />
+              </div>
 
-        {turnstileEnabled && (
-          <div className='flex justify-center'>
-            <Turnstile
-              sitekey={turnstileSiteKey}
-              onVerify={(token) => {
-                setTurnstileToken(token);
-              }}
-            />
-          </div>
-        )}
-      </div>
+              {turnstileEnabled && (
+                <div className='flex justify-center'>
+                  <Turnstile
+                    sitekey={turnstileSiteKey}
+                    onVerify={(token) => {
+                      setTurnstileToken(token);
+                    }}
+                  />
+                </div>
+              )}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button
+                variant='ghost'
+                onPress={() => setShowEmailBindModal(false)}
+              >
+                {t('取消')}
+              </Button>
+              <Button variant='primary' onPress={bindEmail} isPending={loading}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/settings/personal/modals/WeChatBindModal.jsx b/web/src/components/settings/personal/modals/WeChatBindModal.jsx
index 1bdb5df417f..3364c5f51e3 100644
--- a/web/src/components/settings/personal/modals/WeChatBindModal.jsx
+++ b/web/src/components/settings/personal/modals/WeChatBindModal.jsx
@@ -18,8 +18,18 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Input, Modal, Image } from '@douyinfe/semi-ui';
-import { IconKey } from '@douyinfe/semi-icons';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { KeyRound } from 'lucide-react';
 import { SiWechat } from 'react-icons/si';
 
 const WeChatBindModal = ({
@@ -31,48 +41,67 @@ const WeChatBindModal = ({
   bindWeChat,
   status,
 }) => {
+  const modalState = useOverlayState({
+    isOpen: showWeChatBindModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowWeChatBindModal(false);
+    },
+  });
+
   return (
-    <Modal
-      title={
-        <div className='flex items-center'>
-          <SiWechat className='mr-2 text-green-500' size={20} />
-          {t('绑定微信账户')}
-        </div>
-      }
-      visible={showWeChatBindModal}
-      onCancel={() => setShowWeChatBindModal(false)}
-      footer={null}
-      size={'small'}
-      centered={true}
-      className='modern-modal'
-    >
-      <div className='space-y-4 py-4 text-center'>
-        <Image src={status.wechat_qrcode} className='mx-auto' />
-        <div className='text-gray-600'>
-          <p>
-            {t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}
-          </p>
-        </div>
-        <Input
-          placeholder={t('验证码')}
-          name='wechat_verification_code'
-          value={inputs.wechat_verification_code}
-          onChange={(v) => handleInputChange('wechat_verification_code', v)}
-          size='large'
-          className='!rounded-lg'
-          prefix={<IconKey />}
-        />
-        <Button
-          type='primary'
-          theme='solid'
-          size='large'
-          onClick={bindWeChat}
-          className='!rounded-lg w-full !bg-slate-600 hover:!bg-slate-700'
-          icon={<SiWechat size={16} />}
-        >
-          {t('绑定')}
-        </Button>
-      </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='sm' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <SiWechat className='text-green-500' size={20} />
+                {t('绑定微信账户')}
+              </div>
+            </ModalHeader>
+            <ModalBody className='space-y-4 py-4 text-center'>
+              <img
+                src={status.wechat_qrcode}
+                alt={t('微信二维码')}
+                className='mx-auto max-h-52 rounded-lg'
+              />
+              <div className='text-foreground'>
+                <p>
+                  {t('微信扫码关注公众号，输入「验证码」获取验证码（三分钟内有效）')}
+                </p>
+              </div>
+              <div className='relative'>
+                <KeyRound
+                  size={16}
+                  className='pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted'
+                />
+                <Input
+                  placeholder={t('验证码')}
+                  name='wechat_verification_code'
+                  value={inputs.wechat_verification_code}
+                  onChange={(event) =>
+                    handleInputChange(
+                      'wechat_verification_code',
+                      event.target.value,
+                    )
+                  }
+                  size='lg'
+                  className='rounded-lg pl-9'
+                />
+              </div>
+              <Button
+                variant='primary'
+                size='lg'
+                onPress={bindWeChat}
+                className='w-full rounded-lg bg-foreground hover:bg-foreground/90'
+              >
+                <SiWechat size={16} />
+                {t('绑定')}
+              </Button>
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/setup/SetupWizard.jsx b/web/src/components/setup/SetupWizard.jsx
index 0d500fdd8fc..18143d8fc05 100644
--- a/web/src/components/setup/SetupWizard.jsx
+++ b/web/src/components/setup/SetupWizard.jsx
@@ -17,8 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Card, Divider, Steps, Form } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Card } from '@heroui/react';
+import { CheckCircle2, Database, KeyRound, Settings2 } from 'lucide-react';
 import { API, showError, showNotice } from '../../helpers';
 import { useTranslation } from 'react-i18next';
 
@@ -37,7 +38,6 @@ const SetupWizard = () => {
     database_type: '',
   });
   const [currentStep, setCurrentStep] = useState(0);
-  const formRef = useRef(null);
 
   const [formData, setFormData] = useState({
     username: '',
@@ -46,30 +46,27 @@ const SetupWizard = () => {
     usageMode: 'external',
   });
 
-  // 确保默认选中“对外运营模式”，并同步到表单
-  useEffect(() => {
-    if (formRef.current) {
-      formRef.current.setValue('usageMode', 'external');
-    }
-  }, []);
-
   // 定义步骤内容
   const steps = [
     {
       title: t('数据库检查'),
       description: t('验证数据库连接状态'),
+      icon: Database,
     },
     {
       title: t('管理员账号'),
       description: t('设置管理员登录信息'),
+      icon: KeyRound,
     },
     {
       title: t('使用模式'),
       description: t('选择系统运行模式'),
+      icon: Settings2,
     },
     {
       title: t('完成初始化'),
       description: t('确认设置并完成初始化'),
+      icon: CheckCircle2,
     },
   ];
 
@@ -104,10 +101,6 @@ const SetupWizard = () => {
   const handleUsageModeChange = (e) => {
     const nextMode = e?.target?.value ?? e;
     setFormData((prev) => ({ ...prev, usageMode: nextMode }));
-    // 同步到表单，便于 getValues() 拿到 usageMode
-    if (formRef.current) {
-      formRef.current.setValue('usageMode', nextMode);
-    }
   };
 
   const next = () => {
@@ -164,35 +157,27 @@ const SetupWizard = () => {
   };
 
   const onSubmit = () => {
-    if (!formRef.current) {
-      console.error('Form reference is null');
-      showError(t('表单引用错误，请刷新页面重试'));
-      return;
-    }
-
-    const values = formRef.current.getValues();
-
     // For root_init=false, validate admin username and password
     if (!setupStatus.root_init) {
-      if (!values.username || !values.username.trim()) {
+      if (!formData.username || !formData.username.trim()) {
         showError(t('请输入管理员用户名'));
         return;
       }
 
-      if (!values.password || values.password.length < 8) {
+      if (!formData.password || formData.password.length < 8) {
         showError(t('密码长度至少为8个字符'));
         return;
       }
 
-      if (values.password !== values.confirmPassword) {
+      if (formData.password !== formData.confirmPassword) {
         showError(t('两次输入的密码不一致'));
         return;
       }
     }
 
     // Prepare submission data
-    const formValues = { ...values };
-    const usageMode = values.usageMode;
+    const formValues = { ...formData };
+    const usageMode = formData.usageMode;
     formValues.SelfUseModeEnabled = usageMode === 'self';
     formValues.DemoSiteEnabled = usageMode === 'demo';
 
@@ -237,7 +222,6 @@ const SetupWizard = () => {
             setupStatus={setupStatus}
             formData={formData}
             setFormData={setFormData}
-            formRef={formRef}
             t={t}
           />
         );
@@ -269,59 +253,23 @@ const SetupWizard = () => {
   };
 
   return (
-    <div className='min-h-screen flex items-center justify-center px-4'>
-      <div className='w-full max-w-4xl'>
-        <Card className='!rounded-2xl shadow-sm border-0'>
-          <div className='mb-4'>
-            <div className='text-xl font-semibold'>{t('系统初始化')}</div>
-            <div className='text-xs text-gray-600'>
-              {t('欢迎使用，请完成以下设置以开始使用系统')}
-            </div>
-          </div>
-
-          <div className='px-2 py-2'>
-            <Steps type='basic' current={currentStep}>
-              {steps.map((item, index) => (
-                <Steps.Step
-                  key={item.title}
-                  title={
-                    <span className={currentStep === index ? 'shine-text' : ''}>
-                      {item.title}
-                    </span>
-                  }
-                  description={item.description}
-                />
-              ))}
-            </Steps>
-          </div>
-
-          <Divider margin='12px' />
+    <div className='relative min-h-screen overflow-hidden bg-[radial-gradient(circle_at_top_left,rgba(14,165,233,0.18),transparent_28%),radial-gradient(circle_at_bottom_right,rgba(16,185,129,0.14),transparent_28%),var(--app-background)] px-4 pb-16 pt-28 sm:px-6'>
+      <div className='pointer-events-none absolute left-[-120px] top-20 h-72 w-72 rounded-full bg-sky-400/10 blur-3xl' />
+      <div className='pointer-events-none absolute bottom-[-120px] right-[-80px] h-80 w-80 rounded-full bg-emerald-400/10 blur-3xl' />
 
-          {/* 表单容器 */}
-          <Form
-            getFormApi={(formApi) => {
-              formRef.current = formApi;
-            }}
-            initValues={formData}
-          >
-            {/* 步骤内容：保持所有字段挂载，仅隐藏非当前步骤 */}
+      <div className='relative mx-auto flex min-h-[calc(100vh-11rem)] w-full max-w-4xl items-center'>
+        <div className='min-w-0 w-full'>
+          <Card className='rounded-[2rem] border border-border bg-background/88 p-5 shadow-[0_28px_90px_rgba(15,23,42,0.16)] backdrop-blur-xl sm:p-8'>
             <div className='steps-content'>
-              {[0, 1, 2, 3].map((idx) => (
-                <div
-                  key={idx}
-                  style={{ display: currentStep === idx ? 'block' : 'none' }}
-                >
-                  {React.cloneElement(getStepContent(idx), {
-                    ...stepNavigationProps,
-                    renderNavigationButtons: () => (
-                      <StepNavigation {...stepNavigationProps} />
-                    ),
-                  })}
-                </div>
-              ))}
+              {React.cloneElement(getStepContent(currentStep), {
+                ...stepNavigationProps,
+                renderNavigationButtons: () => (
+                  <StepNavigation {...stepNavigationProps} />
+                ),
+              })}
             </div>
-          </Form>
-        </Card>
+          </Card>
+        </div>
       </div>
     </div>
   );
diff --git a/web/src/components/setup/components/StepNavigation.jsx b/web/src/components/setup/components/StepNavigation.jsx
index 0877a97545b..312b80aa008 100644
--- a/web/src/components/setup/components/StepNavigation.jsx
+++ b/web/src/components/setup/components/StepNavigation.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
-import { IconCheckCircleStroked } from '@douyinfe/semi-icons';
+import { Button } from '@heroui/react';
+import { ArrowLeft, ArrowRight, CheckCircle2 } from 'lucide-react';
 
 /**
  * 步骤导航组件
@@ -35,32 +35,42 @@ const StepNavigation = ({
   t,
 }) => {
   return (
-    <div className='flex justify-between items-center pt-4'>
+    <div className='mt-8 flex flex-col-reverse gap-3 border-t border-border pt-5 sm:flex-row sm:items-center sm:justify-between'>
       {/* 上一步按钮 */}
       {currentStep > 0 && (
-        <Button onClick={prev} className='!rounded-lg'>
+        <Button
+          variant='outline'
+          className='h-11 rounded-full px-5'
+          onPress={prev}
+        >
+          <ArrowLeft size={16} />
           {t('上一步')}
         </Button>
       )}
 
-      <div className='flex-1'></div>
+      {currentStep === 0 ? <div className='hidden sm:block' /> : null}
 
       {/* 下一步按钮 */}
       {currentStep < steps.length - 1 && (
-        <Button type='primary' onClick={next} className='!rounded-lg'>
+        <Button
+          variant='primary'
+          className='h-11 rounded-full px-6'
+          onPress={next}
+        >
           {t('下一步')}
+          <ArrowRight size={16} />
         </Button>
       )}
 
       {/* 完成按钮 */}
       {currentStep === steps.length - 1 && (
         <Button
-          type='primary'
-          onClick={onSubmit}
-          loading={loading}
-          className='!rounded-lg'
-          icon={<IconCheckCircleStroked />}
+          variant='primary'
+          onPress={onSubmit}
+          isPending={loading}
+          className='h-11 rounded-full px-6'
         >
+          <CheckCircle2 size={16} />
           {t('初始化系统')}
         </Button>
       )}
diff --git a/web/src/components/setup/components/steps/AdminStep.jsx b/web/src/components/setup/components/steps/AdminStep.jsx
index 662196cfedc..e24a225aa36 100644
--- a/web/src/components/setup/components/steps/AdminStep.jsx
+++ b/web/src/components/setup/components/steps/AdminStep.jsx
@@ -18,8 +18,53 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Banner, Form } from '@douyinfe/semi-ui';
-import { IconUser, IconLock } from '@douyinfe/semi-icons';
+import { Card, Chip, Input } from '@heroui/react';
+import { CheckCircle2, KeyRound, Lock, ShieldCheck, UserRound } from 'lucide-react';
+
+function SetupInput({
+  label,
+  icon,
+  value,
+  onValueChange,
+  placeholder,
+  type = 'text',
+  helper,
+  autoComplete,
+}) {
+  const handleValueChange = (eventOrValue) => {
+    onValueChange(
+      eventOrValue?.target ? eventOrValue.target.value : eventOrValue,
+    );
+  };
+
+  return (
+    <label className='block'>
+      <span className='mb-2 block text-sm font-medium text-foreground'>
+        {label}
+      </span>
+      <div className='relative'>
+        <span className='pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted'>
+          {icon}
+        </span>
+        <Input
+          fullWidth
+          type={type}
+          value={value}
+          placeholder={placeholder}
+          autoComplete={autoComplete}
+          onValueChange={handleValueChange}
+          onChange={handleValueChange}
+          className='h-12 rounded-2xl border border-border bg-background/85 pl-10 text-foreground shadow-sm outline-none transition focus:border-primary focus:ring-4 focus:ring-primary/10'
+        />
+      </div>
+      {helper ? (
+        <span className='mt-2 block text-xs leading-5 text-muted'>
+          {helper}
+        </span>
+      ) : null}
+    </label>
+  );
+}
 
 /**
  * 管理员账号设置步骤组件
@@ -29,88 +74,102 @@ const AdminStep = ({
   setupStatus,
   formData,
   setFormData,
-  formRef,
   renderNavigationButtons,
   t,
 }) => {
+  const updateField = (field) => (value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
+  const passwordReady = formData.password.length >= 8;
+  const passwordMatched =
+    formData.confirmPassword && formData.password === formData.confirmPassword;
+
   return (
     <>
       {setupStatus.root_init ? (
-        <Banner
-          type='info'
-          closeIcon={null}
-          description={
-            <div className='flex items-center'>
-              <span>{t('管理员账号已经初始化过，请继续设置其他参数')}</span>
+        <Card className='rounded-3xl border border-sky-200 bg-sky-50/80 p-5 dark:border-sky-900/60 dark:bg-sky-950/30'>
+          <div className='flex items-start gap-4'>
+            <div className='flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-sky-500 text-white'>
+              <ShieldCheck size={24} />
             </div>
-          }
-          className='!rounded-lg'
-        />
+            <div>
+              <h3 className='text-lg font-semibold text-foreground'>
+                {t('管理员账号')}
+              </h3>
+              <p className='mt-2 text-sm leading-6 text-foreground'>
+                {t('管理员账号已经初始化过，请继续设置其他参数')}
+              </p>
+            </div>
+          </div>
+        </Card>
       ) : (
-        <>
-          <Form.Input
-            field='username'
-            label={t('用户名')}
-            placeholder={t('请输入管理员用户名')}
-            prefix={<IconUser />}
-            showClear
-            noLabel={false}
-            validateStatus='default'
-            rules={[{ required: true, message: t('请输入管理员用户名') }]}
-            initValue={formData.username || ''}
-            onChange={(value) => {
-              setFormData({ ...formData, username: value });
-            }}
-          />
-          <Form.Input
-            field='password'
-            label={t('密码')}
-            placeholder={t('请输入管理员密码')}
-            type='password'
-            prefix={<IconLock />}
-            showClear
-            noLabel={false}
-            mode='password'
-            validateStatus='default'
-            rules={[
-              { required: true, message: t('请输入管理员密码') },
-              { min: 8, message: t('密码长度至少为8个字符') },
-            ]}
-            initValue={formData.password || ''}
-            onChange={(value) => {
-              setFormData({ ...formData, password: value });
-            }}
-          />
-          <Form.Input
-            field='confirmPassword'
-            label={t('确认密码')}
-            placeholder={t('请确认管理员密码')}
-            type='password'
-            prefix={<IconLock />}
-            showClear
-            noLabel={false}
-            mode='password'
-            validateStatus='default'
-            rules={[
-              { required: true, message: t('请确认管理员密码') },
-              {
-                validator: (rule, value) => {
-                  if (value && formRef.current) {
-                    const password = formRef.current.getValue('password');
-                    if (value !== password) {
-                      return Promise.reject(t('两次输入的密码不一致'));
-                    }
-                  }
-                  return Promise.resolve();
-                },
-              },
-            ]}
-            initValue={formData.confirmPassword || ''}
-            onChange={(value) => {
-              setFormData({ ...formData, confirmPassword: value });
-            }}
-          />
-        </>
+        <div className='grid gap-5 lg:grid-cols-[minmax(0,1fr)_280px]'>
+          <div className='space-y-4'>
+            <SetupInput
+              label={t('用户名')}
+              placeholder={t('请输入管理员用户名')}
+              value={formData.username}
+              onValueChange={updateField('username')}
+              autoComplete='username'
+              icon={<UserRound size={18} />}
+            />
+            <SetupInput
+              label={t('密码')}
+              placeholder={t('请输入管理员密码')}
+              value={formData.password}
+              onValueChange={updateField('password')}
+              type='password'
+              autoComplete='new-password'
+              icon={<Lock size={18} />}
+              helper={t('密码长度至少为8个字符')}
+            />
+            <SetupInput
+              label={t('确认密码')}
+              placeholder={t('请确认管理员密码')}
+              value={formData.confirmPassword}
+              onValueChange={updateField('confirmPassword')}
+              type='password'
+              autoComplete='new-password'
+              icon={<KeyRound size={18} />}
+            />
+          </div>
+
+          <Card className='rounded-3xl border border-border bg-surface-secondary/80 p-5'>
+            <div className='mb-4 flex h-11 w-11 items-center justify-center rounded-2xl bg-background text-muted shadow-sm'>
+              <ShieldCheck size={22} />
+            </div>
+            <h3 className='text-sm font-semibold text-foreground'>
+              {t('安全检查')}
+            </h3>
+            <div className='mt-4 space-y-3'>
+              <Chip
+                variant='flat'
+                color={formData.username ? 'success' : 'default'}
+                className='w-fit'
+              >
+                <CheckCircle2 size={14} />
+                {t('用户名')}
+              </Chip>
+              <Chip
+                variant='flat'
+                color={passwordReady ? 'success' : 'warning'}
+                className='w-fit'
+              >
+                <CheckCircle2 size={14} />
+                {t('至少8位密码')}
+              </Chip>
+              <Chip
+                variant='flat'
+                color={passwordMatched ? 'success' : 'default'}
+                className='w-fit'
+              >
+                <CheckCircle2 size={14} />
+                {t('两次密码一致')}
+              </Chip>
+            </div>
+          </Card>
+        </div>
       )}
       {renderNavigationButtons && renderNavigationButtons()}
     </>
diff --git a/web/src/components/setup/components/steps/CompleteStep.jsx b/web/src/components/setup/components/steps/CompleteStep.jsx
index 5f3265ac863..0950779ed82 100644
--- a/web/src/components/setup/components/steps/CompleteStep.jsx
+++ b/web/src/components/setup/components/steps/CompleteStep.jsx
@@ -18,10 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Avatar, Typography, Descriptions } from '@douyinfe/semi-ui';
-import { CheckCircle } from 'lucide-react';
-
-const { Text, Title } = Typography;
+import { Card, Chip } from '@heroui/react';
+import { CheckCircle2, Database, KeyRound, Rocket, Settings2 } from 'lucide-react';
 
 /**
  * 完成步骤组件
@@ -33,39 +31,78 @@ const CompleteStep = ({
   renderNavigationButtons,
   t,
 }) => {
+  const summaryItems = [
+    {
+      label: t('数据库类型'),
+      icon: Database,
+      value:
+        setupStatus.database_type === 'sqlite'
+          ? 'SQLite'
+          : setupStatus.database_type === 'mysql'
+            ? 'MySQL'
+            : 'PostgreSQL',
+    },
+    {
+      label: t('管理员账号'),
+      icon: KeyRound,
+      value: setupStatus.root_init
+        ? t('已初始化')
+        : formData.username || t('未设置'),
+    },
+    {
+      label: t('使用模式'),
+      icon: Settings2,
+      value:
+        formData.usageMode === 'external'
+          ? t('对外运营模式')
+          : formData.usageMode === 'self'
+            ? t('自用模式')
+            : t('演示站点模式'),
+    },
+  ];
+
   return (
-    <div className='text-center'>
-      <Avatar color='green' className='mx-auto mb-4 shadow-lg'>
-        <CheckCircle size={24} />
-      </Avatar>
-      <Title heading={3} className='mb-2'>
-        {t('准备完成初始化')}
-      </Title>
-      <Text type='secondary' className='mb-6 block'>
-        {t('请确认以下设置信息，点击"初始化系统"开始配置')}
-      </Text>
+    <div>
+      <Card className='mb-5 overflow-hidden rounded-3xl border border-emerald-200 bg-[linear-gradient(135deg,rgba(16,185,129,0.14),rgba(14,165,233,0.10))] p-5 dark:border-emerald-900/60'>
+        <div className='flex flex-col gap-4 sm:flex-row sm:items-center'>
+          <div className='flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-emerald-500 text-white shadow-lg shadow-emerald-500/25'>
+            <Rocket size={26} />
+          </div>
+          <div className='min-w-0'>
+            <Chip variant='flat' color='success' className='mb-3 w-fit'>
+              <CheckCircle2 size={14} />
+              {t('准备就绪')}
+            </Chip>
+            <h3 className='text-2xl font-semibold tracking-tight text-foreground'>
+              {t('准备完成初始化')}
+            </h3>
+            <p className='mt-2 text-sm leading-6 text-foreground'>
+              {t('请确认以下设置信息，点击"初始化系统"开始配置')}
+            </p>
+          </div>
+        </div>
+      </Card>
+
+      <div className='grid grid-cols-1 gap-3 text-left sm:grid-cols-3'>
+        {summaryItems.map((item) => {
+          const Icon = item.icon;
 
-      <Descriptions>
-        <Descriptions.Item itemKey={t('数据库类型')}>
-          {setupStatus.database_type === 'sqlite'
-            ? 'SQLite'
-            : setupStatus.database_type === 'mysql'
-              ? 'MySQL'
-              : 'PostgreSQL'}
-        </Descriptions.Item>
-        <Descriptions.Item itemKey={t('管理员账号')}>
-          {setupStatus.root_init
-            ? t('已初始化')
-            : formData.username || t('未设置')}
-        </Descriptions.Item>
-        <Descriptions.Item itemKey={t('使用模式')}>
-          {formData.usageMode === 'external'
-            ? t('对外运营模式')
-            : formData.usageMode === 'self'
-              ? t('自用模式')
-              : t('演示站点模式')}
-        </Descriptions.Item>
-      </Descriptions>
+          return (
+          <Card
+            key={item.label}
+            className='rounded-3xl border border-border bg-background/80 p-4'
+          >
+            <div className='mb-3 flex h-10 w-10 items-center justify-center rounded-2xl bg-surface-secondary text-muted'>
+              <Icon size={20} />
+            </div>
+            <div className='text-xs text-muted'>{item.label}</div>
+            <div className='mt-1 text-sm font-semibold text-foreground'>
+              {item.value}
+            </div>
+          </Card>
+          );
+        })}
+      </div>
 
       {renderNavigationButtons && renderNavigationButtons()}
     </div>
diff --git a/web/src/components/setup/components/steps/DatabaseStep.jsx b/web/src/components/setup/components/steps/DatabaseStep.jsx
index d8d1d4f9f5a..36c607ce007 100644
--- a/web/src/components/setup/components/steps/DatabaseStep.jsx
+++ b/web/src/components/setup/components/steps/DatabaseStep.jsx
@@ -18,7 +18,32 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Banner } from '@douyinfe/semi-ui';
+import { Card, Chip } from '@heroui/react';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Database,
+  HardDrive,
+  Info,
+} from 'lucide-react';
+
+const databaseCopy = {
+  sqlite: {
+    label: 'SQLite',
+    tone: 'warning',
+    icon: AlertTriangle,
+  },
+  mysql: {
+    label: 'MySQL',
+    tone: 'success',
+    icon: CheckCircle2,
+  },
+  postgres: {
+    label: 'PostgreSQL',
+    tone: 'success',
+    icon: CheckCircle2,
+  },
+};
 
 /**
  * 数据库检查步骤组件
@@ -28,100 +53,105 @@ const DatabaseStep = ({ setupStatus, renderNavigationButtons, t }) => {
   // 检测是否在 Electron 环境中运行
   const isElectron =
     typeof window !== 'undefined' && window.electron?.isElectron;
+  const databaseType = setupStatus.database_type || 'sqlite';
+  const meta = databaseCopy[databaseType] || databaseCopy.sqlite;
+  const StatusIcon = isElectron && databaseType === 'sqlite' ? HardDrive : meta.icon;
+  const isWarning = databaseType === 'sqlite' && !isElectron;
 
   return (
     <>
-      {/* 数据库警告 */}
-      {setupStatus.database_type === 'sqlite' && (
-        <Banner
-          type={isElectron ? 'info' : 'warning'}
-          closeIcon={null}
-          title={isElectron ? t('本地数据存储') : t('数据库警告')}
-          description={
-            isElectron ? (
-              <div>
-                <p>
-                  {t(
-                    '您的数据将安全地存储在本地计算机上。所有配置、用户信息和使用记录都会自动保存，关闭应用后不会丢失。',
-                  )}
-                </p>
-                {window.electron?.dataDir && (
-                  <p className='mt-2 text-sm opacity-80'>
-                    <strong>{t('数据存储位置：')}</strong>
-                    <br />
-                    <code className='bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded'>
-                      {window.electron.dataDir}
-                    </code>
-                  </p>
-                )}
-                <p className='mt-2 text-sm opacity-70'>
-                  💡 {t('提示：如需备份数据，只需复制上述目录即可')}
-                </p>
+      <div className='grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]'>
+        <Card className={`rounded-3xl p-5 ${
+          isWarning
+            ? 'border border-amber-200 bg-amber-50/80 dark:border-amber-900/60 dark:bg-amber-950/30'
+            : 'border border-emerald-200 bg-emerald-50/80 dark:border-emerald-900/60 dark:bg-emerald-950/30'
+        }`}>
+          <div className='flex items-start gap-4'>
+            <div className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl ${
+              isWarning
+                ? 'bg-amber-500 text-white'
+                : 'bg-emerald-500 text-white'
+            }`}>
+              <StatusIcon size={24} />
+            </div>
+            <div className='min-w-0'>
+              <div className='mb-2 flex flex-wrap items-center gap-2'>
+                <h3 className='text-lg font-semibold text-foreground'>
+                  {isElectron ? t('本地数据存储') : isWarning ? t('数据库警告') : t('数据库信息')}
+                </h3>
+                <Chip
+                  variant='flat'
+                  color={isWarning ? 'warning' : 'success'}
+                  className='w-fit'
+                >
+                  {meta.label}
+                </Chip>
               </div>
-            ) : (
-              <div>
-                <p>
-                  {t(
-                    '您正在使用 SQLite 数据库。如果您在容器环境中运行，请确保已正确设置数据库文件的持久化映射，否则容器重启后所有数据将丢失！',
-                  )}
-                </p>
-                <p className='mt-1'>
-                  <strong>
-                    {t(
-                      '建议在生产环境中使用 MySQL 或 PostgreSQL 数据库，或确保 SQLite 数据库文件已映射到宿主机的持久化存储。',
+
+              {databaseType === 'sqlite' ? (
+                isElectron ? (
+                  <div className='space-y-3 text-sm leading-6 text-foreground'>
+                    <p>
+                      {t(
+                        '您的数据将安全地存储在本地计算机上。所有配置、用户信息和使用记录都会自动保存，关闭应用后不会丢失。',
+                      )}
+                    </p>
+                    {window.electron?.dataDir && (
+                      <div className='rounded-2xl bg-background/70 p-3'>
+                        <div className='mb-1 text-xs font-medium text-muted'>
+                          {t('数据存储位置：')}
+                        </div>
+                        <code className='break-all text-xs text-foreground'>
+                          {window.electron.dataDir}
+                        </code>
+                      </div>
+                    )}
+                    <p className='text-muted'>
+                      {t('提示：如需备份数据，只需复制上述目录即可')}
+                    </p>
+                  </div>
+                ) : (
+                  <div className='space-y-3 text-sm leading-6 text-amber-900 dark:text-amber-100'>
+                    <p>
+                      {t(
+                        '您正在使用 SQLite 数据库。如果您在容器环境中运行，请确保已正确设置数据库文件的持久化映射，否则容器重启后所有数据将丢失！',
+                      )}
+                    </p>
+                    <p className='font-medium'>
+                      {t(
+                        '建议在生产环境中使用 MySQL 或 PostgreSQL 数据库，或确保 SQLite 数据库文件已映射到宿主机的持久化存储。',
+                      )}
+                    </p>
+                  </div>
+                )
+              ) : (
+                <p className='text-sm leading-6 text-foreground'>
+                  {databaseType === 'mysql'
+                    ? t(
+                      '您正在使用 MySQL 数据库。MySQL 是一个可靠的关系型数据库管理系统，适合生产环境使用。',
+                    )
+                    : t(
+                      '您正在使用 PostgreSQL 数据库。PostgreSQL 是一个功能强大的开源关系型数据库系统，提供了出色的可靠性和数据完整性，适合生产环境使用。',
                     )}
-                  </strong>
                 </p>
-              </div>
-            )
-          }
-          className='!rounded-lg'
-          fullMode={false}
-          bordered
-        />
-      )}
-
-      {/* MySQL数据库提示 */}
-      {setupStatus.database_type === 'mysql' && (
-        <Banner
-          type='success'
-          closeIcon={null}
-          title={t('数据库信息')}
-          description={
-            <div>
-              <p>
-                {t(
-                  '您正在使用 MySQL 数据库。MySQL 是一个可靠的关系型数据库管理系统，适合生产环境使用。',
-                )}
-              </p>
+              )}
             </div>
-          }
-          className='!rounded-lg'
-          fullMode={false}
-          bordered
-        />
-      )}
+          </div>
+        </Card>
 
-      {/* PostgreSQL数据库提示 */}
-      {setupStatus.database_type === 'postgres' && (
-        <Banner
-          type='success'
-          closeIcon={null}
-          title={t('数据库信息')}
-          description={
-            <div>
-              <p>
-                {t(
-                  '您正在使用 PostgreSQL 数据库。PostgreSQL 是一个功能强大的开源关系型数据库系统，提供了出色的可靠性和数据完整性，适合生产环境使用。',
-                )}
-              </p>
-            </div>
-          }
-          className='!rounded-lg'
-          fullMode={false}
-          bordered
-        />
-      )}
+        <Card className='rounded-3xl border border-border bg-background/70 p-5'>
+          <div className='mb-4 flex h-11 w-11 items-center justify-center rounded-2xl bg-surface-secondary text-muted'>
+            <Database size={22} />
+          </div>
+          <div className='text-sm font-semibold text-foreground'>
+            {t('连接状态')}
+          </div>
+          <div className='mt-2 flex items-center gap-2 text-sm text-muted'>
+            <Info size={16} />
+            <span>{t('已读取当前数据库配置')}</span>
+          </div>
+        </Card>
+      </div>
       {renderNavigationButtons && renderNavigationButtons()}
     </>
   );
diff --git a/web/src/components/setup/components/steps/UsageModeStep.jsx b/web/src/components/setup/components/steps/UsageModeStep.jsx
index 19364430f91..dc65e612626 100644
--- a/web/src/components/setup/components/steps/UsageModeStep.jsx
+++ b/web/src/components/setup/components/steps/UsageModeStep.jsx
@@ -18,7 +18,30 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { RadioGroup, Radio } from '@douyinfe/semi-ui';
+import { Description, Label } from '@heroui/react';
+import { RadioButtonGroup } from '@heroui-pro/react';
+import { Building2, Presentation, UserRound } from 'lucide-react';
+
+const usageModes = [
+  {
+    value: 'external',
+    icon: Building2,
+    title: '对外运营模式',
+    description: '适用于为多个用户提供服务的场景',
+  },
+  {
+    value: 'self',
+    icon: UserRound,
+    title: '自用模式',
+    description: '适用于个人使用的场景，不需要设置模型价格',
+  },
+  {
+    value: 'demo',
+    icon: Presentation,
+    title: '演示站点模式',
+    description: '适用于展示系统功能的场景，提供基础功能演示',
+  },
+];
 
 /**
  * 使用模式选择步骤组件
@@ -32,37 +55,48 @@ const UsageModeStep = ({
 }) => {
   return (
     <>
-      <RadioGroup
+      <RadioButtonGroup
         value={formData.usageMode}
         onChange={handleUsageModeChange}
-        type='card'
-        direction='horizontal'
-        className='mt-4'
-        aria-label='使用模式选择'
         name='usage-mode-selection'
+        layout='grid'
+        variant='secondary'
+        className='grid-cols-1 md:grid-cols-3'
+        aria-label={t('使用模式选择')}
       >
-        <Radio
-          value='external'
-          extra={t('适用于为多个用户提供服务的场景')}
-          style={{ width: '30%', minWidth: 200 }}
-        >
-          {t('对外运营模式')}
-        </Radio>
-        <Radio
-          value='self'
-          extra={t('适用于个人使用的场景，不需要设置模型价格')}
-          style={{ width: '30%', minWidth: 200 }}
-        >
-          {t('自用模式')}
-        </Radio>
-        <Radio
-          value='demo'
-          extra={t('适用于展示系统功能的场景，提供基础功能演示')}
-          style={{ width: '30%', minWidth: 200 }}
-        >
-          {t('演示站点模式')}
-        </Radio>
-      </RadioGroup>
+        {usageModes.map(({ value, icon: Icon, title, description }) => {
+          const selected = formData.usageMode === value;
+
+          return (
+            <RadioButtonGroup.Item
+              key={value}
+              value={value}
+              className='min-h-40 rounded-3xl'
+            >
+              <RadioButtonGroup.Indicator />
+              <RadioButtonGroup.ItemContent className='gap-4'>
+                <RadioButtonGroup.ItemIcon
+                  className={`flex h-12 w-12 items-center justify-center rounded-2xl ${
+                    selected
+                      ? 'bg-primary text-white'
+                      : 'bg-surface-secondary text-muted'
+                  }`}
+                >
+                  <Icon size={22} />
+                </RadioButtonGroup.ItemIcon>
+                <div>
+                  <Label className='text-base font-semibold text-foreground'>
+                    {t(title)}
+                  </Label>
+                  <Description className='mt-2 text-sm leading-6 text-muted'>
+                    {t(description)}
+                  </Description>
+                </div>
+              </RadioButtonGroup.ItemContent>
+            </RadioButtonGroup.Item>
+          );
+        })}
+      </RadioButtonGroup>
       {renderNavigationButtons && renderNavigationButtons()}
     </>
   );
diff --git a/web/src/components/table/channels/ChannelsActions.jsx b/web/src/components/table/channels/ChannelsActions.jsx
index 3f185c55d7d..502a6b2aaf7 100644
--- a/web/src/components/table/channels/ChannelsActions.jsx
+++ b/web/src/components/table/channels/ChannelsActions.jsx
@@ -17,16 +17,85 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import {
-  Button,
-  Dropdown,
-  Modal,
-  Switch,
-  Typography,
-  Select,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Switch } from '@heroui/react';
+import { ChevronDown } from 'lucide-react';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
+
+function ToggleSwitch({ value, onChange }) {
+  return (
+    <Switch
+      isSelected={!!value}
+      onChange={onChange}
+      size='sm'
+      aria-label='toggle'
+    >
+      <Switch.Control>
+        <Switch.Thumb />
+      </Switch.Control>
+    </Switch>
+  );
+}
+
+function ClickDropdown({ label, items }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  return (
+    <span ref={ref} className='relative inline-flex w-full md:w-auto'>
+      <Button
+        variant='flat'
+        size='sm'
+        className='w-full md:w-auto'
+        endContent={<ChevronDown size={14} />}
+        onPress={() => setOpen((prev) => !prev)}
+      >
+        {label}
+      </Button>
+      {open ? (
+        <div
+          role='menu'
+          className='absolute left-0 top-full z-30 mt-1 min-w-[14rem] overflow-hidden rounded-lg border border-[color:var(--app-border)] bg-background shadow-lg'
+        >
+          {items.map((item, idx) => (
+            <button
+              key={idx}
+              type='button'
+              role='menuitem'
+              disabled={item.disabled}
+              className={`flex w-full items-center justify-between gap-2 px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                item.danger
+                  ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40'
+                  : 'text-foreground hover:bg-[color:var(--app-background)]'
+              }`}
+              onClick={() => {
+                setOpen(false);
+                item.onClick?.();
+              }}
+            >
+              <span>{item.label}</span>
+              {item.pending ? (
+                <span className='h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent' />
+              ) : null}
+            </button>
+          ))}
+        </div>
+      ) : null}
+    </span>
+  );
+}
 
 const ChannelsActions = ({
   enableBatchDelete,
@@ -58,170 +127,105 @@ const ChannelsActions = ({
   setActivePage,
   t,
 }) => {
+  const [confirm, setConfirm] = useState(null);
+
+  const ask = (config) => setConfirm(config);
+
+  const dropdownItems = [
+    {
+      label: t('测试所有未手动禁用渠道'),
+      pending: detectAllUpstreamUpdatesLoading,
+      disabled: detectAllUpstreamUpdatesLoading,
+      onClick: () =>
+        ask({
+          title: t('确定？'),
+          content: t('确定要测试所有未手动禁用渠道吗？'),
+          onConfirm: testAllChannels,
+        }),
+    },
+    {
+      label: t('修复数据库一致性'),
+      onClick: () =>
+        ask({
+          title: t('确定是否要修复数据库一致性？'),
+          content: t('进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用'),
+          onConfirm: fixChannelsAbilities,
+        }),
+    },
+    {
+      label: t('更新所有已启用通道余额'),
+      onClick: () =>
+        ask({
+          title: t('确定？'),
+          content: t('确定要更新所有已启用通道余额吗？'),
+          onConfirm: updateAllChannelsBalance,
+        }),
+    },
+    {
+      label: t('检测全部渠道上游更新'),
+      onClick: () =>
+        ask({
+          title: t('确定？'),
+          content: t('确定要仅检测全部渠道上游模型更新吗？（不执行新增/删除）'),
+          onConfirm: detectAllUpstreamUpdates,
+        }),
+    },
+    {
+      label: t('处理全部渠道上游更新'),
+      pending: applyAllUpstreamUpdatesLoading,
+      disabled: applyAllUpstreamUpdatesLoading,
+      onClick: () =>
+        ask({
+          title: t('确定？'),
+          content: t('确定要对全部渠道执行上游模型更新吗？'),
+          onConfirm: applyAllUpstreamUpdates,
+        }),
+    },
+    {
+      label: t('删除禁用通道'),
+      danger: true,
+      onClick: () =>
+        ask({
+          title: t('确定是否要删除禁用通道？'),
+          content: t('此修改将不可逆'),
+          onConfirm: deleteAllDisabledChannels,
+          danger: true,
+        }),
+    },
+  ];
+
   return (
     <div className='flex flex-col gap-2'>
-      {/* 第一行：批量操作按钮 + 设置开关 */}
-      <div className='flex flex-col md:flex-row justify-between gap-2'>
-        {/* 左侧：批量操作按钮 */}
-        <div className='flex flex-wrap md:flex-nowrap items-center gap-2 w-full md:w-auto order-2 md:order-1'>
+      <div className='flex flex-col justify-between gap-2 md:flex-row'>
+        <div className='order-2 flex w-full flex-wrap items-center gap-2 md:order-1 md:w-auto md:flex-nowrap'>
           <Button
-            size='small'
-            disabled={!enableBatchDelete}
-            type='danger'
+            size='sm'
+            color='danger'
+            isDisabled={!enableBatchDelete}
             className='w-full md:w-auto'
-            onClick={() => {
-              Modal.confirm({
+            onPress={() =>
+              ask({
                 title: t('确定是否要删除所选通道？'),
                 content: t('此修改将不可逆'),
-                onOk: () => batchDeleteChannels(),
-              });
-            }}
+                onConfirm: batchDeleteChannels,
+                danger: true,
+              })
+            }
           >
             {t('删除所选通道')}
           </Button>
 
           <Button
-            size='small'
-            disabled={!enableBatchDelete}
-            type='tertiary'
-            onClick={() => setShowBatchSetTag(true)}
+            size='sm'
+            variant='flat'
+            isDisabled={!enableBatchDelete}
             className='w-full md:w-auto'
+            onPress={() => setShowBatchSetTag(true)}
           >
             {t('批量设置标签')}
           </Button>
 
-          <Dropdown
-            size='small'
-            trigger='click'
-            render={
-              <Dropdown.Menu>
-                <Dropdown.Item>
-                  <Button
-                    size='small'
-                    type='tertiary'
-                    className='w-full'
-                    loading={detectAllUpstreamUpdatesLoading}
-                    disabled={detectAllUpstreamUpdatesLoading}
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('确定？'),
-                        content: t('确定要测试所有未手动禁用渠道吗？'),
-                        onOk: () => testAllChannels(),
-                        size: 'small',
-                        centered: true,
-                      });
-                    }}
-                  >
-                    {t('测试所有未手动禁用渠道')}
-                  </Button>
-                </Dropdown.Item>
-                <Dropdown.Item>
-                  <Button
-                    size='small'
-                    className='w-full'
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('确定是否要修复数据库一致性？'),
-                        content: t(
-                          '进行该操作时，可能导致渠道访问错误，请仅在数据库出现问题时使用',
-                        ),
-                        onOk: () => fixChannelsAbilities(),
-                        size: 'sm',
-                        centered: true,
-                      });
-                    }}
-                  >
-                    {t('修复数据库一致性')}
-                  </Button>
-                </Dropdown.Item>
-                <Dropdown.Item>
-                  <Button
-                    size='small'
-                    type='secondary'
-                    className='w-full'
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('确定？'),
-                        content: t('确定要更新所有已启用通道余额吗？'),
-                        onOk: () => updateAllChannelsBalance(),
-                        size: 'sm',
-                        centered: true,
-                      });
-                    }}
-                  >
-                    {t('更新所有已启用通道余额')}
-                  </Button>
-                </Dropdown.Item>
-                <Dropdown.Item>
-                  <Button
-                    size='small'
-                    type='tertiary'
-                    className='w-full'
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('确定？'),
-                        content: t(
-                          '确定要仅检测全部渠道上游模型更新吗？（不执行新增/删除）',
-                        ),
-                        onOk: () => detectAllUpstreamUpdates(),
-                        size: 'sm',
-                        centered: true,
-                      });
-                    }}
-                  >
-                    {t('检测全部渠道上游更新')}
-                  </Button>
-                </Dropdown.Item>
-                <Dropdown.Item>
-                  <Button
-                    size='small'
-                    type='primary'
-                    className='w-full'
-                    loading={applyAllUpstreamUpdatesLoading}
-                    disabled={applyAllUpstreamUpdatesLoading}
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('确定？'),
-                        content: t('确定要对全部渠道执行上游模型更新吗？'),
-                        onOk: () => applyAllUpstreamUpdates(),
-                        size: 'sm',
-                        centered: true,
-                      });
-                    }}
-                  >
-                    {t('处理全部渠道上游更新')}
-                  </Button>
-                </Dropdown.Item>
-                <Dropdown.Item>
-                  <Button
-                    size='small'
-                    type='danger'
-                    className='w-full'
-                    onClick={() => {
-                      Modal.confirm({
-                        title: t('确定是否要删除禁用通道？'),
-                        content: t('此修改将不可逆'),
-                        onOk: () => deleteAllDisabledChannels(),
-                        size: 'sm',
-                        centered: true,
-                      });
-                    }}
-                  >
-                    {t('删除禁用通道')}
-                  </Button>
-                </Dropdown.Item>
-              </Dropdown.Menu>
-            }
-          >
-            <Button
-              size='small'
-              theme='light'
-              type='tertiary'
-              className='w-full md:w-auto'
-            >
-              {t('批量操作')}
-            </Button>
-          </Dropdown>
+          <ClickDropdown label={t('批量操作')} items={dropdownItems} />
 
           <CompactModeToggle
             compactMode={compactMode}
@@ -230,15 +234,13 @@ const ChannelsActions = ({
           />
         </div>
 
-        {/* 右侧：设置开关区域 */}
-        <div className='flex flex-col md:flex-row items-start md:items-center gap-2 w-full md:w-auto order-1 md:order-2'>
-          <div className='flex items-center justify-between w-full md:w-auto'>
-            <Typography.Text strong className='mr-2'>
+        <div className='order-1 flex w-full flex-col items-start gap-2 md:order-2 md:w-auto md:flex-row md:items-center'>
+          <div className='flex w-full items-center justify-between md:w-auto'>
+            <span className='mr-2 text-sm font-semibold text-foreground'>
               {t('使用ID排序')}
-            </Typography.Text>
-            <Switch
-              size='small'
-              checked={idSort}
+            </span>
+            <ToggleSwitch
+              value={idSort}
               onChange={(v) => {
                 localStorage.setItem('id-sort', v + '');
                 setIdSort(v);
@@ -264,13 +266,12 @@ const ChannelsActions = ({
             />
           </div>
 
-          <div className='flex items-center justify-between w-full md:w-auto'>
-            <Typography.Text strong className='mr-2'>
+          <div className='flex w-full items-center justify-between md:w-auto'>
+            <span className='mr-2 text-sm font-semibold text-foreground'>
               {t('开启批量操作')}
-            </Typography.Text>
-            <Switch
-              size='small'
-              checked={enableBatchDelete}
+            </span>
+            <ToggleSwitch
+              value={enableBatchDelete}
               onChange={(v) => {
                 localStorage.setItem('enable-batch-delete', v + '');
                 setEnableBatchDelete(v);
@@ -278,13 +279,12 @@ const ChannelsActions = ({
             />
           </div>
 
-          <div className='flex items-center justify-between w-full md:w-auto'>
-            <Typography.Text strong className='mr-2'>
+          <div className='flex w-full items-center justify-between md:w-auto'>
+            <span className='mr-2 text-sm font-semibold text-foreground'>
               {t('标签聚合模式')}
-            </Typography.Text>
-            <Switch
-              size='small'
-              checked={enableTagMode}
+            </span>
+            <ToggleSwitch
+              value={enableTagMode}
               onChange={(v) => {
                 localStorage.setItem('enable-tag-mode', v + '');
                 setEnableTagMode(v);
@@ -294,14 +294,15 @@ const ChannelsActions = ({
             />
           </div>
 
-          <div className='flex items-center justify-between w-full md:w-auto'>
-            <Typography.Text strong className='mr-2'>
+          <div className='flex w-full items-center justify-between md:w-auto'>
+            <span className='mr-2 text-sm font-semibold text-foreground'>
               {t('状态筛选')}
-            </Typography.Text>
-            <Select
-              size='small'
+            </span>
+            <select
+              className='h-8 rounded-lg border border-[color:var(--app-border)] bg-background px-2 text-sm text-foreground outline-none transition focus:border-primary'
               value={statusFilter}
-              onChange={(v) => {
+              onChange={(event) => {
+                const v = event.target.value;
                 localStorage.setItem('channel-status-filter', v);
                 setStatusFilter(v);
                 setActivePage(1);
@@ -315,13 +316,29 @@ const ChannelsActions = ({
                 );
               }}
             >
-              <Select.Option value='all'>{t('全部')}</Select.Option>
-              <Select.Option value='enabled'>{t('已启用')}</Select.Option>
-              <Select.Option value='disabled'>{t('已禁用')}</Select.Option>
-            </Select>
+              <option value='all'>{t('全部')}</option>
+              <option value='enabled'>{t('已启用')}</option>
+              <option value='disabled'>{t('已禁用')}</option>
+            </select>
           </div>
         </div>
       </div>
+
+      <ConfirmDialog
+        visible={!!confirm}
+        title={confirm?.title || ''}
+        cancelText={t('取消')}
+        confirmText={t('确定')}
+        danger={!!confirm?.danger}
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => {
+          const action = confirm?.onConfirm;
+          setConfirm(null);
+          action?.();
+        }}
+      >
+        {confirm?.content}
+      </ConfirmDialog>
     </div>
   );
 };
diff --git a/web/src/components/table/channels/ChannelsColumnDefs.jsx b/web/src/components/table/channels/ChannelsColumnDefs.jsx
index 5d748c0f534..85df985049b 100644
--- a/web/src/components/table/channels/ChannelsColumnDefs.jsx
+++ b/web/src/components/table/channels/ChannelsColumnDefs.jsx
@@ -6,29 +6,16 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import {
-  Button,
-  Dropdown,
-  InputNumber,
-  Modal,
-  Space,
-  SplitButtonGroup,
-  Tag,
-  Tooltip,
-  Typography,
-} from '@douyinfe/semi-ui';
+import React, { useState } from 'react';
+import { Button, Tooltip } from '@heroui/react';
+import { AlertTriangle, ChevronDown, MoreVertical } from 'lucide-react';
+import { FaRandom } from 'react-icons/fa';
 import {
   timestamp2string,
   renderGroup,
@@ -44,17 +31,55 @@ import {
   MODEL_FETCHABLE_CHANNEL_TYPES,
 } from '../../../constants';
 import { parseUpstreamUpdateMeta } from '../../../hooks/channels/upstreamUpdateUtils';
-import {
-  IconTreeTriangleDown,
-  IconMore,
-  IconAlertTriangle,
-} from '@douyinfe/semi-icons';
-import { FaRandom } from 'react-icons/fa';
+import ClickMenu from '../../common/ui/ClickMenu';
+import ConfirmDialog from '../../common/ui/ConfirmDialog';
+
+// Tone palette mirrors the Semi `<Tag color>` palette used throughout
+// /console for status chips.  Maps to semantic surface tones so light/dark
+// inherit from theme tokens.  Includes the extra `lime`/`yellow`/`purple`/
+// `white` tones the channels view relies on for the response-time +
+// IO.NET + balance chips.
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+  'light-blue': 'bg-primary/10 text-primary',
+  yellow: 'bg-warning/15 text-warning',
+  lime: 'bg-success/10 text-success',
+  red: 'bg-danger/15 text-danger',
+  purple:
+    'bg-[color-mix(in_oklab,var(--app-primary)_8%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_82%,var(--app-foreground))]',
+  grey: 'bg-surface-secondary text-muted',
+  white: 'border border-border bg-background text-foreground',
+};
+
+function StatusChip({
+  tone = 'grey',
+  size = 'sm',
+  className = '',
+  onClick,
+  prefixIcon,
+  children,
+}) {
+  const cls = TAG_TONE[tone] || TAG_TONE.grey;
+  const sizeCls = size === 'lg' ? 'px-3 py-1 text-sm' : 'px-2 py-0.5 text-xs';
+  const Component = onClick ? 'button' : 'span';
+  return (
+    <Component
+      type={onClick ? 'button' : undefined}
+      onClick={onClick}
+      className={`inline-flex items-center gap-1 rounded-full font-medium ${cls} ${sizeCls} ${
+        onClick ? 'cursor-pointer transition hover:-translate-y-px hover:opacity-85 active:scale-95' : ''
+      } ${className}`}
+    >
+      {prefixIcon}
+      <span className='inline-flex items-center'>{children}</span>
+    </Component>
+  );
+}
 
-// Render functions
 const renderType = (type, record = {}, t) => {
   const channelInfo = record?.channel_info;
-  let type2label = new Map();
+  const type2label = new Map();
   for (let i = 0; i < CHANNEL_OPTIONS.length; i++) {
     type2label[CHANNEL_OPTIONS[i].value] = CHANNEL_OPTIONS[i];
   }
@@ -65,22 +90,22 @@ const renderType = (type, record = {}, t) => {
   if (channelInfo?.is_multi_key) {
     icon =
       channelInfo?.multi_key_mode === 'random' ? (
-        <div className='flex items-center gap-1'>
-          <FaRandom className='text-blue-500' />
+        <span className='flex items-center gap-1'>
+          <FaRandom className='text-primary' />
           {icon}
-        </div>
+        </span>
       ) : (
-        <div className='flex items-center gap-1'>
-          <IconTreeTriangleDown className='text-blue-500' />
+        <span className='flex items-center gap-1'>
+          <ChevronDown size={12} className='text-primary' />
           {icon}
-        </div>
+        </span>
       );
   }
 
   const typeTag = (
-    <Tag color={type2label[type]?.color} shape='circle' prefixIcon={icon}>
+    <StatusChip tone={type2label[type]?.color} prefixIcon={icon}>
       {type2label[type]?.label}
-    </Tag>
+    </StatusChip>
   );
 
   let ionetMeta = null;
@@ -109,148 +134,86 @@ const renderType = (type, record = {}, t) => {
   };
 
   return (
-    <Space spacing={6}>
+    <span className='inline-flex items-center gap-1.5'>
       {typeTag}
       <Tooltip
         content={
           <div className='max-w-xs'>
-            <div className='text-xs text-gray-600'>
+            <div className='text-xs text-foreground'>
               {t('来源于 IO.NET 部署')}
             </div>
             {ionetMeta?.deployment_id && (
-              <div className='text-xs text-gray-500 mt-1'>
+              <div className='text-xs text-muted mt-1'>
                 {t('部署 ID')}: {ionetMeta.deployment_id}
               </div>
             )}
           </div>
         }
       >
-        <span>
-          <Tag
-            color='purple'
-            type='light'
-            className='cursor-pointer'
-            onClick={handleNavigate}
-          >
-            IO.NET
-          </Tag>
-        </span>
+        <StatusChip tone='purple' onClick={handleNavigate}>
+          IO.NET
+        </StatusChip>
       </Tooltip>
-    </Space>
+    </span>
   );
 };
 
-const renderTagType = (t) => {
-  return (
-    <Tag color='light-blue' shape='circle' type='light'>
-      {t('标签聚合')}
-    </Tag>
-  );
-};
+const renderTagType = (t) => (
+  <StatusChip tone='light-blue'>{t('标签聚合')}</StatusChip>
+);
 
 const renderStatus = (status, channelInfo = undefined, t) => {
-  if (channelInfo) {
-    if (channelInfo.is_multi_key) {
-      let keySize = channelInfo.multi_key_size;
-      let enabledKeySize = keySize;
-      if (channelInfo.multi_key_status_list) {
-        enabledKeySize =
-          keySize - Object.keys(channelInfo.multi_key_status_list).length;
-      }
-      return renderMultiKeyStatus(status, keySize, enabledKeySize, t);
+  if (channelInfo?.is_multi_key) {
+    const keySize = channelInfo.multi_key_size;
+    let enabledKeySize = keySize;
+    if (channelInfo.multi_key_status_list) {
+      enabledKeySize =
+        keySize - Object.keys(channelInfo.multi_key_status_list).length;
     }
+    return renderMultiKeyStatus(status, keySize, enabledKeySize, t);
   }
+
   switch (status) {
     case 1:
-      return (
-        <Tag color='green' shape='circle'>
-          {t('已启用')}
-        </Tag>
-      );
+      return <StatusChip tone='green'>{t('已启用')}</StatusChip>;
     case 2:
-      return (
-        <Tag color='red' shape='circle'>
-          {t('已禁用')}
-        </Tag>
-      );
+      return <StatusChip tone='red'>{t('已禁用')}</StatusChip>;
     case 3:
-      return (
-        <Tag color='yellow' shape='circle'>
-          {t('自动禁用')}
-        </Tag>
-      );
+      return <StatusChip tone='yellow'>{t('自动禁用')}</StatusChip>;
     default:
-      return (
-        <Tag color='grey' shape='circle'>
-          {t('未知状态')}
-        </Tag>
-      );
+      return <StatusChip tone='grey'>{t('未知状态')}</StatusChip>;
   }
 };
 
 const renderMultiKeyStatus = (status, keySize, enabledKeySize, t) => {
+  const suffix = ` ${enabledKeySize}/${keySize}`;
   switch (status) {
     case 1:
-      return (
-        <Tag color='green' shape='circle'>
-          {t('已启用')} {enabledKeySize}/{keySize}
-        </Tag>
-      );
+      return <StatusChip tone='green'>{t('已启用') + suffix}</StatusChip>;
     case 2:
-      return (
-        <Tag color='red' shape='circle'>
-          {t('已禁用')} {enabledKeySize}/{keySize}
-        </Tag>
-      );
+      return <StatusChip tone='red'>{t('已禁用') + suffix}</StatusChip>;
     case 3:
-      return (
-        <Tag color='yellow' shape='circle'>
-          {t('自动禁用')} {enabledKeySize}/{keySize}
-        </Tag>
-      );
+      return <StatusChip tone='yellow'>{t('自动禁用') + suffix}</StatusChip>;
     default:
-      return (
-        <Tag color='grey' shape='circle'>
-          {t('未知状态')} {enabledKeySize}/{keySize}
-        </Tag>
-      );
+      return <StatusChip tone='grey'>{t('未知状态') + suffix}</StatusChip>;
   }
 };
 
 const renderResponseTime = (responseTime, t) => {
-  let time = responseTime / 1000;
-  time = time.toFixed(2) + t(' 秒');
+  const seconds = (responseTime / 1000).toFixed(2) + t(' 秒');
   if (responseTime === 0) {
-    return (
-      <Tag color='grey' shape='circle'>
-        {t('未测试')}
-      </Tag>
-    );
-  } else if (responseTime <= 1000) {
-    return (
-      <Tag color='green' shape='circle'>
-        {time}
-      </Tag>
-    );
-  } else if (responseTime <= 3000) {
-    return (
-      <Tag color='lime' shape='circle'>
-        {time}
-      </Tag>
-    );
-  } else if (responseTime <= 5000) {
-    return (
-      <Tag color='yellow' shape='circle'>
-        {time}
-      </Tag>
-    );
-  } else {
-    return (
-      <Tag color='red' shape='circle'>
-        {time}
-      </Tag>
-    );
+    return <StatusChip tone='grey'>{t('未测试')}</StatusChip>;
+  }
+  if (responseTime <= 1000) {
+    return <StatusChip tone='green'>{seconds}</StatusChip>;
+  }
+  if (responseTime <= 3000) {
+    return <StatusChip tone='lime'>{seconds}</StatusChip>;
   }
+  if (responseTime <= 5000) {
+    return <StatusChip tone='yellow'>{seconds}</StatusChip>;
+  }
+  return <StatusChip tone='red'>{seconds}</StatusChip>;
 };
 
 const isRequestPassThroughEnabled = (record) => {
@@ -258,15 +221,11 @@ const isRequestPassThroughEnabled = (record) => {
     return false;
   }
   const settingValue = record.setting;
-  if (!settingValue) {
-    return false;
-  }
+  if (!settingValue) return false;
   if (typeof settingValue === 'object') {
     return settingValue.pass_through_body_enabled === true;
   }
-  if (typeof settingValue !== 'string') {
-    return false;
-  }
+  if (typeof settingValue !== 'string') return false;
   try {
     const parsed = JSON.parse(settingValue);
     return parsed?.pass_through_body_enabled === true;
@@ -304,6 +263,350 @@ const getUpstreamUpdateMeta = (record) => {
   };
 };
 
+// Replaces Semi `<InputNumber innerButtons defaultValue onBlur>` with a
+// native `<input type='number'>`.  Keeps the same uncontrolled-input
+// behaviour (commits on blur, no controlled state).
+function PriorityInput({ defaultValue, min = -999, onBlur, ariaLabel }) {
+  return (
+    <input
+      type='number'
+      defaultValue={defaultValue}
+      min={min}
+      onBlur={onBlur}
+      aria-label={ariaLabel}
+      className='h-8 w-[70px] rounded-lg border border-border bg-background px-2 text-sm text-foreground tabular-nums outline-none focus:border-primary'
+    />
+  );
+}
+
+// Operate cell — extracted into a component so we can host a
+// `ConfirmDialog` adjacent to the action buttons (Semi
+// `Modal.confirm`/`Modal.warning` had no equivalent inside a column-defs
+// render closure, so we emulate it with local state + the shared dialog).
+function ChannelOperateCell({
+  record,
+  t,
+  manageChannel,
+  testChannel,
+  setCurrentTestChannel,
+  setShowModelTestModal,
+  setEditingChannel,
+  setShowEdit,
+  setCurrentMultiKeyChannel,
+  setShowMultiKeyManageModal,
+  refresh,
+  activePage,
+  channels,
+  copySelectedChannel,
+  checkOllamaVersion,
+  detectChannelUpstreamUpdates,
+  openUpstreamUpdateModal,
+  submitTagEdit,
+}) {
+  const [confirm, setConfirm] = useState(null);
+
+  const ask = (config) => setConfirm(config);
+
+  if (record.children !== undefined) {
+    // Tag-aggregate row — only the "warn before bulk-update tag priority/weight"
+    // dialog needs hosting at the cell level (children priority/weight
+    // editors call ask() too).
+    return null;
+  }
+
+  const upstreamUpdateMeta = getUpstreamUpdateMeta(record);
+  const moreItems = [
+    {
+      label: t('删除'),
+      danger: true,
+      onClick: () =>
+        ask({
+          title: t('确定是否要删除此渠道？'),
+          content: t('此修改将不可逆'),
+          danger: true,
+          onConfirm: async () => {
+            await manageChannel(record.id, 'delete', record);
+            await refresh();
+            setTimeout(() => {
+              if (channels.length === 0 && activePage > 1) {
+                refresh(activePage - 1);
+              }
+            }, 100);
+          },
+        }),
+    },
+    {
+      label: t('复制'),
+      onClick: () =>
+        ask({
+          title: t('确定是否要复制此渠道？'),
+          content: t('复制渠道的所有信息'),
+          onConfirm: () => copySelectedChannel(record),
+        }),
+    },
+  ];
+
+  if (upstreamUpdateMeta.supported) {
+    moreItems.push({
+      label: t('仅检测上游模型更新'),
+      onClick: () => detectChannelUpstreamUpdates(record),
+    });
+    moreItems.push({
+      label: t('处理上游模型更新'),
+      onClick: () => {
+        if (!upstreamUpdateMeta.enabled) {
+          showInfo(t('该渠道未开启上游模型更新检测'));
+          return;
+        }
+        if (
+          upstreamUpdateMeta.pendingAddModels.length === 0 &&
+          upstreamUpdateMeta.pendingRemoveModels.length === 0
+        ) {
+          showInfo(t('该渠道暂无可处理的上游模型更新'));
+          return;
+        }
+        openUpstreamUpdateModal(
+          record,
+          upstreamUpdateMeta.pendingAddModels,
+          upstreamUpdateMeta.pendingRemoveModels,
+          upstreamUpdateMeta.pendingAddModels.length > 0 ? 'add' : 'remove',
+        );
+      },
+    });
+  }
+
+  if (record.type === 4) {
+    moreItems.unshift({
+      label: t('测活'),
+      onClick: () => checkOllamaVersion(record),
+    });
+  }
+
+  return (
+    <div className='flex flex-wrap items-center gap-1.5'>
+      {/* Test split-button */}
+      <span className='inline-flex overflow-hidden rounded-lg border border-border'>
+        <Button
+          size='sm'
+          variant='light'
+          className='rounded-none'
+          onPress={() => testChannel(record, '')}
+        >
+          {t('测试')}
+        </Button>
+        <Button
+          isIconOnly
+          size='sm'
+          variant='light'
+          className='rounded-none border-l border-border'
+          onPress={() => {
+            setCurrentTestChannel(record);
+            setShowModelTestModal(true);
+          }}
+          aria-label={t('选择模型测试')}
+        >
+          <ChevronDown size={14} />
+        </Button>
+      </span>
+
+      {record.status === 1 ? (
+        <Button
+          size='sm'
+          color='danger'
+          variant='flat'
+          onPress={() => manageChannel(record.id, 'disable', record)}
+        >
+          {t('禁用')}
+        </Button>
+      ) : (
+        <Button
+          size='sm'
+          variant='flat'
+          onPress={() => manageChannel(record.id, 'enable', record)}
+        >
+          {t('启用')}
+        </Button>
+      )}
+
+      {record.channel_info?.is_multi_key ? (
+        <span className='inline-flex overflow-hidden rounded-lg border border-border'>
+          <Button
+            size='sm'
+            variant='light'
+            className='rounded-none'
+            onPress={() => {
+              setEditingChannel(record);
+              setShowEdit(true);
+            }}
+          >
+            {t('编辑')}
+          </Button>
+          <ClickMenu
+            items={[
+              {
+                label: t('多密钥管理'),
+                onClick: () => {
+                  setCurrentMultiKeyChannel(record);
+                  setShowMultiKeyManageModal(true);
+                },
+              },
+            ]}
+            trigger={
+              <Button
+                isIconOnly
+                size='sm'
+                variant='light'
+                className='rounded-none border-l border-border'
+                aria-label={t('多密钥操作')}
+              >
+                <ChevronDown size={14} />
+              </Button>
+            }
+          />
+        </span>
+      ) : (
+        <Button
+          size='sm'
+          variant='light'
+          onPress={() => {
+            setEditingChannel(record);
+            setShowEdit(true);
+          }}
+        >
+          {t('编辑')}
+        </Button>
+      )}
+
+      <ClickMenu
+        items={moreItems}
+        trigger={
+          <Button
+            isIconOnly
+            size='sm'
+            variant='light'
+            aria-label={t('更多操作')}
+          >
+            <MoreVertical size={14} />
+          </Button>
+        }
+      />
+
+      <ConfirmDialog
+        visible={!!confirm}
+        title={confirm?.title || ''}
+        cancelText={t('取消')}
+        confirmText={t('确定')}
+        danger={!!confirm?.danger}
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => {
+          const action = confirm?.onConfirm;
+          setConfirm(null);
+          action?.();
+        }}
+      >
+        {confirm?.content}
+      </ConfirmDialog>
+    </div>
+  );
+}
+
+// Tag-aggregate row's operate cell (different action set; no destructive
+// confirmations needed inline).
+function TagOperateCell({
+  record,
+  t,
+  manageTag,
+  setShowEditTag,
+  setEditingTag,
+}) {
+  return (
+    <div className='flex flex-wrap items-center gap-1.5'>
+      <Button
+        size='sm'
+        variant='light'
+        onPress={() => manageTag(record.key, 'enable')}
+      >
+        {t('启用全部')}
+      </Button>
+      <Button
+        size='sm'
+        variant='light'
+        onPress={() => manageTag(record.key, 'disable')}
+      >
+        {t('禁用全部')}
+      </Button>
+      <Button
+        size='sm'
+        variant='light'
+        onPress={() => {
+          setShowEditTag(true);
+          setEditingTag(record.key);
+        }}
+      >
+        {t('编辑')}
+      </Button>
+    </div>
+  );
+}
+
+// Priority cell needs its own host component when the row is a tag
+// aggregate, because it triggers an inline confirm before submitting the
+// tag bulk update.
+function TagPriorityWeightInput({
+  field,
+  defaultValue,
+  record,
+  t,
+  submitTagEdit,
+}) {
+  const [confirm, setConfirm] = useState(null);
+
+  return (
+    <>
+      <PriorityInput
+        defaultValue={defaultValue}
+        min={field === 'weight' ? 0 : -999}
+        ariaLabel={field === 'weight' ? t('权重') : t('优先级')}
+        onBlur={(e) => {
+          const value = e.target.value;
+          if (value === '' || value === record[field]?.toString()) return;
+          setConfirm({
+            title:
+              field === 'weight'
+                ? t('修改子渠道权重')
+                : t('修改子渠道优先级'),
+            content:
+              (field === 'weight'
+                ? t('确定要修改所有子渠道权重为 ')
+                : t('确定要修改所有子渠道优先级为 ')) +
+              value +
+              t(' 吗？'),
+            onConfirm: () =>
+              submitTagEdit(field, {
+                tag: record.key,
+                [field]: value,
+              }),
+          });
+        }}
+      />
+      <ConfirmDialog
+        visible={!!confirm}
+        title={confirm?.title || ''}
+        cancelText={t('取消')}
+        confirmText={t('确定')}
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => {
+          const action = confirm?.onConfirm;
+          setConfirm(null);
+          action?.();
+        }}
+      >
+        {confirm?.content}
+      </ConfirmDialog>
+    </>
+  );
+}
+
 export const getChannelsColumns = ({
   t,
   COLUMN_KEYS,
@@ -338,7 +641,7 @@ export const getChannelsColumns = ({
       key: COLUMN_KEYS.NAME,
       title: t('名称'),
       dataIndex: 'name',
-      render: (text, record, index) => {
+      render: (text, record) => {
         const passThroughEnabled = isRequestPassThroughEnabled(record);
         const upstreamUpdateMeta = getUpstreamUpdateMeta(record);
         const pendingAddCount = upstreamUpdateMeta.pendingAddModels.length;
@@ -355,27 +658,22 @@ export const getChannelsColumns = ({
                 <div className='flex flex-col gap-2 max-w-xs'>
                   <div className='text-sm'>{record.remark}</div>
                   <Button
-                    size='small'
-                    type='primary'
-                    theme='outline'
-                    onClick={(e) => {
-                      e.stopPropagation();
+                    size='sm'
+                    variant='bordered'
+                    color='primary'
+                    onPress={(e) => {
+                      e?.stopPropagation?.();
                       navigator.clipboard
                         .writeText(record.remark)
-                        .then(() => {
-                          showSuccess(t('复制成功'));
-                        })
-                        .catch(() => {
-                          showError(t('复制失败'));
-                        });
+                        .then(() => showSuccess(t('复制成功')))
+                        .catch(() => showError(t('复制失败')));
                     }}
                   >
                     {t('复制')}
                   </Button>
                 </div>
               }
-              trigger='hover'
-              position='topLeft'
+              placement='top-start'
             >
               <span>{text}</span>
             </Tooltip>
@@ -388,35 +686,28 @@ export const getChannelsColumns = ({
         }
 
         return (
-          <Space spacing={6} align='center'>
+          <span className='inline-flex flex-wrap items-center gap-1.5'>
             {nameNode}
             {passThroughEnabled && (
               <Tooltip
                 content={t(
                   '该渠道已开启请求透传：参数覆写、模型重定向、渠道适配等 NewAPI 内置功能将失效，非最佳实践；如因此产生问题，请勿提交 issue 反馈。',
                 )}
-                trigger='hover'
-                position='topLeft'
+                placement='top-start'
               >
-                <span className='inline-flex items-center'>
-                  <IconAlertTriangle
-                    style={{ color: 'var(--semi-color-warning)' }}
-                  />
+                <span className='inline-flex items-center text-warning'>
+                  <AlertTriangle size={14} />
                 </span>
               </Tooltip>
             )}
             {showUpstreamUpdateTag && (
-              <Space spacing={4} align='center'>
+              <span className='inline-flex items-center gap-1'>
                 {pendingAddCount > 0 ? (
-                  <Tooltip content={t('点击处理新增模型')} position='top'>
-                    <Tag
-                      color='green'
-                      type='light'
-                      size='small'
-                      shape='circle'
-                      className='cursor-pointer transition-all duration-150 hover:opacity-85 hover:-translate-y-px active:scale-95'
+                  <Tooltip content={t('点击处理新增模型')} placement='top'>
+                    <StatusChip
+                      tone='green'
                       onClick={(e) => {
-                        e.stopPropagation();
+                        e?.stopPropagation?.();
                         openUpstreamUpdateModal(
                           record,
                           upstreamUpdateMeta.pendingAddModels,
@@ -426,19 +717,15 @@ export const getChannelsColumns = ({
                       }}
                     >
                       +{pendingAddCount}
-                    </Tag>
+                    </StatusChip>
                   </Tooltip>
                 ) : null}
                 {pendingRemoveCount > 0 ? (
-                  <Tooltip content={t('点击处理删除模型')} position='top'>
-                    <Tag
-                      color='red'
-                      type='light'
-                      size='small'
-                      shape='circle'
-                      className='cursor-pointer transition-all duration-150 hover:opacity-85 hover:-translate-y-px active:scale-95'
+                  <Tooltip content={t('点击处理删除模型')} placement='top'>
+                    <StatusChip
+                      tone='red'
                       onClick={(e) => {
-                        e.stopPropagation();
+                        e?.stopPropagation?.();
                         openUpstreamUpdateModal(
                           record,
                           upstreamUpdateMeta.pendingAddModels,
@@ -448,12 +735,12 @@ export const getChannelsColumns = ({
                       }}
                     >
                       -{pendingRemoveCount}
-                    </Tag>
+                    </StatusChip>
                   </Tooltip>
                 ) : null}
-              </Space>
+              </span>
             )}
-          </Space>
+          </span>
         );
       },
     },
@@ -461,18 +748,16 @@ export const getChannelsColumns = ({
       key: COLUMN_KEYS.GROUP,
       title: t('分组'),
       dataIndex: 'group',
-      render: (text, record, index) => (
-        <div>
-          <Space spacing={2}>
-            {text
-              ?.split(',')
-              .sort((a, b) => {
-                if (a === 'default') return -1;
-                if (b === 'default') return 1;
-                return a.localeCompare(b);
-              })
-              .map((item, index) => renderGroup(item))}
-          </Space>
+      render: (text) => (
+        <div className='flex flex-wrap items-center gap-1'>
+          {text
+            ?.split(',')
+            .sort((a, b) => {
+              if (a === 'default') return -1;
+              if (b === 'default') return 1;
+              return a.localeCompare(b);
+            })
+            .map((item) => renderGroup(item))}
         </div>
       ),
     },
@@ -480,206 +765,145 @@ export const getChannelsColumns = ({
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'type',
-      render: (text, record, index) => {
+      render: (text, record) => {
         if (record.children === undefined) {
           return <>{renderType(text, record, t)}</>;
-        } else {
-          return <>{renderTagType(t)}</>;
         }
+        return <>{renderTagType(t)}</>;
       },
     },
     {
       key: COLUMN_KEYS.STATUS,
       title: t('状态'),
       dataIndex: 'status',
-      render: (text, record, index) => {
+      render: (text, record) => {
         if (text === 3) {
-          if (record.other_info === '') {
-            record.other_info = '{}';
+          if (record.other_info === '') record.other_info = '{}';
+          let otherInfo = {};
+          try {
+            otherInfo = JSON.parse(record.other_info);
+          } catch (error) {
+            otherInfo = {};
           }
-          let otherInfo = JSON.parse(record.other_info);
-          let reason = otherInfo['status_reason'];
-          let time = otherInfo['status_time'];
+          const reason = otherInfo['status_reason'];
+          const time = otherInfo['status_time'];
           return (
-            <div>
-              <Tooltip
-                content={
-                  t('原因：') + reason + t('，时间：') + timestamp2string(time)
-                }
-              >
-                {renderStatus(text, record.channel_info, t)}
-              </Tooltip>
-            </div>
+            <Tooltip
+              content={
+                t('原因：') + reason + t('，时间：') + timestamp2string(time)
+              }
+            >
+              {renderStatus(text, record.channel_info, t)}
+            </Tooltip>
           );
-        } else {
-          return renderStatus(text, record.channel_info, t);
         }
+        return renderStatus(text, record.channel_info, t);
       },
     },
     {
       key: COLUMN_KEYS.RESPONSE_TIME,
       title: t('响应时间'),
       dataIndex: 'response_time',
-      render: (text, record, index) => <div>{renderResponseTime(text, t)}</div>,
+      render: (text) => renderResponseTime(text, t),
     },
     {
       key: COLUMN_KEYS.BALANCE,
       title: t('已用/剩余'),
       dataIndex: 'expired_time',
-      render: (text, record, index) => {
+      render: (text, record) => {
         if (record.children === undefined) {
           return (
-            <div>
-              <Space spacing={1}>
-                <Tooltip content={t('已用额度')}>
-                  <Tag color='white' type='ghost' shape='circle'>
-                    {renderQuota(record.used_quota)}
-                  </Tag>
-                </Tooltip>
-                <Tooltip
-                  content={
-                    record.type === 57
-                      ? t('查看 Codex 帐号信息与用量')
-                      : t('剩余额度') +
-                        ': ' +
-                        renderQuotaWithAmount(record.balance) +
-                        t('，点击更新')
-                  }
+            <div className='inline-flex flex-wrap items-center gap-1'>
+              <Tooltip content={t('已用额度')}>
+                <StatusChip tone='white'>
+                  {renderQuota(record.used_quota)}
+                </StatusChip>
+              </Tooltip>
+              <Tooltip
+                content={
+                  record.type === 57
+                    ? t('查看 Codex 帐号信息与用量')
+                    : t('剩余额度') +
+                      ': ' +
+                      renderQuotaWithAmount(record.balance) +
+                      t('，点击更新')
+                }
+              >
+                <StatusChip
+                  tone={record.type === 57 ? 'light-blue' : 'white'}
+                  onClick={() => updateChannelBalance(record)}
                 >
-                  <Tag
-                    color={record.type === 57 ? 'light-blue' : 'white'}
-                    type={record.type === 57 ? 'light' : 'ghost'}
-                    shape='circle'
-                    className={record.type === 57 ? 'cursor-pointer' : ''}
-                    onClick={() => updateChannelBalance(record)}
-                  >
-                    {record.type === 57
-                      ? t('帐号信息')
-                      : renderQuotaWithAmount(record.balance)}
-                  </Tag>
-                </Tooltip>
-              </Space>
+                  {record.type === 57
+                    ? t('帐号信息')
+                    : renderQuotaWithAmount(record.balance)}
+                </StatusChip>
+              </Tooltip>
             </div>
           );
-        } else {
-          return (
-            <Tooltip content={t('已用额度')}>
-              <Tag color='white' type='ghost' shape='circle'>
-                {renderQuota(record.used_quota)}
-              </Tag>
-            </Tooltip>
-          );
         }
+        return (
+          <Tooltip content={t('已用额度')}>
+            <StatusChip tone='white'>
+              {renderQuota(record.used_quota)}
+            </StatusChip>
+          </Tooltip>
+        );
       },
     },
     {
       key: COLUMN_KEYS.PRIORITY,
       title: t('优先级'),
       dataIndex: 'priority',
-      render: (text, record, index) => {
+      render: (text, record) => {
         if (record.children === undefined) {
           return (
-            <div>
-              <InputNumber
-                style={{ width: 70 }}
-                name='priority'
-                onBlur={(e) => {
-                  manageChannel(record.id, 'priority', record, e.target.value);
-                }}
-                keepFocus={true}
-                innerButtons
-                defaultValue={record.priority}
-                min={-999}
-                size='small'
-              />
-            </div>
-          );
-        } else {
-          return (
-            <InputNumber
-              style={{ width: 70 }}
-              name='priority'
-              keepFocus={true}
-              onBlur={(e) => {
-                Modal.warning({
-                  title: t('修改子渠道优先级'),
-                  content:
-                    t('确定要修改所有子渠道优先级为 ') +
-                    e.target.value +
-                    t(' 吗？'),
-                  onOk: () => {
-                    if (e.target.value === '') {
-                      return;
-                    }
-                    submitTagEdit('priority', {
-                      tag: record.key,
-                      priority: e.target.value,
-                    });
-                  },
-                });
-              }}
-              innerButtons
+            <PriorityInput
               defaultValue={record.priority}
               min={-999}
-              size='small'
+              ariaLabel={t('优先级')}
+              onBlur={(e) =>
+                manageChannel(record.id, 'priority', record, e.target.value)
+              }
             />
           );
         }
+        return (
+          <TagPriorityWeightInput
+            field='priority'
+            defaultValue={record.priority}
+            record={record}
+            t={t}
+            submitTagEdit={submitTagEdit}
+          />
+        );
       },
     },
     {
       key: COLUMN_KEYS.WEIGHT,
       title: t('权重'),
       dataIndex: 'weight',
-      render: (text, record, index) => {
+      render: (text, record) => {
         if (record.children === undefined) {
           return (
-            <div>
-              <InputNumber
-                style={{ width: 70 }}
-                name='weight'
-                onBlur={(e) => {
-                  manageChannel(record.id, 'weight', record, e.target.value);
-                }}
-                keepFocus={true}
-                innerButtons
-                defaultValue={record.weight}
-                min={0}
-                size='small'
-              />
-            </div>
-          );
-        } else {
-          return (
-            <InputNumber
-              style={{ width: 70 }}
-              name='weight'
-              keepFocus={true}
-              onBlur={(e) => {
-                Modal.warning({
-                  title: t('修改子渠道权重'),
-                  content:
-                    t('确定要修改所有子渠道权重为 ') +
-                    e.target.value +
-                    t(' 吗？'),
-                  onOk: () => {
-                    if (e.target.value === '') {
-                      return;
-                    }
-                    submitTagEdit('weight', {
-                      tag: record.key,
-                      weight: e.target.value,
-                    });
-                  },
-                });
-              }}
-              innerButtons
+            <PriorityInput
               defaultValue={record.weight}
-              min={-999}
-              size='small'
+              min={0}
+              ariaLabel={t('权重')}
+              onBlur={(e) =>
+                manageChannel(record.id, 'weight', record, e.target.value)
+              }
             />
           );
         }
+        return (
+          <TagPriorityWeightInput
+            field='weight'
+            defaultValue={record.weight}
+            record={record}
+            t={t}
+            submitTagEdit={submitTagEdit}
+          />
+        );
       },
     },
     {
@@ -687,219 +911,40 @@ export const getChannelsColumns = ({
       title: '',
       dataIndex: 'operate',
       fixed: 'right',
-      render: (text, record, index) => {
+      render: (text, record) => {
         if (record.children === undefined) {
-          const upstreamUpdateMeta = getUpstreamUpdateMeta(record);
-          const moreMenuItems = [
-            {
-              node: 'item',
-              name: t('删除'),
-              type: 'danger',
-              onClick: () => {
-                Modal.confirm({
-                  title: t('确定是否要删除此渠道？'),
-                  content: t('此修改将不可逆'),
-                  onOk: () => {
-                    (async () => {
-                      await manageChannel(record.id, 'delete', record);
-                      await refresh();
-                      setTimeout(() => {
-                        if (channels.length === 0 && activePage > 1) {
-                          refresh(activePage - 1);
-                        }
-                      }, 100);
-                    })();
-                  },
-                });
-              },
-            },
-            {
-              node: 'item',
-              name: t('复制'),
-              type: 'tertiary',
-              onClick: () => {
-                Modal.confirm({
-                  title: t('确定是否要复制此渠道？'),
-                  content: t('复制渠道的所有信息'),
-                  onOk: () => copySelectedChannel(record),
-                });
-              },
-            },
-          ];
-
-          if (upstreamUpdateMeta.supported) {
-            moreMenuItems.push({
-              node: 'item',
-              name: t('仅检测上游模型更新'),
-              type: 'tertiary',
-              onClick: () => {
-                detectChannelUpstreamUpdates(record);
-              },
-            });
-            moreMenuItems.push({
-              node: 'item',
-              name: t('处理上游模型更新'),
-              type: 'tertiary',
-              onClick: () => {
-                if (!upstreamUpdateMeta.enabled) {
-                  showInfo(t('该渠道未开启上游模型更新检测'));
-                  return;
-                }
-                if (
-                  upstreamUpdateMeta.pendingAddModels.length === 0 &&
-                  upstreamUpdateMeta.pendingRemoveModels.length === 0
-                ) {
-                  showInfo(t('该渠道暂无可处理的上游模型更新'));
-                  return;
-                }
-                openUpstreamUpdateModal(
-                  record,
-                  upstreamUpdateMeta.pendingAddModels,
-                  upstreamUpdateMeta.pendingRemoveModels,
-                  upstreamUpdateMeta.pendingAddModels.length > 0
-                    ? 'add'
-                    : 'remove',
-                );
-              },
-            });
-          }
-
-          if (record.type === 4) {
-            moreMenuItems.unshift({
-              node: 'item',
-              name: t('测活'),
-              type: 'tertiary',
-              onClick: () => checkOllamaVersion(record),
-            });
-          }
-
           return (
-            <Space wrap>
-              <SplitButtonGroup
-                className='overflow-hidden'
-                aria-label={t('测试单个渠道操作项目组')}
-              >
-                <Button
-                  size='small'
-                  type='tertiary'
-                  onClick={() => testChannel(record, '')}
-                >
-                  {t('测试')}
-                </Button>
-                <Button
-                  size='small'
-                  type='tertiary'
-                  icon={<IconTreeTriangleDown />}
-                  onClick={() => {
-                    setCurrentTestChannel(record);
-                    setShowModelTestModal(true);
-                  }}
-                />
-              </SplitButtonGroup>
-
-              {record.status === 1 ? (
-                <Button
-                  type='danger'
-                  size='small'
-                  onClick={() => manageChannel(record.id, 'disable', record)}
-                >
-                  {t('禁用')}
-                </Button>
-              ) : (
-                <Button
-                  size='small'
-                  onClick={() => manageChannel(record.id, 'enable', record)}
-                >
-                  {t('启用')}
-                </Button>
-              )}
-
-              {record.channel_info?.is_multi_key ? (
-                <SplitButtonGroup aria-label={t('多密钥渠道操作项目组')}>
-                  <Button
-                    type='tertiary'
-                    size='small'
-                    onClick={() => {
-                      setEditingChannel(record);
-                      setShowEdit(true);
-                    }}
-                  >
-                    {t('编辑')}
-                  </Button>
-                  <Dropdown
-                    trigger='click'
-                    position='bottomRight'
-                    menu={[
-                      {
-                        node: 'item',
-                        name: t('多密钥管理'),
-                        onClick: () => {
-                          setCurrentMultiKeyChannel(record);
-                          setShowMultiKeyManageModal(true);
-                        },
-                      },
-                    ]}
-                  >
-                    <Button
-                      type='tertiary'
-                      size='small'
-                      icon={<IconTreeTriangleDown />}
-                    />
-                  </Dropdown>
-                </SplitButtonGroup>
-              ) : (
-                <Button
-                  type='tertiary'
-                  size='small'
-                  onClick={() => {
-                    setEditingChannel(record);
-                    setShowEdit(true);
-                  }}
-                >
-                  {t('编辑')}
-                </Button>
-              )}
-
-              <Dropdown
-                trigger='click'
-                position='bottomRight'
-                menu={moreMenuItems}
-              >
-                <Button icon={<IconMore />} type='tertiary' size='small' />
-              </Dropdown>
-            </Space>
-          );
-        } else {
-          // 标签操作按钮
-          return (
-            <Space wrap>
-              <Button
-                type='tertiary'
-                size='small'
-                onClick={() => manageTag(record.key, 'enable')}
-              >
-                {t('启用全部')}
-              </Button>
-              <Button
-                type='tertiary'
-                size='small'
-                onClick={() => manageTag(record.key, 'disable')}
-              >
-                {t('禁用全部')}
-              </Button>
-              <Button
-                type='tertiary'
-                size='small'
-                onClick={() => {
-                  setShowEditTag(true);
-                  setEditingTag(record.key);
-                }}
-              >
-                {t('编辑')}
-              </Button>
-            </Space>
+            <ChannelOperateCell
+              record={record}
+              t={t}
+              manageChannel={manageChannel}
+              testChannel={testChannel}
+              setCurrentTestChannel={setCurrentTestChannel}
+              setShowModelTestModal={setShowModelTestModal}
+              setEditingChannel={setEditingChannel}
+              setShowEdit={setShowEdit}
+              setCurrentMultiKeyChannel={setCurrentMultiKeyChannel}
+              setShowMultiKeyManageModal={setShowMultiKeyManageModal}
+              refresh={refresh}
+              activePage={activePage}
+              channels={channels}
+              copySelectedChannel={copySelectedChannel}
+              checkOllamaVersion={checkOllamaVersion}
+              detectChannelUpstreamUpdates={detectChannelUpstreamUpdates}
+              openUpstreamUpdateModal={openUpstreamUpdateModal}
+              submitTagEdit={submitTagEdit}
+            />
           );
         }
+        return (
+          <TagOperateCell
+            record={record}
+            t={t}
+            manageTag={manageTag}
+            setShowEditTag={setShowEditTag}
+            setEditingTag={setEditingTag}
+          />
+        );
       },
     },
   ];
diff --git a/web/src/components/table/channels/ChannelsFilters.jsx b/web/src/components/table/channels/ChannelsFilters.jsx
index e97a1e3e37f..ccdd61bc638 100644
--- a/web/src/components/table/channels/ChannelsFilters.jsx
+++ b/web/src/components/table/channels/ChannelsFilters.jsx
@@ -18,8 +18,12 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Form } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+import { Button } from '@heroui/react';
+import {
+  FilterInput,
+  FilterSelect,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const ChannelsFilters = ({
   setEditingChannel,
@@ -30,21 +34,25 @@ const ChannelsFilters = ({
   setFormApi,
   searchChannels,
   enableTagMode,
-  formApi,
   groupOptions,
   loading,
   searching,
   t,
 }) => {
+  const { values, setFieldValue, handleSubmit, api } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: () => searchChannels(enableTagMode),
+  });
+
   return (
     <div className='flex flex-col md:flex-row justify-between items-center gap-2 w-full'>
       <div className='flex gap-2 w-full md:w-auto order-2 md:order-1'>
         <Button
-          size='small'
-          theme='light'
-          type='primary'
+          size='sm'
+          variant='secondary'
           className='w-full md:w-auto'
-          onClick={() => {
+          onPress={() => {
             setEditingChannel({
               id: undefined,
             });
@@ -55,18 +63,18 @@ const ChannelsFilters = ({
         </Button>
 
         <Button
-          size='small'
-          type='tertiary'
+          size='sm'
+          variant='outline'
           className='w-full md:w-auto'
-          onClick={refresh}
+          onPress={refresh}
         >
           {t('刷新')}
         </Button>
 
         <Button
-          size='small'
-          type='tertiary'
-          onClick={() => setShowColumnSelector(true)}
+          size='sm'
+          variant='outline'
+          onPress={() => setShowColumnSelector(true)}
           className='w-full md:w-auto'
         >
           {t('列设置')}
@@ -74,83 +82,62 @@ const ChannelsFilters = ({
       </div>
 
       <div className='flex flex-col md:flex-row items-center gap-2 w-full md:w-auto order-1 md:order-2'>
-        <Form
-          initValues={formInitValues}
-          getFormApi={(api) => setFormApi(api)}
-          onSubmit={() => searchChannels(enableTagMode)}
-          allowEmpty={true}
+        <form
+          onSubmit={handleSubmit}
           autoComplete='off'
-          layout='horizontal'
-          trigger='change'
-          stopValidateWithError={false}
           className='flex flex-col md:flex-row items-center gap-2 w-full'
         >
           <div className='relative w-full md:w-64'>
-            <Form.Input
-              size='small'
-              field='searchKeyword'
-              prefix={<IconSearch />}
+            <FilterInput
+              value={values.searchKeyword}
+              onChange={(value) => setFieldValue('searchKeyword', value)}
               placeholder={t('渠道ID，名称，密钥，API地址')}
-              showClear
-              pure
             />
           </div>
           <div className='w-full md:w-48'>
-            <Form.Input
-              size='small'
-              field='searchModel'
-              prefix={<IconSearch />}
+            <FilterInput
+              value={values.searchModel}
+              onChange={(value) => setFieldValue('searchModel', value)}
               placeholder={t('模型关键字')}
-              showClear
-              pure
             />
           </div>
           <div className='w-full md:w-32'>
-            <Form.Select
-              size='small'
-              field='searchGroup'
-              placeholder={t('选择分组')}
-              optionList={[
-                { label: t('选择分组'), value: null },
-                ...groupOptions,
-              ]}
-              className='w-full'
-              showClear
-              pure
-              onChange={() => {
-                // 延迟执行搜索，让表单值先更新
+            <FilterSelect
+              value={values.searchGroup}
+              onChange={(value) => {
+                setFieldValue('searchGroup', value);
                 setTimeout(() => {
                   searchChannels(enableTagMode);
                 }, 0);
               }}
+              placeholder={t('选择分组')}
+              options={groupOptions}
             />
           </div>
           <Button
-            size='small'
-            type='tertiary'
-            htmlType='submit'
-            loading={loading || searching}
+            size='sm'
+            variant='outline'
+            type='submit'
+            isPending={loading || searching}
             className='w-full md:w-auto'
           >
             {t('查询')}
           </Button>
           <Button
-            size='small'
-            type='tertiary'
-            onClick={() => {
-              if (formApi) {
-                formApi.reset();
-                // 重置后立即查询，使用setTimeout确保表单重置完成
-                setTimeout(() => {
-                  refresh();
-                }, 100);
-              }
+            size='sm'
+            variant='outline'
+            type='button'
+            onPress={() => {
+              api.reset();
+              setTimeout(() => {
+                refresh();
+              }, 100);
             }}
             className='w-full md:w-auto'
           >
             {t('重置')}
           </Button>
-        </Form>
+        </form>
       </div>
     </div>
   );
diff --git a/web/src/components/table/channels/ChannelsTable.jsx b/web/src/components/table/channels/ChannelsTable.jsx
index 09b486e32ab..0e35b5969c0 100644
--- a/web/src/components/table/channels/ChannelsTable.jsx
+++ b/web/src/components/table/channels/ChannelsTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getChannelsColumns } from './ChannelsColumnDefs';
 
 const ChannelsTable = (channelsData) => {
@@ -158,14 +154,7 @@ const ChannelsTable = (channelsData) => {
           : null
       }
       empty={
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={t('搜索无结果')}
-          style={{ padding: 30 }}
-        />
+        <TableEmptyState description={t('搜索无结果')} />
       }
       className='rounded-xl overflow-hidden'
       size='middle'
diff --git a/web/src/components/table/channels/ChannelsTabs.jsx b/web/src/components/table/channels/ChannelsTabs.jsx
index f95d138a46f..8f8ead1e27c 100644
--- a/web/src/components/table/channels/ChannelsTabs.jsx
+++ b/web/src/components/table/channels/ChannelsTabs.jsx
@@ -18,10 +18,23 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Tabs, TabPane, Tag } from '@douyinfe/semi-ui';
 import { CHANNEL_OPTIONS } from '../../../constants';
 import { getChannelIcon } from '../../../helpers';
 
+function CountChip({ active, count }) {
+  return (
+    <span
+      className={`inline-flex min-w-[1.5rem] shrink-0 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold ${
+        active
+          ? 'bg-red-500 text-white'
+          : 'bg-surface-secondary text-muted'
+      }`}
+    >
+      {count}
+    </span>
+  );
+}
+
 const ChannelsTabs = ({
   enableTagMode,
   activeTypeKey,
@@ -43,54 +56,51 @@ const ChannelsTabs = ({
     loadChannels(1, pageSize, idSort, enableTagMode, key);
   };
 
+  const tabs = [
+    {
+      key: 'all',
+      label: t('全部'),
+      icon: null,
+      count: channelTypeCounts['all'] || 0,
+    },
+    ...CHANNEL_OPTIONS.filter((opt) =>
+      availableTypeKeys.includes(String(opt.value)),
+    ).map((option) => ({
+      key: String(option.value),
+      label: option.label,
+      icon: getChannelIcon(option.value),
+      count: channelTypeCounts[option.value] || 0,
+    })),
+  ];
+
   return (
-    <Tabs
-      activeKey={activeTypeKey}
-      type='card'
-      collapsible
-      onChange={handleTabChange}
-      className='mb-2'
+    <div
+      role='tablist'
+      aria-label={t('渠道类型')}
+      className='mb-3 flex flex-wrap items-center gap-2'
     >
-      <TabPane
-        itemKey='all'
-        tab={
-          <span className='flex items-center gap-2'>
-            {t('全部')}
-            <Tag
-              color={activeTypeKey === 'all' ? 'red' : 'grey'}
-              shape='circle'
-            >
-              {channelTypeCounts['all'] || 0}
-            </Tag>
-          </span>
-        }
-      />
-
-      {CHANNEL_OPTIONS.filter((opt) =>
-        availableTypeKeys.includes(String(opt.value)),
-      ).map((option) => {
-        const key = String(option.value);
-        const count = channelTypeCounts[option.value] || 0;
+      {tabs.map((tab) => {
+        const active = activeTypeKey === tab.key;
         return (
-          <TabPane
-            key={key}
-            itemKey={key}
-            tab={
-              <span className='flex items-center gap-2'>
-                {getChannelIcon(option.value)}
-                {option.label}
-                <Tag
-                  color={activeTypeKey === key ? 'red' : 'grey'}
-                  shape='circle'
-                >
-                  {count}
-                </Tag>
-              </span>
-            }
-          />
+          <button
+            key={tab.key}
+            role='tab'
+            aria-selected={active}
+            type='button'
+            className={`inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition ${
+              active
+                ? 'border-transparent bg-foreground text-background shadow-sm'
+                : 'border-[color:var(--app-border)] bg-[color:var(--app-background)] text-foreground hover:bg-surface-secondary'
+            }`}
+            onClick={() => handleTabChange(tab.key)}
+          >
+            {tab.icon}
+            <span className='whitespace-nowrap'>{tab.label}</span>
+            <CountChip active={active} count={tab.count} />
+          </button>
         );
       })}
-    </Tabs>
+    </div>
   );
 };
 
diff --git a/web/src/components/table/channels/index.jsx b/web/src/components/table/channels/index.jsx
index 4a22233ce52..c3e4ac745be 100644
--- a/web/src/components/table/channels/index.jsx
+++ b/web/src/components/table/channels/index.jsx
@@ -18,8 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Banner } from '@douyinfe/semi-ui';
-import { IconAlertTriangle } from '@douyinfe/semi-icons';
+import { TriangleAlert } from 'lucide-react';
 import CardPro from '../../common/ui/CardPro';
 import ChannelsTable from './ChannelsTable';
 import ChannelsActions from './ChannelsActions';
@@ -34,6 +33,7 @@ import EditChannelModal from './modals/EditChannelModal';
 import EditTagModal from './modals/EditTagModal';
 import MultiKeyManageModal from './modals/MultiKeyManageModal';
 import ChannelUpstreamUpdateModal from './modals/ChannelUpstreamUpdateModal';
+import CodexUsageModal from './modals/CodexUsageModal';
 import { createCardProPagination } from '../../../helpers/utils';
 
 const ChannelsPage = () => {
@@ -73,23 +73,23 @@ const ChannelsPage = () => {
         onConfirm={channelsData.applyUpstreamUpdates}
         onCancel={channelsData.closeUpstreamUpdateModal}
       />
+      <CodexUsageModal
+        visible={channelsData.codexUsageOpen}
+        onClose={channelsData.closeCodexUsage}
+        t={channelsData.t}
+        record={channelsData.codexUsageRecord}
+        onCopy={channelsData.onCopyCodexUsage}
+      />
 
-      {/* Main Content */}
       {channelsData.globalPassThroughEnabled ? (
-        <Banner
-          type='warning'
-          closeIcon={null}
-          icon={
-            <IconAlertTriangle
-              size='large'
-              style={{ color: 'var(--semi-color-warning)' }}
-            />
-          }
-          description={channelsData.t(
-            '已开启全局请求透传：参数覆写、模型重定向、渠道适配等 NewAPI 内置功能将失效，非最佳实践；如因此产生问题，请勿提交 issue 反馈。',
-          )}
-          style={{ marginBottom: 12 }}
-        />
+        <div className='mb-3 flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100'>
+          <TriangleAlert size={16} className='mt-0.5 shrink-0' />
+          <div>
+            {channelsData.t(
+              '已开启全局请求透传：参数覆写、模型重定向、渠道适配等 NewAPI 内置功能将失效，非最佳实践；如因此产生问题，请勿提交 issue 反馈。',
+            )}
+          </div>
+        </div>
       ) : null}
       <CardPro
         type='type3'
diff --git a/web/src/components/table/channels/modals/BatchTagModal.jsx b/web/src/components/table/channels/modals/BatchTagModal.jsx
index 16bb64b085f..973d6e6be1d 100644
--- a/web/src/components/table/channels/modals/BatchTagModal.jsx
+++ b/web/src/components/table/channels/modals/BatchTagModal.jsx
@@ -18,7 +18,18 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Input, Typography } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 
 const BatchTagModal = ({
   showBatchSetTag,
@@ -29,33 +40,51 @@ const BatchTagModal = ({
   selectedChannels,
   t,
 }) => {
+  const modalState = useOverlayState({
+    isOpen: !!showBatchSetTag,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowBatchSetTag(false);
+    },
+  });
+
   return (
-    <Modal
-      title={t('批量设置标签')}
-      visible={showBatchSetTag}
-      onOk={batchSetChannelTag}
-      onCancel={() => setShowBatchSetTag(false)}
-      maskClosable={false}
-      centered={true}
-      size='small'
-      className='!rounded-lg'
-    >
-      <div className='mb-5'>
-        <Typography.Text>{t('请输入要设置的标签名称')}</Typography.Text>
-      </div>
-      <Input
-        placeholder={t('请输入标签名称')}
-        value={batchSetTagValue}
-        onChange={(v) => setBatchSetTagValue(v)}
-      />
-      <div className='mt-4'>
-        <Typography.Text type='secondary'>
-          {t('已选择 ${count} 个渠道').replace(
-            '${count}',
-            selectedChannels.length,
-          )}
-        </Typography.Text>
-      </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='sm' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('批量设置标签')}
+            </ModalHeader>
+            <ModalBody className='space-y-4 px-6 py-5'>
+              <div className='text-sm text-foreground'>
+                {t('请输入要设置的标签名称')}
+              </div>
+              <Input
+                type='text'
+                placeholder={t('请输入标签名称')}
+                value={batchSetTagValue ?? ''}
+                onChange={(e) => setBatchSetTagValue(e.target.value)}
+                aria-label={t('标签名称')}
+                className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+              />
+              <div className='text-xs text-muted'>
+                {t('已选择 ${count} 个渠道').replace(
+                  '${count}',
+                  String(selectedChannels?.length || 0),
+                )}
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={() => setShowBatchSetTag(false)}>
+                {t('取消')}
+              </Button>
+              <Button color='primary' onPress={batchSetChannelTag}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/channels/modals/ChannelUpstreamUpdateModal.jsx b/web/src/components/table/channels/modals/ChannelUpstreamUpdateModal.jsx
index 71f2ab8eb1e..76f2b44065b 100644
--- a/web/src/components/table/channels/modals/ChannelUpstreamUpdateModal.jsx
+++ b/web/src/components/table/channels/modals/ChannelUpstreamUpdateModal.jsx
@@ -17,22 +17,22 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Modal,
-  Checkbox,
-  Empty,
+  Button,
   Input,
-  Tabs,
-  Typography,
-} from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { IconSearch } from '@douyinfe/semi-icons';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Inbox, Search } from 'lucide-react';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 
 const normalizeModels = (models = []) =>
   Array.from(
@@ -45,14 +45,29 @@ const filterByKeyword = (models = [], keyword = '') => {
   const normalizedKeyword = String(keyword || '')
     .trim()
     .toLowerCase();
-  if (!normalizedKeyword) {
-    return models;
-  }
+  if (!normalizedKeyword) return models;
   return models.filter((model) =>
     String(model).toLowerCase().includes(normalizedKeyword),
   );
 };
 
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
+
 const ChannelUpstreamUpdateModal = ({
   visible,
   addModels = [],
@@ -63,7 +78,6 @@ const ChannelUpstreamUpdateModal = ({
   onCancel,
 }) => {
   const { t } = useTranslation();
-  const isMobile = useIsMobile();
 
   const normalizedAddModels = useMemo(
     () => normalizeModels(addModels),
@@ -79,6 +93,7 @@ const ChannelUpstreamUpdateModal = ({
   const [keyword, setKeyword] = useState('');
   const [activeTab, setActiveTab] = useState('add');
   const [partialSubmitConfirmed, setPartialSubmitConfirmed] = useState(false);
+  const [partialConfirm, setPartialConfirm] = useState(null);
 
   const addTabEnabled = normalizedAddModels.length > 0;
   const removeTabEnabled = normalizedRemoveModels.length > 0;
@@ -92,9 +107,7 @@ const ChannelUpstreamUpdateModal = ({
   );
 
   useEffect(() => {
-    if (!visible) {
-      return;
-    }
+    if (!visible) return;
     setSelectedAddModels([]);
     setSelectedRemoveModels([]);
     setKeyword('');
@@ -142,18 +155,21 @@ const ChannelUpstreamUpdateModal = ({
     );
   };
 
-  const tabList = [
-    {
-      itemKey: 'add',
-      tab: `${t('新增模型')} (${selectedAddCount}/${normalizedAddModels.length})`,
-      disabled: !addTabEnabled,
-    },
-    {
-      itemKey: 'remove',
-      tab: `${t('删除模型')} (${selectedRemoveCount}/${normalizedRemoveModels.length})`,
-      disabled: !removeTabEnabled,
-    },
-  ];
+  const toggleModel = (model, checked) => {
+    if (activeTab === 'add') {
+      setSelectedAddModels((prev) =>
+        checked
+          ? Array.from(new Set([...prev, model]))
+          : prev.filter((item) => item !== model),
+      );
+    } else {
+      setSelectedRemoveModels((prev) =>
+        checked
+          ? Array.from(new Set([...prev, model]))
+          : prev.filter((item) => item !== model),
+      );
+    }
+  };
 
   const submitSelectedChanges = () => {
     onConfirm?.({
@@ -183,22 +199,9 @@ const ChannelUpstreamUpdateModal = ({
         ? normalizedAddModels.length
         : normalizedRemoveModels.length;
       setActiveTab(missingTab);
-      Modal.confirm({
-        title: t('仍有未处理项'),
-        content: t(
-          '你还没有处理{{type}}模型（{{count}}个）。是否仅提交当前已勾选内容？',
-          {
-            type: missingType,
-            count: missingCount,
-          },
-        ),
-        okText: t('仅提交已勾选'),
-        cancelText: t('去处理{{type}}', { type: missingType }),
-        centered: true,
-        onOk: () => {
-          setPartialSubmitConfirmed(true);
-          submitSelectedChanges();
-        },
+      setPartialConfirm({
+        type: missingType,
+        count: missingCount,
       });
       return;
     }
@@ -206,107 +209,183 @@ const ChannelUpstreamUpdateModal = ({
     submitSelectedChanges();
   };
 
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
+  const tabs = [
+    {
+      key: 'add',
+      label: `${t('新增模型')} (${selectedAddCount}/${normalizedAddModels.length})`,
+      disabled: !addTabEnabled,
+    },
+    {
+      key: 'remove',
+      label: `${t('删除模型')} (${selectedRemoveCount}/${normalizedRemoveModels.length})`,
+      disabled: !removeTabEnabled,
+    },
+  ];
+
   return (
-    <Modal
-      visible={visible}
-      title={t('处理上游模型更新')}
-      okText={t('确定')}
-      cancelText={t('取消')}
-      size={isMobile ? 'full-width' : 'medium'}
-      centered
-      closeOnEsc
-      maskClosable
-      confirmLoading={confirmLoading}
-      onCancel={onCancel}
-      onOk={handleSubmit}
-    >
-      <div className='flex flex-col gap-3'>
-        <Typography.Text type='secondary' size='small'>
-          {t(
-            '可勾选需要执行的变更：新增会加入渠道模型列表，删除会从渠道模型列表移除。',
-          )}
-        </Typography.Text>
+    <>
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='lg' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {t('处理上游模型更新')}
+              </ModalHeader>
+              <ModalBody className='space-y-3 px-6 py-5'>
+                <div className='text-xs text-muted'>
+                  {t(
+                    '可勾选需要执行的变更：新增会加入渠道模型列表，删除会从渠道模型列表移除。',
+                  )}
+                </div>
+
+                <div role='tablist' className='flex items-center gap-2'>
+                  {tabs.map((tab) => {
+                    const active = activeTab === tab.key;
+                    return (
+                      <button
+                        key={tab.key}
+                        role='tab'
+                        aria-selected={active}
+                        type='button'
+                        disabled={tab.disabled}
+                        className={`inline-flex items-center rounded-full border px-3 py-1 text-sm transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                          active
+                            ? 'border-transparent bg-foreground text-background shadow-sm'
+                            : 'border-[color:var(--app-border)] bg-[color:var(--app-background)] text-foreground hover:bg-surface-secondary'
+                        }`}
+                        onClick={() => setActiveTab(tab.key)}
+                      >
+                        {tab.label}
+                      </button>
+                    );
+                  })}
+                </div>
+
+                <div className='flex items-center gap-3 text-xs text-muted'>
+                  <span>
+                    {t('新增已选 {{selected}} / {{total}}', {
+                      selected: selectedAddCount,
+                      total: normalizedAddModels.length,
+                    })}
+                  </span>
+                  <span>
+                    {t('删除已选 {{selected}} / {{total}}', {
+                      selected: selectedRemoveCount,
+                      total: normalizedRemoveModels.length,
+                    })}
+                  </span>
+                </div>
 
-        <Tabs
-          type='slash'
-          size='small'
-          tabList={tabList}
-          activeKey={activeTab}
-          onChange={(key) => setActiveTab(key)}
-        />
-        <div className='flex items-center gap-3 text-xs text-gray-500'>
-          <span>
-            {t('新增已选 {{selected}} / {{total}}', {
-              selected: selectedAddCount,
-              total: normalizedAddModels.length,
-            })}
-          </span>
-          <span>
-            {t('删除已选 {{selected}} / {{total}}', {
-              selected: selectedRemoveCount,
-              total: normalizedRemoveModels.length,
-            })}
-          </span>
-        </div>
+                <div className='relative'>
+                  <Search
+                    size={14}
+                    className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+                  />
+                  <Input
+                    type='text'
+                    placeholder={t('搜索模型')}
+                    value={keyword}
+                    onChange={(event) => setKeyword(event.target.value)}
+                    aria-label={t('搜索模型')}
+                    className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background pl-9 pr-3 text-sm text-foreground outline-none transition focus:border-primary'
+                  />
+                </div>
 
-        <Input
-          prefix={<IconSearch size={14} />}
-          placeholder={t('搜索模型')}
-          value={keyword}
-          onChange={(value) => setKeyword(value)}
-          showClear
-        />
+                <div className='max-h-80 overflow-y-auto pr-1'>
+                  {currentModels.length === 0 ? (
+                    <div className='flex flex-col items-center gap-3 py-10 text-center text-sm text-muted'>
+                      <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                        <Inbox size={28} />
+                      </div>
+                      <div>{t('暂无匹配模型')}</div>
+                    </div>
+                  ) : (
+                    <div className='grid grid-cols-1 gap-x-4 md:grid-cols-2'>
+                      {currentModels.map((model) => {
+                        const checked = currentSelectedModels.includes(model);
+                        return (
+                          <label
+                            key={`${activeTab}:${model}`}
+                            className='my-1 flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 text-sm text-foreground transition hover:bg-[color:var(--app-background)]'
+                          >
+                            <input
+                              type='checkbox'
+                              checked={checked}
+                              onChange={(event) =>
+                                toggleModel(model, event.target.checked)
+                              }
+                              className='h-3.5 w-3.5 accent-primary'
+                            />
+                            <span className='min-w-0 truncate'>{model}</span>
+                          </label>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
 
-        <div style={{ maxHeight: 320, overflowY: 'auto', paddingRight: 8 }}>
-          {currentModels.length === 0 ? (
-            <Empty
-              image={
-                <IllustrationNoResult style={{ width: 150, height: 150 }} />
-              }
-              darkModeImage={
-                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-              }
-              description={t('暂无匹配模型')}
-              style={{ padding: 24 }}
-            />
-          ) : (
-            <Checkbox.Group
-              value={currentSelectedModels}
-              onChange={(values) =>
-                currentSetSelectedModels(normalizeModels(values))
-              }
-            >
-              <div className='grid grid-cols-1 md:grid-cols-2 gap-x-4'>
-                {currentModels.map((model) => (
-                  <Checkbox
-                    key={`${activeTab}:${model}`}
-                    value={model}
-                    className='my-1'
-                  >
-                    {model}
-                  </Checkbox>
-                ))}
-              </div>
-            </Checkbox.Group>
-          )}
-        </div>
+                <div className='flex items-center justify-end gap-2'>
+                  <span className='text-xs text-muted'>
+                    {t('已选择 {{selected}} / {{total}}', {
+                      selected: checkedCount,
+                      total: currentModels.length,
+                    })}
+                  </span>
+                  <HeaderCheckbox
+                    checked={isAllChecked}
+                    indeterminate={isIndeterminate}
+                    onChange={handleToggleAllCurrent}
+                    ariaLabel={t('全选当前列表模型')}
+                  />
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={onCancel}>
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={handleSubmit}
+                  isPending={confirmLoading}
+                >
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
 
-        <div className='flex items-center justify-end gap-2'>
-          <Typography.Text type='secondary' size='small'>
-            {t('已选择 {{selected}} / {{total}}', {
-              selected: checkedCount,
-              total: currentModels.length,
-            })}
-          </Typography.Text>
-          <Checkbox
-            checked={isAllChecked}
-            indeterminate={isIndeterminate}
-            aria-label={t('全选当前列表模型')}
-            onChange={(e) => handleToggleAllCurrent(e.target.checked)}
-          />
-        </div>
-      </div>
-    </Modal>
+      <ConfirmDialog
+        visible={!!partialConfirm}
+        title={t('仍有未处理项')}
+        cancelText={t('去处理{{type}}', {
+          type: partialConfirm?.type || '',
+        })}
+        confirmText={t('仅提交已勾选')}
+        onCancel={() => setPartialConfirm(null)}
+        onConfirm={() => {
+          setPartialConfirm(null);
+          setPartialSubmitConfirmed(true);
+          submitSelectedChanges();
+        }}
+      >
+        {t(
+          '你还没有处理{{type}}模型（{{count}}个）。是否仅提交当前已勾选内容？',
+          {
+            type: partialConfirm?.type || '',
+            count: partialConfirm?.count || 0,
+          },
+        )}
+      </ConfirmDialog>
+    </>
   );
 };
 
diff --git a/web/src/components/table/channels/modals/CodexOAuthModal.jsx b/web/src/components/table/channels/modals/CodexOAuthModal.jsx
index 7f3f349b20a..872a1c18161 100644
--- a/web/src/components/table/channels/modals/CodexOAuthModal.jsx
+++ b/web/src/components/table/channels/modals/CodexOAuthModal.jsx
@@ -20,16 +20,22 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Modal,
   Button,
-  Space,
-  Typography,
   Input,
-  Banner,
-} from '@douyinfe/semi-ui';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Info } from 'lucide-react';
 import { API, copy, showError, showSuccess } from '../../../../helpers';
 
-const { Text } = Typography;
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
 
 const CodexOAuthModal = ({ visible, onCancel, onSuccess }) => {
   const { t } = useTranslation();
@@ -46,11 +52,13 @@ const CodexOAuthModal = ({ visible, onCancel, onSuccess }) => {
         { skipErrorHandler: true },
       );
       if (!res?.data?.success) {
+        // eslint-disable-next-line no-console
         console.error('Codex OAuth start failed:', res?.data?.message);
         throw new Error(t('启动授权失败'));
       }
       const url = res?.data?.data?.authorize_url || '';
       if (!url) {
+        // eslint-disable-next-line no-console
         console.error(
           'Codex OAuth start response missing authorize_url:',
           res?.data,
@@ -72,7 +80,6 @@ const CodexOAuthModal = ({ visible, onCancel, onSuccess }) => {
       showError(t('请先粘贴回调 URL'));
       return;
     }
-
     setLoading(true);
     try {
       const res = await API.post(
@@ -81,19 +88,19 @@ const CodexOAuthModal = ({ visible, onCancel, onSuccess }) => {
         { skipErrorHandler: true },
       );
       if (!res?.data?.success) {
+        // eslint-disable-next-line no-console
         console.error('Codex OAuth complete failed:', res?.data?.message);
         throw new Error(t('授权失败'));
       }
-
       const key = res?.data?.data?.key || '';
       if (!key) {
+        // eslint-disable-next-line no-console
         console.error('Codex OAuth complete response missing key:', res?.data);
         throw new Error(t('响应缺少凭据'));
       }
-
-      onSuccess && onSuccess(key);
+      onSuccess?.(key);
       showSuccess(t('已生成授权凭据'));
-      onCancel && onCancel();
+      onCancel?.();
     } catch (error) {
       showError(error?.message || t('授权失败'));
     } finally {
@@ -107,64 +114,74 @@ const CodexOAuthModal = ({ visible, onCancel, onSuccess }) => {
     setInput('');
   }, [visible]);
 
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
   return (
-    <Modal
-      title={t('Codex 授权')}
-      visible={visible}
-      onCancel={onCancel}
-      maskClosable={false}
-      closeOnEsc
-      width={720}
-      footer={
-        <Space>
-          <Button theme='borderless' onClick={onCancel} disabled={loading}>
-            {t('取消')}
-          </Button>
-          <Button
-            theme='solid'
-            type='primary'
-            onClick={completeOAuth}
-            loading={loading}
-          >
-            {t('生成并填入')}
-          </Button>
-        </Space>
-      }
-    >
-      <Space vertical spacing='tight' style={{ width: '100%' }}>
-        <Banner
-          type='info'
-          description={t(
-            '1) 点击「打开授权页面」完成登录；2) 浏览器会跳转到 localhost（页面打不开也没关系）；3) 复制地址栏完整 URL 粘贴到下方；4) 点击「生成并填入」。',
-          )}
-        />
-
-        <Space wrap>
-          <Button type='primary' onClick={startOAuth} loading={loading}>
-            {t('打开授权页面')}
-          </Button>
-          <Button
-            theme='outline'
-            disabled={!authorizeUrl || loading}
-            onClick={() => copy(authorizeUrl)}
-          >
-            {t('复制授权链接')}
-          </Button>
-        </Space>
-
-        <Input
-          value={input}
-          onChange={(value) => setInput(value)}
-          placeholder={t('请粘贴完整回调 URL（包含 code 与 state）')}
-          showClear
-        />
-
-        <Text type='tertiary' size='small'>
-          {t(
-            '说明：生成结果是可直接粘贴到渠道密钥里的 JSON（包含 access_token / refresh_token / account_id）。',
-          )}
-        </Text>
-      </Space>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='lg' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('Codex 授权')}
+            </ModalHeader>
+            <ModalBody className='space-y-4 px-6 py-5'>
+              <div className='flex items-start gap-3 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/40 dark:text-sky-200'>
+                <Info size={16} className='mt-0.5 shrink-0' />
+                <div>
+                  {t(
+                    '1) 点击「打开授权页面」完成登录；2) 浏览器会跳转到 localhost（页面打不开也没关系）；3) 复制地址栏完整 URL 粘贴到下方；4) 点击「生成并填入」。',
+                  )}
+                </div>
+              </div>
+
+              <div className='flex flex-wrap gap-2'>
+                <Button color='primary' onPress={startOAuth} isPending={loading}>
+                  {t('打开授权页面')}
+                </Button>
+                <Button
+                  variant='bordered'
+                  isDisabled={!authorizeUrl || loading}
+                  onPress={() => copy(authorizeUrl)}
+                >
+                  {t('复制授权链接')}
+                </Button>
+              </div>
+
+              <Input
+                type='text'
+                value={input}
+                onChange={(event) => setInput(event.target.value)}
+                placeholder={t('请粘贴完整回调 URL（包含 code 与 state）')}
+                aria-label={t('回调 URL')}
+                className={inputClass}
+              />
+
+              <div className='text-xs leading-snug text-muted'>
+                {t(
+                  '说明：生成结果是可直接粘贴到渠道密钥里的 JSON（包含 access_token / refresh_token / account_id）。',
+                )}
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={onCancel} isDisabled={loading}>
+                {t('取消')}
+              </Button>
+              <Button
+                color='primary'
+                onPress={completeOAuth}
+                isPending={loading}
+              >
+                {t('生成并填入')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/channels/modals/CodexUsageModal.jsx b/web/src/components/table/channels/modals/CodexUsageModal.jsx
index 1a42eafda0a..ed7a8eacb5c 100644
--- a/web/src/components/table/channels/modals/CodexUsageModal.jsx
+++ b/web/src/components/table/channels/modals/CodexUsageModal.jsx
@@ -6,11 +6,6 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
@@ -19,18 +14,44 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
-  Modal,
   Button,
-  Progress,
-  Typography,
-  Spin,
-  Tag,
-  Descriptions,
-  Collapse,
-} from '@douyinfe/semi-ui';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
+import { ChevronDown, RefreshCw, X } from 'lucide-react';
 import { API, showError } from '../../../../helpers';
 
-const { Text } = Typography;
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  red: 'bg-danger/15 text-danger',
+  amber: 'bg-warning/15 text-warning',
+  blue: 'bg-primary/15 text-primary',
+  cyan: 'bg-[color-mix(in_oklab,var(--app-primary)_18%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_72%,var(--app-foreground))]',
+  violet:
+    'bg-[color-mix(in_oklab,var(--app-primary)_12%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_82%,var(--app-foreground))]',
+  grey: 'bg-surface-secondary text-muted',
+};
+
+function StatusChip({ tone = 'grey', size = 'md', strong = false, children }) {
+  const sizeCls = size === 'lg' ? 'px-2.5 py-1 text-xs' : 'px-2 py-0.5 text-xs';
+  const weight = strong ? 'font-semibold' : 'font-medium';
+  return (
+    <span
+      className={`inline-flex items-center rounded-full ${sizeCls} ${weight} ${
+        TAG_TONE[tone] || TAG_TONE.grey
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
 
 const clampPercent = (value) => {
   const v = Number(value);
@@ -38,13 +59,35 @@ const clampPercent = (value) => {
   return Math.max(0, Math.min(100, v));
 };
 
-const pickStrokeColor = (percent) => {
+// Returns the semantic Tailwind class name for the progress bar fill
+// based on the current usage percentage.
+const pickProgressTone = (percent) => {
   const p = clampPercent(percent);
-  if (p >= 95) return '#ef4444';
-  if (p >= 80) return '#f59e0b';
-  return '#3b82f6';
+  if (p >= 95) return 'bg-danger';
+  if (p >= 80) return 'bg-warning';
+  return 'bg-primary';
 };
 
+function ProgressBar({ percent, showInfo = true }) {
+  const safe = clampPercent(percent);
+  const tone = pickProgressTone(safe);
+  return (
+    <div className='flex items-center gap-2'>
+      <div className='h-2 flex-1 overflow-hidden rounded-full bg-surface-secondary'>
+        <div
+          className={`h-full rounded-full transition-[width] duration-200 ${tone}`}
+          style={{ width: `${safe}%` }}
+        />
+      </div>
+      {showInfo ? (
+        <span className='shrink-0 text-xs font-medium text-foreground'>
+          {Math.round(safe)}%
+        </span>
+      ) : null}
+    </div>
+  );
+}
+
 const normalizePlanType = (value) => {
   if (value == null) return '';
   return String(value).trim().toLowerCase();
@@ -98,10 +141,12 @@ const resolveRateLimitWindows = (data) => {
   }
 
   if (!fiveHourWindow) {
-    fiveHourWindow = windows.find((windowData) => windowData !== weeklyWindow) ?? null;
+    fiveHourWindow =
+      windows.find((windowData) => windowData !== weeklyWindow) ?? null;
   }
   if (!weeklyWindow) {
-    weeklyWindow = windows.find((windowData) => windowData !== fiveHourWindow) ?? null;
+    weeklyWindow =
+      windows.find((windowData) => windowData !== fiveHourWindow) ?? null;
   }
 
   return { fiveHourWindow, weeklyWindow };
@@ -154,7 +199,7 @@ const formatAccountTypeLabel = (value, t) => {
   }
 };
 
-const getAccountTypeTagColor = (value) => {
+const getAccountTypeTagTone = (value) => {
   const normalized = normalizePlanType(value);
   switch (normalized) {
     case 'enterprise':
@@ -175,43 +220,42 @@ const getAccountTypeTagColor = (value) => {
 const resolveUsageStatusTag = (t, rateLimit) => {
   const tt = typeof t === 'function' ? t : (v) => v;
   if (!rateLimit || Object.keys(rateLimit).length === 0) {
-    return <Tag color='grey'>{tt('待确认')}</Tag>;
+    return <StatusChip tone='grey'>{tt('待确认')}</StatusChip>;
   }
   if (rateLimit?.allowed && !rateLimit?.limit_reached) {
-    return <Tag color='green'>{tt('可用')}</Tag>;
+    return <StatusChip tone='green'>{tt('可用')}</StatusChip>;
   }
-  return <Tag color='red'>{tt('受限')}</Tag>;
+  return <StatusChip tone='red'>{tt('受限')}</StatusChip>;
 };
 
-const AccountInfoValue = ({ t, value, onCopy, monospace = false }) => {
+function AccountInfoRow({ t, label, value, onCopy, monospace = false }) {
   const tt = typeof t === 'function' ? t : (v) => v;
   const text = getDisplayText(value);
   const hasValue = text !== '';
 
   return (
-    <div className='flex min-w-0 items-start justify-between gap-2'>
+    <div className='grid grid-cols-[120px_1fr_auto] items-start gap-2 px-3 py-2'>
+      <div className='text-xs font-medium text-muted'>{label}</div>
       <div
-        className={`min-w-0 flex-1 break-all text-xs leading-5 text-semi-color-text-1 ${
+        className={`min-w-0 break-all text-xs leading-5 text-foreground ${
           monospace ? 'font-mono' : ''
         }`}
       >
         {hasValue ? text : '-'}
       </div>
       <Button
-        size='small'
-        type='tertiary'
-        theme='borderless'
-        className='shrink-0 px-1 text-xs'
-        disabled={!hasValue}
-        onClick={() => onCopy?.(text)}
+        size='sm'
+        variant='light'
+        isDisabled={!hasValue}
+        onPress={() => onCopy?.(text)}
       >
         {tt('复制')}
       </Button>
     </div>
   );
-};
+}
 
-const RateLimitWindowCard = ({ t, title, windowData }) => {
+function RateLimitWindowCard({ t, title, windowData }) {
   const tt = typeof t === 'function' ? t : (v) => v;
   const hasWindowData =
     !!windowData &&
@@ -223,28 +267,24 @@ const RateLimitWindowCard = ({ t, title, windowData }) => {
   const limitWindowSeconds = windowData?.limit_window_seconds;
 
   return (
-    <div className='rounded-lg border border-semi-color-border bg-semi-color-bg-0 p-3'>
+    <div className='rounded-xl border border-border bg-background p-3'>
       <div className='flex items-center justify-between gap-2'>
-        <div className='font-medium'>{title}</div>
-        <Text type='tertiary' size='small'>
+        <div className='text-sm font-semibold text-foreground'>{title}</div>
+        <div className='text-xs text-muted'>
           {tt('重置时间：')}
           {formatUnixSeconds(resetAt)}
-        </Text>
+        </div>
       </div>
 
       {hasWindowData ? (
-        <div className='mt-2'>
-          <Progress
-            percent={percent}
-            stroke={pickStrokeColor(percent)}
-            showInfo={true}
-          />
+        <div className='mt-3'>
+          <ProgressBar percent={percent} />
         </div>
       ) : (
-        <div className='mt-3 text-sm text-semi-color-text-2'>-</div>
+        <div className='mt-3 text-sm text-muted'>-</div>
       )}
 
-      <div className='mt-1 flex flex-wrap items-center gap-2 text-xs text-semi-color-text-2'>
+      <div className='mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted'>
         <div>
           {tt('已使用：')}
           {hasWindowData ? `${percent}%` : '-'}
@@ -260,9 +300,9 @@ const RateLimitWindowCard = ({ t, title, windowData }) => {
       </div>
     </div>
   );
-};
+}
 
-const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
+function CodexUsageView({ t, record, payload, onCopy, onRefresh }) {
   const tt = typeof t === 'function' ? t : (v) => v;
   const [showRawJson, setShowRawJson] = useState(false);
   const data = payload?.data ?? null;
@@ -271,13 +311,15 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
   const upstreamStatus = payload?.upstream_status;
   const accountType = data?.plan_type ?? rateLimit?.plan_type;
   const accountTypeLabel = formatAccountTypeLabel(accountType, tt);
-  const accountTypeTagColor = getAccountTypeTagColor(accountType);
+  const accountTypeTagTone = getAccountTypeTagTone(accountType);
   const statusTag = resolveUsageStatusTag(tt, rateLimit);
   const userId = data?.user_id;
   const email = data?.email;
   const accountId = data?.account_id;
   const errorMessage =
-    payload?.success === false ? getDisplayText(payload?.message) || tt('获取用量失败') : '';
+    payload?.success === false
+      ? getDisplayText(payload?.message) || tt('获取用量失败')
+      : '';
 
   const rawText =
     typeof data === 'string' ? data : JSON.stringify(data ?? payload, null, 2);
@@ -285,64 +327,64 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
   return (
     <div className='flex flex-col gap-4'>
       {errorMessage && (
-        <div className='rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700'>
+        <div className='rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger'>
           {errorMessage}
         </div>
       )}
 
-      <div className='rounded-xl border border-semi-color-border bg-semi-color-bg-0 p-3'>
+      <div className='rounded-xl border border-border bg-background p-3'>
         <div className='flex flex-wrap items-start justify-between gap-2'>
           <div className='min-w-0'>
-            <div className='text-xs font-medium text-semi-color-text-2'>
+            <div className='text-xs font-semibold text-muted'>
               {tt('Codex 帐号')}
             </div>
             <div className='mt-2 flex flex-wrap items-center gap-2'>
-              <Tag
-                color={accountTypeTagColor}
-                type='light'
-                shape='circle'
-                size='large'
-                className='font-semibold'
-              >
+              <StatusChip tone={accountTypeTagTone} size='lg' strong>
                 {accountTypeLabel}
-              </Tag>
+              </StatusChip>
               {statusTag}
-              <Tag color='grey' type='light' shape='circle'>
+              <StatusChip tone='grey'>
                 {tt('上游状态码：')}
                 {upstreamStatus ?? '-'}
-              </Tag>
+              </StatusChip>
             </div>
           </div>
-          <Button size='small' type='tertiary' theme='outline' onClick={onRefresh}>
+          <Button
+            size='sm'
+            variant='bordered'
+            startContent={<RefreshCw size={14} />}
+            onPress={onRefresh}
+          >
             {tt('刷新')}
           </Button>
         </div>
 
-        <div className='mt-2 rounded-lg bg-semi-color-fill-0 px-3 py-2'>
-          <Descriptions>
-            <Descriptions.Item itemKey='User ID'>
-              <AccountInfoValue
-                t={tt}
-                value={userId}
-                onCopy={onCopy}
-                monospace={true}
-              />
-            </Descriptions.Item>
-            <Descriptions.Item itemKey={tt('邮箱')}>
-              <AccountInfoValue t={tt} value={email} onCopy={onCopy} />
-            </Descriptions.Item>
-            <Descriptions.Item itemKey='Account ID'>
-              <AccountInfoValue
-                t={tt}
-                value={accountId}
-                onCopy={onCopy}
-                monospace={true}
-              />
-            </Descriptions.Item>
-          </Descriptions>
+        <div className='mt-3 overflow-hidden rounded-lg bg-surface-secondary'>
+          <AccountInfoRow
+            t={tt}
+            label='User ID'
+            value={userId}
+            onCopy={onCopy}
+            monospace
+          />
+          <div className='border-t border-border' />
+          <AccountInfoRow
+            t={tt}
+            label={tt('邮箱')}
+            value={email}
+            onCopy={onCopy}
+          />
+          <div className='border-t border-border' />
+          <AccountInfoRow
+            t={tt}
+            label='Account ID'
+            value={accountId}
+            onCopy={onCopy}
+            monospace
+          />
         </div>
 
-        <div className='mt-2 text-xs text-semi-color-text-2'>
+        <div className='mt-2 text-xs text-muted'>
           {tt('渠道：')}
           {record?.name || '-'} ({tt('编号：')}
           {record?.id || '-'})
@@ -350,13 +392,11 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
       </div>
 
       <div>
-        <div className='mb-2'>
-          <div className='text-sm font-semibold text-semi-color-text-0'>
-            {tt('额度窗口')}
-          </div>
-          <Text type='tertiary' size='small'>
-            {tt('用于观察当前帐号在 Codex 上游的限额使用情况')}
-          </Text>
+        <div className='text-sm font-semibold text-foreground'>
+          {tt('额度窗口')}
+        </div>
+        <div className='text-xs text-muted'>
+          {tt('用于观察当前帐号在 Codex 上游的限额使用情况')}
         </div>
       </div>
 
@@ -373,35 +413,42 @@ const CodexUsageView = ({ t, record, payload, onCopy, onRefresh }) => {
         />
       </div>
 
-      <Collapse
-        activeKey={showRawJson ? ['raw-json'] : []}
-        onChange={(activeKey) => {
-          const keys = Array.isArray(activeKey) ? activeKey : [activeKey];
-          setShowRawJson(keys.includes('raw-json'));
-        }}
+      {/* Raw JSON collapse: native <details> mirrors the existing
+          CollapseSection pattern used elsewhere in the migrated modals. */}
+      <details
+        className='group rounded-xl border border-border bg-background'
+        open={showRawJson}
+        onToggle={(event) => setShowRawJson(event.currentTarget.open)}
       >
-        <Collapse.Panel header={tt('原始 JSON')} itemKey='raw-json'>
+        <summary className='flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-foreground'>
+          <span>{tt('原始 JSON')}</span>
+          <ChevronDown
+            size={16}
+            className='text-muted transition-transform group-open:rotate-180'
+          />
+        </summary>
+        <div className='border-t border-border px-3 py-3'>
           <div className='mb-2 flex justify-end'>
             <Button
-              size='small'
-              type='primary'
-              theme='outline'
-              onClick={() => onCopy?.(rawText)}
-              disabled={!rawText}
+              size='sm'
+              variant='bordered'
+              color='primary'
+              isDisabled={!rawText}
+              onPress={() => onCopy?.(rawText)}
             >
               {tt('复制')}
             </Button>
           </div>
-          <pre className='max-h-[50vh] overflow-y-auto rounded-lg bg-semi-color-fill-0 p-3 text-xs text-semi-color-text-0'>
+          <pre className='max-h-[50vh] overflow-y-auto rounded-lg bg-surface-secondary p-3 text-xs text-foreground'>
             {rawText}
           </pre>
-        </Collapse.Panel>
-      </Collapse>
+        </div>
+      </details>
     </div>
   );
-};
+}
 
-const CodexUsageLoader = ({ t, record, initialPayload, onCopy }) => {
+function CodexUsageLoader({ t, record, initialPayload, onCopy }) {
   const tt = typeof t === 'function' ? t : (v) => v;
   const [loading, setLoading] = useState(!initialPayload);
   const [payload, setPayload] = useState(initialPayload ?? null);
@@ -452,8 +499,9 @@ const CodexUsageLoader = ({ t, record, initialPayload, onCopy }) => {
 
   if (loading) {
     return (
-      <div className='flex items-center justify-center py-10'>
-        <Spin spinning={true} size='large' tip={tt('加载中...')} />
+      <div className='flex flex-col items-center justify-center gap-3 py-10'>
+        <Spinner color='primary' />
+        <div className='text-xs text-muted'>{tt('加载中...')}</div>
       </div>
     );
   }
@@ -461,13 +509,14 @@ const CodexUsageLoader = ({ t, record, initialPayload, onCopy }) => {
   if (!payload) {
     return (
       <div className='flex flex-col gap-3'>
-        <Text type='danger'>{tt('获取用量失败')}</Text>
+        <div className='text-sm text-danger'>{tt('获取用量失败')}</div>
         <div className='flex justify-end'>
           <Button
-            size='small'
-            type='primary'
-            theme='outline'
-            onClick={fetchUsage}
+            size='sm'
+            variant='bordered'
+            color='primary'
+            startContent={<RefreshCw size={14} />}
+            onPress={fetchUsage}
           >
             {tt('刷新')}
           </Button>
@@ -485,30 +534,60 @@ const CodexUsageLoader = ({ t, record, initialPayload, onCopy }) => {
       onRefresh={fetchUsage}
     />
   );
-};
-
-export const openCodexUsageModal = ({ t, record, payload, onCopy }) => {
+}
+
+const CodexUsageModal = ({
+  visible,
+  onClose,
+  t,
+  record,
+  initialPayload,
+  onCopy,
+}) => {
   const tt = typeof t === 'function' ? t : (v) => v;
-
-  Modal.info({
-    title: tt('Codex 帐号与用量'),
-    centered: true,
-    width: 900,
-    style: { maxWidth: '95vw' },
-    content: (
-      <CodexUsageLoader
-        t={tt}
-        record={record}
-        initialPayload={payload}
-        onCopy={onCopy}
-      />
-    ),
-    footer: (
-      <div className='flex justify-end gap-2'>
-        <Button type='primary' theme='solid' onClick={() => Modal.destroyAll()}>
-          {tt('关闭')}
-        </Button>
-      </div>
-    ),
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onClose?.();
+    },
   });
+
+  return (
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer
+          size='3xl'
+          placement='center'
+          className='max-w-[95vw]'
+        >
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <span>{tt('Codex 帐号与用量')}</span>
+            </ModalHeader>
+            <ModalBody className='px-6 py-5'>
+              {visible ? (
+                <CodexUsageLoader
+                  t={tt}
+                  record={record}
+                  initialPayload={initialPayload}
+                  onCopy={onCopy}
+                />
+              ) : null}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button
+                color='primary'
+                startContent={<X size={14} />}
+                onPress={onClose}
+              >
+                {tt('关闭')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
+    </Modal>
+  );
 };
+
+export default CodexUsageModal;
diff --git a/web/src/components/table/channels/modals/ColumnSelectorModal.jsx b/web/src/components/table/channels/modals/ColumnSelectorModal.jsx
index b46379ac543..bc7a5b640fe 100644
--- a/web/src/components/table/channels/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/channels/modals/ColumnSelectorModal.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
 import { getChannelsColumns } from '../ChannelsColumnDefs';
+import ColumnSelectorDialog from '../../../common/ui/ColumnSelectorDialog';
 
 const ColumnSelectorModal = ({
   showColumnSelector,
@@ -66,62 +66,23 @@ const ColumnSelectorModal = ({
     refresh,
     activePage,
     channels,
-  });
+  }).filter((column) => column.title);
 
   return (
-    <Modal
+    <ColumnSelectorDialog
       title={t('列设置')}
       visible={showColumnSelector}
-      onCancel={() => setShowColumnSelector(false)}
-      footer={
-        <div className='flex justify-end'>
-          <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
-          <Button onClick={() => setShowColumnSelector(false)}>
-            {t('取消')}
-          </Button>
-          <Button onClick={() => setShowColumnSelector(false)}>
-            {t('确定')}
-          </Button>
-        </div>
-      }
-    >
-      <div style={{ marginBottom: 20 }}>
-        <Checkbox
-          checked={Object.values(visibleColumns).every((v) => v === true)}
-          indeterminate={
-            Object.values(visibleColumns).some((v) => v === true) &&
-            !Object.values(visibleColumns).every((v) => v === true)
-          }
-          onChange={(e) => handleSelectAll(e.target.checked)}
-        >
-          {t('全选')}
-        </Checkbox>
-      </div>
-      <div
-        className='flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4'
-        style={{ border: '1px solid var(--semi-color-border)' }}
-      >
-        {allColumns.map((column) => {
-          // Skip columns without title
-          if (!column.title) {
-            return null;
-          }
-
-          return (
-            <div key={column.key} className='w-1/2 mb-4 pr-2'>
-              <Checkbox
-                checked={!!visibleColumns[column.key]}
-                onChange={(e) =>
-                  handleColumnVisibilityChange(column.key, e.target.checked)
-                }
-              >
-                {column.title}
-              </Checkbox>
-            </div>
-          );
-        })}
-      </div>
-    </Modal>
+      onClose={() => setShowColumnSelector(false)}
+      resetText={t('重置')}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
+      allText={t('全选')}
+      visibleColumns={visibleColumns}
+      columns={allColumns}
+      onColumnChange={handleColumnVisibilityChange}
+      onSelectAll={handleSelectAll}
+      onReset={initDefaultColumns}
+    />
   );
 };
 
diff --git a/web/src/components/table/channels/modals/EditChannelModal.jsx b/web/src/components/table/channels/modals/EditChannelModal.jsx
index f0395d2f810..0e514a87a7f 100644
--- a/web/src/components/table/channels/modals/EditChannelModal.jsx
+++ b/web/src/components/table/channels/modals/EditChannelModal.jsx
@@ -17,7 +17,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef, useMemo } from 'react';
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   API,
@@ -29,27 +37,34 @@ import {
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import { CHANNEL_OPTIONS, MODEL_FETCHABLE_CHANNEL_TYPES } from '../../../../constants';
 import {
-  SideSheet,
-  Space,
-  Spin,
   Button,
-  Typography,
-  Checkbox,
-  Banner,
-  Modal,
-  ImagePreview,
   Card,
-  Tag,
-  Avatar,
-  Form,
-  Row,
-  Col,
-  Highlight,
-  Input,
+  Input as HeroInput,
+  Modal as HeroModal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Switch as HeroSwitch,
   Tooltip,
-  Collapse,
-  Dropdown,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
+import {
+  Bolt,
+  Check,
+  ChevronDown,
+  Code2,
+  Copy as CopyIcon,
+  Globe,
+  Save,
+  Search,
+  Server,
+  Settings,
+  Trash2,
+  X as CloseIcon,
+} from 'lucide-react';
 import {
   getChannelModels,
   copy,
@@ -66,6 +81,7 @@ import JSONEditor from '../../../common/ui/JSONEditor';
 import SecureVerificationModal from '../../../common/modals/SecureVerificationModal';
 import StatusCodeRiskGuardModal from './StatusCodeRiskGuardModal';
 import ChannelKeyDisplay from '../../../common/ui/ChannelKeyDisplay';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 import { useSecureVerification } from '../../../../hooks/common/useSecureVerification';
 import { parseChannelConnectionString } from '../../../../helpers/token';
 import { createApiCalls } from '../../../../services/secureVerification';
@@ -73,20 +89,1480 @@ import {
   collectInvalidStatusCodeEntries,
   collectNewDisallowedStatusCodeRedirects,
 } from './statusCodeRiskGuard';
-import {
-  IconSave,
-  IconClose,
-  IconServer,
-  IconSetting,
-  IconCode,
-  IconCopy,
-  IconGlobe,
-  IconBolt,
-  IconSearch,
-  IconChevronDown,
-} from '@douyinfe/semi-icons';
-
-const { Text, Title } = Typography;
+
+// ----------------------------- legacy shims -----------------------------
+//
+// EditChannelModal is ~3900 lines. To keep the migration safe, the existing
+// Semi-style render tree is preserved verbatim. The shims below adapt that
+// API surface (Form context, Modal, SideSheet, Row/Col, Space, Tag, etc.)
+// to HeroUI v3 + Tailwind primitives.
+//
+// All shims live in this file (not exported) so callers see the same
+// `<Form.Input field='x' />` ergonomics, while the underlying DOM is
+// HeroUI v3 + native inputs styled with semantic tokens.
+
+const TAG_TONE_MAP = {
+  blue: 'bg-primary/15 text-primary',
+  cyan: 'bg-[color-mix(in_oklab,var(--app-primary)_18%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_72%,var(--app-foreground))]',
+  green: 'bg-success/15 text-success',
+  red: 'bg-danger/15 text-danger',
+  orange: 'bg-warning/15 text-warning',
+  yellow: 'bg-warning/15 text-warning',
+  purple:
+    'bg-[color-mix(in_oklab,var(--app-primary)_8%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_82%,var(--app-foreground))]',
+  white: 'bg-background border border-border text-foreground',
+  grey: 'bg-surface-secondary text-muted',
+  default: 'bg-surface-secondary text-muted',
+};
+
+function Tag({ color = 'grey', size, shape, type, prefixIcon, style, className = '', children }) {
+  // `shape='circle'` and `type='light'` are decorative-only in Semi; ignore them.
+  const tone = TAG_TONE_MAP[color] || TAG_TONE_MAP.grey;
+  const sizeCls =
+    size === 'small'
+      ? 'px-1.5 py-0.5 text-[11px]'
+      : size === 'large'
+        ? 'px-2.5 py-1 text-xs'
+        : 'px-2 py-0.5 text-xs';
+  return (
+    <span
+      style={style}
+      className={`inline-flex items-center gap-1 rounded-full font-semibold ${sizeCls} ${tone} ${className}`}
+    >
+      {prefixIcon}
+      {children}
+    </span>
+  );
+}
+
+const TEXT_TYPE_CLASS = {
+  primary: 'text-foreground',
+  secondary: 'text-foreground',
+  tertiary: 'text-muted',
+  quaternary: 'text-muted/70',
+  danger: 'text-danger',
+  warning: 'text-warning',
+};
+
+function Text({
+  type,
+  size,
+  strong,
+  underline,
+  link,
+  icon,
+  copyable,
+  className = '',
+  style,
+  children,
+  onClick,
+  ...rest
+}) {
+  const typeCls = TEXT_TYPE_CLASS[type] || 'text-foreground';
+  const sizeCls = size === 'small' ? 'text-xs' : '';
+  const weightCls = strong ? 'font-semibold' : '';
+  const underlineCls = underline ? 'underline' : '';
+  if (link?.href) {
+    return (
+      <a
+        href={link.href}
+        target={link.target || '_self'}
+        rel='noopener noreferrer'
+        className={`inline-flex items-center gap-1 text-primary hover:underline ${sizeCls} ${weightCls} ${className}`}
+        style={style}
+        {...rest}
+      >
+        {icon}
+        {children}
+      </a>
+    );
+  }
+  return (
+    <span
+      style={style}
+      onClick={onClick}
+      className={`${typeCls} ${sizeCls} ${weightCls} ${underlineCls} ${className}`}
+      {...rest}
+    >
+      {icon}
+      {children}
+    </span>
+  );
+}
+
+function Title({ heading = 6, className = '', style, children, ...rest }) {
+  const Tag = `h${Math.min(Math.max(Number(heading) || 6, 1), 6)}`;
+  const sizeCls =
+    heading <= 3
+      ? 'text-xl font-semibold'
+      : heading === 4
+        ? 'text-lg font-semibold'
+        : heading === 5
+          ? 'text-base font-semibold'
+          : 'text-sm font-semibold';
+  return (
+    <Tag
+      style={style}
+      className={`m-0 text-foreground ${sizeCls} ${className}`}
+      {...rest}
+    >
+      {children}
+    </Tag>
+  );
+}
+
+const Typography = { Text, Title };
+
+// Space: flex container.
+function Space({
+  vertical,
+  wrap,
+  spacing,
+  align,
+  style,
+  className = '',
+  children,
+}) {
+  const flexDir = vertical ? 'flex-col items-start' : 'flex-row';
+  const wrapCls = wrap ? 'flex-wrap' : '';
+  const alignCls =
+    align === 'center'
+      ? 'items-center'
+      : align === 'flex-end'
+        ? 'items-end'
+        : align === 'baseline'
+          ? 'items-baseline'
+          : vertical
+            ? ''
+            : 'items-center';
+  const gap =
+    typeof spacing === 'number'
+      ? { gap: `${spacing}px` }
+      : { gap: '8px' };
+  return (
+    <div
+      style={{ ...gap, ...(style || {}) }}
+      className={`flex ${flexDir} ${wrapCls} ${alignCls} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Row / Col: 24-column flex-wrap grid.
+function Row({ gutter, align, justify, style, className = '', children }) {
+  const gap =
+    typeof gutter === 'number'
+      ? gutter
+      : typeof gutter === 'object' && gutter !== null
+        ? gutter.md || gutter.sm || gutter.xs || 16
+        : 0;
+  const flexAlign =
+    align === 'middle'
+      ? 'items-center'
+      : align === 'top'
+        ? 'items-start'
+        : align === 'bottom'
+          ? 'items-end'
+          : '';
+  const flexJustify =
+    justify === 'space-between'
+      ? 'justify-between'
+      : justify === 'end'
+        ? 'justify-end'
+        : justify === 'center'
+          ? 'justify-center'
+          : '';
+  return (
+    <div
+      style={{ rowGap: `${gap}px`, columnGap: `${gap}px`, ...(style || {}) }}
+      className={`flex flex-wrap ${flexAlign} ${flexJustify} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Col({ xs, sm, md, lg, xl, span, style, className = '', children }) {
+  const effective = md ?? sm ?? xs ?? span ?? lg ?? xl ?? 24;
+  const width = `${(Math.min(Math.max(Number(effective) || 24, 1), 24) / 24) * 100}%`;
+  return (
+    <div
+      style={{ flexBasis: width, maxWidth: width, ...(style || {}) }}
+      className={`min-w-0 ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Avatar: round bg with optional color tint and image src.
+function Avatar({
+  size,
+  color,
+  src,
+  alt,
+  shape,
+  style,
+  className = '',
+  children,
+}) {
+  const sizeCls =
+    size === 'small' ? 'h-8 w-8' : size === 'large' ? 'h-12 w-12' : 'h-10 w-10';
+  const shapeCls = shape === 'square' ? 'rounded-md' : 'rounded-full';
+  const TONE = {
+    blue: 'bg-primary/10 text-primary',
+    green: 'bg-success/10 text-success',
+    purple:
+      'bg-[color-mix(in_oklab,var(--app-primary)_8%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_82%,var(--app-foreground))]',
+    orange: 'bg-warning/10 text-warning',
+    teal: 'bg-success/10 text-success',
+    red: 'bg-danger/10 text-danger',
+  };
+  const tone = TONE[color] || 'bg-surface-secondary text-muted';
+  if (src) {
+    return (
+      <img
+        src={src}
+        alt={alt || ''}
+        style={style}
+        className={`${sizeCls} ${shapeCls} object-cover ${className}`}
+      />
+    );
+  }
+  return (
+    <div
+      style={style}
+      className={`flex shrink-0 items-center justify-center ${sizeCls} ${shapeCls} ${tone} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Banner: tinted info/warning/error block.
+function Banner({
+  type = 'info',
+  description,
+  title,
+  icon,
+  style,
+  className = '',
+  // eslint-disable-next-line no-unused-vars
+  closeIcon,
+  // eslint-disable-next-line no-unused-vars
+  fullMode,
+  // eslint-disable-next-line no-unused-vars
+  bordered,
+}) {
+  const tone =
+    type === 'warning'
+      ? 'border-warning/30 bg-warning/5'
+      : type === 'danger' || type === 'error'
+        ? 'border-danger/30 bg-danger/5'
+        : type === 'success'
+          ? 'border-success/30 bg-success/5'
+          : 'border-primary/20 bg-primary/5';
+  return (
+    <div
+      style={style}
+      className={`flex items-start gap-2 rounded-xl border ${tone} px-3 py-2 text-sm text-foreground ${className}`}
+    >
+      {icon ? <span className='mt-0.5 shrink-0'>{icon}</span> : null}
+      <div className='flex-1 break-words'>
+        {title ? <div className='mb-0.5 font-semibold'>{title}</div> : null}
+        {description}
+      </div>
+    </div>
+  );
+}
+
+// Spin: simple wrapper around HeroUI's Spinner that respects Semi's
+// `spinning` flag + child overlay layout.
+function Spin({ spinning, size, tip, children, style, className = '' }) {
+  if (children == null) {
+    return (
+      <div
+        style={style}
+        className={`inline-flex items-center gap-2 ${className}`}
+      >
+        <span className='inline-block h-4 w-4 animate-spin rounded-full border-2 border-primary/30 border-t-primary' />
+        {tip ? <span className='text-xs text-muted'>{tip}</span> : null}
+      </div>
+    );
+  }
+  return (
+    <div
+      style={style}
+      className={`relative ${className}`}
+    >
+      {children}
+      {spinning ? (
+        <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+          <span className='inline-block h-6 w-6 animate-spin rounded-full border-2 border-primary/30 border-t-primary' />
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// Checkbox shim with Semi's `checked/onChange(event)` API.
+function Checkbox({
+  checked,
+  onChange,
+  disabled,
+  className = '',
+  style,
+  children,
+}) {
+  return (
+    <label
+      style={style}
+      className={`inline-flex cursor-pointer items-center gap-2 text-sm text-foreground ${className}`}
+    >
+      <input
+        type='checkbox'
+        checked={!!checked}
+        onChange={(event) =>
+          onChange?.({ target: { checked: event.target.checked } })
+        }
+        disabled={disabled}
+        className='h-4 w-4 accent-primary'
+      />
+      {children ? <span>{children}</span> : null}
+    </label>
+  );
+}
+
+// Highlight: simple wrapper that renders the source text and bolds the
+// matched keyword(s). Fallback to plain text if `searchWords` is empty.
+function Highlight({
+  sourceString,
+  searchWords,
+  className = '',
+  style,
+}) {
+  const text = sourceString ?? '';
+  const words = (searchWords || []).filter(Boolean);
+  if (words.length === 0)
+    return (
+      <span style={style} className={className}>
+        {text}
+      </span>
+    );
+  const pattern = new RegExp(
+    `(${words
+      .map((w) => String(w).replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+      .join('|')})`,
+    'gi',
+  );
+  const parts = text.split(pattern);
+  return (
+    <span style={style} className={className}>
+      {parts.map((part, idx) => {
+        if (
+          words.some(
+            (w) => String(w).toLowerCase() === String(part).toLowerCase(),
+          )
+        ) {
+          return (
+            <mark
+              key={idx}
+              className='bg-warning/20 text-foreground'
+            >
+              {part}
+            </mark>
+          );
+        }
+        return <React.Fragment key={idx}>{part}</React.Fragment>;
+      })}
+    </span>
+  );
+}
+
+// ImagePreview: minimal wrapper used only as a passthrough container when
+// preview is requested. The original API is rich; here we just render the
+// children element. Passes `src` through if used directly as <ImagePreview src=>.
+function ImagePreview({ src, alt, children, style, className = '' }) {
+  if (children) return children;
+  if (!src) return null;
+  return <img src={src} alt={alt || ''} style={style} className={className} />;
+}
+
+// Dropdown: click-triggered menu. Mirrors Semi's `<Dropdown trigger
+// position menu><triggerNode /></Dropdown>` API.
+function Dropdown({
+  trigger = 'click',
+  position,
+  menu = [],
+  className = '',
+  style,
+  children,
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onClickOutside);
+    return () => document.removeEventListener('mousedown', onClickOutside);
+  }, [open]);
+
+  const place =
+    position === 'bottomRight'
+      ? 'right-0 top-full mt-1'
+      : position === 'bottomLeft'
+        ? 'left-0 top-full mt-1'
+        : position === 'topRight'
+          ? 'right-0 bottom-full mb-1'
+          : position === 'topLeft'
+            ? 'left-0 bottom-full mb-1'
+            : 'left-0 top-full mt-1';
+
+  return (
+    <span
+      ref={ref}
+      style={style}
+      className={`relative inline-flex ${className}`}
+    >
+      <span
+        onClick={(event) => {
+          event.stopPropagation();
+          setOpen((v) => !v);
+        }}
+      >
+        {children}
+      </span>
+      {open ? (
+        <div
+          role='menu'
+          className={`absolute z-50 min-w-[10rem] overflow-hidden rounded-lg border border-border bg-background shadow-lg ${place}`}
+        >
+          {menu.map((item, idx) => {
+            if (item.node === 'divider') {
+              return (
+                <div
+                  key={`divider-${idx}`}
+                  className='my-1 h-px bg-[color:var(--app-border)]'
+                />
+              );
+            }
+            return (
+              <button
+                key={item.key ?? `item-${idx}`}
+                type='button'
+                role='menuitem'
+                disabled={item.disabled}
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setOpen(false);
+                  item.onClick?.();
+                }}
+                className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                  item.danger
+                    ? 'text-danger hover:bg-danger/5'
+                    : 'text-foreground hover:bg-surface-secondary'
+                }`}
+              >
+                {item.icon}
+                <span className='min-w-0 flex-1'>{item.name}</span>
+                {item.suffix}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </span>
+  );
+}
+
+// Collapse / Collapse.Panel: controlled accordion (mirrors Semi).
+function Collapse({ activeKey, onChange, className = '', children }) {
+  const panels = React.Children.toArray(children).filter(Boolean);
+  const activeKeys = Array.isArray(activeKey)
+    ? activeKey
+    : activeKey != null
+      ? [activeKey]
+      : [];
+  const togglePanel = (key) => {
+    if (!key) return;
+    const isOpen = activeKeys.includes(key);
+    const next = isOpen
+      ? activeKeys.filter((k) => k !== key)
+      : [...activeKeys, key];
+    onChange?.(next);
+  };
+  return (
+    <div className={`flex flex-col gap-1.5 ${className}`}>
+      {panels.map((panel) => {
+        const { itemKey, header, children: panelChildren } = panel.props;
+        const open = activeKeys.includes(itemKey);
+        return (
+          <div
+            key={itemKey}
+            className='overflow-hidden rounded-xl border border-border bg-background'
+          >
+            <button
+              type='button'
+              onClick={() => togglePanel(itemKey)}
+              className='flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 text-left text-sm font-medium text-foreground hover:bg-surface-secondary'
+            >
+              <span className='min-w-0 flex-1'>{header}</span>
+              <ChevronDown
+                size={16}
+                className={`shrink-0 text-muted transition-transform ${
+                  open ? 'rotate-180' : ''
+                }`}
+              />
+            </button>
+            {open ? (
+              <div className='border-t border-border px-3 py-3'>
+                {panelChildren}
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+Collapse.Panel = function CollapsePanel() {
+  return null;
+};
+
+// Modal shim w/ imperative `Modal.confirm({title,content,onOk,onCancel})`
+// API. The imperative bridge mounts a `<ConfirmDialog>` via a simple
+// document-level singleton container, returning a handle with `.destroy()`.
+function Modal({
+  title,
+  visible,
+  width,
+  bodyStyle,
+  style,
+  onCancel,
+  onOk,
+  okText,
+  cancelText,
+  footer,
+  closable,
+  centered,
+  children,
+}) {
+  // eslint-disable-next-line no-unused-vars
+  const _centered = centered;
+  // eslint-disable-next-line no-unused-vars
+  const _closable = closable;
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+  const dialogStyle =
+    typeof width === 'number'
+      ? { ...(style || {}), maxWidth: width }
+      : style;
+  return (
+    <HeroModal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer
+          size='4xl'
+          placement='center'
+          className='max-w-[95vw]'
+          style={dialogStyle}
+        >
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            {title ? (
+              <ModalHeader className='border-b border-border'>
+                <span>{title}</span>
+              </ModalHeader>
+            ) : null}
+            <ModalBody style={bodyStyle} className='px-6 py-5'>
+              {children}
+            </ModalBody>
+            {footer === null ? null : footer ? (
+              <ModalFooter className='border-t border-border'>
+                {footer}
+              </ModalFooter>
+            ) : (
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={onCancel}>
+                  {cancelText}
+                </Button>
+                <Button color='primary' onPress={onOk}>
+                  {okText}
+                </Button>
+              </ModalFooter>
+            )}
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
+    </HeroModal>
+  );
+}
+
+// Imperative `Modal.confirm(...)` bridge. The first call creates a singleton
+// React root that owns a small `<ImperativeConfirm>` component; subsequent
+// calls open/close that singleton. Mirrors the subset of options used in
+// this file (`title`, `content`, `onOk`, `onCancel`, `okType`).
+let imperativeConfirmHandle = null;
+
+function ImperativeConfirm({ controller }) {
+  const [config, setConfig] = useState(null);
+  useEffect(() => {
+    controller.set = (next) => setConfig(next);
+  }, [controller]);
+  if (!config) return null;
+  return (
+    <ConfirmDialog
+      visible
+      title={config.title}
+      cancelText={config.cancelText || '取消'}
+      confirmText={config.okText || '确认'}
+      danger={config.okType === 'danger'}
+      onCancel={async () => {
+        await config.onCancel?.();
+        setConfig(null);
+      }}
+      onConfirm={async () => {
+        await config.onOk?.();
+        setConfig(null);
+      }}
+    >
+      {config.content}
+    </ConfirmDialog>
+  );
+}
+
+function ImperativeConfirmHost() {
+  const controller = useRef({ set: () => {} }).current;
+  if (imperativeConfirmHandle == null) {
+    imperativeConfirmHandle = {
+      open: (config) => controller.set(config),
+      close: () => controller.set(null),
+    };
+  }
+  return <ImperativeConfirm controller={controller} />;
+}
+
+Modal.confirm = (config) => {
+  // Defer to the singleton; if it hasn't mounted yet, queue via microtask.
+  Promise.resolve().then(() => {
+    if (imperativeConfirmHandle?.open) {
+      imperativeConfirmHandle.open(config);
+    }
+  });
+  return {
+    destroy: () => imperativeConfirmHandle?.close?.(),
+  };
+};
+
+// SideSheet: right/left slide panel.
+function SideSheet({
+  title,
+  visible,
+  placement = 'right',
+  width = 600,
+  bodyStyle,
+  footer,
+  onCancel,
+  closeIcon,
+  className = '',
+  children,
+}) {
+  // eslint-disable-next-line no-unused-vars
+  const _closeIcon = closeIcon;
+  const slideClose =
+    placement === 'left' ? '-translate-x-full' : 'translate-x-full';
+  const positionCls =
+    placement === 'left'
+      ? 'fixed bottom-0 left-0 top-0'
+      : 'fixed bottom-0 right-0 top-0';
+  return (
+    <>
+      <div
+        aria-hidden={!visible}
+        onClick={onCancel}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!visible}
+        style={{ width }}
+        className={`${positionCls} z-50 flex w-full max-w-full flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          visible ? 'translate-x-0' : slideClose
+        } ${className}`}
+      >
+        {title ? (
+          <header className='flex items-center justify-between gap-3 border-b border-border px-5 py-3'>
+            <div className='min-w-0 flex-1'>{title}</div>
+            <Button
+              isIconOnly
+              variant='light'
+              size='sm'
+              aria-label='close'
+              onPress={onCancel}
+            >
+              <CloseIcon size={16} />
+            </Button>
+          </header>
+        ) : null}
+        <div
+          style={bodyStyle}
+          className='relative flex-1 overflow-y-auto'
+        >
+          {children}
+        </div>
+        {footer ? (
+          <footer className='border-t border-border bg-background px-5 py-3'>
+            {footer}
+          </footer>
+        ) : null}
+      </aside>
+    </>
+  );
+}
+
+// ----------------------------- Form context shim -----------------------------
+//
+// Semi's `<Form initValues>` provides a context that auto-binds `<Form.X
+// field='name'>`. We replicate the subset used here.
+
+const FormCtx = createContext(null);
+
+function Form({
+  initValues,
+  onSubmit,
+  onValueChange,
+  getFormApi,
+  className = '',
+  style,
+  children,
+}) {
+  const [values, setValues] = useState(() => ({ ...(initValues || {}) }));
+
+  // Track previous initValues identity so we can re-seed when caller swaps
+  // them out (e.g. when a form is re-keyed via `key={isEdit?'edit':'new'}`).
+  const initRef = useRef(initValues);
+  useEffect(() => {
+    if (initRef.current !== initValues) {
+      initRef.current = initValues;
+      setValues({ ...(initValues || {}) });
+    }
+  }, [initValues]);
+
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+
+  const setValue = useCallback(
+    (name, value) => {
+      setValues((prev) => {
+        const next = { ...prev, [name]: value };
+        valuesRef.current = next;
+        onValueChange?.(next);
+        return next;
+      });
+    },
+    [onValueChange],
+  );
+
+  const setValuesApi = useCallback(
+    (next) => {
+      const merged =
+        typeof next === 'function' ? next(valuesRef.current) : next;
+      setValues((prev) => {
+        const newVals = { ...prev, ...merged };
+        valuesRef.current = newVals;
+        onValueChange?.(newVals);
+        return newVals;
+      });
+    },
+    [onValueChange],
+  );
+
+  const getValue = useCallback((name) => valuesRef.current?.[name], []);
+  const getValues = useCallback(() => valuesRef.current, []);
+  const submitForm = useCallback(() => {
+    onSubmit?.(valuesRef.current);
+  }, [onSubmit]);
+  const validate = useCallback(
+    () => Promise.resolve(valuesRef.current),
+    [],
+  );
+  const reset = useCallback(() => {
+    setValues({ ...(initRef.current || {}) });
+  }, []);
+
+  const apiRef = useRef({
+    setValue,
+    setValues: setValuesApi,
+    getValue,
+    getValues,
+    submitForm,
+    validate,
+    reset,
+  });
+  apiRef.current.setValue = setValue;
+  apiRef.current.setValues = setValuesApi;
+  apiRef.current.getValue = getValue;
+  apiRef.current.getValues = getValues;
+  apiRef.current.submitForm = submitForm;
+  apiRef.current.validate = validate;
+  apiRef.current.reset = reset;
+
+  useEffect(() => {
+    if (typeof getFormApi === 'function') {
+      getFormApi(apiRef.current);
+    }
+  }, [getFormApi]);
+
+  const ctx = useMemo(
+    () => ({
+      values,
+      setValue,
+      setValues: setValuesApi,
+      getValue,
+      getValues,
+    }),
+    [values, setValue, setValuesApi, getValue, getValues],
+  );
+
+  // Render-prop or plain children pass-through. Semi's Form supports both.
+  const content =
+    typeof children === 'function'
+      ? children({ values, formApi: apiRef.current })
+      : children;
+
+  return (
+    <FormCtx.Provider value={ctx}>
+      <div style={style} className={className}>
+        {content}
+      </div>
+    </FormCtx.Provider>
+  );
+}
+
+const fieldFromCtx = (field) => {
+  const ctx = useContext(FormCtx);
+  if (!ctx) return [undefined, () => {}];
+  return [ctx.values?.[field], (value) => ctx.setValue(field, value)];
+};
+
+// --- Field-level shims --- //
+
+const fieldInputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+const fieldTextareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+function fieldLabelNode(label) {
+  if (!label) return null;
+  return (
+    <label className='mb-1 block text-sm font-medium text-foreground'>
+      {label}
+    </label>
+  );
+}
+
+function fieldExtraNode(extraText) {
+  if (!extraText) return null;
+  if (typeof extraText === 'string') {
+    return <div className='mt-1 text-xs text-muted'>{extraText}</div>;
+  }
+  return <div className='mt-1 text-xs text-muted'>{extraText}</div>;
+}
+
+Form.Input = function FormInput({
+  field,
+  label,
+  placeholder,
+  type = 'text',
+  disabled,
+  readOnly,
+  prefix,
+  suffix,
+  showClear,
+  noLabel,
+  extraText,
+  rules,
+  onChange,
+  onEnterPress,
+  style,
+  className = '',
+  // eslint-disable-next-line no-unused-vars
+  trigger,
+}) {
+  // eslint-disable-next-line no-unused-vars
+  const _rules = rules;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setVal] = fieldFromCtx(field);
+  const padLeft = prefix ? 'pl-9' : '';
+  const padRight = suffix || (showClear && (value ?? '') !== '') ? 'pr-9' : '';
+  return (
+    <div style={style} className={`mb-3 ${className}`}>
+      {!noLabel ? fieldLabelNode(label) : null}
+      <div className='relative'>
+        {prefix ? (
+          <span className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'>
+            {prefix}
+          </span>
+        ) : null}
+        <input
+          type={type}
+          value={value ?? ''}
+          onChange={(event) => {
+            const next = event.target.value;
+            setVal(next);
+            onChange?.(next);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') onEnterPress?.();
+          }}
+          placeholder={placeholder}
+          disabled={disabled}
+          readOnly={readOnly}
+          className={`${fieldInputClass} ${padLeft} ${padRight}`}
+        />
+        {suffix ? (
+          <span className='absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center'>
+            {suffix}
+          </span>
+        ) : showClear && (value ?? '') !== '' && !disabled && !readOnly ? (
+          <button
+            type='button'
+            onClick={() => {
+              setVal('');
+              onChange?.('');
+            }}
+            aria-label='clear'
+            className='absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-surface-secondary p-1 text-muted hover:text-foreground'
+          >
+            <CloseIcon size={12} />
+          </button>
+        ) : null}
+      </div>
+      {fieldExtraNode(extraText)}
+    </div>
+  );
+};
+
+Form.InputNumber = function FormInputNumber({
+  field,
+  label,
+  placeholder,
+  min,
+  max,
+  step,
+  precision,
+  disabled,
+  noLabel,
+  extraText,
+  onChange,
+  style,
+  className = '',
+}) {
+  // eslint-disable-next-line no-unused-vars
+  const _precision = precision;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setVal] = fieldFromCtx(field);
+  return (
+    <div style={style} className={`mb-3 ${className}`}>
+      {!noLabel ? fieldLabelNode(label) : null}
+      <input
+        type='number'
+        value={value ?? ''}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        placeholder={placeholder}
+        onChange={(event) => {
+          const raw = event.target.value;
+          if (raw === '' || raw === null) {
+            setVal('');
+            onChange?.('');
+            return;
+          }
+          const num = Number(raw);
+          if (Number.isNaN(num)) return;
+          setVal(num);
+          onChange?.(num);
+        }}
+        className={fieldInputClass}
+      />
+      {fieldExtraNode(extraText)}
+    </div>
+  );
+};
+
+Form.TextArea = function FormTextArea({
+  field,
+  label,
+  placeholder,
+  autosize,
+  rows,
+  disabled,
+  readOnly,
+  noLabel,
+  extraText,
+  showClear,
+  onChange,
+  style,
+  className = '',
+  // eslint-disable-next-line no-unused-vars
+  rules,
+  // eslint-disable-next-line no-unused-vars
+  trigger,
+  // eslint-disable-next-line no-unused-vars
+  stopValidateWithError,
+}) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setVal] = fieldFromCtx(field);
+  const minRows = autosize?.minRows ?? rows ?? 4;
+  return (
+    <div style={style} className={`mb-3 ${className}`}>
+      {!noLabel ? fieldLabelNode(label) : null}
+      <div className='relative'>
+        <textarea
+          value={value ?? ''}
+          onChange={(event) => {
+            const next = event.target.value;
+            setVal(next);
+            onChange?.(next);
+          }}
+          placeholder={placeholder}
+          rows={minRows}
+          disabled={disabled}
+          readOnly={readOnly}
+          className={`${fieldTextareaClass} font-mono text-xs`}
+        />
+        {showClear && (value ?? '') !== '' && !disabled && !readOnly ? (
+          <button
+            type='button'
+            onClick={() => {
+              setVal('');
+              onChange?.('');
+            }}
+            aria-label='clear'
+            className='absolute right-2 top-2 rounded-full bg-surface-secondary p-1 text-muted hover:text-foreground'
+          >
+            <CloseIcon size={12} />
+          </button>
+        ) : null}
+      </div>
+      {fieldExtraNode(extraText)}
+    </div>
+  );
+};
+
+Form.Switch = function FormSwitch({
+  field,
+  label,
+  disabled,
+  size,
+  noLabel,
+  extraText,
+  onChange,
+  style,
+  className = '',
+  // eslint-disable-next-line no-unused-vars
+  checkedText,
+  // eslint-disable-next-line no-unused-vars
+  uncheckedText,
+}) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setVal] = fieldFromCtx(field);
+  return (
+    <div style={style} className={`mb-3 ${className}`}>
+      <div className='flex items-start justify-between gap-3'>
+        {!noLabel ? (
+          <div className='space-y-1'>
+            <div className='text-sm font-medium text-foreground'>{label}</div>
+            {extraText ? (
+              <div className='text-xs text-muted'>{extraText}</div>
+            ) : null}
+          </div>
+        ) : null}
+        <HeroSwitch
+          isSelected={!!value}
+          onValueChange={(next) => {
+            setVal(next);
+            onChange?.(next);
+          }}
+          isDisabled={disabled}
+          size={size === 'large' ? 'lg' : 'md'}
+          aria-label={typeof label === 'string' ? label : field}
+        >
+          <HeroSwitch.Control>
+            <HeroSwitch.Thumb />
+          </HeroSwitch.Control>
+        </HeroSwitch>
+      </div>
+      {noLabel && extraText ? fieldExtraNode(extraText) : null}
+    </div>
+  );
+};
+
+Form.Checkbox = function FormCheckbox({
+  field,
+  noLabel,
+  disabled,
+  extraText,
+  onChange,
+  style,
+  className = '',
+  children,
+}) {
+  // eslint-disable-next-line no-unused-vars
+  const _noLabel = noLabel;
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setVal] = fieldFromCtx(field);
+  return (
+    <div style={style} className={`mb-2 ${className}`}>
+      <label className='inline-flex cursor-pointer items-start gap-2 text-sm text-foreground'>
+        <input
+          type='checkbox'
+          checked={!!value}
+          disabled={disabled}
+          onChange={(event) => {
+            const next = event.target.checked;
+            setVal(next);
+            onChange?.({ target: { checked: next } });
+          }}
+          className='mt-0.5 h-4 w-4 accent-primary'
+        />
+        {children ? <span>{children}</span> : null}
+      </label>
+      {fieldExtraNode(extraText)}
+    </div>
+  );
+};
+
+Form.Select = function FormSelect({
+  field,
+  label,
+  placeholder,
+  optionList = [],
+  multiple,
+  disabled,
+  noLabel,
+  extraText,
+  onChange,
+  style,
+  className = '',
+  // Semi extras we ignore for now:
+  // eslint-disable-next-line no-unused-vars
+  filter,
+  // eslint-disable-next-line no-unused-vars
+  showClear,
+  // eslint-disable-next-line no-unused-vars
+  dropdownStyle,
+  // eslint-disable-next-line no-unused-vars
+  renderSelectedItem,
+  // eslint-disable-next-line no-unused-vars
+  rules,
+  // eslint-disable-next-line no-unused-vars
+  innerBottomSlot,
+  // eslint-disable-next-line no-unused-vars
+  onSearch,
+  // eslint-disable-next-line no-unused-vars
+  searchPosition,
+  // eslint-disable-next-line no-unused-vars
+  autoClearSearchValue,
+  // eslint-disable-next-line no-unused-vars
+  allowAdditions,
+  // eslint-disable-next-line no-unused-vars
+  additionLabel,
+  // eslint-disable-next-line no-unused-vars
+  allowCreate,
+  // eslint-disable-next-line no-unused-vars
+  loading,
+  children,
+}) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setVal] = fieldFromCtx(field);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const childOptions = useMemo(() => {
+    if (optionList.length > 0) return optionList;
+    return React.Children.toArray(children)
+      .filter((c) => c && c.props && c.props.value !== undefined)
+      .map((c) => ({
+        label: c.props.children ?? c.props.label ?? c.props.value,
+        value: c.props.value,
+        disabled: c.props.disabled,
+      }));
+  }, [optionList, children]);
+
+  if (multiple) {
+    const selected = Array.isArray(value) ? value : [];
+    const handleChange = (event) => {
+      const opts = Array.from(event.target.selectedOptions).map(
+        (o) => o.value,
+      );
+      // map back to original types where possible
+      const next = childOptions
+        .filter((opt) => opts.includes(String(opt.value)))
+        .map((opt) => opt.value);
+      setVal(next);
+      onChange?.(next);
+    };
+    return (
+      <div style={style} className={`mb-3 ${className}`}>
+        {!noLabel ? fieldLabelNode(label) : null}
+        <select
+          multiple
+          disabled={disabled}
+          value={selected.map(String)}
+          onChange={handleChange}
+          className={`${fieldInputClass} h-auto min-h-[80px]`}
+        >
+          {childOptions.map((opt) => (
+            <option
+              key={String(opt.value)}
+              value={String(opt.value)}
+              disabled={opt.disabled}
+            >
+              {opt.label}
+            </option>
+          ))}
+        </select>
+        {fieldExtraNode(extraText)}
+      </div>
+    );
+  }
+
+  return (
+    <div style={style} className={`mb-3 ${className}`}>
+      {!noLabel ? fieldLabelNode(label) : null}
+      <select
+        disabled={disabled}
+        value={value === undefined || value === null ? '' : String(value)}
+        onChange={(event) => {
+          const raw = event.target.value;
+          // map string back to original value (number/string/etc.)
+          const opt = childOptions.find((o) => String(o.value) === raw);
+          const next = opt ? opt.value : raw;
+          setVal(next);
+          onChange?.(next);
+        }}
+        className={fieldInputClass}
+      >
+        <option value=''>{placeholder ?? ''}</option>
+        {childOptions.map((opt) => (
+          <option
+            key={String(opt.value)}
+            value={String(opt.value)}
+            disabled={opt.disabled}
+          >
+            {opt.label}
+          </option>
+        ))}
+      </select>
+      {fieldExtraNode(extraText)}
+    </div>
+  );
+};
+
+// `<Form.Select.Option value>` placeholder so the existing `<Option value=...>`
+// children compile. The actual rendering is handled by the parent
+// `<select>` based on the children iteration above.
+Form.Select.Option = function FormSelectOption() {
+  return null;
+};
+
+Form.TagInput = function FormTagInput({
+  field,
+  label,
+  placeholder,
+  noLabel,
+  extraText,
+  onChange,
+  style,
+  className = '',
+  // eslint-disable-next-line no-unused-vars
+  addOnBlur,
+  // eslint-disable-next-line no-unused-vars
+  showClear,
+}) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [value, setVal] = fieldFromCtx(field);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [draft, setDraft] = useState('');
+  const tags = Array.isArray(value) ? value : [];
+  const commit = (raw) => {
+    const parsed = String(raw || '')
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (parsed.length === 0) return;
+    const merged = [...new Set([...tags, ...parsed])];
+    setVal(merged);
+    onChange?.(merged);
+    setDraft('');
+  };
+  const removeAt = (idx) => {
+    const next = tags.filter((_, i) => i !== idx);
+    setVal(next);
+    onChange?.(next);
+  };
+  return (
+    <div style={style} className={`mb-3 ${className}`}>
+      {!noLabel ? fieldLabelNode(label) : null}
+      <div className='flex min-h-[40px] flex-wrap items-center gap-1.5 rounded-xl border border-border bg-background px-2 py-1.5 text-sm focus-within:border-primary'>
+        {tags.map((tag, idx) => (
+          <span
+            key={`${tag}-${idx}`}
+            className='inline-flex items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs'
+          >
+            <span>{tag}</span>
+            <button
+              type='button'
+              onClick={() => removeAt(idx)}
+              aria-label='remove'
+              className='text-muted hover:text-foreground'
+            >
+              <CloseIcon size={12} />
+            </button>
+          </span>
+        ))}
+        <input
+          type='text'
+          value={draft}
+          onChange={(event) => {
+            const v = event.target.value;
+            if (v.endsWith(',')) commit(v.slice(0, -1));
+            else setDraft(v);
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              commit(draft);
+            } else if (
+              event.key === 'Backspace' &&
+              draft === '' &&
+              tags.length > 0
+            ) {
+              removeAt(tags.length - 1);
+            }
+          }}
+          onBlur={() => {
+            if (draft.trim()) commit(draft);
+          }}
+          placeholder={tags.length === 0 ? placeholder : ''}
+          className='min-w-[120px] flex-1 bg-transparent text-foreground outline-none placeholder:text-muted'
+        />
+      </div>
+      {fieldExtraNode(extraText)}
+    </div>
+  );
+};
+
+Form.Section = function FormSection({ text, className = '', children }) {
+  return (
+    <div className={`space-y-3 ${className}`}>
+      {text ? (
+        <div className='border-b border-border pb-2 text-base font-semibold text-foreground'>
+          {text}
+        </div>
+      ) : null}
+      {children}
+    </div>
+  );
+};
+
+Form.Slot = function FormSlot({ label, className = '', children }) {
+  return (
+    <div className={`mb-3 ${className}`}>
+      {label ? fieldLabelNode(label) : null}
+      {children}
+    </div>
+  );
+};
+
+// `Input` adapter from @heroui/react: HeroUI v3 Input has a
+// `<Input.Control><Input.Element /></Input.Control>` anatomy. Some legacy
+// callers in this file still pass plain `value`/`onChange(value)`/`prefix`/
+// `suffix`/`disabled` etc., so we wrap with a thin shim.
+function Input({
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+  disabled,
+  readOnly,
+  prefix,
+  suffix,
+  showClear,
+  style,
+  className = '',
+  onEnterPress,
+  onKeyDown,
+  ...rest
+}) {
+  // eslint-disable-next-line no-unused-vars
+  const _heroOnly = HeroInput;
+  const padLeft = prefix ? 'pl-9' : '';
+  const padRight = suffix || (showClear && (value ?? '') !== '') ? 'pr-9' : '';
+  return (
+    <div className='relative' style={style}>
+      {prefix ? (
+        <span className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'>
+          {prefix}
+        </span>
+      ) : null}
+      <input
+        type={type}
+        value={value ?? ''}
+        onChange={(event) => onChange?.(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') onEnterPress?.();
+          onKeyDown?.(event);
+        }}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        className={`h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50 ${padLeft} ${padRight} ${className}`}
+        {...rest}
+      />
+      {suffix ? (
+        <span className='absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center'>
+          {suffix}
+        </span>
+      ) : showClear && (value ?? '') !== '' && !disabled && !readOnly ? (
+        <button
+          type='button'
+          onClick={() => onChange?.('')}
+          aria-label='clear'
+          className='absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-surface-secondary p-1 text-muted hover:text-foreground'
+        >
+          <CloseIcon size={12} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+// Lucide icon aliases for HeroIconsCompat names used in this file.
+const IconSave = (props) => <Save size={14} {...props} />;
+const IconClose = (props) => <CloseIcon size={14} {...props} />;
+const IconServer = (props) => <Server size={14} {...props} />;
+const IconSetting = (props) => <Settings size={14} {...props} />;
+const IconCode = (props) => <Code2 size={14} {...props} />;
+const IconCopy = (props) => <CopyIcon size={14} {...props} />;
+const IconGlobe = (props) => <Globe size={14} {...props} />;
+const IconBolt = (props) => <Bolt size={14} {...props} />;
+const IconSearch = (props) => <Search size={14} {...props} />;
+const IconChevronDown = (props) => <ChevronDown size={14} {...props} />;
+// eslint-disable-next-line no-unused-vars
+const IconCheck = (props) => <Check size={14} {...props} />;
+// eslint-disable-next-line no-unused-vars
+const IconDelete = (props) => <Trash2 size={14} {...props} />;
 
 const MODEL_MAPPING_EXAMPLE = {
   'gpt-3.5-turbo': 'gpt-3.5-turbo-0125',
@@ -959,7 +2435,7 @@ const EditChannelModal = (props) => {
       initialBaseUrlRef.current = data.base_url || '';
       setInputs(data);
       if (formApiRef.current) {
-        formApiRef.current.setValues(data);
+        formApiRef.current?.setValues?.(data);
       }
       if (data.auto_ban === 0) {
         setAutoBan(false);
@@ -1294,7 +2770,7 @@ const EditChannelModal = (props) => {
       initialBaseUrlRef.current = '';
       setInputs(originInputs);
       if (formApiRef.current) {
-        formApiRef.current.setValues(originInputs);
+        formApiRef.current?.setValues?.(originInputs);
       }
       let localModels = getChannelModels(inputs.type);
       setBasicModels(localModels);
@@ -1304,7 +2780,7 @@ const EditChannelModal = (props) => {
 
   useEffect(() => {
     if (formApiRef.current) {
-      formApiRef.current.setValues(inputs);
+      formApiRef.current?.setValues?.(inputs);
     }
   }, [inputs]);
 
@@ -2091,7 +3567,7 @@ const EditChannelModal = (props) => {
       selected &&
         'bg-blue-100 text-blue-700 shadow-lg ring-2 ring-blue-200 ring-opacity-50',
       disabled && 'opacity-50 cursor-not-allowed',
-      !disabled && 'hover:bg-gray-50 hover:shadow-md cursor-pointer',
+      !disabled && 'hover:bg-surface-secondary hover:shadow-md cursor-pointer',
       className,
     ]
       .filter(Boolean)
@@ -2195,8 +3671,8 @@ const EditChannelModal = (props) => {
               <div className='space-y-4'>
                 {/* Upstream Model Management Section */}
                 {MODEL_FETCHABLE_CHANNEL_TYPES.has(inputs.type) && (
-                <div className='pb-3 border-b border-gray-100'>
-                  <Text className='text-sm font-medium text-gray-500 mb-3 block'>
+                <div className='pb-3 border-b border-border'>
+                  <Text className='text-sm font-medium text-muted mb-3 block'>
                     {t('上游模型管理')}
                   </Text>
 
@@ -2243,13 +3719,13 @@ const EditChannelModal = (props) => {
                     }
                     showClear
                   />
-                  <div className='text-xs text-gray-500 mb-2'>
+                  <div className='text-xs text-muted mb-2'>
                     {t('上次检测时间')}:&nbsp;
                     {formatUnixTime(
                       inputs.upstream_model_update_last_check_time,
                     )}
                   </div>
-                  <div className='text-xs text-gray-500 mb-3'>
+                  <div className='text-xs text-muted mb-3'>
                     {t('上次检测到可加入模型')}:&nbsp;
                     {upstreamDetectedModels.length === 0 ? (
                       t('暂无')
@@ -2267,7 +3743,7 @@ const EditChannelModal = (props) => {
                             {upstreamDetectedModelsPreview.join(', ')}
                           </span>
                         </Tooltip>
-                        <span className='ml-1 text-gray-400'>
+                        <span className='ml-1 text-muted'>
                           {upstreamDetectedModelsOmittedCount > 0
                             ? t('（共 {{total}} 个，省略 {{omit}} 个）', {
                                 total: upstreamDetectedModels.length,
@@ -2284,8 +3760,8 @@ const EditChannelModal = (props) => {
                 )}
 
                 {/* Request Config Section */}
-                <div className='py-3 border-b border-gray-100'>
-                  <Text className='text-sm font-medium text-gray-500 mb-3 block'>
+                <div className='py-3 border-b border-border'>
+                  <Text className='text-sm font-medium text-muted mb-3 block'>
                     {t('请求配置')}
                   </Text>
 
@@ -2322,8 +3798,8 @@ const EditChannelModal = (props) => {
                     <div
                       className='mt-2 rounded-xl p-3'
                       style={{
-                        backgroundColor: 'var(--semi-color-fill-0)',
-                        border: '1px solid var(--semi-color-fill-2)',
+                        backgroundColor: 'var(--app-surface-muted)',
+                        border: '1px solid var(--app-border)',
                       }}
                     >
                       <div className='flex items-center justify-between mb-2'>
@@ -2423,8 +3899,8 @@ const EditChannelModal = (props) => {
                 </div>
 
                 {/* Channel Behavior Section */}
-                <div className='py-3 border-b border-gray-100'>
-                  <Text className='text-sm font-medium text-gray-500 mb-3 block'>
+                <div className='py-3 border-b border-border'>
+                  <Text className='text-sm font-medium text-muted mb-3 block'>
                     {t('渠道行为')}
                   </Text>
 
@@ -2469,7 +3945,7 @@ const EditChannelModal = (props) => {
 
                   {inputs.type === 1 && (
                     <>
-                      <div className='mt-4 mb-2 text-sm font-medium text-gray-700'>
+                      <div className='mt-4 mb-2 text-sm font-medium text-foreground'>
                         {t('字段透传控制')}
                       </div>
                       <Form.Switch field='allow_service_tier' label={t('允许 service_tier 透传')} checkedText={t('开')} uncheckedText={t('关')} onChange={(value) => handleChannelOtherSettingsChange('allow_service_tier', value)} extraText={t('service_tier 字段用于指定服务层级，允许透传可能导致实际计费高于预期。默认关闭以避免额外费用')} />
@@ -2481,7 +3957,7 @@ const EditChannelModal = (props) => {
 
                   {inputs.type === 14 && (
                     <>
-                      <div className='mt-4 mb-2 text-sm font-medium text-gray-700'>
+                      <div className='mt-4 mb-2 text-sm font-medium text-foreground'>
                         {t('字段透传控制')}
                       </div>
                       <Form.Switch field='allow_service_tier' label={t('允许 service_tier 透传')} checkedText={t('开')} uncheckedText={t('关')} onChange={(value) => handleChannelOtherSettingsChange('allow_service_tier', value)} extraText={t('service_tier 字段用于指定服务层级，允许透传可能导致实际计费高于预期。默认关闭以避免额外费用')} />
@@ -2493,7 +3969,7 @@ const EditChannelModal = (props) => {
 
                 {/* Extra Settings Section */}
                 <div className='pt-3'>
-                  <Text className='text-sm font-medium text-gray-500 mb-3 block'>
+                  <Text className='text-sm font-medium text-muted mb-3 block'>
                     {t('额外设置')}
                   </Text>
 
@@ -2563,7 +4039,7 @@ const EditChannelModal = (props) => {
                       <Text className='text-lg font-medium'>
                         {t('核心配置')}
                       </Text>
-                      <div className='text-xs text-gray-600'>
+                      <div className='text-xs text-muted'>
                         {t('创建渠道所需的基本信息')}
                       </div>
                     </div>
@@ -3667,10 +5143,10 @@ const EditChannelModal = (props) => {
                 ) : (
                   /* Desktop: toggle button to open side panel */
                   <div
-                    className='flex items-center justify-between p-3 rounded-xl cursor-pointer transition-colors hover:bg-gray-50'
+                    className='flex items-center justify-between p-3 rounded-xl cursor-pointer transition-colors hover:bg-surface-secondary'
                     style={{
-                      backgroundColor: advancedSettingsOpen ? 'var(--semi-color-primary-light-default)' : 'var(--semi-color-fill-0)',
-                      border: '1px solid var(--semi-color-fill-2)',
+                      backgroundColor: advancedSettingsOpen ? 'color-mix(in srgb, var(--app-primary) 12%, transparent)' : 'var(--app-surface-muted)',
+                      border: '1px solid var(--app-border)',
                     }}
                     onClick={() => toggleAdvancedSettings(!advancedSettingsOpen)}
                   >
@@ -3678,8 +5154,8 @@ const EditChannelModal = (props) => {
                       <IconSetting size={16} />
                       <Text className='font-medium'>{t('高级设置')}</Text>
                     </div>
-                    <div className='flex items-center gap-1 text-sm' style={{ color: 'var(--semi-color-primary)' }}>
-                      <Text size='small' style={{ color: 'var(--semi-color-primary)' }}>
+                    <div className='flex items-center gap-1 text-sm' style={{ color: 'var(--app-primary)' }}>
+                      <Text size='small' style={{ color: 'var(--app-primary)' }}>
                         {advancedSettingsOpen ? t('收起') : isEdit ? t('向左展开') : t('向右展开')}
                       </Text>
                       <IconChevronDown
@@ -3704,9 +5180,9 @@ const EditChannelModal = (props) => {
                 style={{
                   width: 600,
                   [isEdit ? 'right' : 'left']: 600,
-                  backgroundColor: 'var(--semi-color-bg-0)',
-                  borderLeft: isEdit ? 'none' : '1px solid var(--semi-color-border)',
-                  borderRight: isEdit ? '1px solid var(--semi-color-border)' : 'none',
+                  backgroundColor: 'var(--app-surface)',
+                  borderLeft: isEdit ? 'none' : '1px solid var(--app-border)',
+                  borderRight: isEdit ? '1px solid var(--app-border)' : 'none',
                   animation: `slideIn${isEdit ? 'Left' : 'Right'} 0.3s ease-out`,
                 }}
               >
@@ -3745,7 +5221,7 @@ const EditChannelModal = (props) => {
                           <Text className='text-lg font-medium'>
                             {t('高级设置')}
                           </Text>
-                          <div className='text-xs text-gray-600'>
+                          <div className='text-xs text-muted'>
                             {t('渠道的高级配置选项')}
                           </div>
                         </div>
@@ -3925,6 +5401,10 @@ const EditChannelModal = (props) => {
           showSuccess(t('模型列表已追加更新'));
         }}
       />
+      {/* Imperative `Modal.confirm()` host: mounts a singleton dialog the
+          legacy code path drives via `Modal.confirm({ title, content, onOk })`
+          and the captured handle's `.destroy()`. */}
+      <ImperativeConfirmHost />
     </>
   );
 };
diff --git a/web/src/components/table/channels/modals/EditTagModal.jsx b/web/src/components/table/channels/modals/EditTagModal.jsx
index fbb00be583b..fd28807d096 100644
--- a/web/src/components/table/channels/modals/EditTagModal.jsx
+++ b/web/src/components/table/channels/modals/EditTagModal.jsx
@@ -6,18 +6,23 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Card, Spinner } from '@heroui/react';
+import {
+  Bookmark,
+  Code2,
+  Save,
+  Settings,
+  User,
+  X,
+} from 'lucide-react';
 import {
   API,
   showError,
@@ -26,149 +31,303 @@ import {
   showWarning,
   verifyJSON,
   selectFilter,
+  getChannelModels,
 } from '../../../../helpers';
-import {
-  SideSheet,
-  Space,
-  Button,
-  Typography,
-  Spin,
-  Banner,
-  Card,
-  Tag,
-  Avatar,
-  Form,
-} from '@douyinfe/semi-ui';
-import {
-  IconSave,
-  IconClose,
-  IconBookmark,
-  IconUser,
-  IconCode,
-  IconSetting,
-} from '@douyinfe/semi-icons';
-import { getChannelModels } from '../../../../helpers';
-import { useTranslation } from 'react-i18next';
 
-const { Text, Title } = Typography;
+// ----------------------------- helpers -----------------------------
+
+const TAG_TONE = {
+  blue: 'bg-primary/15 text-primary',
+};
+
+function StatusChip({ tone = 'blue', children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.blue
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function IconTile({ tone, children }) {
+  const cls =
+    {
+      blue: 'bg-primary/10 text-primary',
+      purple:
+        'bg-[color-mix(in_oklab,var(--app-primary)_8%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_82%,var(--app-foreground))]',
+      orange: 'bg-warning/10 text-warning',
+      green: 'bg-success/10 text-success',
+    }[tone] || 'bg-primary/10 text-primary';
+  return (
+    <div
+      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${cls}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 font-mono text-xs text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function InfoBanner({ tone = 'info', children }) {
+  const cls =
+    tone === 'warning'
+      ? 'border-warning/30 bg-warning/5'
+      : 'border-primary/20 bg-primary/5';
+  return (
+    <div
+      className={`flex items-start gap-2 rounded-xl border ${cls} px-3 py-2 text-xs text-foreground`}
+    >
+      <span>{children}</span>
+    </div>
+  );
+}
+
+// MultiSelectChips: a chip-based multi-select with a filtered dropdown.
+// Mirrors the Semi `<Form.Select multiple filter allowCreate>` UX
+// (chips above + search + listbox).
+function MultiSelectChips({
+  value = [],
+  options = [],
+  placeholder,
+  allowCreate = false,
+  filter,
+  onChange,
+  onSearch,
+  hint,
+  emptyHint,
+}) {
+  const [search, setSearch] = useState('');
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', onClickOutside);
+    return () => document.removeEventListener('mousedown', onClickOutside);
+  }, [open]);
+
+  const filtered = useMemo(() => {
+    if (!search.trim()) return options;
+    const matcher =
+      typeof filter === 'function'
+        ? (option) => filter(search, option)
+        : (option) => {
+            const label = String(option.label ?? option.value ?? '');
+            return label.toLowerCase().includes(search.toLowerCase());
+          };
+    return options.filter(matcher);
+  }, [options, search, filter]);
+
+  const removeAt = (val) => {
+    onChange?.((value || []).filter((v) => v !== val));
+  };
+
+  const toggle = (val) => {
+    if ((value || []).includes(val)) removeAt(val);
+    else onChange?.([...(value || []), val]);
+  };
+
+  const handleEnter = () => {
+    const trimmed = search.trim();
+    if (!trimmed) return;
+    if (filtered.length > 0) {
+      const first = filtered[0];
+      const v = first.value ?? first.label;
+      if (!(value || []).includes(v)) {
+        onChange?.([...(value || []), v]);
+      }
+      setSearch('');
+      onSearch?.('');
+      return;
+    }
+    if (allowCreate) {
+      if (!(value || []).includes(trimmed)) {
+        onChange?.([...(value || []), trimmed]);
+      }
+      setSearch('');
+      onSearch?.('');
+    }
+  };
+
+  return (
+    <div ref={ref} className='relative'>
+      <div
+        className='flex min-h-[40px] flex-wrap items-center gap-1.5 rounded-xl border border-border bg-background px-2 py-1.5 text-sm cursor-text focus-within:border-primary'
+        onClick={() => setOpen(true)}
+      >
+        {(value || []).map((v) => (
+          <span
+            key={v}
+            className='inline-flex items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs'
+          >
+            <span>{v}</span>
+            <button
+              type='button'
+              onClick={(event) => {
+                event.stopPropagation();
+                removeAt(v);
+              }}
+              aria-label='remove'
+              className='text-muted hover:text-foreground'
+            >
+              <X size={12} />
+            </button>
+          </span>
+        ))}
+        <input
+          type='text'
+          value={search}
+          onChange={(event) => {
+            setSearch(event.target.value);
+            onSearch?.(event.target.value);
+          }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              event.preventDefault();
+              handleEnter();
+            } else if (
+              event.key === 'Backspace' &&
+              search === '' &&
+              (value || []).length > 0
+            ) {
+              removeAt((value || [])[value.length - 1]);
+            }
+          }}
+          placeholder={(value || []).length === 0 ? placeholder : ''}
+          className='flex-1 min-w-[120px] bg-transparent text-foreground outline-none placeholder:text-muted'
+        />
+      </div>
+
+      {open && (
+        <div className='absolute left-0 right-0 z-30 mt-1 max-h-60 overflow-auto rounded-xl border border-border bg-background shadow-lg'>
+          {filtered.length === 0 ? (
+            <div className='px-3 py-2 text-xs text-muted'>
+              {emptyHint || hint}
+            </div>
+          ) : (
+            <ul className='py-1'>
+              {filtered.map((opt) => {
+                const v = opt.value ?? opt.label;
+                const selected = (value || []).includes(v);
+                return (
+                  <li key={String(v)}>
+                    <button
+                      type='button'
+                      onClick={() => toggle(v)}
+                      className={`flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-sm transition hover:bg-surface-secondary ${
+                        selected ? 'text-primary' : 'text-foreground'
+                      }`}
+                    >
+                      <span className='truncate'>
+                        {opt.label ?? String(v)}
+                      </span>
+                      {selected ? (
+                        <span className='text-xs'>{'✓'}</span>
+                      ) : null}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+          {hint && filtered.length > 0 ? (
+            <div className='border-t border-border px-3 py-2 text-xs text-muted'>
+              {hint}
+            </div>
+          ) : null}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ----------------------------- main -----------------------------
 
 const MODEL_MAPPING_EXAMPLE = {
   'gpt-3.5-turbo': 'gpt-3.5-turbo-0125',
 };
 
-const EditTagModal = (props) => {
+const ORIGIN_INPUTS = {
+  tag: '',
+  new_tag: null,
+  model_mapping: null,
+  groups: [],
+  models: [],
+  param_override: null,
+  header_override: null,
+};
+
+const EditTagModal = ({ visible, tag, handleClose, refresh }) => {
   const { t } = useTranslation();
-  const { visible, tag, handleClose, refresh } = props;
   const [loading, setLoading] = useState(false);
   const [originModelOptions, setOriginModelOptions] = useState([]);
-  const [modelOptions, setModelOptions] = useState([]);
   const [groupOptions, setGroupOptions] = useState([]);
   const [customModel, setCustomModel] = useState('');
   const [modelSearchValue, setModelSearchValue] = useState('');
-  const originInputs = {
-    tag: '',
-    new_tag: null,
-    model_mapping: null,
-    groups: [],
-    models: [],
-    param_override: null,
-    header_override: null,
-  };
-  const [inputs, setInputs] = useState(originInputs);
+  const [inputs, setInputs] = useState(ORIGIN_INPUTS);
+
+  const modelOptions = useMemo(() => {
+    const opts = [...originModelOptions];
+    inputs.models.forEach((model) => {
+      if (!opts.find((option) => option.label === model)) {
+        opts.push({ label: model, value: model });
+      }
+    });
+    return opts;
+  }, [originModelOptions, inputs.models]);
+
   const modelSearchMatchedCount = useMemo(() => {
     const keyword = modelSearchValue.trim();
-    if (!keyword) {
-      return modelOptions.length;
-    }
+    if (!keyword) return modelOptions.length;
     return modelOptions.reduce(
       (count, option) => count + (selectFilter(keyword, option) ? 1 : 0),
       0,
     );
   }, [modelOptions, modelSearchValue]);
+
   const modelSearchHintText = useMemo(() => {
     const keyword = modelSearchValue.trim();
-    if (!keyword || modelSearchMatchedCount !== 0) {
-      return '';
-    }
+    if (!keyword || modelSearchMatchedCount !== 0) return '';
     return t('未匹配到模型，按回车键可将「{{name}}」作为自定义模型名添加', {
       name: keyword,
     });
   }, [modelSearchMatchedCount, modelSearchValue, t]);
-  const formApiRef = useRef(null);
-  const getInitValues = () => ({ ...originInputs });
 
-  const handleInputChange = (name, value) => {
-    setInputs((inputs) => ({ ...inputs, [name]: value }));
-    if (formApiRef.current) {
-      formApiRef.current.setValue(name, value);
-    }
-    if (name === 'type') {
-      let localModels = [];
-      switch (value) {
-        case 2:
-          localModels = [
-            'mj_imagine',
-            'mj_variation',
-            'mj_reroll',
-            'mj_blend',
-            'mj_upscale',
-            'mj_describe',
-            'mj_uploads',
-          ];
-          break;
-        case 5:
-          localModels = [
-            'swap_face',
-            'mj_imagine',
-            'mj_video',
-            'mj_edits',
-            'mj_variation',
-            'mj_reroll',
-            'mj_blend',
-            'mj_upscale',
-            'mj_describe',
-            'mj_zoom',
-            'mj_shorten',
-            'mj_modal',
-            'mj_inpaint',
-            'mj_custom_zoom',
-            'mj_high_variation',
-            'mj_low_variation',
-            'mj_pan',
-            'mj_uploads',
-          ];
-          break;
-        case 36:
-          localModels = ['suno_music', 'suno_lyrics'];
-          break;
-        case 53:
-          localModels = [
-            'NousResearch/Hermes-4-405B-FP8',
-            'Qwen/Qwen3-235B-A22B-Thinking-2507',
-            'Qwen/Qwen3-Coder-480B-A35B-Instruct-FP8',
-            'Qwen/Qwen3-235B-A22B-Instruct-2507',
-            'zai-org/GLM-4.5-FP8',
-            'openai/gpt-oss-120b',
-            'deepseek-ai/DeepSeek-R1-0528',
-            'deepseek-ai/DeepSeek-R1',
-            'deepseek-ai/DeepSeek-V3-0324',
-            'deepseek-ai/DeepSeek-V3.1',
-          ];
-          break;
-        default:
-          localModels = getChannelModels(value);
-          break;
-      }
-      if (inputs.models.length === 0) {
-        setInputs((inputs) => ({ ...inputs, models: localModels }));
-      }
-    }
+  const setField = (key, value) => {
+    setInputs((prev) => ({ ...prev, [key]: value }));
   };
 
   const fetchModels = async () => {
     try {
-      let res = await API.get(`/api/channel/models`);
-      let localModelOptions = res.data.data.map((model) => ({
+      const res = await API.get(`/api/channel/models`);
+      const localModelOptions = res.data.data.map((model) => ({
         label: model.id,
         value: model.id,
       }));
@@ -180,25 +339,20 @@ const EditTagModal = (props) => {
 
   const fetchGroups = async () => {
     try {
-      let res = await API.get(`/api/group/`);
-      if (res === undefined) {
-        return;
-      }
+      const res = await API.get(`/api/group/`);
+      if (res === undefined) return;
       setGroupOptions(
-        res.data.data.map((group) => ({
-          label: group,
-          value: group,
-        })),
+        res.data.data.map((group) => ({ label: group, value: group })),
       );
     } catch (error) {
       showError(error.message);
     }
   };
 
-  const handleSave = async (values) => {
+  const handleSave = async () => {
     setLoading(true);
-    const formVals = values || formApiRef.current?.getValues() || {};
-    let data = { tag };
+    const formVals = inputs;
+    const data = { tag };
     if (formVals.model_mapping) {
       if (!verifyJSON(formVals.model_mapping)) {
         showInfo('模型映射必须是合法的 JSON 格式！');
@@ -240,7 +394,10 @@ const EditTagModal = (props) => {
         return;
       }
       const trimmedHeaderOverride = formVals.header_override.trim();
-      if (trimmedHeaderOverride !== '' && !verifyJSON(trimmedHeaderOverride)) {
+      if (
+        trimmedHeaderOverride !== '' &&
+        !verifyJSON(trimmedHeaderOverride)
+      ) {
         showInfo('请求头覆盖必须是合法的 JSON 格式！');
         setLoading(false);
         return;
@@ -260,11 +417,6 @@ const EditTagModal = (props) => {
       setLoading(false);
       return;
     }
-    await submit(data);
-    setLoading(false);
-  };
-
-  const submit = async (data) => {
     try {
       const res = await API.put('/api/channel/tag', data);
       if (res?.data?.success) {
@@ -275,22 +427,11 @@ const EditTagModal = (props) => {
     } catch (error) {
       showError(error);
     }
+    setLoading(false);
   };
 
   useEffect(() => {
-    let localModelOptions = [...originModelOptions];
-    inputs.models.forEach((model) => {
-      if (!localModelOptions.find((option) => option.label === model)) {
-        localModelOptions.push({
-          label: model,
-          value: model,
-        });
-      }
-    });
-    setModelOptions(localModelOptions);
-  }, [originModelOptions, inputs.models]);
-
-  useEffect(() => {
+    if (!visible) return;
     const fetchTagModels = async () => {
       if (!tag) return;
       setLoading(true);
@@ -298,7 +439,7 @@ const EditTagModal = (props) => {
         const res = await API.get(`/api/channel/tag/models?tag=${tag}`);
         if (res?.data?.success) {
           const models = res.data.data ? res.data.data.split(',') : [];
-          handleInputChange('models', models);
+          setInputs((prev) => ({ ...prev, models }));
         } else {
           showError(res.data.message);
         }
@@ -313,50 +454,36 @@ const EditTagModal = (props) => {
     fetchGroups().then();
     fetchTagModels().then();
     setModelSearchValue('');
-    if (formApiRef.current) {
-      formApiRef.current.setValues({
-        ...getInitValues(),
-        tag: tag,
-        new_tag: tag,
-      });
-    }
-
-    setInputs({
-      ...originInputs,
-      tag: tag,
-      new_tag: tag,
-    });
+    setInputs({ ...ORIGIN_INPUTS, tag: tag, new_tag: tag });
   }, [visible, tag]);
 
+  // ESC-to-close
   useEffect(() => {
-    if (formApiRef.current) {
-      formApiRef.current.setValues(inputs);
-    }
-  }, [inputs]);
+    if (!visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') handleClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [visible, handleClose]);
 
   const addCustomModels = () => {
-    if (customModel.trim() === '') return;
-    const modelArray = customModel.split(',').map((model) => model.trim());
+    const trimmed = customModel.trim();
+    if (trimmed === '') return;
+    const modelArray = trimmed.split(',').map((model) => model.trim());
 
-    let localModels = [...inputs.models];
-    let localModelOptions = [...modelOptions];
+    const localModels = [...inputs.models];
     const addedModels = [];
 
     modelArray.forEach((model) => {
       if (model && !localModels.includes(model)) {
         localModels.push(model);
-        localModelOptions.push({
-          key: model,
-          text: model,
-          value: model,
-        });
         addedModels.push(model);
       }
     });
 
-    setModelOptions(localModelOptions);
     setCustomModel('');
-    handleInputChange('models', localModels);
+    setField('models', localModels);
 
     if (addedModels.length > 0) {
       showSuccess(
@@ -371,217 +498,215 @@ const EditTagModal = (props) => {
   };
 
   return (
-    <SideSheet
-      placement='right'
-      title={
-        <Space>
-          <Tag color='blue' shape='circle'>
-            {t('编辑')}
-          </Tag>
-          <Title heading={4} className='m-0'>
-            {t('编辑标签')}
-          </Title>
-        </Space>
-      }
-      bodyStyle={{ padding: '0' }}
-      visible={visible}
-      width={600}
-      onCancel={handleClose}
-      footer={
-        <div className='flex justify-end bg-white'>
-          <Space>
-            <Button
-              theme='solid'
-              onClick={() => formApiRef.current?.submitForm()}
-              loading={loading}
-              icon={<IconSave />}
-            >
-              {t('保存')}
-            </Button>
-            <Button
-              theme='light'
-              type='primary'
-              onClick={handleClose}
-              icon={<IconClose />}
-            >
-              {t('取消')}
-            </Button>
-          </Space>
-        </div>
-      }
-      closeIcon={null}
-    >
-      <Form
-        key={tag || 'edit'}
-        initValues={getInitValues()}
-        getFormApi={(api) => (formApiRef.current = api)}
-        onSubmit={handleSave}
+    <>
+      <div
+        aria-hidden={!visible}
+        onClick={handleClose}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!visible}
+        style={{ width: 600 }}
+        className={`fixed bottom-0 right-0 top-0 z-50 flex w-full max-w-full flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          visible ? 'translate-x-0' : 'translate-x-full'
+        }`}
       >
-        {() => (
-          <Spin spinning={loading}>
-            <div className='p-2'>
-              <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-                {/* Header: Tag Info */}
-                <div className='flex items-center mb-2'>
-                  <Avatar size='small' color='blue' className='mr-2 shadow-md'>
-                    <IconBookmark size={16} />
-                  </Avatar>
+        <header className='flex items-center justify-between gap-3 border-b border-border px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <StatusChip tone='blue'>{t('编辑')}</StatusChip>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
+              {t('编辑标签')}
+            </h4>
+          </div>
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={handleClose}
+          >
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='relative flex-1 overflow-y-auto p-3'>
+          {loading && (
+            <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+              <Spinner color='primary' />
+            </div>
+          )}
+
+          <div className='space-y-3'>
+            {/* 标签信息 */}
+            <Card className='!rounded-2xl border-0 shadow-sm'>
+              <Card.Content className='space-y-4 p-5'>
+                <div className='flex items-center gap-2'>
+                  <IconTile tone='blue'>
+                    <Bookmark size={16} />
+                  </IconTile>
                   <div>
-                    <Text className='text-lg font-medium'>{t('标签信息')}</Text>
-                    <div className='text-xs text-gray-600'>
+                    <div className='text-base font-semibold text-foreground'>
+                      {t('标签信息')}
+                    </div>
+                    <div className='text-xs text-muted'>
                       {t('标签的基本配置')}
                     </div>
                   </div>
                 </div>
 
-                <Banner
-                  type='warning'
-                  description={t('所有编辑均为覆盖操作，留空则不更改')}
-                  className='!rounded-lg mb-4'
-                />
-
-                <div className='space-y-4'>
-                  <Form.Input
-                    field='new_tag'
-                    label={t('标签名称')}
+                <InfoBanner tone='warning'>
+                  {t('所有编辑均为覆盖操作，留空则不更改')}
+                </InfoBanner>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('标签名称')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={inputs.new_tag ?? ''}
+                    onChange={(event) =>
+                      setField('new_tag', event.target.value)
+                    }
                     placeholder={t('请输入新标签，留空则解散标签')}
-                    onChange={(value) => handleInputChange('new_tag', value)}
+                    className={inputClass}
                   />
                 </div>
-              </Card>
-
-              <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-                {/* Header: Model Config */}
-                <div className='flex items-center mb-2'>
-                  <Avatar
-                    size='small'
-                    color='purple'
-                    className='mr-2 shadow-md'
-                  >
-                    <IconCode size={16} />
-                  </Avatar>
+              </Card.Content>
+            </Card>
+
+            {/* 模型配置 */}
+            <Card className='!rounded-2xl border-0 shadow-sm'>
+              <Card.Content className='space-y-4 p-5'>
+                <div className='flex items-center gap-2'>
+                  <IconTile tone='purple'>
+                    <Code2 size={16} />
+                  </IconTile>
                   <div>
-                    <Text className='text-lg font-medium'>{t('模型配置')}</Text>
-                    <div className='text-xs text-gray-600'>
+                    <div className='text-base font-semibold text-foreground'>
+                      {t('模型配置')}
+                    </div>
+                    <div className='text-xs text-muted'>
                       {t('模型选择和映射设置')}
                     </div>
                   </div>
                 </div>
 
-                <div className='space-y-4'>
-                  <Banner
-                    type='info'
-                    description={t(
-                      '当前模型列表为该标签下所有渠道模型列表最长的一个，并非所有渠道的并集，请注意可能导致某些渠道模型丢失。',
+                <InfoBanner>
+                  {t(
+                    '当前模型列表为该标签下所有渠道模型列表最长的一个，并非所有渠道的并集，请注意可能导致某些渠道模型丢失。',
+                  )}
+                </InfoBanner>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('模型')}</FieldLabel>
+                  <MultiSelectChips
+                    value={inputs.models}
+                    options={modelOptions}
+                    placeholder={t(
+                      '请选择该渠道所支持的模型，留空则不更改',
                     )}
-                    className='!rounded-lg mb-4'
-                  />
-                  <Form.Select
-                    field='models'
-                    label={t('模型')}
-                    placeholder={t('请选择该渠道所支持的模型，留空则不更改')}
-                    multiple
                     filter={selectFilter}
                     allowCreate
-                    autoClearSearchValue={false}
-                    searchPosition='dropdown'
-                    optionList={modelOptions}
-                    onSearch={(value) => setModelSearchValue(value)}
-                    innerBottomSlot={
-                      modelSearchHintText ? (
-                        <Text className='px-3 py-2 block text-xs !text-semi-color-text-2'>
-                          {modelSearchHintText}
-                        </Text>
-                      ) : null
-                    }
-                    style={{ width: '100%' }}
-                    onChange={(value) => handleInputChange('models', value)}
+                    onChange={(v) => setField('models', v)}
+                    onSearch={setModelSearchValue}
+                    hint={modelSearchHintText || undefined}
+                    emptyHint={modelSearchHintText}
                   />
+                </div>
 
-                  <Form.Input
-                    field='custom_model'
-                    label={t('自定义模型名称')}
-                    placeholder={t('输入自定义模型名称')}
-                    onChange={(value) => setCustomModel(value.trim())}
-                    suffix={
-                      <Button
-                        size='small'
-                        type='primary'
-                        onClick={addCustomModels}
-                      >
-                        {t('填入')}
-                      </Button>
-                    }
-                  />
+                <div className='space-y-2'>
+                  <FieldLabel>{t('自定义模型名称')}</FieldLabel>
+                  <div className='flex items-center gap-2'>
+                    <input
+                      type='text'
+                      value={customModel}
+                      onChange={(event) =>
+                        setCustomModel(event.target.value.trim())
+                      }
+                      placeholder={t('输入自定义模型名称')}
+                      className={inputClass}
+                    />
+                    <Button color='primary' onPress={addCustomModels}>
+                      {t('填入')}
+                    </Button>
+                  </div>
+                </div>
 
-                  <Form.TextArea
-                    field='model_mapping'
-                    label={t('模型重定向')}
+                <div className='space-y-2'>
+                  <FieldLabel>{t('模型重定向')}</FieldLabel>
+                  <textarea
+                    rows={4}
+                    value={inputs.model_mapping ?? ''}
+                    onChange={(event) =>
+                      setField('model_mapping', event.target.value)
+                    }
                     placeholder={t(
                       '此项可选，用于修改请求体中的模型名称，为一个 JSON 字符串，键为请求中模型名称，值为要替换的模型名称，留空则不更改',
                     )}
-                    autosize
-                    onChange={(value) =>
-                      handleInputChange('model_mapping', value)
-                    }
-                    extraText={
-                      <Space>
-                        <Text
-                          className='!text-semi-color-primary cursor-pointer'
-                          onClick={() =>
-                            handleInputChange(
-                              'model_mapping',
-                              JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2),
-                            )
-                          }
-                        >
-                          {t('填入模板')}
-                        </Text>
-                        <Text
-                          className='!text-semi-color-primary cursor-pointer'
-                          onClick={() =>
-                            handleInputChange(
-                              'model_mapping',
-                              JSON.stringify({}, null, 2),
-                            )
-                          }
-                        >
-                          {t('清空重定向')}
-                        </Text>
-                        <Text
-                          className='!text-semi-color-primary cursor-pointer'
-                          onClick={() => handleInputChange('model_mapping', '')}
-                        >
-                          {t('不更改')}
-                        </Text>
-                      </Space>
-                    }
+                    className={textareaClass}
                   />
+                  <div className='flex flex-wrap gap-3 text-xs'>
+                    <button
+                      type='button'
+                      className='cursor-pointer text-primary hover:underline'
+                      onClick={() =>
+                        setField(
+                          'model_mapping',
+                          JSON.stringify(MODEL_MAPPING_EXAMPLE, null, 2),
+                        )
+                      }
+                    >
+                      {t('填入模板')}
+                    </button>
+                    <button
+                      type='button'
+                      className='cursor-pointer text-primary hover:underline'
+                      onClick={() =>
+                        setField('model_mapping', JSON.stringify({}, null, 2))
+                      }
+                    >
+                      {t('清空重定向')}
+                    </button>
+                    <button
+                      type='button'
+                      className='cursor-pointer text-primary hover:underline'
+                      onClick={() => setField('model_mapping', '')}
+                    >
+                      {t('不更改')}
+                    </button>
+                  </div>
                 </div>
-              </Card>
-
-              <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-                {/* Header: Advanced Settings */}
-                <div className='flex items-center mb-2'>
-                  <Avatar
-                    size='small'
-                    color='orange'
-                    className='mr-2 shadow-md'
-                  >
-                    <IconSetting size={16} />
-                  </Avatar>
+              </Card.Content>
+            </Card>
+
+            {/* 高级设置 */}
+            <Card className='!rounded-2xl border-0 shadow-sm'>
+              <Card.Content className='space-y-4 p-5'>
+                <div className='flex items-center gap-2'>
+                  <IconTile tone='orange'>
+                    <Settings size={16} />
+                  </IconTile>
                   <div>
-                    <Text className='text-lg font-medium'>{t('高级设置')}</Text>
-                    <div className='text-xs text-gray-600'>
+                    <div className='text-base font-semibold text-foreground'>
+                      {t('高级设置')}
+                    </div>
+                    <div className='text-xs text-muted'>
                       {t('渠道的高级配置选项')}
                     </div>
                   </div>
                 </div>
 
-                <div className='space-y-4'>
-                  <Form.TextArea
-                    field='param_override'
-                    label={t('参数覆盖')}
+                <div className='space-y-2'>
+                  <FieldLabel>{t('参数覆盖')}</FieldLabel>
+                  <textarea
+                    rows={6}
+                    value={inputs.param_override ?? ''}
+                    onChange={(event) =>
+                      setField('param_override', event.target.value)
+                    }
                     placeholder={
                       t('此项可选，用于覆盖请求参数。不支持覆盖 stream 参数') +
                       '\n' +
@@ -591,163 +716,175 @@ const EditTagModal = (props) => {
                       t('新格式（支持条件判断与json自定义）：') +
                       '\n{\n  "operations": [\n    {\n      "path": "temperature",\n      "mode": "set",\n      "value": 0.7,\n      "conditions": [\n        {\n          "path": "model",\n          "mode": "prefix",\n          "value": "gpt"\n        }\n      ]\n    }\n  ]\n}'
                     }
-                    autosize
-                    showClear
-                    onChange={(value) =>
-                      handleInputChange('param_override', value)
-                    }
-                    extraText={
-                      <div className='flex gap-2 flex-wrap'>
-                        <Text
-                          className='!text-semi-color-primary cursor-pointer'
-                          onClick={() =>
-                            handleInputChange(
-                              'param_override',
-                              JSON.stringify({ temperature: 0 }, null, 2),
-                            )
-                          }
-                        >
-                          {t('旧格式模板')}
-                        </Text>
-                        <Text
-                          className='!text-semi-color-primary cursor-pointer'
-                          onClick={() =>
-                            handleInputChange(
-                              'param_override',
-                              JSON.stringify(
+                    className={textareaClass}
+                  />
+                  <div className='flex flex-wrap gap-3 text-xs'>
+                    <button
+                      type='button'
+                      className='cursor-pointer text-primary hover:underline'
+                      onClick={() =>
+                        setField(
+                          'param_override',
+                          JSON.stringify({ temperature: 0 }, null, 2),
+                        )
+                      }
+                    >
+                      {t('旧格式模板')}
+                    </button>
+                    <button
+                      type='button'
+                      className='cursor-pointer text-primary hover:underline'
+                      onClick={() =>
+                        setField(
+                          'param_override',
+                          JSON.stringify(
+                            {
+                              operations: [
                                 {
-                                  operations: [
+                                  path: 'temperature',
+                                  mode: 'set',
+                                  value: 0.7,
+                                  conditions: [
                                     {
-                                      path: 'temperature',
-                                      mode: 'set',
-                                      value: 0.7,
-                                      conditions: [
-                                        {
-                                          path: 'model',
-                                          mode: 'prefix',
-                                          value: 'gpt',
-                                        },
-                                      ],
-                                      logic: 'AND',
+                                      path: 'model',
+                                      mode: 'prefix',
+                                      value: 'gpt',
                                     },
                                   ],
+                                  logic: 'AND',
                                 },
-                                null,
-                                2,
-                              ),
-                            )
-                          }
-                        >
-                          {t('新格式模板')}
-                        </Text>
-                        <Text
-                          className='!text-semi-color-primary cursor-pointer'
-                          onClick={() =>
-                            handleInputChange('param_override', null)
-                          }
-                        >
-                          {t('不更改')}
-                        </Text>
-                      </div>
-                    }
-                  />
+                              ],
+                            },
+                            null,
+                            2,
+                          ),
+                        )
+                      }
+                    >
+                      {t('新格式模板')}
+                    </button>
+                    <button
+                      type='button'
+                      className='cursor-pointer text-primary hover:underline'
+                      onClick={() => setField('param_override', null)}
+                    >
+                      {t('不更改')}
+                    </button>
+                  </div>
+                </div>
 
-                  <Form.TextArea
-                    field='header_override'
-                    label={t('请求头覆盖')}
+                <div className='space-y-2'>
+                  <FieldLabel>{t('请求头覆盖')}</FieldLabel>
+                  <textarea
+                    rows={5}
+                    value={inputs.header_override ?? ''}
+                    onChange={(event) =>
+                      setField('header_override', event.target.value)
+                    }
                     placeholder={
                       t('此项可选，用于覆盖请求头参数') +
                       '\n' +
                       t('格式示例：') +
                       '\n{\n  "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0",\n  "Authorization": "Bearer {api_key}"\n}'
                     }
-                    autosize
-                    showClear
-                    onChange={(value) =>
-                      handleInputChange('header_override', value)
-                    }
-                    extraText={
-                      <div className='flex flex-col gap-1'>
-                        <div className='flex gap-2 flex-wrap items-center'>
-                          <Text
-                            className='!text-semi-color-primary cursor-pointer'
-                            onClick={() =>
-                              handleInputChange(
-                                'header_override',
-                                JSON.stringify(
-                                  {
-                                    'User-Agent':
-                                      'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0',
-                                    Authorization: 'Bearer {api_key}',
-                                  },
-                                  null,
-                                  2,
-                                ),
-                              )
-                            }
-                          >
-                            {t('填入模板')}
-                          </Text>
-                          <Text
-                            className='!text-semi-color-primary cursor-pointer'
-                            onClick={() =>
-                              handleInputChange('header_override', null)
-                            }
-                          >
-                            {t('不更改')}
-                          </Text>
-                        </div>
-                        <div>
-                          <Text type='tertiary' size='small'>
-                            {t('支持变量：')}
-                          </Text>
-                          <div className='text-xs text-tertiary ml-2'>
-                            <div>
-                              {t('渠道密钥')}: {'{api_key}'}
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    }
+                    className={textareaClass}
                   />
+                  <div className='flex flex-wrap gap-3 text-xs'>
+                    <button
+                      type='button'
+                      className='cursor-pointer text-primary hover:underline'
+                      onClick={() =>
+                        setField(
+                          'header_override',
+                          JSON.stringify(
+                            {
+                              'User-Agent':
+                                'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0',
+                              Authorization: 'Bearer {api_key}',
+                            },
+                            null,
+                            2,
+                          ),
+                        )
+                      }
+                    >
+                      {t('填入模板')}
+                    </button>
+                    <button
+                      type='button'
+                      className='cursor-pointer text-primary hover:underline'
+                      onClick={() => setField('header_override', null)}
+                    >
+                      {t('不更改')}
+                    </button>
+                  </div>
+                  <FieldHint>
+                    {t('支持变量：')}
+                    {' '}
+                    <span className='ml-1 text-foreground'>
+                      {t('渠道密钥')}: {'{api_key}'}
+                    </span>
+                  </FieldHint>
                 </div>
-              </Card>
-
-              <Card className='!rounded-2xl shadow-sm border-0'>
-                {/* Header: Group Settings */}
-                <div className='flex items-center mb-2'>
-                  <Avatar size='small' color='green' className='mr-2 shadow-md'>
-                    <IconUser size={16} />
-                  </Avatar>
+              </Card.Content>
+            </Card>
+
+            {/* 分组设置 */}
+            <Card className='!rounded-2xl border-0 shadow-sm'>
+              <Card.Content className='space-y-4 p-5'>
+                <div className='flex items-center gap-2'>
+                  <IconTile tone='green'>
+                    <User size={16} />
+                  </IconTile>
                   <div>
-                    <Text className='text-lg font-medium'>{t('分组设置')}</Text>
-                    <div className='text-xs text-gray-600'>
+                    <div className='text-base font-semibold text-foreground'>
+                      {t('分组设置')}
+                    </div>
+                    <div className='text-xs text-muted'>
                       {t('用户分组配置')}
                     </div>
                   </div>
                 </div>
 
-                <div className='space-y-4'>
-                  <Form.Select
-                    field='groups'
-                    label={t('分组')}
-                    placeholder={t('请选择可以使用该渠道的分组，留空则不更改')}
-                    multiple
-                    allowAdditions
-                    additionLabel={t(
-                      '请在系统设置页面编辑分组倍率以添加新的分组：',
+                <div className='space-y-2'>
+                  <FieldLabel>{t('分组')}</FieldLabel>
+                  <MultiSelectChips
+                    value={inputs.groups}
+                    options={groupOptions}
+                    placeholder={t(
+                      '请选择可以使用该渠道的分组，留空则不更改',
                     )}
-                    optionList={groupOptions}
-                    style={{ width: '100%' }}
-                    onChange={(value) => handleInputChange('groups', value)}
+                    allowCreate
+                    onChange={(v) => setField('groups', v)}
                   />
+                  <FieldHint>
+                    {t('请在系统设置页面编辑分组倍率以添加新的分组：')}
+                  </FieldHint>
                 </div>
-              </Card>
-            </div>
-          </Spin>
-        )}
-      </Form>
-    </SideSheet>
+              </Card.Content>
+            </Card>
+          </div>
+        </div>
+
+        <footer className='flex justify-end gap-2 border-t border-border bg-background px-5 py-3'>
+          <Button
+            variant='light'
+            startContent={<X size={14} />}
+            onPress={handleClose}
+          >
+            {t('取消')}
+          </Button>
+          <Button
+            color='primary'
+            isPending={loading}
+            startContent={<Save size={14} />}
+            onPress={handleSave}
+          >
+            {t('保存')}
+          </Button>
+        </footer>
+      </aside>
+    </>
   );
 };
 
diff --git a/web/src/components/table/channels/modals/ModelSelectModal.jsx b/web/src/components/table/channels/modals/ModelSelectModal.jsx
index b38580b66f5..fb1b3ea39c2 100644
--- a/web/src/components/table/channels/modals/ModelSelectModal.jsx
+++ b/web/src/components/table/channels/modals/ModelSelectModal.jsx
@@ -6,38 +6,73 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
-  Modal,
-  Checkbox,
-  Spin,
+  Button,
   Input,
-  Typography,
-  Empty,
-  Tabs,
-  Collapse,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
   Tooltip,
-} from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { IconSearch, IconInfoCircle } from '@douyinfe/semi-icons';
+  useOverlayState,
+} from '@heroui/react';
+import { ChevronDown, Info, Inbox, Search } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import { getModelCategories } from '../../../../helpers/render';
 
+// Mirrors the `HeaderCheckbox` pattern: an indeterminate state is set
+// imperatively on the input element so the visual minus shows up
+// between the checked / unchecked states.
+function TriCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange?.(event.target.checked, event)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+      onClick={(event) => event.stopPropagation()}
+    />
+  );
+}
+
+// Replaces Semi `<Collapse>` / `<Collapse.Panel>` with a native
+// `<details>` element. The summary keeps the header label + select-all
+// extra slot from the original; the panel body is wrapped in a
+// `border-t border-border` block so it visually splits when expanded.
+function CategoryPanel({ title, extra, children }) {
+  return (
+    <details className='group rounded-2xl border border-border bg-background'>
+      <summary className='flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-semibold text-foreground'>
+        <ChevronDown
+          size={16}
+          className='shrink-0 text-muted transition-transform group-open:rotate-180'
+        />
+        <span className='flex-1'>{title}</span>
+        {extra}
+      </summary>
+      <div className='border-t border-border px-4 py-3'>{children}</div>
+    </details>
+  );
+}
+
 const ModelSelectModal = ({
   visible,
   models = [],
@@ -65,6 +100,13 @@ const ModelSelectModal = ({
   const [activeTab, setActiveTab] = useState('new');
 
   const isMobile = useIsMobile();
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
   const normalizeModelName = (model) =>
     typeof model === 'string' ? model.trim() : '';
   const normalizedRedirectModels = useMemo(
@@ -109,7 +151,6 @@ const ModelSelectModal = ({
       .includes(keyword.toLowerCase()),
   );
 
-  // 分类模型：新获取的模型和已有模型
   const isExistingModel = (model) =>
     classificationSet.has(normalizeModelName(model));
   const newModels = filteredModels.filter((model) => !isExistingModel(model));
@@ -117,33 +158,32 @@ const ModelSelectModal = ({
     isExistingModel(model),
   );
 
-  // 同步外部选中值
+  // Sync external selection
   useEffect(() => {
     if (visible) {
       setCheckedList(normalizedSelected);
     }
   }, [visible, normalizedSelected]);
 
-  // 当模型列表变化时，设置默认tab
+  // Default the active tab when the model list changes
   useEffect(() => {
     if (visible) {
-      // 默认显示新获取模型tab，如果没有新模型则显示已有模型
       const hasNewModels = newModels.length > 0;
       setActiveTab(hasNewModels ? 'new' : 'existing');
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, newModels.length, selected]);
 
   const handleOk = () => {
     onConfirm && onConfirm(checkedList);
   };
 
-  // 按厂商分类模型
-  const categorizeModels = (models) => {
+  const categorizeModels = (modelList) => {
     const categories = getModelCategories(t);
     const categorizedModels = {};
     const uncategorizedModels = [];
 
-    models.forEach((model) => {
+    modelList.forEach((model) => {
       let foundCategory = false;
       for (const [key, category] of Object.entries(categories)) {
         if (key !== 'all' && category.filter({ model_name: model })) {
@@ -164,7 +204,6 @@ const ModelSelectModal = ({
       }
     });
 
-    // 如果有未分类模型，添加到"其他"分类
     if (uncategorizedModels.length > 0) {
       categorizedModels['other'] = {
         label: t('其他'),
@@ -179,56 +218,46 @@ const ModelSelectModal = ({
   const newModelsByCategory = categorizeModels(newModels);
   const existingModelsByCategory = categorizeModels(existingModels);
 
-  // Tab列表配置
+  // Tab list — only shows tabs that have models in them.
   const tabList = [
     ...(newModels.length > 0
       ? [
           {
-            tab: `${t('新获取的模型')} (${newModels.length})`,
-            itemKey: 'new',
+            label: `${t('新获取的模型')} (${newModels.length})`,
+            key: 'new',
           },
         ]
       : []),
     ...(existingModels.length > 0
       ? [
           {
-            tab: `${t('已有的模型')} (${existingModels.length})`,
-            itemKey: 'existing',
+            label: `${t('已有的模型')} (${existingModels.length})`,
+            key: 'existing',
           },
         ]
       : []),
   ];
 
-  // 处理分类全选/取消全选
   const handleCategorySelectAll = (categoryModels, isChecked) => {
     let newCheckedList = [...checkedList];
-
     if (isChecked) {
-      // 全选：添加该分类下所有未选中的模型
       categoryModels.forEach((model) => {
         if (!newCheckedList.includes(model)) {
           newCheckedList.push(model);
         }
       });
     } else {
-      // 取消全选：移除该分类下所有已选中的模型
       newCheckedList = newCheckedList.filter(
         (model) => !categoryModels.includes(model),
       );
     }
-
     setCheckedList(newCheckedList);
   };
 
-  // 检查分类是否全选
-  const isCategoryAllSelected = (categoryModels) => {
-    return (
-      categoryModels.length > 0 &&
-      categoryModels.every((model) => checkedList.includes(model))
-    );
-  };
+  const isCategoryAllSelected = (categoryModels) =>
+    categoryModels.length > 0 &&
+    categoryModels.every((model) => checkedList.includes(model));
 
-  // 检查分类是否部分选中
   const isCategoryIndeterminate = (categoryModels) => {
     const selectedCount = categoryModels.filter((model) =>
       checkedList.includes(model),
@@ -236,182 +265,213 @@ const ModelSelectModal = ({
     return selectedCount > 0 && selectedCount < categoryModels.length;
   };
 
-  const renderModelsByCategory = (modelsByCategory, categoryKeyPrefix) => {
+  const toggleSingle = (model) => {
+    setCheckedList((prev) =>
+      prev.includes(model)
+        ? prev.filter((item) => item !== model)
+        : [...prev, model],
+    );
+  };
+
+  const renderModelsByCategory = (modelsByCategory) => {
     const categoryEntries = Object.entries(modelsByCategory);
     if (categoryEntries.length === 0) return null;
 
-    // 生成所有面板的key，确保都展开
-    const allActiveKeys = categoryEntries.map(
-      (_, index) => `${categoryKeyPrefix}_${index}`,
-    );
-
     return (
-      <Collapse
-        key={`${categoryKeyPrefix}_${categoryEntries.length}`}
-        defaultActiveKey={[]}
-      >
-        {categoryEntries.map(([key, categoryData], index) => (
-          <Collapse.Panel
-            key={`${categoryKeyPrefix}_${index}`}
-            itemKey={`${categoryKeyPrefix}_${index}`}
-            header={`${categoryData.label} (${categoryData.models.length})`}
-            extra={
-              <Checkbox
-                checked={isCategoryAllSelected(categoryData.models)}
-                indeterminate={isCategoryIndeterminate(categoryData.models)}
-                onChange={(e) => {
-                  e.stopPropagation(); // 防止触发面板折叠
-                  handleCategorySelectAll(
-                    categoryData.models,
-                    e.target.checked,
+      <div className='space-y-3'>
+        {categoryEntries.map(([key, categoryData]) => {
+          const allSelected = isCategoryAllSelected(categoryData.models);
+          const indeterminate = isCategoryIndeterminate(categoryData.models);
+          const selectedInCategory = categoryData.models.filter((model) =>
+            checkedList.includes(model),
+          ).length;
+
+          return (
+            <CategoryPanel
+              key={key}
+              title={`${categoryData.label} (${categoryData.models.length})`}
+              extra={
+                <TriCheckbox
+                  checked={allSelected}
+                  indeterminate={indeterminate}
+                  onChange={(checked) =>
+                    handleCategorySelectAll(categoryData.models, checked)
+                  }
+                  ariaLabel={categoryData.label}
+                />
+              }
+            >
+              <div className='mb-3 flex items-center gap-2 text-xs text-muted'>
+                {categoryData.icon}
+                <span>
+                  {t('已选择 {{selected}} / {{total}}', {
+                    selected: selectedInCategory,
+                    total: categoryData.models.length,
+                  })}
+                </span>
+              </div>
+              <div className='grid grid-cols-1 gap-x-4 gap-y-1.5 sm:grid-cols-2'>
+                {categoryData.models.map((model) => {
+                  const checked = checkedList.includes(model);
+                  return (
+                    <label
+                      key={model}
+                      className='flex cursor-pointer items-center gap-2 text-sm text-foreground'
+                    >
+                      <input
+                        type='checkbox'
+                        checked={checked}
+                        onChange={() => toggleSingle(model)}
+                        className='h-4 w-4 accent-primary'
+                      />
+                      <span className='flex items-center gap-1.5'>
+                        <span>{model}</span>
+                        {redirectOnlySet.has(normalizeModelName(model)) && (
+                          <Tooltip
+                            content={t(
+                              '来自模型重定向，尚未加入模型列表',
+                            )}
+                            placement='top'
+                          >
+                            <Info
+                              size={14}
+                              className='cursor-help text-warning'
+                            />
+                          </Tooltip>
+                        )}
+                      </span>
+                    </label>
                   );
-                }}
-                onClick={(e) => e.stopPropagation()} // 防止点击checkbox时折叠面板
-              />
-            }
-          >
-            <div className='flex items-center gap-2 mb-3'>
-              {categoryData.icon}
-              <Typography.Text type='secondary' size='small'>
-                {t('已选择 {{selected}} / {{total}}', {
-                  selected: categoryData.models.filter((model) =>
-                    checkedList.includes(model),
-                  ).length,
-                  total: categoryData.models.length,
                 })}
-              </Typography.Text>
-            </div>
-            <div className='grid grid-cols-2 gap-x-4'>
-              {categoryData.models.map((model) => (
-                <Checkbox key={model} value={model} className='my-1'>
-                  <span className='flex items-center gap-2'>
-                    <span>{model}</span>
-                    {redirectOnlySet.has(normalizeModelName(model)) && (
-                      <Tooltip
-                        position='top'
-                        content={t('来自模型重定向，尚未加入模型列表')}
-                      >
-                        <IconInfoCircle
-                          size='small'
-                          className='text-amber-500 cursor-help'
-                        />
-                      </Tooltip>
-                    )}
-                  </span>
-                </Checkbox>
-              ))}
-            </div>
-          </Collapse.Panel>
-        ))}
-      </Collapse>
+              </div>
+            </CategoryPanel>
+          );
+        })}
+      </div>
     );
   };
 
+  // Footer summary chip for the active tab
+  const currentModels = activeTab === 'new' ? newModels : existingModels;
+  const currentSelected = currentModels.filter((model) =>
+    checkedList.includes(model),
+  ).length;
+  const isAllSelected =
+    currentModels.length > 0 && currentSelected === currentModels.length;
+  const isIndeterminate =
+    currentSelected > 0 && currentSelected < currentModels.length;
+
   return (
-    <Modal
-      header={
-        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 py-4'>
-          <Typography.Title heading={5} className='m-0'>
-            {t('选择模型')}
-          </Typography.Title>
-          <div className='flex-shrink-0'>
-            <Tabs
-              type='slash'
-              size='small'
-              tabList={tabList}
-              activeKey={activeTab}
-              onChange={(key) => setActiveTab(key)}
-            />
-          </div>
-        </div>
-      }
-      visible={visible}
-      onOk={handleOk}
-      onCancel={onCancel}
-      okText={t('确定')}
-      cancelText={t('取消')}
-      size={isMobile ? 'full-width' : 'large'}
-      closeOnEsc
-      maskClosable
-      centered
-    >
-      <Input
-        prefix={<IconSearch size={14} />}
-        placeholder={t('搜索模型')}
-        value={keyword}
-        onChange={(v) => setKeyword(v)}
-        showClear
-      />
-
-      <Spin spinning={!models || models.length === 0}>
-        <div style={{ maxHeight: 400, overflowY: 'auto', paddingRight: 8 }}>
-          {filteredModels.length === 0 ? (
-            <Empty
-              image={
-                <IllustrationNoResult style={{ width: 150, height: 150 }} />
-              }
-              darkModeImage={
-                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-              }
-              description={t('暂无匹配模型')}
-              style={{ padding: 30 }}
-            />
-          ) : (
-            <Checkbox.Group
-              value={checkedList}
-              onChange={(vals) => setCheckedList(vals)}
-            >
-              {activeTab === 'new' && newModels.length > 0 && (
-                <div>{renderModelsByCategory(newModelsByCategory, 'new')}</div>
-              )}
-              {activeTab === 'existing' && existingModels.length > 0 && (
-                <div>
-                  {renderModelsByCategory(existingModelsByCategory, 'existing')}
-                </div>
-              )}
-            </Checkbox.Group>
-          )}
-        </div>
-      </Spin>
-
-      <Typography.Text
-        type='secondary'
-        size='small'
-        className='block text-right mt-4'
-      >
-        <div className='flex items-center justify-end gap-2'>
-          {(() => {
-            const currentModels =
-              activeTab === 'new' ? newModels : existingModels;
-            const currentSelected = currentModels.filter((model) =>
-              checkedList.includes(model),
-            ).length;
-            const isAllSelected =
-              currentModels.length > 0 &&
-              currentSelected === currentModels.length;
-            const isIndeterminate =
-              currentSelected > 0 && currentSelected < currentModels.length;
-
-            return (
-              <>
-                <span>
-                  {t('已选择 {{selected}} / {{total}}', {
-                    selected: currentSelected,
-                    total: currentModels.length,
-                  })}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer
+          size={isMobile ? 'full' : '2xl'}
+          scroll='inside'
+          placement='center'
+        >
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between'>
+                <span className='text-base font-semibold text-foreground'>
+                  {t('选择模型')}
                 </span>
-                <Checkbox
-                  checked={isAllSelected}
-                  indeterminate={isIndeterminate}
-                  onChange={(e) => {
-                    handleCategorySelectAll(currentModels, e.target.checked);
-                  }}
-                />
-              </>
-            );
-          })()}
-        </div>
-      </Typography.Text>
+                {tabList.length > 0 ? (
+                  <div className='inline-flex overflow-hidden rounded-lg border border-border'>
+                    {tabList.map((tab) => {
+                      const active = tab.key === activeTab;
+                      return (
+                        <button
+                          key={tab.key}
+                          type='button'
+                          onClick={() => setActiveTab(tab.key)}
+                          className={`px-3 py-1 text-xs font-medium transition-colors ${
+                            active
+                              ? 'bg-foreground text-background'
+                              : 'bg-background text-muted hover:bg-surface-secondary'
+                          }`}
+                        >
+                          {tab.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                ) : null}
+              </div>
+            </ModalHeader>
+            <ModalBody className='max-h-[70vh] overflow-y-auto px-4 py-4 md:px-6'>
+              <div className='flex flex-col gap-3'>
+                <div className='relative'>
+                  <Search
+                    size={14}
+                    className='pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted'
+                  />
+                  <Input
+                    aria-label={t('搜索模型')}
+                    placeholder={t('搜索模型')}
+                    value={keyword}
+                    onValueChange={setKeyword}
+                    size='sm'
+                    className='w-full [&_input]:pl-7'
+                  />
+                </div>
+
+                {!models || models.length === 0 ? (
+                  <div className='flex flex-col items-center justify-center gap-2 py-12'>
+                    <Spinner color='primary' />
+                  </div>
+                ) : filteredModels.length === 0 ? (
+                  <div className='flex flex-col items-center gap-3 py-10 text-center'>
+                    <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                      <Inbox size={28} />
+                    </div>
+                    <span className='text-sm text-muted'>
+                      {t('暂无匹配模型')}
+                    </span>
+                  </div>
+                ) : (
+                  <>
+                    {activeTab === 'new' && newModels.length > 0 && (
+                      <div>{renderModelsByCategory(newModelsByCategory)}</div>
+                    )}
+                    {activeTab === 'existing' && existingModels.length > 0 && (
+                      <div>
+                        {renderModelsByCategory(existingModelsByCategory)}
+                      </div>
+                    )}
+                  </>
+                )}
+
+                {currentModels.length > 0 && (
+                  <div className='flex items-center justify-end gap-2 pt-1 text-xs text-muted'>
+                    <span>
+                      {t('已选择 {{selected}} / {{total}}', {
+                        selected: currentSelected,
+                        total: currentModels.length,
+                      })}
+                    </span>
+                    <TriCheckbox
+                      checked={isAllSelected}
+                      indeterminate={isIndeterminate}
+                      onChange={(checked) =>
+                        handleCategorySelectAll(currentModels, checked)
+                      }
+                      ariaLabel={t('全选')}
+                    />
+                  </div>
+                )}
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={onCancel}>
+                {t('取消')}
+              </Button>
+              <Button color='primary' onPress={handleOk}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/channels/modals/ModelTestModal.jsx b/web/src/components/table/channels/modals/ModelTestModal.jsx
index e7f57453229..6cc1f5e29a2 100644
--- a/web/src/components/table/channels/modals/ModelTestModal.jsx
+++ b/web/src/components/table/channels/modals/ModelTestModal.jsx
@@ -6,34 +6,69 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import {
-  Modal,
   Button,
   Input,
-  Table,
-  Tag,
-  Typography,
-  Select,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
   Switch,
-  Banner,
-} from '@douyinfe/semi-ui';
-import { IconSearch, IconInfoCircle } from '@douyinfe/semi-icons';
-import { Settings } from 'lucide-react';
+  useOverlayState,
+} from '@heroui/react';
+import { Info, Search, Settings } from 'lucide-react';
 import { copy, showError, showInfo, showSuccess } from '../../../../helpers';
 import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants';
 
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+  red: 'bg-danger/15 text-danger',
+  grey: 'bg-surface-secondary text-muted',
+};
+
+function StatusChip({ tone = 'grey', children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${
+        TAG_TONE[tone] || TAG_TONE.grey
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+// Mirrors `HeaderCheckbox` from PricingTable / SettingsAPIInfo:
+// `indeterminate` is set imperatively on the DOM element so the visual
+// minus state shows up between checked/unchecked.
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
+
 const ModelTestModal = ({
   showModelTestModal,
   currentTestChannel,
@@ -65,7 +100,14 @@ const ModelTestModal = ({
     'openai-response-compact',
   ].includes(selectedEndpointType);
 
-  React.useEffect(() => {
+  const modalState = useOverlayState({
+    isOpen: showModelTestModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleCloseModal?.();
+    },
+  });
+
+  useEffect(() => {
     if (streamToggleDisabled && isStreamTest) {
       setIsStreamTest(false);
     }
@@ -134,261 +176,369 @@ const ModelTestModal = ({
     setSelectedModelKeys(successKeys);
   };
 
-  const columns = [
-    {
-      title: t('模型名称'),
-      dataIndex: 'model',
-      render: (text) => (
-        <div className='flex items-center'>
-          <Typography.Text strong>{text}</Typography.Text>
-        </div>
-      ),
-    },
-    {
-      title: t('状态'),
-      dataIndex: 'status',
-      render: (text, record) => {
-        const testResult =
-          modelTestResults[`${currentTestChannel.id}-${record.model}`];
-        const isTesting = testingModels.has(record.model);
+  // Pagination + slicing
+  const totalRows = filteredModels.length;
+  const totalPages = Math.max(
+    1,
+    Math.ceil(totalRows / MODEL_TABLE_PAGE_SIZE) || 1,
+  );
+  const safePage = Math.min(Math.max(1, modelTablePage), totalPages);
+  const startIndex = (safePage - 1) * MODEL_TABLE_PAGE_SIZE;
+  const pagedModels = filteredModels
+    .slice(startIndex, startIndex + MODEL_TABLE_PAGE_SIZE)
+    .map((model) => ({ model, key: model }));
 
-        if (isTesting) {
-          return (
-            <Tag color='blue' shape='circle'>
-              {t('测试中')}
-            </Tag>
-          );
-        }
+  // Page checkbox state
+  const pageRowKeys = pagedModels.map((row) => row.key);
+  const allPageSelected =
+    pageRowKeys.length > 0 &&
+    pageRowKeys.every((key) => selectedModelKeys.includes(key));
+  const somePageSelected =
+    !allPageSelected &&
+    pageRowKeys.some((key) => selectedModelKeys.includes(key));
 
-        if (!testResult) {
-          return (
-            <Tag color='grey' shape='circle'>
-              {t('未开始')}
-            </Tag>
-          );
-        }
+  const togglePageSelection = (checked) => {
+    if (allSelectingRef) {
+      allSelectingRef.current = true;
+    }
+    if (checked) {
+      setSelectedModelKeys(filteredModels);
+    } else {
+      setSelectedModelKeys([]);
+    }
+  };
 
-        return (
-          <div className='flex flex-col gap-1'>
-            <div className='flex items-center gap-2'>
-              <Tag color={testResult.success ? 'green' : 'red'} shape='circle'>
-                {testResult.success ? t('成功') : t('失败')}
-              </Tag>
-              {testResult.success && (
-                <Typography.Text type='tertiary'>
-                  {t('请求时长: ${time}s').replace(
-                    '${time}',
-                    testResult.time.toFixed(2),
-                  )}
-                </Typography.Text>
-              )}
-            </div>
-            {!testResult.success && testResult.message && (
-              <div className='flex flex-col gap-1'>
-                <Typography.Text
-                  type='danger'
-                  size='small'
-                  className='break-all'
-                  style={{ maxWidth: '400px', fontSize: '12px' }}
-                >
-                  {testResult.message}
-                </Typography.Text>
-                {testResult.errorCode === 'model_price_error' && (
-                  <Button
-                    size='small'
-                    theme='light'
-                    type='warning'
-                    icon={<Settings size={12} />}
-                    onClick={() => window.open('/console/setting?tab=ratio', '_blank')}
-                    style={{ width: 'fit-content' }}
-                  >
-                    {t('前往设置')}
-                  </Button>
-                )}
-              </div>
-            )}
-          </div>
-        );
-      },
-    },
-    {
-      title: '',
-      dataIndex: 'operate',
-      render: (text, record) => {
-        const isTesting = testingModels.has(record.model);
-        return (
-          <Button
-            type='tertiary'
-            onClick={() =>
-              testChannel(
-                currentTestChannel,
-                record.model,
-                selectedEndpointType,
-                isStreamTest,
-              )
-            }
-            loading={isTesting}
-            size='small'
-          >
-            {t('测试')}
-          </Button>
-        );
-      },
-    },
-  ];
+  const toggleRowSelection = (key, checked) => {
+    if (allSelectingRef && allSelectingRef.current) {
+      allSelectingRef.current = false;
+      return;
+    }
+    if (checked) {
+      setSelectedModelKeys(
+        Array.from(new Set([...selectedModelKeys, key])),
+      );
+    } else {
+      setSelectedModelKeys(selectedModelKeys.filter((item) => item !== key));
+    }
+  };
 
-  const dataSource = (() => {
-    if (!hasChannel) return [];
-    const start = (modelTablePage - 1) * MODEL_TABLE_PAGE_SIZE;
-    const end = start + MODEL_TABLE_PAGE_SIZE;
-    return filteredModels.slice(start, end).map((model) => ({
-      model,
-      key: model,
-    }));
-  })();
+  // Renders a single status cell — replaces the Semi columns[].render
+  // closure for the 状态 column.
+  const renderStatusCell = (record) => {
+    const testResult =
+      modelTestResults[`${currentTestChannel.id}-${record.model}`];
+    const isTesting = testingModels.has(record.model);
 
-  return (
-    <Modal
-      title={
-        hasChannel ? (
-          <div className='flex flex-col gap-2 w-full'>
-            <div className='flex items-center gap-2'>
-              <Typography.Text
-                strong
-                className='!text-[var(--semi-color-text-0)] !text-base'
+    if (isTesting) {
+      return <StatusChip tone='blue'>{t('测试中')}</StatusChip>;
+    }
+
+    if (!testResult) {
+      return <StatusChip tone='grey'>{t('未开始')}</StatusChip>;
+    }
+
+    return (
+      <div className='flex flex-col gap-1'>
+        <div className='flex items-center gap-2'>
+          <StatusChip tone={testResult.success ? 'green' : 'red'}>
+            {testResult.success ? t('成功') : t('失败')}
+          </StatusChip>
+          {testResult.success && (
+            <span className='text-xs text-muted tabular-nums'>
+              {t('请求时长: ${time}s').replace(
+                '${time}',
+                testResult.time.toFixed(2),
+              )}
+            </span>
+          )}
+        </div>
+        {!testResult.success && testResult.message && (
+          <div className='flex flex-col gap-1'>
+            <span
+              className='break-all text-xs text-danger'
+              style={{ maxWidth: '400px' }}
+            >
+              {testResult.message}
+            </span>
+            {testResult.errorCode === 'model_price_error' && (
+              <Button
+                size='sm'
+                variant='flat'
+                color='warning'
+                startContent={<Settings size={12} />}
+                onPress={() =>
+                  window.open('/console/setting?tab=ratio', '_blank')
+                }
+                className='w-fit'
               >
-                {currentTestChannel.name} {t('渠道的模型测试')}
-              </Typography.Text>
-              <Typography.Text type='tertiary' size='small'>
-                {t('共')} {currentTestChannel.models.split(',').length}{' '}
-                {t('个模型')}
-              </Typography.Text>
-            </div>
-          </div>
-        ) : null
-      }
-      visible={showModelTestModal}
-      onCancel={handleCloseModal}
-      footer={
-        hasChannel ? (
-          <div className='flex justify-end'>
-            {isBatchTesting ? (
-              <Button type='danger' onClick={handleCloseModal}>
-                {t('停止测试')}
-              </Button>
-            ) : (
-              <Button type='tertiary' onClick={handleCloseModal}>
-                {t('取消')}
+                {t('前往设置')}
               </Button>
             )}
-            <Button
-              onClick={batchTestModels}
-              loading={isBatchTesting}
-              disabled={isBatchTesting}
-            >
-              {isBatchTesting
-                ? t('测试中...')
-                : t('批量测试${count}个模型').replace(
-                    '${count}',
-                    filteredModels.length,
-                  )}
-            </Button>
-          </div>
-        ) : null
-      }
-      maskClosable={!isBatchTesting}
-      className='!rounded-lg'
-      size={isMobile ? 'full-width' : 'large'}
-    >
-      {hasChannel && (
-        <div className='model-test-scroll'>
-          {/* Endpoint toolbar */}
-          <div className='flex flex-col sm:flex-row sm:items-center gap-2 w-full mb-2'>
-            <div className='flex items-center gap-2 flex-1 min-w-0'>
-              <Typography.Text strong className='shrink-0'>
-                {t('端点类型')}:
-              </Typography.Text>
-              <Select
-                value={selectedEndpointType}
-                onChange={setSelectedEndpointType}
-                optionList={endpointTypeOptions}
-                className='!w-full min-w-0'
-                placeholder={t('选择端点类型')}
-              />
-            </div>
-            <div className='flex items-center justify-between sm:justify-end gap-2 shrink-0'>
-              <Typography.Text strong className='shrink-0'>
-                {t('流式')}:
-              </Typography.Text>
-              <Switch
-                checked={isStreamTest}
-                onChange={setIsStreamTest}
-                size='small'
-                disabled={streamToggleDisabled}
-                aria-label={t('流式')}
-              />
-            </div>
           </div>
+        )}
+      </div>
+    );
+  };
 
-          <Banner
-            type='info'
-            closeIcon={null}
-            icon={<IconInfoCircle />}
-            className='!rounded-lg mb-2'
-            description={t(
-              '说明：本页测试为非流式请求；若渠道仅支持流式返回，可能出现测试失败，请以实际使用为准。',
-            )}
-          />
+  const renderActionCell = (record) => {
+    const isTesting = testingModels.has(record.model);
+    return (
+      <Button
+        size='sm'
+        variant='flat'
+        isPending={isTesting}
+        onPress={() =>
+          testChannel(
+            currentTestChannel,
+            record.model,
+            selectedEndpointType,
+            isStreamTest,
+          )
+        }
+      >
+        {t('测试')}
+      </Button>
+    );
+  };
 
-          {/* 搜索与操作按钮 */}
-          <div className='flex flex-col sm:flex-row sm:items-center gap-2 w-full mb-2'>
-            <Input
-              placeholder={t('搜索模型...')}
-              value={modelSearchKeyword}
-              onChange={(v) => {
-                setModelSearchKeyword(v);
-                setModelTablePage(1);
-              }}
-              className='!w-full sm:!flex-1'
-              prefix={<IconSearch />}
-              showClear
-            />
+  return (
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur' isDismissable={!isBatchTesting}>
+        <ModalContainer
+          size={isMobile ? 'full' : 'xl'}
+          scroll='inside'
+          placement='center'
+        >
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {hasChannel ? (
+                <div className='flex flex-col gap-1 w-full'>
+                  <div className='flex items-center gap-2'>
+                    <span className='text-base font-semibold text-foreground'>
+                      {currentTestChannel.name} {t('渠道的模型测试')}
+                    </span>
+                    <span className='text-xs text-muted'>
+                      {t('共')}{' '}
+                      {currentTestChannel.models.split(',').length}{' '}
+                      {t('个模型')}
+                    </span>
+                  </div>
+                </div>
+              ) : null}
+            </ModalHeader>
+            <ModalBody className='max-h-[70vh] overflow-y-auto px-4 py-4 md:px-6'>
+              {hasChannel && (
+                <div className='space-y-3'>
+                  {/* Endpoint toolbar */}
+                  <div className='flex w-full flex-col gap-2 sm:flex-row sm:items-center'>
+                    <div className='flex flex-1 items-center gap-2 min-w-0'>
+                      <span className='shrink-0 text-sm font-semibold text-foreground'>
+                        {t('端点类型')}:
+                      </span>
+                      <select
+                        value={selectedEndpointType}
+                        onChange={(event) =>
+                          setSelectedEndpointType(event.target.value)
+                        }
+                        aria-label={t('选择端点类型')}
+                        className='h-9 w-full min-w-0 rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary'
+                      >
+                        {endpointTypeOptions.map((option) => (
+                          <option key={String(option.value)} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                    <label className='flex items-center justify-between gap-2 sm:justify-end'>
+                      <span className='text-sm font-semibold text-foreground'>
+                        {t('流式')}:
+                      </span>
+                      <Switch
+                        isSelected={isStreamTest}
+                        onValueChange={setIsStreamTest}
+                        size='sm'
+                        isDisabled={streamToggleDisabled}
+                        aria-label={t('流式')}
+                      >
+                        <Switch.Control>
+                          <Switch.Thumb />
+                        </Switch.Control>
+                      </Switch>
+                    </label>
+                  </div>
 
-            <div className='flex items-center justify-end gap-2'>
-              <Button onClick={handleCopySelected}>{t('复制已选')}</Button>
-              <Button type='tertiary' onClick={handleSelectSuccess}>
-                {t('选择成功')}
-              </Button>
-            </div>
-          </div>
+                  {/* Info banner */}
+                  <div className='flex items-start gap-2 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-xs text-muted'>
+                    <Info size={14} className='mt-0.5 shrink-0 text-primary' />
+                    <span>
+                      {t(
+                        '说明：本页测试为非流式请求；若渠道仅支持流式返回，可能出现测试失败，请以实际使用为准。',
+                      )}
+                    </span>
+                  </div>
 
-          <Table
-            columns={columns}
-            dataSource={dataSource}
-            rowSelection={{
-              selectedRowKeys: selectedModelKeys,
-              onChange: (keys) => {
-                if (allSelectingRef.current) {
-                  allSelectingRef.current = false;
-                  return;
-                }
-                setSelectedModelKeys(keys);
-              },
-              onSelectAll: (checked) => {
-                allSelectingRef.current = true;
-                setSelectedModelKeys(checked ? filteredModels : []);
-              },
-            }}
-            pagination={{
-              currentPage: modelTablePage,
-              pageSize: MODEL_TABLE_PAGE_SIZE,
-              total: filteredModels.length,
-              showSizeChanger: false,
-              onPageChange: (page) => setModelTablePage(page),
-            }}
-          />
-        </div>
-      )}
+                  {/* Search + actions */}
+                  <div className='flex w-full flex-col gap-2 sm:flex-row sm:items-center'>
+                    <div className='relative flex-1'>
+                      <Search className='pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted' size={14} />
+                      <Input
+                        aria-label={t('搜索模型')}
+                        placeholder={t('搜索模型...')}
+                        value={modelSearchKeyword}
+                        onValueChange={(value) => {
+                          setModelSearchKeyword(value);
+                          setModelTablePage(1);
+                        }}
+                        size='sm'
+                        className='w-full [&_input]:pl-7'
+                      />
+                    </div>
+                    <div className='flex items-center justify-end gap-2'>
+                      <Button onPress={handleCopySelected}>
+                        {t('复制已选')}
+                      </Button>
+                      <Button variant='light' onPress={handleSelectSuccess}>
+                        {t('选择成功')}
+                      </Button>
+                    </div>
+                  </div>
+
+                  {/* Native HTML table */}
+                  <div className='overflow-hidden rounded-2xl border border-border bg-background'>
+                    <div className='overflow-x-auto'>
+                      <table className='min-w-full border-collapse text-sm'>
+                        <thead className='bg-surface-secondary text-left text-xs font-semibold uppercase tracking-wide text-muted'>
+                          <tr>
+                            <th className='w-10 px-3 py-3'>
+                              <HeaderCheckbox
+                                checked={allPageSelected}
+                                indeterminate={somePageSelected}
+                                onChange={togglePageSelection}
+                                ariaLabel={t('全选')}
+                              />
+                            </th>
+                            <th className='px-4 py-3'>{t('模型名称')}</th>
+                            <th className='px-4 py-3'>{t('状态')}</th>
+                            <th className='px-4 py-3' />
+                          </tr>
+                        </thead>
+                        <tbody className='divide-y divide-border'>
+                          {pagedModels.length === 0 ? (
+                            <tr>
+                              <td
+                                colSpan={4}
+                                className='py-10 text-center text-sm text-muted'
+                              >
+                                {t('暂无数据')}
+                              </td>
+                            </tr>
+                          ) : (
+                            pagedModels.map((row) => {
+                              const checked = selectedModelKeys.includes(
+                                row.key,
+                              );
+                              return (
+                                <tr key={row.key}>
+                                  <td className='w-10 px-3 py-2 align-middle'>
+                                    <input
+                                      type='checkbox'
+                                      checked={checked}
+                                      onChange={(event) =>
+                                        toggleRowSelection(
+                                          row.key,
+                                          event.target.checked,
+                                        )
+                                      }
+                                      aria-label={t('选择行')}
+                                      className='h-4 w-4 accent-primary'
+                                    />
+                                  </td>
+                                  <td className='px-4 py-2 align-middle'>
+                                    <span className='font-semibold text-foreground'>
+                                      {row.model}
+                                    </span>
+                                  </td>
+                                  <td className='px-4 py-2 align-middle'>
+                                    {renderStatusCell(row)}
+                                  </td>
+                                  <td className='px-4 py-2 text-right align-middle'>
+                                    {renderActionCell(row)}
+                                  </td>
+                                </tr>
+                              );
+                            })
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
+
+                  {/* Pagination */}
+                  {totalRows > 0 && (
+                    <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted'>
+                      <span>{t('共 {{total}} 条', { total: totalRows })}</span>
+                      <div className='flex items-center gap-1'>
+                        <Button
+                          size='sm'
+                          variant='light'
+                          isDisabled={safePage <= 1}
+                          onPress={() =>
+                            setModelTablePage(Math.max(1, safePage - 1))
+                          }
+                        >
+                          {t('上一页')}
+                        </Button>
+                        <span className='tabular-nums'>
+                          {safePage} / {totalPages}
+                        </span>
+                        <Button
+                          size='sm'
+                          variant='light'
+                          isDisabled={safePage >= totalPages}
+                          onPress={() =>
+                            setModelTablePage(
+                              Math.min(totalPages, safePage + 1),
+                            )
+                          }
+                        >
+                          {t('下一页')}
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </ModalBody>
+            {hasChannel && (
+              <ModalFooter className='border-t border-border'>
+                {isBatchTesting ? (
+                  <Button color='danger' onPress={handleCloseModal}>
+                    {t('停止测试')}
+                  </Button>
+                ) : (
+                  <Button variant='light' onPress={handleCloseModal}>
+                    {t('取消')}
+                  </Button>
+                )}
+                <Button
+                  color='primary'
+                  isPending={isBatchTesting}
+                  isDisabled={isBatchTesting}
+                  onPress={batchTestModels}
+                >
+                  {isBatchTesting
+                    ? t('测试中...')
+                    : t('批量测试${count}个模型').replace(
+                        '${count}',
+                        filteredModels.length,
+                      )}
+                </Button>
+              </ModalFooter>
+            )}
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/channels/modals/MultiKeyManageModal.jsx b/web/src/components/table/channels/modals/MultiKeyManageModal.jsx
index fa7870dadaf..f6db31aeec4 100644
--- a/web/src/components/table/channels/modals/MultiKeyManageModal.jsx
+++ b/web/src/components/table/channels/modals/MultiKeyManageModal.jsx
@@ -6,49 +6,124 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Modal,
   Button,
-  Table,
-  Tag,
-  Typography,
-  Space,
-  Tooltip,
-  Popconfirm,
-  Empty,
-  Spin,
-  Select,
-  Row,
-  Col,
-  Badge,
-  Progress,
   Card,
-} from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  Spinner,
+  Tooltip,
+  useOverlayState,
+} from '@heroui/react';
+import { Inbox, RefreshCw } from 'lucide-react';
 import {
   API,
   showError,
   showSuccess,
   timestamp2string,
 } from '../../../../helpers';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
+
+// ----------------------------- helpers -----------------------------
+
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  red: 'bg-danger/15 text-danger',
+  orange: 'bg-warning/15 text-warning',
+  blue: 'bg-primary/15 text-primary',
+  grey: 'bg-surface-secondary text-muted',
+  white: 'bg-background border border-border text-foreground',
+};
+
+function StatusChip({ tone = 'grey', children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.grey
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function ProgressBar({ percent, tone = 'primary', height = 6 }) {
+  const safe = Math.max(0, Math.min(100, Number(percent) || 0));
+  const fill =
+    tone === 'success'
+      ? 'bg-success'
+      : tone === 'danger'
+        ? 'bg-danger'
+        : tone === 'warning'
+          ? 'bg-warning'
+          : 'bg-primary';
+  return (
+    <div
+      className='w-full overflow-hidden rounded-full bg-surface-secondary'
+      style={{ height }}
+    >
+      <div
+        className={`h-full rounded-full transition-[width] duration-200 ${fill}`}
+        style={{ width: `${safe}%` }}
+      />
+    </div>
+  );
+}
+
+function StatTile({ tone, label, count, total, percent }) {
+  const dotCls =
+    tone === 'success'
+      ? 'bg-success'
+      : tone === 'danger'
+        ? 'bg-danger'
+        : 'bg-warning';
+  const numberCls =
+    tone === 'success'
+      ? 'text-success'
+      : tone === 'danger'
+        ? 'text-danger'
+        : 'text-warning';
+
+  return (
+    <div className='rounded-xl border border-border bg-background p-3'>
+      <div className='mb-2 flex items-center gap-2'>
+        <span className={`inline-block h-2 w-2 rounded-full ${dotCls}`} />
+        <span className='text-xs text-muted'>{label}</span>
+      </div>
+      <div className='mb-2 flex items-end gap-2'>
+        <span className={`text-lg font-bold ${numberCls}`}>{count}</span>
+        <span className='text-base text-muted'>/ {total}</span>
+      </div>
+      <ProgressBar percent={percent} tone={tone} />
+    </div>
+  );
+}
+
+const STATUS_OPTIONS = (t) => [
+  { value: null, label: t('全部状态') },
+  { value: 1, label: t('已启用') },
+  { value: 2, label: t('手动禁用') },
+  { value: 3, label: t('自动禁用') },
+];
 
-const { Text } = Typography;
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+const inputClass =
+  'h-8 rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+// ----------------------------- main -----------------------------
 
 const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
   const { t } = useTranslation();
@@ -56,21 +131,33 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
   const [keyStatusList, setKeyStatusList] = useState([]);
   const [operationLoading, setOperationLoading] = useState({});
 
-  // Pagination states
+  // Pagination
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [total, setTotal] = useState(0);
   const [totalPages, setTotalPages] = useState(0);
 
-  // Statistics states
+  // Statistics
   const [enabledCount, setEnabledCount] = useState(0);
   const [manualDisabledCount, setManualDisabledCount] = useState(0);
   const [autoDisabledCount, setAutoDisabledCount] = useState(0);
 
-  // Filter states
-  const [statusFilter, setStatusFilter] = useState(null); // null=all, 1=enabled, 2=manual_disabled, 3=auto_disabled
+  // Filter
+  const [statusFilter, setStatusFilter] = useState(null);
+
+  // ConfirmDialog targets
+  const [deleteKeyTarget, setDeleteKeyTarget] = useState(null); // index
+  const [confirmEnableAll, setConfirmEnableAll] = useState(false);
+  const [confirmDisableAll, setConfirmDisableAll] = useState(false);
+  const [confirmDeleteDisabled, setConfirmDeleteDisabled] = useState(false);
+
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
 
-  // Load key status data
   const loadKeyStatus = async (
     page = currentPage,
     size = pageSize,
@@ -83,17 +170,12 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
       const requestData = {
         channel_id: channel.id,
         action: 'get_key_status',
-        page: page,
+        page,
         page_size: size,
       };
-
-      // Add status filter if specified
-      if (status !== null) {
-        requestData.status = status;
-      }
+      if (status !== null) requestData.status = status;
 
       const res = await API.post('/api/channel/multi_key/manage', requestData);
-
       if (res.data.success) {
         const data = res.data.data;
         setKeyStatusList(data.keys || []);
@@ -101,8 +183,6 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
         setCurrentPage(data.page || 1);
         setPageSize(data.page_size || 10);
         setTotalPages(data.total_pages || 0);
-
-        // Update statistics (these are always the overall statistics)
         setEnabledCount(data.enabled_count || 0);
         setManualDisabledCount(data.manual_disabled_count || 0);
         setAutoDisabledCount(data.auto_disabled_count || 0);
@@ -117,191 +197,164 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
     }
   };
 
-  // Disable a specific key
-  const handleDisableKey = async (keyIndex) => {
-    const operationId = `disable_${keyIndex}`;
-    setOperationLoading((prev) => ({ ...prev, [operationId]: true }));
+  const setOpLoading = (id, value) =>
+    setOperationLoading((prev) => ({ ...prev, [id]: value }));
 
+  const handleDisableKey = async (keyIndex) => {
+    const id = `disable_${keyIndex}`;
+    setOpLoading(id, true);
     try {
       const res = await API.post('/api/channel/multi_key/manage', {
         channel_id: channel.id,
         action: 'disable_key',
         key_index: keyIndex,
       });
-
       if (res.data.success) {
         showSuccess(t('密钥已禁用'));
-        await loadKeyStatus(currentPage, pageSize); // Reload current page
-        onRefresh && onRefresh(); // Refresh parent component
+        await loadKeyStatus(currentPage, pageSize);
+        onRefresh && onRefresh();
       } else {
         showError(res.data.message);
       }
     } catch (error) {
       showError(t('禁用密钥失败'));
     } finally {
-      setOperationLoading((prev) => ({ ...prev, [operationId]: false }));
+      setOpLoading(id, false);
     }
   };
 
-  // Enable a specific key
   const handleEnableKey = async (keyIndex) => {
-    const operationId = `enable_${keyIndex}`;
-    setOperationLoading((prev) => ({ ...prev, [operationId]: true }));
-
+    const id = `enable_${keyIndex}`;
+    setOpLoading(id, true);
     try {
       const res = await API.post('/api/channel/multi_key/manage', {
         channel_id: channel.id,
         action: 'enable_key',
         key_index: keyIndex,
       });
-
       if (res.data.success) {
         showSuccess(t('密钥已启用'));
-        await loadKeyStatus(currentPage, pageSize); // Reload current page
-        onRefresh && onRefresh(); // Refresh parent component
+        await loadKeyStatus(currentPage, pageSize);
+        onRefresh && onRefresh();
       } else {
         showError(res.data.message);
       }
     } catch (error) {
       showError(t('启用密钥失败'));
     } finally {
-      setOperationLoading((prev) => ({ ...prev, [operationId]: false }));
+      setOpLoading(id, false);
     }
   };
 
-  // Enable all disabled keys
   const handleEnableAll = async () => {
-    setOperationLoading((prev) => ({ ...prev, enable_all: true }));
-
+    setOpLoading('enable_all', true);
     try {
       const res = await API.post('/api/channel/multi_key/manage', {
         channel_id: channel.id,
         action: 'enable_all_keys',
       });
-
       if (res.data.success) {
         showSuccess(res.data.message || t('已启用所有密钥'));
-        // Reset to first page after bulk operation
         setCurrentPage(1);
         await loadKeyStatus(1, pageSize);
-        onRefresh && onRefresh(); // Refresh parent component
+        onRefresh && onRefresh();
       } else {
         showError(res.data.message);
       }
     } catch (error) {
       showError(t('启用所有密钥失败'));
     } finally {
-      setOperationLoading((prev) => ({ ...prev, enable_all: false }));
+      setOpLoading('enable_all', false);
     }
   };
 
-  // Disable all enabled keys
   const handleDisableAll = async () => {
-    setOperationLoading((prev) => ({ ...prev, disable_all: true }));
-
+    setOpLoading('disable_all', true);
     try {
       const res = await API.post('/api/channel/multi_key/manage', {
         channel_id: channel.id,
         action: 'disable_all_keys',
       });
-
       if (res.data.success) {
         showSuccess(res.data.message || t('已禁用所有密钥'));
-        // Reset to first page after bulk operation
         setCurrentPage(1);
         await loadKeyStatus(1, pageSize);
-        onRefresh && onRefresh(); // Refresh parent component
+        onRefresh && onRefresh();
       } else {
         showError(res.data.message);
       }
     } catch (error) {
       showError(t('禁用所有密钥失败'));
     } finally {
-      setOperationLoading((prev) => ({ ...prev, disable_all: false }));
+      setOpLoading('disable_all', false);
     }
   };
 
-  // Delete all disabled keys
   const handleDeleteDisabledKeys = async () => {
-    setOperationLoading((prev) => ({ ...prev, delete_disabled: true }));
-
+    setOpLoading('delete_disabled', true);
     try {
       const res = await API.post('/api/channel/multi_key/manage', {
         channel_id: channel.id,
         action: 'delete_disabled_keys',
       });
-
       if (res.data.success) {
         showSuccess(res.data.message);
-        // Reset to first page after deletion as data structure might change
         setCurrentPage(1);
         await loadKeyStatus(1, pageSize);
-        onRefresh && onRefresh(); // Refresh parent component
+        onRefresh && onRefresh();
       } else {
         showError(res.data.message);
       }
     } catch (error) {
       showError(t('删除禁用密钥失败'));
     } finally {
-      setOperationLoading((prev) => ({ ...prev, delete_disabled: false }));
+      setOpLoading('delete_disabled', false);
     }
   };
 
-  // Delete a specific key
   const handleDeleteKey = async (keyIndex) => {
-    const operationId = `delete_${keyIndex}`;
-    setOperationLoading((prev) => ({ ...prev, [operationId]: true }));
-
+    const id = `delete_${keyIndex}`;
+    setOpLoading(id, true);
     try {
       const res = await API.post('/api/channel/multi_key/manage', {
         channel_id: channel.id,
         action: 'delete_key',
         key_index: keyIndex,
       });
-
       if (res.data.success) {
         showSuccess(t('密钥已删除'));
-        await loadKeyStatus(currentPage, pageSize); // Reload current page
-        onRefresh && onRefresh(); // Refresh parent component
+        await loadKeyStatus(currentPage, pageSize);
+        onRefresh && onRefresh();
       } else {
         showError(res.data.message);
       }
     } catch (error) {
       showError(t('删除密钥失败'));
     } finally {
-      setOperationLoading((prev) => ({ ...prev, [operationId]: false }));
+      setOpLoading(id, false);
     }
   };
 
-  // Handle page change
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-    loadKeyStatus(page, pageSize);
+  const handleStatusFilterChange = (status) => {
+    setStatusFilter(status);
+    setCurrentPage(1);
+    loadKeyStatus(1, pageSize, status);
   };
 
-  // Handle page size change
   const handlePageSizeChange = (size) => {
     setPageSize(size);
-    setCurrentPage(1); // Reset to first page
+    setCurrentPage(1);
     loadKeyStatus(1, size);
   };
 
-  // Handle status filter change
-  const handleStatusFilterChange = (status) => {
-    setStatusFilter(status);
-    setCurrentPage(1); // Reset to first page when filter changes
-    loadKeyStatus(1, pageSize, status);
-  };
-
-  // Effect to load data when modal opens
   useEffect(() => {
     if (visible && channel?.id) {
-      setCurrentPage(1); // Reset to first page when opening
+      setCurrentPage(1);
       loadKeyStatus(1, pageSize);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, channel?.id]);
 
-  // Reset pagination when modal closes
   useEffect(() => {
     if (!visible) {
       setCurrentPage(1);
@@ -311,11 +364,10 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
       setEnabledCount(0);
       setManualDisabledCount(0);
       setAutoDisabledCount(0);
-      setStatusFilter(null); // Reset filter
+      setStatusFilter(null);
     }
   }, [visible]);
 
-  // Percentages for progress display
   const enabledPercent =
     total > 0 ? Math.round((enabledCount / total) * 100) : 0;
   const manualDisabledPercent =
@@ -323,419 +375,428 @@ const MultiKeyManageModal = ({ visible, onCancel, channel, onRefresh }) => {
   const autoDisabledPercent =
     total > 0 ? Math.round((autoDisabledCount / total) * 100) : 0;
 
-  // 取消饼图：不再需要图表数据与配置
-
-  // Get status tag component
   const renderStatusTag = (status) => {
     switch (status) {
       case 1:
-        return (
-          <Tag color='green' shape='circle' size='small'>
-            {t('已启用')}
-          </Tag>
-        );
+        return <StatusChip tone='green'>{t('已启用')}</StatusChip>;
       case 2:
-        return (
-          <Tag color='red' shape='circle' size='small'>
-            {t('已禁用')}
-          </Tag>
-        );
+        return <StatusChip tone='red'>{t('已禁用')}</StatusChip>;
       case 3:
-        return (
-          <Tag color='orange' shape='circle' size='small'>
-            {t('自动禁用')}
-          </Tag>
-        );
+        return <StatusChip tone='orange'>{t('自动禁用')}</StatusChip>;
       default:
-        return (
-          <Tag color='grey' shape='circle' size='small'>
-            {t('未知状态')}
-          </Tag>
-        );
+        return <StatusChip tone='grey'>{t('未知状态')}</StatusChip>;
     }
   };
 
-  // Table columns definition
-  const columns = [
-    {
-      title: t('索引'),
-      dataIndex: 'index',
-      render: (text) => `#${Number(text) + 1}`,
-    },
-    // {
-    //   title: t('密钥预览'),
-    //   dataIndex: 'key_preview',
-    //   render: (text) => (
-    //     <Text code style={{ fontSize: '12px' }}>
-    //       {text}
-    //     </Text>
-    //   ),
-    // },
-    {
-      title: t('状态'),
-      dataIndex: 'status',
-      render: (status) => renderStatusTag(status),
-    },
-    {
-      title: t('禁用原因'),
-      dataIndex: 'reason',
-      render: (reason, record) => {
-        if (record.status === 1 || !reason) {
-          return <Text type='quaternary'>-</Text>;
-        }
-        return (
-          <Tooltip content={reason}>
-            <Text style={{ maxWidth: '200px', display: 'block' }} ellipsis>
-              {reason}
-            </Text>
-          </Tooltip>
-        );
-      },
-    },
-    {
-      title: t('禁用时间'),
-      dataIndex: 'disabled_time',
-      render: (time, record) => {
-        if (record.status === 1 || !time) {
-          return <Text type='quaternary'>-</Text>;
-        }
-        return (
-          <Tooltip content={timestamp2string(time)}>
-            <Text style={{ fontSize: '12px' }}>{timestamp2string(time)}</Text>
-          </Tooltip>
-        );
-      },
-    },
-    {
-      title: t('操作'),
-      key: 'action',
-      fixed: 'right',
-      width: 150,
-      render: (_, record) => (
-        <Space>
-          {record.status === 1 ? (
-            <Button
-              type='danger'
-              size='small'
-              loading={operationLoading[`disable_${record.index}`]}
-              onClick={() => handleDisableKey(record.index)}
-            >
-              {t('禁用')}
-            </Button>
-          ) : (
-            <Button
-              type='primary'
-              size='small'
-              loading={operationLoading[`enable_${record.index}`]}
-              onClick={() => handleEnableKey(record.index)}
-            >
-              {t('启用')}
-            </Button>
-          )}
-          <Popconfirm
-            title={t('确定要删除此密钥吗？')}
-            content={t('此操作不可撤销，将永久删除该密钥')}
-            onConfirm={() => handleDeleteKey(record.index)}
-            okType={'danger'}
-            position={'topRight'}
-          >
-            <Button
-              type='danger'
-              size='small'
-              loading={operationLoading[`delete_${record.index}`]}
-            >
-              {t('删除')}
-            </Button>
-          </Popconfirm>
-        </Space>
-      ),
-    },
-  ];
+  const startIndex = (currentPage - 1) * pageSize + 1;
+  const endIndex = Math.min(currentPage * pageSize, total);
 
   return (
-    <Modal
-      title={
-        <Space>
-          <Text>{t('多密钥管理')}</Text>
-          {channel?.name && (
-            <Tag size='small' shape='circle' color='white'>
-              {channel.name}
-            </Tag>
-          )}
-          <Tag size='small' shape='circle' color='white'>
-            {t('总密钥数')}: {total}
-          </Tag>
-          {channel?.channel_info?.multi_key_mode && (
-            <Tag size='small' shape='circle' color='white'>
-              {channel.channel_info.multi_key_mode === 'random'
-                ? t('随机模式')
-                : t('轮询模式')}
-            </Tag>
-          )}
-        </Space>
-      }
-      visible={visible}
-      onCancel={onCancel}
-      width={900}
-      footer={null}
-    >
-      <div className='flex flex-col mb-5'>
-        {/* Stats & Mode */}
-        <div
-          className='rounded-xl p-4 mb-3'
-          style={{
-            background: 'var(--semi-color-bg-1)',
-            border: '1px solid var(--semi-color-border)',
-          }}
-        >
-          <Row gutter={16} align='middle'>
-            <Col span={8}>
-              <div
-                style={{
-                  background: 'var(--semi-color-bg-0)',
-                  border: '1px solid var(--semi-color-border)',
-                  borderRadius: 12,
-                  padding: 12,
-                }}
-              >
-                <div className='flex items-center gap-2 mb-2'>
-                  <Badge dot type='success' />
-                  <Text type='tertiary'>{t('已启用')}</Text>
-                </div>
-                <div className='flex items-end gap-2 mb-2'>
-                  <Text
-                    style={{ fontSize: 18, fontWeight: 700, color: '#22c55e' }}
-                  >
-                    {enabledCount}
-                  </Text>
-                  <Text
-                    style={{ fontSize: 18, color: 'var(--semi-color-text-2)' }}
-                  >
-                    / {total}
-                  </Text>
-                </div>
-                <Progress
-                  percent={enabledPercent}
-                  showInfo={false}
-                  size='small'
-                  stroke='#22c55e'
-                  style={{ height: 6, borderRadius: 999 }}
-                />
-              </div>
-            </Col>
-            <Col span={8}>
-              <div
-                style={{
-                  background: 'var(--semi-color-bg-0)',
-                  border: '1px solid var(--semi-color-border)',
-                  borderRadius: 12,
-                  padding: 12,
-                }}
-              >
-                <div className='flex items-center gap-2 mb-2'>
-                  <Badge dot type='danger' />
-                  <Text type='tertiary'>{t('手动禁用')}</Text>
-                </div>
-                <div className='flex items-end gap-2 mb-2'>
-                  <Text
-                    style={{ fontSize: 18, fontWeight: 700, color: '#ef4444' }}
-                  >
-                    {manualDisabledCount}
-                  </Text>
-                  <Text
-                    style={{ fontSize: 18, color: 'var(--semi-color-text-2)' }}
-                  >
-                    / {total}
-                  </Text>
-                </div>
-                <Progress
-                  percent={manualDisabledPercent}
-                  showInfo={false}
-                  size='small'
-                  stroke='#ef4444'
-                  style={{ height: 6, borderRadius: 999 }}
-                />
-              </div>
-            </Col>
-            <Col span={8}>
-              <div
-                style={{
-                  background: 'var(--semi-color-bg-0)',
-                  border: '1px solid var(--semi-color-border)',
-                  borderRadius: 12,
-                  padding: 12,
-                }}
-              >
-                <div className='flex items-center gap-2 mb-2'>
-                  <Badge dot type='warning' />
-                  <Text type='tertiary'>{t('自动禁用')}</Text>
+    <>
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size='4xl'
+            placement='center'
+            className='max-w-[95vw]'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <div className='flex flex-wrap items-center gap-2'>
+                  <span>{t('多密钥管理')}</span>
+                  {channel?.name && (
+                    <StatusChip tone='white'>{channel.name}</StatusChip>
+                  )}
+                  <StatusChip tone='white'>
+                    {t('总密钥数')}: {total}
+                  </StatusChip>
+                  {channel?.channel_info?.multi_key_mode && (
+                    <StatusChip tone='white'>
+                      {channel.channel_info.multi_key_mode === 'random'
+                        ? t('随机模式')
+                        : t('轮询模式')}
+                    </StatusChip>
+                  )}
                 </div>
-                <div className='flex items-end gap-2 mb-2'>
-                  <Text
-                    style={{ fontSize: 18, fontWeight: 700, color: '#f59e0b' }}
-                  >
-                    {autoDisabledCount}
-                  </Text>
-                  <Text
-                    style={{ fontSize: 18, color: 'var(--semi-color-text-2)' }}
-                  >
-                    / {total}
-                  </Text>
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                {/* Stats */}
+                <div className='rounded-xl border border-border bg-background p-4'>
+                  <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+                    <StatTile
+                      tone='success'
+                      label={t('已启用')}
+                      count={enabledCount}
+                      total={total}
+                      percent={enabledPercent}
+                    />
+                    <StatTile
+                      tone='danger'
+                      label={t('手动禁用')}
+                      count={manualDisabledCount}
+                      total={total}
+                      percent={manualDisabledPercent}
+                    />
+                    <StatTile
+                      tone='warning'
+                      label={t('自动禁用')}
+                      count={autoDisabledCount}
+                      total={total}
+                      percent={autoDisabledPercent}
+                    />
+                  </div>
                 </div>
-                <Progress
-                  percent={autoDisabledPercent}
-                  showInfo={false}
-                  size='small'
-                  stroke='#f59e0b'
-                  style={{ height: 6, borderRadius: 999 }}
-                />
-              </div>
-            </Col>
-          </Row>
-        </div>
-
-        {/* Table */}
-        <div className='flex-1 flex flex-col min-h-0'>
-          <Spin spinning={loading}>
-            <Card className='!rounded-xl'>
-              <Table
-                title={() => (
-                  <Row gutter={12} style={{ width: '100%' }}>
-                    <Col span={14}>
-                      <Row gutter={12} style={{ alignItems: 'center' }}>
-                        <Col>
-                          <Select
-                            value={statusFilter}
-                            onChange={handleStatusFilterChange}
-                            size='small'
-                            placeholder={t('全部状态')}
-                          >
-                            <Select.Option value={null}>
-                              {t('全部状态')}
-                            </Select.Option>
-                            <Select.Option value={1}>
-                              {t('已启用')}
-                            </Select.Option>
-                            <Select.Option value={2}>
-                              {t('手动禁用')}
-                            </Select.Option>
-                            <Select.Option value={3}>
-                              {t('自动禁用')}
-                            </Select.Option>
-                          </Select>
-                        </Col>
-                      </Row>
-                    </Col>
-                    <Col
-                      span={10}
-                      style={{ display: 'flex', justifyContent: 'flex-end' }}
-                    >
-                      <Space>
+
+                {/* Table card */}
+                <Card className='!rounded-xl'>
+                  <Card.Content className='space-y-3 p-4'>
+                    {/* Toolbar */}
+                    <div className='flex flex-wrap items-center justify-between gap-3'>
+                      <div>
+                        <select
+                          value={
+                            statusFilter === null ? '' : String(statusFilter)
+                          }
+                          onChange={(event) => {
+                            const v = event.target.value;
+                            handleStatusFilterChange(
+                              v === '' ? null : Number(v),
+                            );
+                          }}
+                          className={inputClass}
+                        >
+                          {STATUS_OPTIONS(t).map((option) => (
+                            <option
+                              key={option.value === null ? 'all' : option.value}
+                              value={option.value === null ? '' : option.value}
+                            >
+                              {option.label}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <div className='flex flex-wrap items-center gap-2'>
                         <Button
-                          size='small'
-                          type='tertiary'
-                          onClick={() => loadKeyStatus(currentPage, pageSize)}
-                          loading={loading}
+                          size='sm'
+                          variant='flat'
+                          startContent={<RefreshCw size={14} />}
+                          isPending={loading}
+                          onPress={() =>
+                            loadKeyStatus(currentPage, pageSize)
+                          }
                         >
                           {t('刷新')}
                         </Button>
                         {manualDisabledCount + autoDisabledCount > 0 && (
-                          <Popconfirm
-                            title={t('确定要启用所有密钥吗？')}
-                            onConfirm={handleEnableAll}
-                            position={'topRight'}
+                          <Button
+                            size='sm'
+                            color='primary'
+                            isPending={operationLoading.enable_all}
+                            onPress={() => setConfirmEnableAll(true)}
                           >
-                            <Button
-                              size='small'
-                              type='primary'
-                              loading={operationLoading.enable_all}
-                            >
-                              {t('启用全部')}
-                            </Button>
-                          </Popconfirm>
+                            {t('启用全部')}
+                          </Button>
                         )}
                         {enabledCount > 0 && (
-                          <Popconfirm
-                            title={t('确定要禁用所有的密钥吗？')}
-                            onConfirm={handleDisableAll}
-                            okType={'danger'}
-                            position={'topRight'}
+                          <Button
+                            size='sm'
+                            color='danger'
+                            isPending={operationLoading.disable_all}
+                            onPress={() => setConfirmDisableAll(true)}
                           >
-                            <Button
-                              size='small'
-                              type='danger'
-                              loading={operationLoading.disable_all}
-                            >
-                              {t('禁用全部')}
-                            </Button>
-                          </Popconfirm>
+                            {t('禁用全部')}
+                          </Button>
                         )}
-                        <Popconfirm
-                          title={t('确定要删除所有已自动禁用的密钥吗？')}
-                          content={t(
-                            '此操作不可撤销，将永久删除已自动禁用的密钥',
-                          )}
-                          onConfirm={handleDeleteDisabledKeys}
-                          okType={'danger'}
-                          position={'topRight'}
+                        <Button
+                          size='sm'
+                          color='warning'
+                          isPending={operationLoading.delete_disabled}
+                          onPress={() => setConfirmDeleteDisabled(true)}
                         >
+                          {t('删除自动禁用密钥')}
+                        </Button>
+                      </div>
+                    </div>
+
+                    {/* Table */}
+                    <div className='relative min-h-[200px] overflow-x-auto rounded-xl border border-border'>
+                      {loading && (
+                        <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+                          <Spinner color='primary' />
+                        </div>
+                      )}
+                      <table className='w-full text-sm'>
+                        <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+                          <tr>
+                            <th className='px-4 py-2 text-left font-medium'>
+                              {t('索引')}
+                            </th>
+                            <th className='px-4 py-2 text-left font-medium'>
+                              {t('状态')}
+                            </th>
+                            <th className='px-4 py-2 text-left font-medium'>
+                              {t('禁用原因')}
+                            </th>
+                            <th className='px-4 py-2 text-left font-medium'>
+                              {t('禁用时间')}
+                            </th>
+                            <th className='sticky right-0 w-[180px] bg-surface-secondary px-4 py-2 text-left font-medium'>
+                              {t('操作')}
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className='divide-y divide-border'>
+                          {keyStatusList.length === 0 && !loading ? (
+                            <tr>
+                              <td
+                                colSpan={5}
+                                className='px-4 py-10 text-center'
+                              >
+                                <div className='flex flex-col items-center gap-2'>
+                                  <Inbox
+                                    size={36}
+                                    className='text-muted/60'
+                                  />
+                                  <div className='text-sm font-semibold text-foreground'>
+                                    {t('暂无密钥数据')}
+                                  </div>
+                                  <div className='text-xs text-muted'>
+                                    {t('请检查渠道配置或刷新重试')}
+                                  </div>
+                                </div>
+                              </td>
+                            </tr>
+                          ) : (
+                            keyStatusList.map((record) => (
+                              <tr
+                                key={record.index}
+                                className='bg-background hover:bg-surface-secondary/60'
+                              >
+                                <td className='px-4 py-3 align-middle text-foreground'>
+                                  #{Number(record.index) + 1}
+                                </td>
+                                <td className='px-4 py-3 align-middle'>
+                                  {renderStatusTag(record.status)}
+                                </td>
+                                <td className='px-4 py-3 align-middle'>
+                                  {record.status === 1 || !record.reason ? (
+                                    <span className='text-muted'>-</span>
+                                  ) : (
+                                    <Tooltip content={record.reason}>
+                                      <div className='block max-w-[200px] truncate text-foreground'>
+                                        {record.reason}
+                                      </div>
+                                    </Tooltip>
+                                  )}
+                                </td>
+                                <td className='px-4 py-3 align-middle'>
+                                  {record.status === 1 ||
+                                  !record.disabled_time ? (
+                                    <span className='text-muted'>-</span>
+                                  ) : (
+                                    <Tooltip
+                                      content={timestamp2string(
+                                        record.disabled_time,
+                                      )}
+                                    >
+                                      <span className='text-xs text-foreground'>
+                                        {timestamp2string(
+                                          record.disabled_time,
+                                        )}
+                                      </span>
+                                    </Tooltip>
+                                  )}
+                                </td>
+                                <td className='sticky right-0 bg-background px-4 py-3 align-middle'>
+                                  <div className='flex flex-wrap gap-2'>
+                                    {record.status === 1 ? (
+                                      <Button
+                                        size='sm'
+                                        color='danger'
+                                        variant='flat'
+                                        isPending={
+                                          operationLoading[
+                                            `disable_${record.index}`
+                                          ]
+                                        }
+                                        onPress={() =>
+                                          handleDisableKey(record.index)
+                                        }
+                                      >
+                                        {t('禁用')}
+                                      </Button>
+                                    ) : (
+                                      <Button
+                                        size='sm'
+                                        color='primary'
+                                        variant='flat'
+                                        isPending={
+                                          operationLoading[
+                                            `enable_${record.index}`
+                                          ]
+                                        }
+                                        onPress={() =>
+                                          handleEnableKey(record.index)
+                                        }
+                                      >
+                                        {t('启用')}
+                                      </Button>
+                                    )}
+                                    <Button
+                                      size='sm'
+                                      color='danger'
+                                      variant='flat'
+                                      isPending={
+                                        operationLoading[
+                                          `delete_${record.index}`
+                                        ]
+                                      }
+                                      onPress={() =>
+                                        setDeleteKeyTarget(record.index)
+                                      }
+                                    >
+                                      {t('删除')}
+                                    </Button>
+                                  </div>
+                                </td>
+                              </tr>
+                            ))
+                          )}
+                        </tbody>
+                      </table>
+                    </div>
+
+                    {/* Pagination */}
+                    {total > 0 && (
+                      <div className='flex flex-wrap items-center justify-between gap-3 text-xs text-muted'>
+                        <span>
+                          {t('共 {{total}} 项，当前显示 {{start}}-{{end}} 项', {
+                            total,
+                            start: startIndex,
+                            end: endIndex,
+                          })}
+                        </span>
+                        <div className='flex items-center gap-2'>
+                          <select
+                            value={pageSize}
+                            onChange={(event) =>
+                              handlePageSizeChange(
+                                Number(event.target.value),
+                              )
+                            }
+                            className={inputClass}
+                          >
+                            {PAGE_SIZE_OPTIONS.map((size) => (
+                              <option key={size} value={size}>
+                                {size} / {t('页')}
+                              </option>
+                            ))}
+                          </select>
                           <Button
-                            size='small'
-                            type='warning'
-                            loading={operationLoading.delete_disabled}
+                            size='sm'
+                            variant='light'
+                            isDisabled={currentPage <= 1}
+                            onPress={() => {
+                              const next = Math.max(1, currentPage - 1);
+                              setCurrentPage(next);
+                              loadKeyStatus(next, pageSize);
+                            }}
                           >
-                            {t('删除自动禁用密钥')}
+                            {t('上一页')}
                           </Button>
-                        </Popconfirm>
-                      </Space>
-                    </Col>
-                  </Row>
-                )}
-                columns={columns}
-                dataSource={keyStatusList}
-                pagination={{
-                  currentPage: currentPage,
-                  pageSize: pageSize,
-                  total: total,
-                  showSizeChanger: true,
-                  showQuickJumper: true,
-                  pageSizeOpts: [10, 20, 50, 100],
-                  onChange: (page, size) => {
-                    setCurrentPage(page);
-                    loadKeyStatus(page, size);
-                  },
-                  onShowSizeChange: (current, size) => {
-                    setCurrentPage(1);
-                    handlePageSizeChange(size);
-                  },
-                }}
-                size='small'
-                bordered={false}
-                rowKey='index'
-                scroll={{ x: 'max-content' }}
-                empty={
-                  <Empty
-                    image={
-                      <IllustrationNoResult
-                        style={{ width: 140, height: 140 }}
-                      />
-                    }
-                    darkModeImage={
-                      <IllustrationNoResultDark
-                        style={{ width: 140, height: 140 }}
-                      />
-                    }
-                    title={t('暂无密钥数据')}
-                    description={t('请检查渠道配置或刷新重试')}
-                    style={{ padding: 30 }}
-                  />
-                }
-              />
-            </Card>
-          </Spin>
-        </div>
-      </div>
-    </Modal>
+                          <span>
+                            {currentPage} / {Math.max(1, totalPages)}
+                          </span>
+                          <Button
+                            size='sm'
+                            variant='light'
+                            isDisabled={currentPage >= totalPages}
+                            onPress={() => {
+                              const next = Math.min(
+                                Math.max(1, totalPages),
+                                currentPage + 1,
+                              );
+                              setCurrentPage(next);
+                              loadKeyStatus(next, pageSize);
+                            }}
+                          >
+                            {t('下一页')}
+                          </Button>
+                        </div>
+                      </div>
+                    )}
+                  </Card.Content>
+                </Card>
+              </ModalBody>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
+
+      {/* 删除单个密钥 */}
+      <ConfirmDialog
+        visible={deleteKeyTarget !== null}
+        title={t('确定要删除此密钥吗？')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setDeleteKeyTarget(null)}
+        onConfirm={async () => {
+          const target = deleteKeyTarget;
+          setDeleteKeyTarget(null);
+          if (target !== null) await handleDeleteKey(target);
+        }}
+      >
+        {t('此操作不可撤销，将永久删除该密钥')}
+      </ConfirmDialog>
+
+      {/* 启用全部 */}
+      <ConfirmDialog
+        visible={confirmEnableAll}
+        title={t('确定要启用所有密钥吗？')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        onCancel={() => setConfirmEnableAll(false)}
+        onConfirm={async () => {
+          setConfirmEnableAll(false);
+          await handleEnableAll();
+        }}
+      >
+        {t('启用全部')}
+      </ConfirmDialog>
+
+      {/* 禁用全部 */}
+      <ConfirmDialog
+        visible={confirmDisableAll}
+        title={t('确定要禁用所有的密钥吗？')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setConfirmDisableAll(false)}
+        onConfirm={async () => {
+          setConfirmDisableAll(false);
+          await handleDisableAll();
+        }}
+      >
+        {t('禁用全部')}
+      </ConfirmDialog>
+
+      {/* 删除自动禁用密钥 */}
+      <ConfirmDialog
+        visible={confirmDeleteDisabled}
+        title={t('确定要删除所有已自动禁用的密钥吗？')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setConfirmDeleteDisabled(false)}
+        onConfirm={async () => {
+          setConfirmDeleteDisabled(false);
+          await handleDeleteDisabledKeys();
+        }}
+      >
+        {t('此操作不可撤销，将永久删除已自动禁用的密钥')}
+      </ConfirmDialog>
+    </>
   );
 };
 
diff --git a/web/src/components/table/channels/modals/OllamaModelModal.jsx b/web/src/components/table/channels/modals/OllamaModelModal.jsx
index 684d2eb4653..926869f8ad4 100644
--- a/web/src/components/table/channels/modals/OllamaModelModal.jsx
+++ b/web/src/components/table/channels/modals/OllamaModelModal.jsx
@@ -6,43 +6,36 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
-  Modal,
   Button,
-  Typography,
   Card,
-  List,
-  Space,
   Input,
-  Spin,
-  Popconfirm,
-  Tag,
-  Empty,
-  Row,
-  Col,
-  Progress,
-  Checkbox,
-} from '@douyinfe/semi-ui';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
 import {
-  IconDownload,
-  IconDelete,
-  IconRefresh,
-  IconSearch,
-  IconPlus,
-} from '@douyinfe/semi-icons';
+  Download,
+  Plus,
+  RefreshCw,
+  Search,
+  Trash2,
+  X,
+} from 'lucide-react';
 import {
   API,
   authHeader,
@@ -50,11 +43,45 @@ import {
   showError,
   showSuccess,
 } from '../../../../helpers';
-
-const { Text, Title } = Typography;
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const CHANNEL_TYPE_OLLAMA = 4;
 
+const TAG_TONE = {
+  blue: 'bg-primary/15 text-primary',
+  cyan: 'bg-[color-mix(in_oklab,var(--app-primary)_18%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_72%,var(--app-foreground))]',
+};
+
+function StatusChip({ tone = 'blue', children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.blue
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function ProgressBar({ percent, tone = 'primary' }) {
+  const safe = Math.max(0, Math.min(100, Number(percent) || 0));
+  const fill =
+    tone === 'success'
+      ? 'bg-success'
+      : tone === 'warning'
+        ? 'bg-warning'
+        : 'bg-primary';
+  return (
+    <div className='h-2 w-full overflow-hidden rounded-full bg-surface-secondary'>
+      <div
+        className={`h-full rounded-full transition-[width] duration-200 ${fill}`}
+        style={{ width: `${safe}%` }}
+      />
+    </div>
+  );
+}
+
 const parseMaybeJSON = (value) => {
   if (!value) return null;
   if (typeof value === 'object') return value;
@@ -69,20 +96,12 @@ const parseMaybeJSON = (value) => {
 };
 
 const resolveOllamaBaseUrl = (info) => {
-  if (!info) {
-    return '';
-  }
-
+  if (!info) return '';
   const direct = typeof info.base_url === 'string' ? info.base_url.trim() : '';
-  if (direct) {
-    return direct;
-  }
-
+  if (direct) return direct;
   const alt =
     typeof info.ollama_base_url === 'string' ? info.ollama_base_url.trim() : '';
-  if (alt) {
-    return alt;
-  }
+  if (alt) return alt;
 
   const parsed = parseMaybeJSON(info.other_info);
   if (parsed && typeof parsed === 'object') {
@@ -90,38 +109,26 @@ const resolveOllamaBaseUrl = (info) => {
       (typeof parsed.base_url === 'string' && parsed.base_url.trim()) ||
       (typeof parsed.public_url === 'string' && parsed.public_url.trim()) ||
       (typeof parsed.api_url === 'string' && parsed.api_url.trim());
-    if (candidate) {
-      return candidate;
-    }
+    if (candidate) return candidate;
   }
-
   return '';
 };
 
 const normalizeModels = (items) => {
-  if (!Array.isArray(items)) {
-    return [];
-  }
+  if (!Array.isArray(items)) return [];
 
   return items
     .map((item) => {
-      if (!item) {
-        return null;
-      }
+      if (!item) return null;
 
       if (typeof item === 'string') {
-        return {
-          id: item,
-          owned_by: 'ollama',
-        };
+        return { id: item, owned_by: 'ollama' };
       }
 
       if (typeof item === 'object') {
         const candidateId =
           item.id || item.ID || item.name || item.model || item.Model;
-        if (!candidateId) {
-          return null;
-        }
+        if (!candidateId) return null;
 
         const metadata = item.metadata || item.Metadata;
         const normalized = {
@@ -153,7 +160,6 @@ const normalizeModels = (items) => {
 
         return normalized;
       }
-
       return null;
     })
     .filter(Boolean);
@@ -170,30 +176,37 @@ const OllamaModelModal = ({
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [models, setModels] = useState([]);
-  const [filteredModels, setFilteredModels] = useState([]);
   const [searchValue, setSearchValue] = useState('');
   const [pullModelName, setPullModelName] = useState('');
   const [pullLoading, setPullLoading] = useState(false);
   const [pullProgress, setPullProgress] = useState(null);
   const [eventSource, setEventSource] = useState(null);
   const [selectedModelIds, setSelectedModelIds] = useState([]);
+  const [deleteTarget, setDeleteTarget] = useState(null);
+
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
+  const filteredModels = useMemo(() => {
+    if (!searchValue) return models;
+    const needle = searchValue.toLowerCase();
+    return models.filter((model) => model.id.toLowerCase().includes(needle));
+  }, [models, searchValue]);
 
   const handleApplyAllModels = () => {
-    if (!onApplyModels || selectedModelIds.length === 0) {
-      return;
-    }
+    if (!onApplyModels || selectedModelIds.length === 0) return;
     onApplyModels({ mode: 'append', modelIds: selectedModelIds });
   };
 
   const handleToggleModel = (modelId, checked) => {
-    if (!modelId) {
-      return;
-    }
+    if (!modelId) return;
     setSelectedModelIds((prev) => {
       if (checked) {
-        if (prev.includes(modelId)) {
-          return prev;
-        }
+        if (prev.includes(modelId)) return prev;
         return [...prev, modelId];
       }
       return prev.filter((id) => id !== modelId);
@@ -208,7 +221,6 @@ const OllamaModelModal = ({
     setSelectedModelIds([]);
   };
 
-  // 获取模型列表
   const fetchModels = async () => {
     const channelType = Number(channelInfo?.type ?? CHANNEL_TYPE_OLLAMA);
     const shouldTryLiveFetch = channelType === CHANNEL_TYPE_OLLAMA;
@@ -241,9 +253,7 @@ const OllamaModelModal = ({
           }
         } catch (error) {
           const message = error?.response?.data?.message || error.message;
-          if (message) {
-            lastError = message;
-          }
+          if (message) lastError = message;
         }
       } else if (shouldTryLiveFetch && !resolvedBaseUrl && !channelId) {
         lastError = t('请先填写 Ollama API 地址');
@@ -264,9 +274,7 @@ const OllamaModelModal = ({
           }
         } catch (error) {
           const message = error?.response?.data?.message || error.message;
-          if (message) {
-            lastError = message;
-          }
+          if (message) lastError = message;
         }
       }
 
@@ -276,11 +284,8 @@ const OllamaModelModal = ({
 
       const normalized = nextModels;
       setModels(normalized);
-      setFilteredModels(normalized);
       setSelectedModelIds((prev) => {
-        if (!normalized || normalized.length === 0) {
-          return [];
-        }
+        if (!normalized || normalized.length === 0) return [];
         if (!prev || prev.length === 0) {
           return normalized.map((item) => item.id).filter(Boolean);
         }
@@ -296,7 +301,6 @@ const OllamaModelModal = ({
     }
   };
 
-  // 拉取模型 (流式，支持进度)
   const pullModel = async () => {
     if (!pullModelName.trim()) {
       showError(t('请输入模型名称'));
@@ -311,25 +315,19 @@ const OllamaModelModal = ({
       if (hasRefreshed) return;
       hasRefreshed = true;
       await fetchModels();
-      if (onModelsUpdate) {
-        onModelsUpdate({ silent: true });
-      }
+      if (onModelsUpdate) onModelsUpdate({ silent: true });
     };
 
     try {
-      // 关闭之前的连接
       if (eventSource) {
         eventSource.close();
         setEventSource(null);
       }
 
       const controller = new AbortController();
-      const closable = {
-        close: () => controller.abort(),
-      };
+      const closable = { close: () => controller.abort() };
       setEventSource(closable);
 
-      // 使用 fetch 请求 SSE 流
       const authHeaders = authHeader();
       const userId = getUserIdFromLocalStorage();
       const fetchHeaders = {
@@ -357,12 +355,10 @@ const OllamaModelModal = ({
       const decoder = new TextDecoder();
       let buffer = '';
 
-      // 读取 SSE 流
       const processStream = async () => {
         try {
           while (true) {
             const { done, value } = await reader.read();
-
             if (done) break;
 
             buffer += decoder.decode(value, { stream: true });
@@ -370,9 +366,7 @@ const OllamaModelModal = ({
             buffer = lines.pop() || '';
 
             for (const line of lines) {
-              if (!line.startsWith('data: ')) {
-                continue;
-              }
+              if (!line.startsWith('data: ')) continue;
 
               try {
                 const eventData = line.substring(6);
@@ -386,26 +380,21 @@ const OllamaModelModal = ({
                 const data = JSON.parse(eventData);
 
                 if (data.status) {
-                  // 处理进度数据
                   setPullProgress(data);
                 } else if (data.error) {
-                  // 处理错误
                   showError(data.error);
                   setPullProgress(null);
                   setPullLoading(false);
                   setEventSource(null);
                   return;
                 } else if (data.message) {
-                  // 处理成功消息
                   showSuccess(data.message);
                   setPullModelName('');
                   setPullProgress(null);
                   setPullLoading(false);
                   setEventSource(null);
                   await fetchModels();
-                  if (onModelsUpdate) {
-                    onModelsUpdate({ silent: true });
-                  }
+                  if (onModelsUpdate) onModelsUpdate({ silent: true });
                   await refreshModels();
                   return;
                 }
@@ -414,7 +403,6 @@ const OllamaModelModal = ({
               }
             }
           }
-          // 正常结束流
           setPullLoading(false);
           setPullProgress(null);
           setEventSource(null);
@@ -447,22 +435,16 @@ const OllamaModelModal = ({
     }
   };
 
-  // 删除模型
   const deleteModel = async (modelName) => {
     try {
       const res = await API.delete('/api/channel/ollama/delete', {
-        data: {
-          channel_id: channelId,
-          model_name: modelName,
-        },
+        data: { channel_id: channelId, model_name: modelName },
       });
 
       if (res.data.success) {
         showSuccess(t('模型删除成功'));
-        await fetchModels(); // 重新获取模型列表
-        if (onModelsUpdate) {
-          onModelsUpdate({ silent: true }); // 通知父组件更新
-        }
+        await fetchModels();
+        if (onModelsUpdate) onModelsUpdate({ silent: true });
       } else {
         showError(res.data.message || t('模型删除失败'));
       }
@@ -471,18 +453,6 @@ const OllamaModelModal = ({
     }
   };
 
-  // 搜索过滤
-  useEffect(() => {
-    if (!searchValue) {
-      setFilteredModels(models);
-    } else {
-      const filtered = models.filter((model) =>
-        model.id.toLowerCase().includes(searchValue.toLowerCase()),
-      );
-      setFilteredModels(filtered);
-    }
-  }, [models, searchValue]);
-
   useEffect(() => {
     if (!visible) {
       setSelectedModelIds([]);
@@ -492,15 +462,12 @@ const OllamaModelModal = ({
     }
   }, [visible]);
 
-  // 组件加载时获取模型列表
   useEffect(() => {
-    if (!visible) {
-      return;
-    }
-
+    if (!visible) return;
     if (channelId || Number(channelInfo?.type) === CHANNEL_TYPE_OLLAMA) {
       fetchModels();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     visible,
     channelId,
@@ -510,12 +477,9 @@ const OllamaModelModal = ({
     channelInfo?.ollama_base_url,
   ]);
 
-  // 组件卸载时清理 EventSource
   useEffect(() => {
     return () => {
-      if (eventSource) {
-        eventSource.close();
-      }
+      if (eventSource) eventSource.close();
     };
   }, [eventSource]);
 
@@ -527,251 +491,295 @@ const OllamaModelModal = ({
       : `${(size / (1024 * 1024)).toFixed(0)} MB`;
   };
 
-  return (
-    <Modal
-      title={t('Ollama 模型管理')}
-      visible={visible}
-      onCancel={onCancel}
-      width={720}
-      style={{ maxWidth: '95vw' }}
-      footer={
-        <Button theme='solid' type='primary' onClick={onCancel}>
-          {t('关闭')}
-        </Button>
-      }
-    >
-      <Space vertical spacing='medium' style={{ width: '100%' }}>
-        <div>
-          <Text type='tertiary' size='small'>
-            {channelInfo?.name ? `${channelInfo.name} - ` : ''}
-            {t('管理 Ollama 模型的拉取和删除')}
-          </Text>
+  const renderProgress = () => {
+    if (!pullProgress) return null;
+    const completedBytes = Number(pullProgress.completed) || 0;
+    const totalBytes = Number(pullProgress.total) || 0;
+    const hasTotal = Number.isFinite(totalBytes) && totalBytes > 0;
+    const safePercent = hasTotal
+      ? Math.min(
+          100,
+          Math.max(0, Math.round((completedBytes / totalBytes) * 100)),
+        )
+      : null;
+    const percentText =
+      hasTotal && safePercent !== null
+        ? `${safePercent.toFixed(0)}%`
+        : pullProgress.status || t('处理中');
+
+    return (
+      <div className='mt-3 space-y-2'>
+        <div className='flex items-center justify-between'>
+          <span className='text-sm font-semibold text-foreground'>
+            {t('拉取进度')}
+          </span>
+          <span className='text-xs text-muted'>{percentText}</span>
         </div>
 
-        {/* 拉取新模型 */}
-        <Card>
-          <Title heading={6} className='m-0 mb-3'>
-            {t('拉取新模型')}
-          </Title>
-
-          <Row gutter={12} align='middle'>
-            <Col span={16}>
-              <Input
-                placeholder={t('请输入模型名称，例如: llama3.2, qwen2.5:7b')}
-                value={pullModelName}
-                onChange={(value) => setPullModelName(value)}
-                onEnterPress={pullModel}
-                disabled={pullLoading}
-                showClear
-              />
-            </Col>
-            <Col span={8}>
-              <Button
-                theme='solid'
-                type='primary'
-                onClick={pullModel}
-                loading={pullLoading}
-                disabled={!pullModelName.trim()}
-                icon={<IconDownload />}
-                block
-              >
-                {pullLoading ? t('拉取中...') : t('拉取模型')}
-              </Button>
-            </Col>
-          </Row>
-
-          {/* 进度条显示 */}
-          {pullProgress &&
-            (() => {
-              const completedBytes = Number(pullProgress.completed) || 0;
-              const totalBytes = Number(pullProgress.total) || 0;
-              const hasTotal = Number.isFinite(totalBytes) && totalBytes > 0;
-              const safePercent = hasTotal
-                ? Math.min(
-                    100,
-                    Math.max(
-                      0,
-                      Math.round((completedBytes / totalBytes) * 100),
-                    ),
-                  )
-                : null;
-              const percentText =
-                hasTotal && safePercent !== null
-                  ? `${safePercent.toFixed(0)}%`
-                  : pullProgress.status || t('处理中');
-
-              return (
-                <div style={{ marginTop: 12 }}>
-                  <div className='flex items-center justify-between mb-2'>
-                    <Text strong>{t('拉取进度')}</Text>
-                    <Text type='tertiary' size='small'>
-                      {percentText}
-                    </Text>
-                  </div>
-
-                  {hasTotal && safePercent !== null ? (
-                    <div>
-                      <Progress
-                        percent={safePercent}
-                        showInfo={false}
-                        stroke='#1890ff'
-                        size='small'
-                      />
-                      <div className='flex justify-between mt-1'>
-                        <Text type='tertiary' size='small'>
-                          {(completedBytes / (1024 * 1024 * 1024)).toFixed(2)}{' '}
-                          GB
-                        </Text>
-                        <Text type='tertiary' size='small'>
-                          {(totalBytes / (1024 * 1024 * 1024)).toFixed(2)} GB
-                        </Text>
-                      </div>
-                    </div>
-                  ) : (
-                    <div className='flex items-center gap-2 text-xs text-[var(--semi-color-text-2)]'>
-                      <Spin size='small' />
-                      <span>{t('准备中...')}</span>
-                    </div>
-                  )}
-                </div>
-              );
-            })()}
-
-          <Text type='tertiary' size='small' className='mt-2 block'>
-            {t(
-              '支持拉取 Ollama 官方模型库中的所有模型，拉取过程可能需要几分钟时间',
-            )}
-          </Text>
-        </Card>
-
-        {/* 已有模型列表 */}
-        <Card>
-          <div className='flex items-center justify-between mb-3'>
-            <div className='flex items-center gap-2'>
-              <Title heading={6} className='m-0'>
-                {t('已有模型')}
-              </Title>
-              {models.length > 0 ? (
-                <Tag color='blue'>{models.length}</Tag>
-              ) : null}
+        {hasTotal && safePercent !== null ? (
+          <>
+            <ProgressBar percent={safePercent} />
+            <div className='flex justify-between text-xs text-muted'>
+              <span>
+                {(completedBytes / (1024 * 1024 * 1024)).toFixed(2)} GB
+              </span>
+              <span>
+                {(totalBytes / (1024 * 1024 * 1024)).toFixed(2)} GB
+              </span>
             </div>
-            <Space wrap>
-              <Input
-                prefix={<IconSearch />}
-                placeholder={t('搜索模型...')}
-                value={searchValue}
-                onChange={(value) => setSearchValue(value)}
-                style={{ width: 200 }}
-                showClear
-              />
-              <Button
-                size='small'
-                theme='light'
-                onClick={handleSelectAll}
-                disabled={models.length === 0}
-              >
-                {t('全选')}
-              </Button>
-              <Button
-                size='small'
-                theme='light'
-                onClick={handleClearSelection}
-                disabled={selectedModelIds.length === 0}
-              >
-                {t('清空')}
-              </Button>
-              <Button
-                theme='solid'
-                type='primary'
-                icon={<IconPlus />}
-                onClick={handleApplyAllModels}
-                disabled={selectedModelIds.length === 0}
-                size='small'
-              >
-                {t('加入渠道')}
-              </Button>
-              <Button
-                theme='light'
-                type='primary'
-                onClick={fetchModels}
-                loading={loading}
-                icon={<IconRefresh />}
-                size='small'
-              >
-                {t('刷新')}
-              </Button>
-            </Space>
+          </>
+        ) : (
+          <div className='flex items-center gap-2 text-xs text-muted'>
+            <Spinner size='sm' />
+            <span>{t('准备中...')}</span>
           </div>
+        )}
+      </div>
+    );
+  };
 
-          <Spin spinning={loading}>
-            {filteredModels.length === 0 ? (
-              <Empty
-                title={searchValue ? t('未找到匹配的模型') : t('暂无模型')}
-                description={
-                  searchValue
-                    ? t('请尝试其他搜索关键词')
-                    : t('您可以在上方拉取需要的模型')
-                }
-                style={{ padding: '40px 0' }}
-              />
-            ) : (
-              <List
-                dataSource={filteredModels}
-                split
-                renderItem={(model) => (
-                  <List.Item key={model.id}>
-                    <div className='flex items-center justify-between w-full'>
-                      <div className='flex items-center flex-1 min-w-0 gap-3'>
-                        <Checkbox
-                          checked={selectedModelIds.includes(model.id)}
-                          onChange={(checked) =>
-                            handleToggleModel(model.id, checked)
-                          }
-                        />
-                        <div className='flex-1 min-w-0'>
-                          <Text strong className='block truncate'>
-                            {model.id}
-                          </Text>
-                          <div className='flex items-center space-x-2 mt-1'>
-                            <Tag color='cyan' size='small'>
-                              {model.owned_by || 'ollama'}
-                            </Tag>
-                            {model.size && (
-                              <Text type='tertiary' size='small'>
-                                {formatModelSize(model.size)}
-                              </Text>
-                            )}
-                          </div>
+  return (
+    <>
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size='3xl'
+            placement='center'
+            className='max-w-[95vw]'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <span>{t('Ollama 模型管理')}</span>
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='text-xs text-muted'>
+                  {channelInfo?.name ? `${channelInfo.name} - ` : ''}
+                  {t('管理 Ollama 模型的拉取和删除')}
+                </div>
+
+                {/* 拉取新模型 */}
+                <Card className='!rounded-2xl border-0 shadow-sm'>
+                  <Card.Content className='space-y-3 p-5'>
+                    <div className='text-base font-semibold text-foreground'>
+                      {t('拉取新模型')}
+                    </div>
+
+                    <div className='grid grid-cols-1 gap-3 sm:grid-cols-12'>
+                      <div className='sm:col-span-8'>
+                        <Input
+                          isDisabled={pullLoading}
+                          placeholder={t(
+                            '请输入模型名称，例如: llama3.2, qwen2.5:7b',
+                          )}
+                          value={pullModelName}
+                          onValueChange={setPullModelName}
+                          onKeyDown={(event) => {
+                            if (event.key === 'Enter' && !pullLoading) {
+                              pullModel();
+                            }
+                          }}
+                        >
+                          <Input.Control>
+                            <Input.Element />
+                          </Input.Control>
+                        </Input>
+                      </div>
+                      <div className='sm:col-span-4'>
+                        <Button
+                          color='primary'
+                          isPending={pullLoading}
+                          isDisabled={!pullModelName.trim()}
+                          startContent={<Download size={14} />}
+                          onPress={pullModel}
+                          className='w-full'
+                        >
+                          {pullLoading ? t('拉取中...') : t('拉取模型')}
+                        </Button>
+                      </div>
+                    </div>
+
+                    {renderProgress()}
+
+                    <div className='text-xs text-muted'>
+                      {t(
+                        '支持拉取 Ollama 官方模型库中的所有模型，拉取过程可能需要几分钟时间',
+                      )}
+                    </div>
+                  </Card.Content>
+                </Card>
+
+                {/* 已有模型列表 */}
+                <Card className='!rounded-2xl border-0 shadow-sm'>
+                  <Card.Content className='space-y-3 p-5'>
+                    <div className='flex flex-wrap items-center justify-between gap-3'>
+                      <div className='flex items-center gap-2'>
+                        <div className='text-base font-semibold text-foreground'>
+                          {t('已有模型')}
                         </div>
+                        {models.length > 0 ? (
+                          <StatusChip tone='blue'>{models.length}</StatusChip>
+                        ) : null}
                       </div>
-                      <div className='flex items-center space-x-2 ml-4'>
-                        <Popconfirm
-                          title={t('确认删除模型')}
-                          content={t(
-                            '删除后无法恢复，确定要删除模型 "{{name}}" 吗？',
-                            { name: model.id },
-                          )}
-                          onConfirm={() => deleteModel(model.id)}
-                          okText={t('确认')}
-                          cancelText={t('取消')}
+                      <div className='flex flex-wrap items-center gap-2'>
+                        <div className='w-[200px]'>
+                          <Input
+                            placeholder={t('搜索模型...')}
+                            value={searchValue}
+                            onValueChange={setSearchValue}
+                            startContent={
+                              <Search size={14} className='text-muted' />
+                            }
+                          >
+                            <Input.Control>
+                              <Input.Element />
+                            </Input.Control>
+                          </Input>
+                        </div>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          isDisabled={models.length === 0}
+                          onPress={handleSelectAll}
+                        >
+                          {t('全选')}
+                        </Button>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          isDisabled={selectedModelIds.length === 0}
+                          onPress={handleClearSelection}
+                        >
+                          {t('清空')}
+                        </Button>
+                        <Button
+                          size='sm'
+                          color='primary'
+                          startContent={<Plus size={14} />}
+                          isDisabled={selectedModelIds.length === 0}
+                          onPress={handleApplyAllModels}
                         >
-                          <Button
-                            theme='borderless'
-                            type='danger'
-                            size='small'
-                            icon={<IconDelete />}
-                          />
-                        </Popconfirm>
+                          {t('加入渠道')}
+                        </Button>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          color='primary'
+                          startContent={<RefreshCw size={14} />}
+                          isPending={loading}
+                          onPress={fetchModels}
+                        >
+                          {t('刷新')}
+                        </Button>
                       </div>
                     </div>
-                  </List.Item>
-                )}
-              />
-            )}
-          </Spin>
-        </Card>
-      </Space>
-    </Modal>
+
+                    <div className='relative min-h-[120px]'>
+                      {loading && (
+                        <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+                          <Spinner color='primary' />
+                        </div>
+                      )}
+                      {filteredModels.length === 0 ? (
+                        <div className='flex flex-col items-center gap-2 px-4 py-10 text-center'>
+                          <div className='text-sm font-semibold text-foreground'>
+                            {searchValue
+                              ? t('未找到匹配的模型')
+                              : t('暂无模型')}
+                          </div>
+                          <div className='text-xs text-muted'>
+                            {searchValue
+                              ? t('请尝试其他搜索关键词')
+                              : t('您可以在上方拉取需要的模型')}
+                          </div>
+                        </div>
+                      ) : (
+                        <ul className='divide-y divide-border'>
+                          {filteredModels.map((model) => (
+                            <li
+                              key={model.id}
+                              className='flex items-center justify-between gap-3 py-3'
+                            >
+                              <div className='flex min-w-0 flex-1 items-center gap-3'>
+                                <input
+                                  type='checkbox'
+                                  className='h-4 w-4 accent-primary'
+                                  checked={selectedModelIds.includes(model.id)}
+                                  onChange={(event) =>
+                                    handleToggleModel(
+                                      model.id,
+                                      event.target.checked,
+                                    )
+                                  }
+                                  aria-label={model.id}
+                                />
+                                <div className='min-w-0 flex-1'>
+                                  <div className='truncate text-sm font-semibold text-foreground'>
+                                    {model.id}
+                                  </div>
+                                  <div className='mt-1 flex items-center gap-2'>
+                                    <StatusChip tone='cyan'>
+                                      {model.owned_by || 'ollama'}
+                                    </StatusChip>
+                                    {model.size ? (
+                                      <span className='text-xs text-muted'>
+                                        {formatModelSize(model.size)}
+                                      </span>
+                                    ) : null}
+                                  </div>
+                                </div>
+                              </div>
+                              <div className='ml-4 flex items-center gap-2'>
+                                <Button
+                                  isIconOnly
+                                  size='sm'
+                                  variant='light'
+                                  color='danger'
+                                  aria-label={t('删除')}
+                                  onPress={() => setDeleteTarget(model.id)}
+                                >
+                                  <Trash2 size={14} />
+                                </Button>
+                              </div>
+                            </li>
+                          ))}
+                        </ul>
+                      )}
+                    </div>
+                  </Card.Content>
+                </Card>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button
+                  color='primary'
+                  startContent={<X size={14} />}
+                  onPress={onCancel}
+                >
+                  {t('关闭')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
+
+      <ConfirmDialog
+        visible={!!deleteTarget}
+        title={t('确认删除模型')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setDeleteTarget(null)}
+        onConfirm={async () => {
+          const target = deleteTarget;
+          setDeleteTarget(null);
+          if (target) await deleteModel(target);
+        }}
+      >
+        {t('删除后无法恢复，确定要删除模型 "{{name}}" 吗？', {
+          name: deleteTarget || '',
+        })}
+      </ConfirmDialog>
+    </>
   );
 };
 
diff --git a/web/src/components/table/channels/modals/ParamOverrideEditorModal.jsx b/web/src/components/table/channels/modals/ParamOverrideEditorModal.jsx
index 5293fae768a..c59dce72bc0 100644
--- a/web/src/components/table/channels/modals/ParamOverrideEditorModal.jsx
+++ b/web/src/components/table/channels/modals/ParamOverrideEditorModal.jsx
@@ -17,31 +17,527 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   Button,
   Card,
-  Col,
-  Collapse,
-  Input,
-  Modal,
-  Row,
-  Select,
-  Space,
-  Switch,
-  Tag,
-  TextArea,
-  Typography,
-} from '@douyinfe/semi-ui';
-import { IconDelete, IconMenu, IconPlus } from '@douyinfe/semi-icons';
+  Input as HeroInput,
+  Modal as HeroModal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Switch as HeroSwitch,
+  useOverlayState,
+} from '@heroui/react';
+import {
+  ChevronDown,
+  GripVertical,
+  Menu as MenuIcon,
+  Plus as PlusIcon,
+  Trash2,
+  X as CloseIcon,
+} from 'lucide-react';
 import { copy, showError, showSuccess, verifyJSON } from '../../../../helpers';
 import {
   CLAUDE_CLI_HEADER_PASSTHROUGH_TEMPLATE,
   CODEX_CLI_HEADER_PASSTHROUGH_TEMPLATE,
 } from '../../../../constants/channel-affinity-template.constants';
 
-const { Text } = Typography;
+// ----------------------------- legacy shims -----------------------------
+//
+// This file is large (3500+ lines). To keep the migration minimal and safe,
+// the Semi-style API used inside the render tree is preserved. The shims
+// below adapt that API to HeroUI v3 / native primitives.
+//
+// All shims accept the same props the original Semi components used in
+// this file and render with semantic Tailwind tokens.
+
+const TAG_TONE_MAP = {
+  blue: 'bg-primary/15 text-primary',
+  cyan: 'bg-[color-mix(in_oklab,var(--app-primary)_18%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_72%,var(--app-foreground))]',
+  green: 'bg-success/15 text-success',
+  red: 'bg-danger/15 text-danger',
+  orange: 'bg-warning/15 text-warning',
+  yellow: 'bg-warning/15 text-warning',
+  grey: 'bg-surface-secondary text-muted',
+  default: 'bg-surface-secondary text-muted',
+};
+
+function Tag({ color = 'grey', size, style, className = '', children }) {
+  const tone = TAG_TONE_MAP[color] || TAG_TONE_MAP.grey;
+  const sizeCls = size === 'small' ? 'px-1.5 py-0.5 text-[11px]' : 'px-2 py-0.5 text-xs';
+  return (
+    <span
+      style={style}
+      className={`inline-flex items-center rounded-full font-semibold ${sizeCls} ${tone} ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+const TEXT_TYPE_CLASS = {
+  primary: 'text-foreground',
+  secondary: 'text-foreground',
+  tertiary: 'text-muted',
+  quaternary: 'text-muted/70',
+  danger: 'text-danger',
+  warning: 'text-warning',
+};
+
+function Text({
+  type,
+  size,
+  strong,
+  className = '',
+  style,
+  children,
+  ...rest
+}) {
+  const typeCls = TEXT_TYPE_CLASS[type] || 'text-foreground';
+  const sizeCls = size === 'small' ? 'text-xs' : '';
+  const weightCls = strong ? 'font-semibold' : '';
+  return (
+    <span
+      style={style}
+      className={`${typeCls} ${sizeCls} ${weightCls} ${className}`}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}
+
+const Typography = { Text };
+
+// Space: flex container that mirrors Semi's `<Space vertical wrap spacing
+// align>`. Children are laid out with gap-derived from `spacing` (in px).
+function Space({
+  vertical,
+  wrap,
+  spacing,
+  align,
+  style,
+  className = '',
+  children,
+}) {
+  const flexDir = vertical ? 'flex-col items-start' : 'flex-row items-center';
+  const wrapCls = wrap ? 'flex-wrap' : '';
+  const alignCls =
+    align === 'center'
+      ? 'items-center'
+      : align === 'flex-end'
+        ? 'items-end'
+        : '';
+  const gap =
+    typeof spacing === 'number' ? { gap: `${spacing}px` } : { gap: '8px' };
+  return (
+    <div
+      style={{ ...gap, ...(style || {}) }}
+      className={`flex ${flexDir} ${wrapCls} ${alignCls} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+// Row / Col: simple Antd-style 24-column grid mapped to flex-wrap. `gutter`
+// is converted to px-based gap; per-breakpoint span (`xs/sm/md/lg/xl`) maps
+// to a percentage width via inline style.
+function Row({ gutter, align, justify, style, className = '', children }) {
+  const gap =
+    typeof gutter === 'number'
+      ? gutter
+      : typeof gutter === 'object' && gutter !== null
+        ? gutter.md || gutter.sm || gutter.xs || 16
+        : 16;
+  const flexAlign =
+    align === 'middle'
+      ? 'items-center'
+      : align === 'top'
+        ? 'items-start'
+        : '';
+  const flexJustify =
+    justify === 'space-between' ? 'justify-between' : '';
+  return (
+    <div
+      style={{ rowGap: `${gap}px`, columnGap: `${gap}px`, ...(style || {}) }}
+      className={`flex flex-wrap ${flexAlign} ${flexJustify} ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+function Col({ xs, sm, md, lg, xl, span, style, className = '', children }) {
+  // Pick the largest breakpoint declared. Width is `<span>/24 * 100%` minus
+  // gap is handled via flex-wrap.
+  const effectiveSpan = md ?? sm ?? xs ?? span ?? lg ?? xl ?? 24;
+  const width = `${(Math.min(Math.max(Number(effectiveSpan) || 24, 1), 24) / 24) * 100}%`;
+  return (
+    <div
+      style={{ flexBasis: width, maxWidth: width, ...(style || {}) }}
+      className={`min-w-0 ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+// TextArea: native `<textarea>` with Semi-style API
+// (`value/onChange(value)/autosize/placeholder/showClear/readOnly`).
+function TextArea({
+  value,
+  onChange,
+  placeholder,
+  autosize,
+  showClear,
+  readOnly,
+  style,
+  className = '',
+  rows,
+}) {
+  const minRows = autosize?.minRows ?? rows ?? 4;
+  return (
+    <div className='relative'>
+      <textarea
+        value={value ?? ''}
+        onChange={(event) => onChange?.(event.target.value)}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        rows={minRows}
+        style={style}
+        className={`w-full rounded-xl border border-border bg-background px-3 py-2 font-mono text-xs text-foreground outline-none transition focus:border-primary disabled:opacity-50 ${className}`}
+      />
+      {showClear && !readOnly && (value ?? '') !== '' ? (
+        <button
+          type='button'
+          onClick={() => onChange?.('')}
+          aria-label='clear'
+          className='absolute right-2 top-2 rounded-full bg-surface-secondary p-1 text-muted hover:text-foreground'
+        >
+          <CloseIcon size={12} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+// Input shim: adapts HeroUI v3 Input to Semi's `value/onChange(value)`
+// + `placeholder/style/disabled/showClear/prefix/suffix/onEnterPress`.
+function Input({
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+  disabled,
+  readOnly,
+  prefix,
+  suffix,
+  showClear,
+  style,
+  className = '',
+  onEnterPress,
+  onKeyDown,
+  ...rest
+}) {
+  const padLeft = prefix ? 'pl-9' : '';
+  const padRight = suffix || (showClear && (value ?? '') !== '') ? 'pr-9' : '';
+  return (
+    <div className='relative' style={style}>
+      {prefix ? (
+        <span className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'>
+          {prefix}
+        </span>
+      ) : null}
+      <input
+        type={type}
+        value={value ?? ''}
+        onChange={(event) => onChange?.(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') onEnterPress?.();
+          onKeyDown?.(event);
+        }}
+        placeholder={placeholder}
+        disabled={disabled}
+        readOnly={readOnly}
+        className={`h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50 ${padLeft} ${padRight} ${className}`}
+        {...rest}
+      />
+      {suffix ? (
+        <span className='absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center'>
+          {suffix}
+        </span>
+      ) : showClear && (value ?? '') !== '' && !disabled && !readOnly ? (
+        <button
+          type='button'
+          onClick={() => onChange?.('')}
+          aria-label='clear'
+          className='absolute right-2 top-1/2 -translate-y-1/2 rounded-full bg-surface-secondary p-1 text-muted hover:text-foreground'
+        >
+          <CloseIcon size={12} />
+        </button>
+      ) : null}
+    </div>
+  );
+}
+
+// Select shim: minimal dropdown supporting Semi's
+// `value/onChange(nextValue)/optionList/style/placeholder`.
+function Select({
+  value,
+  onChange,
+  optionList = [],
+  placeholder,
+  style,
+  className = '',
+  disabled,
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onClickOutside);
+    return () => document.removeEventListener('mousedown', onClickOutside);
+  }, [open]);
+
+  const selected = optionList.find((opt) => opt.value === value);
+
+  return (
+    <div ref={ref} className={`relative inline-block ${className}`} style={style}>
+      <button
+        type='button'
+        disabled={disabled}
+        onClick={() => setOpen((v) => !v)}
+        className={`flex h-10 w-full items-center justify-between gap-2 rounded-xl border bg-background px-3 text-sm transition disabled:opacity-50 ${
+          open ? 'border-primary' : 'border-border'
+        } ${disabled ? '' : 'hover:border-primary/60'}`}
+      >
+        <span className='min-w-0 flex-1 truncate text-left'>
+          {selected ? (
+            selected.label
+          ) : (
+            <span className='text-muted'>{placeholder ?? ''}</span>
+          )}
+        </span>
+        <ChevronDown
+          size={14}
+          className={`shrink-0 text-muted transition-transform ${
+            open ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+      {open && !disabled ? (
+        <div className='absolute left-0 right-0 z-50 mt-1 max-h-[280px] overflow-auto rounded-xl border border-border bg-background shadow-lg'>
+          <ul className='py-1'>
+            {optionList.map((opt) => {
+              const active = opt.value === value;
+              return (
+                <li key={String(opt.value)}>
+                  <button
+                    type='button'
+                    onClick={() => {
+                      onChange?.(opt.value);
+                      setOpen(false);
+                    }}
+                    className={`flex w-full items-center justify-between gap-2 px-3 py-1.5 text-left text-sm transition ${
+                      active
+                        ? 'bg-primary/10 text-primary'
+                        : 'text-foreground hover:bg-surface-secondary'
+                    }`}
+                  >
+                    <span className='truncate'>{opt.label}</span>
+                    {active ? <span className='text-xs'>{'✓'}</span> : null}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// Switch shim: adapts to Semi's `checked/onChange(value)` + ignores
+// `checkedText/uncheckedText` (HeroUI v3 doesn't show inline labels).
+function Switch({
+  checked,
+  onChange,
+  disabled,
+  size,
+  ariaLabel,
+  className = '',
+  /* eslint-disable no-unused-vars */
+  checkedText,
+  uncheckedText,
+  /* eslint-enable no-unused-vars */
+}) {
+  return (
+    <HeroSwitch
+      isSelected={!!checked}
+      onValueChange={onChange}
+      isDisabled={disabled}
+      size={size === 'large' ? 'lg' : 'md'}
+      aria-label={ariaLabel}
+      className={className}
+    >
+      <HeroSwitch.Control>
+        <HeroSwitch.Thumb />
+      </HeroSwitch.Control>
+    </HeroSwitch>
+  );
+}
+
+// Collapse / Collapse.Panel: controlled accordion. Mirrors Semi's
+// `activeKey` (array) + `onChange(activeKeys)` API + child `Collapse.Panel
+// itemKey header`.
+function Collapse({ activeKey, onChange, children }) {
+  // Normalize children into an array of <Collapse.Panel> elements
+  const panels = React.Children.toArray(children).filter(Boolean);
+  const activeKeys = Array.isArray(activeKey)
+    ? activeKey
+    : activeKey != null
+      ? [activeKey]
+      : [];
+
+  const togglePanel = (key) => {
+    if (!key) return;
+    const isOpen = activeKeys.includes(key);
+    const next = isOpen
+      ? activeKeys.filter((k) => k !== key)
+      : [...activeKeys, key];
+    onChange?.(next);
+  };
+
+  return (
+    <div className='flex flex-col gap-1.5'>
+      {panels.map((panel) => {
+        const { itemKey, header, children: panelChildren } = panel.props;
+        const open = activeKeys.includes(itemKey);
+        return (
+          <div
+            key={itemKey}
+            className='overflow-hidden rounded-xl border border-border bg-background'
+          >
+            <button
+              type='button'
+              onClick={() => togglePanel(itemKey)}
+              className='flex w-full cursor-pointer items-center justify-between gap-2 px-3 py-2 text-left text-sm font-medium text-foreground hover:bg-surface-secondary'
+            >
+              <span className='min-w-0 flex-1'>{header}</span>
+              <ChevronDown
+                size={16}
+                className={`shrink-0 text-muted transition-transform ${
+                  open ? 'rotate-180' : ''
+                }`}
+              />
+            </button>
+            {open ? (
+              <div className='border-t border-border px-3 py-3'>
+                {panelChildren}
+              </div>
+            ) : null}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Marker subcomponent — just used for prop carrying.
+Collapse.Panel = function CollapsePanel() {
+  return null;
+};
+
+// Modal shim: adapts Semi's `<Modal title visible width bodyStyle onCancel
+// onOk okText cancelText footer>` to HeroUI v3 anatomy. When `footer === null`
+// the footer is omitted.
+function Modal({
+  title,
+  visible,
+  width,
+  bodyStyle,
+  onCancel,
+  onOk,
+  okText,
+  cancelText,
+  footer,
+  children,
+}) {
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
+  // Map raw width to a HeroUI ModalContainer size, with a min cap.
+  const dialogWidth = typeof width === 'number' ? width : undefined;
+
+  return (
+    <HeroModal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer
+          size='4xl'
+          placement='center'
+          className='max-w-[95vw]'
+          style={dialogWidth ? { maxWidth: dialogWidth } : undefined}
+        >
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            {title ? (
+              <ModalHeader className='border-b border-border'>
+                <span>{title}</span>
+              </ModalHeader>
+            ) : null}
+            <ModalBody style={bodyStyle} className='px-6 py-5'>
+              {children}
+            </ModalBody>
+            {footer === null ? null : footer ? (
+              <ModalFooter className='border-t border-border'>
+                {footer}
+              </ModalFooter>
+            ) : (
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={onCancel}>
+                  {cancelText}
+                </Button>
+                <Button color='primary' onPress={onOk}>
+                  {okText}
+                </Button>
+              </ModalFooter>
+            )}
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
+    </HeroModal>
+  );
+}
+
+// Lucide icon wrappers preserving the legacy `<IconX />` API.
+const IconDelete = (props) => <Trash2 size={14} {...props} />;
+const IconMenu = (props) => (
+  <GripVertical size={14} aria-hidden='true' {...props} />
+);
+// `IconMenu` was sometimes used as a generic menu glyph; alias `MenuIcon`
+// for callers that want the burger style.
+// eslint-disable-next-line no-unused-vars
+const _IconMenuFallback = MenuIcon;
+const IconPlus = (props) => <PlusIcon size={14} {...props} />;
 
 const OPERATION_MODE_OPTIONS = [
   { label: '设置字段', value: 'set' },
@@ -1906,7 +2402,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
           className='!rounded-xl !border-0 w-full'
           bodyStyle={{
             padding: 12,
-            background: 'var(--semi-color-fill-0)',
+            background: 'var(--app-surface-muted)',
           }}
         >
           <div className='flex items-start justify-between gap-3'>
@@ -1959,7 +2455,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                 className='!rounded-2xl !border-0'
                 bodyStyle={{
                   padding: 14,
-                  background: 'var(--semi-color-fill-0)',
+                  background: 'var(--app-surface-muted)',
                 }}
               >
                 <Text className='mb-2 block'>{t('旧格式（JSON 对象）')}</Text>
@@ -1992,7 +2488,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                       className='!rounded-2xl !border-0 h-full'
                       bodyStyle={{
                         padding: 12,
-                        background: 'var(--semi-color-fill-0)',
+                        background: 'var(--app-surface-muted)',
                         display: 'flex',
                         flexDirection: 'column',
                         gap: 10,
@@ -2087,16 +2583,16 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                                   className='w-full rounded-xl px-3 py-3 cursor-pointer transition-colors'
                                   style={{
                                     background: isActive
-                                      ? 'var(--semi-color-primary-light-default)'
-                                      : 'var(--semi-color-bg-2)',
+                                      ? 'color-mix(in srgb, var(--app-primary) 12%, transparent)'
+                                      : 'var(--app-surface-muted)',
                                     border: isActive
-                                      ? '1px solid var(--semi-color-primary)'
-                                      : '1px solid var(--semi-color-border)',
+                                      ? '1px solid var(--app-primary)'
+                                      : '1px solid var(--app-border)',
                                     opacity: isDragging ? 0.6 : 1,
                                     boxShadow: isDropTarget
                                       ? dragOverPosition === 'after'
-                                        ? 'inset 0 -3px 0 var(--semi-color-primary)'
-                                        : 'inset 0 3px 0 var(--semi-color-primary)'
+                                        ? 'inset 0 -3px 0 var(--app-primary)'
+                                        : 'inset 0 3px 0 var(--app-primary)'
                                       : 'none',
                                   }}
                                 >
@@ -2105,7 +2601,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                                       <div
                                         className='flex-shrink-0'
                                         style={{
-                                          color: 'var(--semi-color-text-2)',
+                                          color: 'var(--app-muted)',
                                           cursor: operations.length > 1 ? 'grab' : 'default',
                                           marginTop: 1,
                                         }}
@@ -2188,7 +2684,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                             className='!rounded-2xl !border-0'
                             bodyStyle={{
                               padding: 14,
-                              background: 'var(--semi-color-fill-0)',
+                              background: 'var(--app-surface-muted)',
                             }}
                           >
                             <div className='flex items-center justify-between mb-3'>
@@ -2292,8 +2788,8 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                                 <div
                                   className='mt-2 rounded-xl p-3'
                                   style={{
-                                    background: 'var(--semi-color-bg-1)',
-                                    border: '1px solid var(--semi-color-border)',
+                                    background: 'var(--app-background)',
+                                    border: '1px solid var(--app-border)',
                                   }}
                                 >
                                   <div className='flex items-center justify-between mb-2'>
@@ -2514,8 +3010,8 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                                 <div
                                   className='mt-2 rounded-xl p-3'
                                   style={{
-                                    background: 'var(--semi-color-bg-1)',
-                                    border: '1px solid var(--semi-color-border)',
+                                    background: 'var(--app-background)',
+                                    border: '1px solid var(--app-border)',
                                   }}
                                 >
                                   <div className='flex items-center justify-between mb-2'>
@@ -2649,7 +3145,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                                       <div
                                         className='mt-2 rounded-lg p-2'
                                         style={{
-                                          background: 'var(--semi-color-fill-0)',
+                                          background: 'var(--app-surface-muted)',
                                         }}
                                       >
                                         <div className='flex items-center justify-between mb-2'>
@@ -2681,9 +3177,9 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                                                   className='rounded-lg p-2'
                                                   style={{
                                                     border:
-                                                      '1px solid var(--semi-color-border)',
+                                                      '1px solid var(--app-border)',
                                                     background:
-                                                      'var(--semi-color-bg-0)',
+                                                      'var(--app-surface)',
                                                   }}
                                                 >
                                                   <div className='flex items-center justify-between mb-2'>
@@ -3274,7 +3770,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                         className='!rounded-2xl !border-0'
                         bodyStyle={{
                           padding: 14,
-                          background: 'var(--semi-color-fill-0)',
+                          background: 'var(--app-surface-muted)',
                         }}
                       >
                         <Text type='tertiary'>
@@ -3288,7 +3784,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                         className='!rounded-2xl !border-0 mt-3'
                         bodyStyle={{
                           padding: 12,
-                          background: 'var(--semi-color-fill-0)',
+                          background: 'var(--app-surface-muted)',
                         }}
                       >
                         <Space>
@@ -3357,7 +3853,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
           maxHeight: '72vh',
           overflowY: 'auto',
           padding: 16,
-          background: 'var(--semi-color-bg-0)',
+          background: 'var(--app-surface)',
         }}
       >
         <Space vertical spacing={12} style={{ width: '100%' }}>
@@ -3384,7 +3880,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
             className='!rounded-xl !border-0'
             bodyStyle={{
               padding: 12,
-              background: 'var(--semi-color-fill-0)',
+              background: 'var(--app-surface-muted)',
             }}
           >
             <div className='flex items-center gap-2'>
@@ -3411,7 +3907,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
               className='!rounded-xl !border-0'
               bodyStyle={{
                 padding: 20,
-                background: 'var(--semi-color-fill-0)',
+                background: 'var(--app-surface-muted)',
               }}
             >
               <Text type='tertiary'>{t('没有匹配的字段')}</Text>
@@ -3424,7 +3920,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                   className='!rounded-xl !border-0'
                   bodyStyle={{
                     padding: 14,
-                    background: 'var(--semi-color-fill-0)',
+                    background: 'var(--app-surface-muted)',
                   }}
                 >
                   <div className='flex items-center justify-between mb-1'>
@@ -3450,7 +3946,7 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                           borderTop:
                             index === 0
                               ? 'none'
-                              : '1px solid var(--semi-color-border)',
+                              : '1px solid var(--app-border)',
                         }}
                       >
                         <div style={{ flex: 1, minWidth: 0 }}>
@@ -3460,8 +3956,8 @@ const ParamOverrideEditorModal = ({ visible, value, onSave, onCancel }) => {
                             size='small'
                             className='block mt-1 font-mono'
                             style={{
-                              background: 'var(--semi-color-bg-1)',
-                              border: '1px solid var(--semi-color-border)',
+                              background: 'var(--app-background)',
+                              border: '1px solid var(--app-border)',
                               borderRadius: 8,
                               padding: '4px 8px',
                               width: 'fit-content',
diff --git a/web/src/components/table/channels/modals/SingleModelSelectModal.jsx b/web/src/components/table/channels/modals/SingleModelSelectModal.jsx
index fdeb29152ca..d3400527d5a 100644
--- a/web/src/components/table/channels/modals/SingleModelSelectModal.jsx
+++ b/web/src/components/table/channels/modals/SingleModelSelectModal.jsx
@@ -19,22 +19,68 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import {
-  Collapse,
-  Empty,
+  Button,
   Input,
   Modal,
-  Radio,
-  Typography,
-} from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { IconSearch } from '@douyinfe/semi-icons';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Search, ChevronDown, ChevronRight, Inbox } from 'lucide-react';
 import { getModelCategories } from '../../../../helpers/render';
 
+function CategoryPanel({ categoryData, defaultOpen = false, selectedModel, onSelect }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return (
+    <div className='overflow-hidden rounded-lg border border-[color:var(--app-border)]'>
+      <button
+        type='button'
+        className='flex w-full items-center gap-2 bg-[color:var(--app-background)] px-3 py-2 text-sm font-medium text-foreground transition hover:bg-surface-secondary'
+        onClick={() => setOpen((prev) => !prev)}
+        aria-expanded={open}
+      >
+        {open ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+        {categoryData.icon}
+        <span>
+          {categoryData.label} ({categoryData.models.length})
+        </span>
+      </button>
+      {open ? (
+        <div className='grid grid-cols-1 gap-1 px-3 py-2 sm:grid-cols-2'>
+          {categoryData.models.map((model) => {
+            const checked = selectedModel === model;
+            return (
+              <label
+                key={model}
+                className={`flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm transition ${
+                  checked
+                    ? 'bg-primary/10 text-primary'
+                    : 'text-foreground hover:bg-[color:var(--app-background)]'
+                }`}
+              >
+                <input
+                  type='radio'
+                  name='single-model-select'
+                  value={model}
+                  checked={checked}
+                  onChange={() => onSelect(model)}
+                  className='h-3.5 w-3.5 accent-primary'
+                />
+                <span className='min-w-0 truncate'>{model}</span>
+              </label>
+            );
+          })}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
 const SingleModelSelectModal = ({
   visible,
   models = [],
@@ -43,7 +89,6 @@ const SingleModelSelectModal = ({
   onCancel,
 }) => {
   const { t } = useTranslation();
-  const isMobile = useIsMobile();
 
   const normalizeModelName = (model) => String(model ?? '').trim();
   const normalizedModels = useMemo(() => {
@@ -100,7 +145,6 @@ const SingleModelSelectModal = ({
         models: uncategorized,
       };
     }
-
     return categorized;
   }, [filteredModels, t]);
 
@@ -109,85 +153,72 @@ const SingleModelSelectModal = ({
     [modelsByCategory],
   );
 
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
   return (
-    <Modal
-      header={
-        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 sm:gap-4 py-4'>
-          <Typography.Title heading={5} className='m-0'>
-            {t('选择模型')}
-          </Typography.Title>
-        </div>
-      }
-      visible={visible}
-      onOk={() => onConfirm?.(selectedModel)}
-      onCancel={onCancel}
-      okText={t('确定')}
-      cancelText={t('取消')}
-      okButtonProps={{ disabled: !selectedModel }}
-      size={isMobile ? 'full-width' : 'large'}
-      closeOnEsc
-      maskClosable
-      centered
-    >
-      <Input
-        prefix={<IconSearch size={14} />}
-        placeholder={t('搜索模型')}
-        value={keyword}
-        onChange={(v) => setKeyword(v)}
-        showClear
-      />
-
-      <div style={{ maxHeight: 400, overflowY: 'auto', paddingRight: 8 }}>
-        {filteredModels.length === 0 ? (
-          <Empty
-            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-            darkModeImage={
-              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('暂无匹配模型')}
-            style={{ padding: 30 }}
-          />
-        ) : (
-          <Radio.Group
-            className='w-full'
-            style={{ width: '100%' }}
-            value={selectedModel}
-            onChange={(val) => {
-              const next = val && val.target ? val.target.value : val;
-              setSelectedModel(next);
-            }}
-          >
-            <Collapse
-              className='w-full'
-              style={{ width: '100%' }}
-              defaultActiveKey={[]}
-            >
-              {categoryEntries.map(([key, categoryData], index) => (
-                <Collapse.Panel
-                  key={`${key}_${index}`}
-                  itemKey={`${key}_${index}`}
-                  header={
-                    <span className='flex items-center gap-2'>
-                      {categoryData.icon}
-                      <span>
-                        {categoryData.label} ({categoryData.models.length})
-                      </span>
-                    </span>
-                  }
-                >
-                  <div className='grid grid-cols-2 gap-x-4'>
-                    {categoryData.models.map((model) => (
-                      <Radio key={model} value={model} className='my-1'>
-                        {model}
-                      </Radio>
-                    ))}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='lg' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('选择模型')}
+            </ModalHeader>
+            <ModalBody className='space-y-3 px-6 py-5'>
+              <div className='relative'>
+                <Search
+                  size={14}
+                  className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+                />
+                <Input
+                  type='text'
+                  placeholder={t('搜索模型')}
+                  value={keyword}
+                  onChange={(event) => setKeyword(event.target.value)}
+                  aria-label={t('搜索模型')}
+                  className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background pl-9 pr-3 text-sm text-foreground outline-none transition focus:border-primary'
+                />
+              </div>
+
+              <div className='max-h-[400px] space-y-2 overflow-y-auto pr-1'>
+                {filteredModels.length === 0 ? (
+                  <div className='flex flex-col items-center gap-3 py-10 text-center text-sm text-muted'>
+                    <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                      <Inbox size={28} />
+                    </div>
+                    <div>{t('暂无匹配模型')}</div>
                   </div>
-                </Collapse.Panel>
-              ))}
-            </Collapse>
-          </Radio.Group>
-        )}
-      </div>
+                ) : (
+                  categoryEntries.map(([key, categoryData], index) => (
+                    <CategoryPanel
+                      key={`${key}_${index}`}
+                      categoryData={categoryData}
+                      selectedModel={selectedModel}
+                      onSelect={setSelectedModel}
+                    />
+                  ))
+                )}
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={onCancel}>
+                {t('取消')}
+              </Button>
+              <Button
+                color='primary'
+                isDisabled={!selectedModel}
+                onPress={() => onConfirm?.(selectedModel)}
+              >
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/mj-logs/MjLogsActions.jsx b/web/src/components/table/mj-logs/MjLogsActions.jsx
index c668831f34f..d73e1b4bdca 100644
--- a/web/src/components/table/mj-logs/MjLogsActions.jsx
+++ b/web/src/components/table/mj-logs/MjLogsActions.jsx
@@ -18,13 +18,10 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Skeleton, Typography } from '@douyinfe/semi-ui';
+import { Skeleton } from '@heroui/react';
 import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
-import { IconEyeOpened } from '@douyinfe/semi-icons';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 
-const { Text } = Typography;
-
 const MjLogsActions = ({
   loading,
   showBanner,
@@ -35,27 +32,19 @@ const MjLogsActions = ({
 }) => {
   const showSkeleton = useMinimumLoadingTime(loading);
 
-  const placeholder = (
-    <div className='flex items-center mb-2 md:mb-0'>
-      <IconEyeOpened className='mr-2' />
-      <Skeleton.Title style={{ width: 300, height: 21, borderRadius: 6 }} />
-    </div>
-  );
-
   return (
     <div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full'>
-      <Skeleton loading={showSkeleton} active placeholder={placeholder}>
-        <div className='flex items-center mb-2 md:mb-0'>
-          <IconEyeOpened className='mr-2' />
-          <Text>
-            {isAdminUser && showBanner
-              ? t(
-                  '当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。',
-                )
-              : t('Midjourney 任务记录')}
-          </Text>
-        </div>
-      </Skeleton>
+      {showSkeleton ? (
+        <Skeleton className='h-5 w-[300px] rounded-md' />
+      ) : (
+        <span className='text-sm font-medium text-foreground'>
+          {isAdminUser && showBanner
+            ? t(
+                '当前未开启Midjourney回调，部分项目可能无法获得绘图结果，可在运营设置中开启。',
+              )
+            : t('Midjourney 任务记录')}
+        </span>
+      )}
 
       <CompactModeToggle
         compactMode={compactMode}
diff --git a/web/src/components/table/mj-logs/MjLogsColumnDefs.jsx b/web/src/components/table/mj-logs/MjLogsColumnDefs.jsx
index 9fa26efe0b9..7e96bbaa6b6 100644
--- a/web/src/components/table/mj-logs/MjLogsColumnDefs.jsx
+++ b/web/src/components/table/mj-logs/MjLogsColumnDefs.jsx
@@ -18,36 +18,56 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Progress, Tag, Typography } from '@douyinfe/semi-ui';
+import { Button, Tooltip } from '@heroui/react';
 import {
-  Palette,
-  ZoomIn,
-  Shuffle,
-  Move,
-  FileText,
+  AlertCircle,
   Blend,
-  Upload,
-  Minimize2,
-  RotateCcw,
-  PaintBucket,
-  Focus,
-  Move3D,
-  Monitor,
-  UserCheck,
-  HelpCircle,
   CheckCircle,
   Clock,
   Copy,
+  FileText,
   FileX,
-  Pause,
-  XCircle,
-  Loader,
-  AlertCircle,
+  Focus,
   Hash,
+  HelpCircle,
+  Loader,
+  Minimize2,
+  Monitor,
+  Move,
+  Move3D,
+  PaintBucket,
+  Palette,
+  Pause,
+  RotateCcw,
+  Shuffle,
+  Upload,
+  UserCheck,
   Video,
+  XCircle,
+  ZoomIn,
 } from 'lucide-react';
 
-const colors = [
+const TONE_TO_HEX = {
+  amber: '#f59e0b',
+  blue: '#3b82f6',
+  cyan: '#06b6d4',
+  green: '#22c55e',
+  grey: '#94a3b8',
+  indigo: '#6366f1',
+  'light-blue': '#0ea5e9',
+  'light-green': '#4ade80',
+  lime: '#84cc16',
+  orange: '#f97316',
+  pink: '#ec4899',
+  purple: '#a855f7',
+  red: '#ef4444',
+  teal: '#14b8a6',
+  violet: '#8b5cf6',
+  yellow: '#eab308',
+  white: '#ffffff',
+};
+
+const TAG_PALETTE_KEYS = [
   'amber',
   'blue',
   'cyan',
@@ -65,130 +85,190 @@ const colors = [
   'yellow',
 ];
 
-// Render functions
+function ColorTag({ color, prefixIcon, children, onClick }) {
+  if (color === 'white') {
+    return (
+      <span
+        onClick={onClick}
+        className={`inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-xs font-medium text-foreground ${
+          onClick ? 'cursor-pointer' : ''
+        }`}
+      >
+        {prefixIcon}
+        {children}
+      </span>
+    );
+  }
+  const hex = TONE_TO_HEX[color] || TONE_TO_HEX.grey;
+  return (
+    <span
+      onClick={onClick}
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${
+        onClick ? 'cursor-pointer' : ''
+      }`}
+      style={{
+        backgroundColor: `${hex}1A`,
+        color: hex,
+      }}
+    >
+      {prefixIcon}
+      {children}
+    </span>
+  );
+}
+
+function ProgressBar({ percent, errored }) {
+  const clamped = Math.max(0, Math.min(100, Number(percent) || 0));
+  return (
+    <div className='inline-flex min-w-[160px] items-center gap-2'>
+      <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-surface-secondary'>
+        <div
+          className={`h-full rounded-full transition-all ${
+            errored
+              ? 'bg-amber-500'
+              : clamped >= 100
+                ? 'bg-emerald-500'
+                : 'bg-primary'
+          }`}
+          style={{ width: `${clamped}%` }}
+        />
+      </div>
+      <span className='shrink-0 text-xs text-muted'>{clamped}%</span>
+    </div>
+  );
+}
+
+function EllipsisText({ children, width = 100, onClick }) {
+  return (
+    <Tooltip content={children} placement='top'>
+      <span
+        onClick={onClick}
+        className={`inline-block truncate align-middle text-sm text-foreground ${
+          onClick ? 'cursor-pointer' : ''
+        }`}
+        style={{ maxWidth: width }}
+      >
+        {children}
+      </span>
+    </Tooltip>
+  );
+}
+
 function renderType(type, t) {
   switch (type) {
     case 'IMAGINE':
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Palette size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Palette size={12} />}>
           {t('绘图')}
-        </Tag>
+        </ColorTag>
       );
     case 'UPSCALE':
       return (
-        <Tag color='orange' shape='circle' prefixIcon={<ZoomIn size={14} />}>
+        <ColorTag color='orange' prefixIcon={<ZoomIn size={12} />}>
           {t('放大')}
-        </Tag>
+        </ColorTag>
       );
     case 'VIDEO':
       return (
-        <Tag color='orange' shape='circle' prefixIcon={<Video size={14} />}>
+        <ColorTag color='orange' prefixIcon={<Video size={12} />}>
           {t('视频')}
-        </Tag>
+        </ColorTag>
       );
     case 'EDITS':
       return (
-        <Tag color='orange' shape='circle' prefixIcon={<Video size={14} />}>
+        <ColorTag color='orange' prefixIcon={<Video size={12} />}>
           {t('编辑')}
-        </Tag>
+        </ColorTag>
       );
     case 'VARIATION':
       return (
-        <Tag color='purple' shape='circle' prefixIcon={<Shuffle size={14} />}>
+        <ColorTag color='purple' prefixIcon={<Shuffle size={12} />}>
           {t('变换')}
-        </Tag>
+        </ColorTag>
       );
     case 'HIGH_VARIATION':
       return (
-        <Tag color='purple' shape='circle' prefixIcon={<Shuffle size={14} />}>
+        <ColorTag color='purple' prefixIcon={<Shuffle size={12} />}>
           {t('强变换')}
-        </Tag>
+        </ColorTag>
       );
     case 'LOW_VARIATION':
       return (
-        <Tag color='purple' shape='circle' prefixIcon={<Shuffle size={14} />}>
+        <ColorTag color='purple' prefixIcon={<Shuffle size={12} />}>
           {t('弱变换')}
-        </Tag>
+        </ColorTag>
       );
     case 'PAN':
       return (
-        <Tag color='cyan' shape='circle' prefixIcon={<Move size={14} />}>
+        <ColorTag color='cyan' prefixIcon={<Move size={12} />}>
           {t('平移')}
-        </Tag>
+        </ColorTag>
       );
     case 'DESCRIBE':
       return (
-        <Tag color='yellow' shape='circle' prefixIcon={<FileText size={14} />}>
+        <ColorTag color='yellow' prefixIcon={<FileText size={12} />}>
           {t('图生文')}
-        </Tag>
+        </ColorTag>
       );
     case 'BLEND':
       return (
-        <Tag color='lime' shape='circle' prefixIcon={<Blend size={14} />}>
+        <ColorTag color='lime' prefixIcon={<Blend size={12} />}>
           {t('图混合')}
-        </Tag>
+        </ColorTag>
       );
     case 'UPLOAD':
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Upload size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Upload size={12} />}>
           上传文件
-        </Tag>
+        </ColorTag>
       );
     case 'SHORTEN':
       return (
-        <Tag color='pink' shape='circle' prefixIcon={<Minimize2 size={14} />}>
+        <ColorTag color='pink' prefixIcon={<Minimize2 size={12} />}>
           {t('缩词')}
-        </Tag>
+        </ColorTag>
       );
     case 'REROLL':
       return (
-        <Tag color='indigo' shape='circle' prefixIcon={<RotateCcw size={14} />}>
+        <ColorTag color='indigo' prefixIcon={<RotateCcw size={12} />}>
           {t('重绘')}
-        </Tag>
+        </ColorTag>
       );
     case 'INPAINT':
       return (
-        <Tag
-          color='violet'
-          shape='circle'
-          prefixIcon={<PaintBucket size={14} />}
-        >
+        <ColorTag color='violet' prefixIcon={<PaintBucket size={12} />}>
           {t('局部重绘-提交')}
-        </Tag>
+        </ColorTag>
       );
     case 'ZOOM':
       return (
-        <Tag color='teal' shape='circle' prefixIcon={<Focus size={14} />}>
+        <ColorTag color='teal' prefixIcon={<Focus size={12} />}>
           {t('变焦')}
-        </Tag>
+        </ColorTag>
       );
     case 'CUSTOM_ZOOM':
       return (
-        <Tag color='teal' shape='circle' prefixIcon={<Move3D size={14} />}>
+        <ColorTag color='teal' prefixIcon={<Move3D size={12} />}>
           {t('自定义变焦-提交')}
-        </Tag>
+        </ColorTag>
       );
     case 'MODAL':
       return (
-        <Tag color='green' shape='circle' prefixIcon={<Monitor size={14} />}>
+        <ColorTag color='green' prefixIcon={<Monitor size={12} />}>
           {t('窗口处理')}
-        </Tag>
+        </ColorTag>
       );
     case 'SWAP_FACE':
       return (
-        <Tag
-          color='light-green'
-          shape='circle'
-          prefixIcon={<UserCheck size={14} />}
-        >
+        <ColorTag color='light-green' prefixIcon={<UserCheck size={12} />}>
           {t('换脸')}
-        </Tag>
+        </ColorTag>
       );
     default:
       return (
-        <Tag color='white' shape='circle' prefixIcon={<HelpCircle size={14} />}>
+        <ColorTag color='white' prefixIcon={<HelpCircle size={12} />}>
           {t('未知')}
-        </Tag>
+        </ColorTag>
       );
   }
 }
@@ -197,37 +277,33 @@ function renderCode(code, t) {
   switch (code) {
     case 1:
       return (
-        <Tag
-          color='green'
-          shape='circle'
-          prefixIcon={<CheckCircle size={14} />}
-        >
+        <ColorTag color='green' prefixIcon={<CheckCircle size={12} />}>
           {t('已提交')}
-        </Tag>
+        </ColorTag>
       );
     case 21:
       return (
-        <Tag color='lime' shape='circle' prefixIcon={<Clock size={14} />}>
+        <ColorTag color='lime' prefixIcon={<Clock size={12} />}>
           {t('等待中')}
-        </Tag>
+        </ColorTag>
       );
     case 22:
       return (
-        <Tag color='orange' shape='circle' prefixIcon={<Copy size={14} />}>
+        <ColorTag color='orange' prefixIcon={<Copy size={12} />}>
           {t('重复提交')}
-        </Tag>
+        </ColorTag>
       );
     case 0:
       return (
-        <Tag color='yellow' shape='circle' prefixIcon={<FileX size={14} />}>
+        <ColorTag color='yellow' prefixIcon={<FileX size={12} />}>
           {t('未提交')}
-        </Tag>
+        </ColorTag>
       );
     default:
       return (
-        <Tag color='white' shape='circle' prefixIcon={<HelpCircle size={14} />}>
+        <ColorTag color='white' prefixIcon={<HelpCircle size={12} />}>
           {t('未知')}
-        </Tag>
+        </ColorTag>
       );
   }
 }
@@ -236,53 +312,45 @@ function renderStatus(type, t) {
   switch (type) {
     case 'SUCCESS':
       return (
-        <Tag
-          color='green'
-          shape='circle'
-          prefixIcon={<CheckCircle size={14} />}
-        >
+        <ColorTag color='green' prefixIcon={<CheckCircle size={12} />}>
           {t('成功')}
-        </Tag>
+        </ColorTag>
       );
     case 'NOT_START':
       return (
-        <Tag color='grey' shape='circle' prefixIcon={<Pause size={14} />}>
+        <ColorTag color='grey' prefixIcon={<Pause size={12} />}>
           {t('未启动')}
-        </Tag>
+        </ColorTag>
       );
     case 'SUBMITTED':
       return (
-        <Tag color='yellow' shape='circle' prefixIcon={<Clock size={14} />}>
+        <ColorTag color='yellow' prefixIcon={<Clock size={12} />}>
           {t('队列中')}
-        </Tag>
+        </ColorTag>
       );
     case 'IN_PROGRESS':
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Loader size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Loader size={12} />}>
           {t('执行中')}
-        </Tag>
+        </ColorTag>
       );
     case 'FAILURE':
       return (
-        <Tag color='red' shape='circle' prefixIcon={<XCircle size={14} />}>
+        <ColorTag color='red' prefixIcon={<XCircle size={12} />}>
           {t('失败')}
-        </Tag>
+        </ColorTag>
       );
     case 'MODAL':
       return (
-        <Tag
-          color='yellow'
-          shape='circle'
-          prefixIcon={<AlertCircle size={14} />}
-        >
+        <ColorTag color='yellow' prefixIcon={<AlertCircle size={12} />}>
           {t('窗口等待')}
-        </Tag>
+        </ColorTag>
       );
     default:
       return (
-        <Tag color='white' shape='circle' prefixIcon={<HelpCircle size={14} />}>
+        <ColorTag color='white' prefixIcon={<HelpCircle size={12} />}>
           {t('未知')}
-        </Tag>
+        </ColorTag>
       );
   }
 }
@@ -295,23 +363,20 @@ const renderTimestamp = (timestampInSeconds) => {
   const hours = ('0' + date.getHours()).slice(-2);
   const minutes = ('0' + date.getMinutes()).slice(-2);
   const seconds = ('0' + date.getSeconds()).slice(-2);
-
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 };
 
 function renderDuration(submit_time, finishTime, t) {
   if (!submit_time || !finishTime) return 'N/A';
-
   const start = new Date(submit_time);
   const finish = new Date(finishTime);
   const durationMs = finish - start;
   const durationSec = (durationMs / 1000).toFixed(1);
   const color = durationSec > 60 ? 'red' : 'green';
-
   return (
-    <Tag color={color} shape='circle' prefixIcon={<Clock size={14} />}>
+    <ColorTag color={color} prefixIcon={<Clock size={12} />}>
       {durationSec} {t('秒')}
-    </Tag>
+    </ColorTag>
   );
 }
 
@@ -328,39 +393,30 @@ export const getMjLogsColumns = ({
       key: COLUMN_KEYS.SUBMIT_TIME,
       title: t('提交时间'),
       dataIndex: 'submit_time',
-      render: (text, record, index) => {
-        return <div>{renderTimestamp(text / 1000)}</div>;
-      },
+      render: (text) => <div>{renderTimestamp(text / 1000)}</div>,
     },
     {
       key: COLUMN_KEYS.DURATION,
       title: t('花费时间'),
       dataIndex: 'finish_time',
-      render: (finish, record) => {
-        return renderDuration(record.submit_time, finish, t);
-      },
+      render: (finish, record) => renderDuration(record.submit_time, finish, t),
     },
     {
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel_id',
-      render: (text, record, index) => {
-        return isAdminUser ? (
-          <div>
-            <Tag
-              color={colors[parseInt(text) % colors.length]}
-              shape='circle'
-              prefixIcon={<Hash size={14} />}
-              onClick={() => {
-                copyText(text);
-              }}
-            >
-              {' '}
-              {text}{' '}
-            </Tag>
-          </div>
-        ) : (
-          <></>
+      render: (text) => {
+        if (!isAdminUser) return null;
+        const tone =
+          TAG_PALETTE_KEYS[parseInt(text) % TAG_PALETTE_KEYS.length] || 'grey';
+        return (
+          <ColorTag
+            color={tone}
+            prefixIcon={<Hash size={12} />}
+            onClick={() => copyText(text)}
+          >
+            {text}
+          </ColorTag>
         );
       },
     },
@@ -368,73 +424,45 @@ export const getMjLogsColumns = ({
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'action',
-      render: (text, record, index) => {
-        return <div>{renderType(text, t)}</div>;
-      },
+      render: (text) => <div>{renderType(text, t)}</div>,
     },
     {
       key: COLUMN_KEYS.TASK_ID,
       title: t('任务ID'),
       dataIndex: 'mj_id',
-      render: (text, record, index) => {
-        return <div>{text}</div>;
-      },
+      render: (text) => <div>{text}</div>,
     },
     {
       key: COLUMN_KEYS.SUBMIT_RESULT,
       title: t('提交结果'),
       dataIndex: 'code',
-      render: (text, record, index) => {
-        return isAdminUser ? <div>{renderCode(text, t)}</div> : <></>;
-      },
+      render: (text) => (isAdminUser ? <div>{renderCode(text, t)}</div> : null),
     },
     {
       key: COLUMN_KEYS.TASK_STATUS,
       title: t('任务状态'),
       dataIndex: 'status',
-      render: (text, record, index) => {
-        return <div>{renderStatus(text, t)}</div>;
-      },
+      render: (text) => <div>{renderStatus(text, t)}</div>,
     },
     {
       key: COLUMN_KEYS.PROGRESS,
       title: t('进度'),
       dataIndex: 'progress',
-      render: (text, record, index) => {
-        return (
-          <div>
-            {
-              <Progress
-                stroke={
-                  record.status === 'FAILURE'
-                    ? 'var(--semi-color-warning)'
-                    : null
-                }
-                percent={text ? parseInt(text.replace('%', '')) : 0}
-                showInfo={true}
-                aria-label='drawing progress'
-                style={{ minWidth: '160px' }}
-              />
-            }
-          </div>
-        );
-      },
+      render: (text, record) => (
+        <ProgressBar
+          percent={text ? parseInt(text.replace('%', '')) : 0}
+          errored={record.status === 'FAILURE'}
+        />
+      ),
     },
     {
       key: COLUMN_KEYS.IMAGE,
       title: t('结果图片'),
       dataIndex: 'image_url',
-      render: (text, record, index) => {
-        if (!text) {
-          return t('无');
-        }
+      render: (text) => {
+        if (!text) return t('无');
         return (
-          <Button
-            size='small'
-            onClick={() => {
-              openImageModal(text);
-            }}
-          >
+          <Button size='sm' variant='flat' onPress={() => openImageModal(text)}>
             {t('查看图片')}
           </Button>
         );
@@ -444,21 +472,12 @@ export const getMjLogsColumns = ({
       key: COLUMN_KEYS.PROMPT,
       title: 'Prompt',
       dataIndex: 'prompt',
-      render: (text, record, index) => {
-        if (!text) {
-          return t('无');
-        }
-
+      render: (text) => {
+        if (!text) return t('无');
         return (
-          <Typography.Text
-            ellipsis={{ showTooltip: true }}
-            style={{ width: 100 }}
-            onClick={() => {
-              openContentModal(text);
-            }}
-          >
+          <EllipsisText width={100} onClick={() => openContentModal(text)}>
             {text}
-          </Typography.Text>
+          </EllipsisText>
         );
       },
     },
@@ -466,21 +485,12 @@ export const getMjLogsColumns = ({
       key: COLUMN_KEYS.PROMPT_EN,
       title: 'PromptEn',
       dataIndex: 'prompt_en',
-      render: (text, record, index) => {
-        if (!text) {
-          return t('无');
-        }
-
+      render: (text) => {
+        if (!text) return t('无');
         return (
-          <Typography.Text
-            ellipsis={{ showTooltip: true }}
-            style={{ width: 100 }}
-            onClick={() => {
-              openContentModal(text);
-            }}
-          >
+          <EllipsisText width={100} onClick={() => openContentModal(text)}>
             {text}
-          </Typography.Text>
+          </EllipsisText>
         );
       },
     },
@@ -489,21 +499,12 @@ export const getMjLogsColumns = ({
       title: t('失败原因'),
       dataIndex: 'fail_reason',
       fixed: 'right',
-      render: (text, record, index) => {
-        if (!text) {
-          return t('无');
-        }
-
+      render: (text) => {
+        if (!text) return t('无');
         return (
-          <Typography.Text
-            ellipsis={{ showTooltip: true }}
-            style={{ width: 100 }}
-            onClick={() => {
-              openContentModal(text);
-            }}
-          >
+          <EllipsisText width={100} onClick={() => openContentModal(text)}>
             {text}
-          </Typography.Text>
+          </EllipsisText>
         );
       },
     },
diff --git a/web/src/components/table/mj-logs/MjLogsFilters.jsx b/web/src/components/table/mj-logs/MjLogsFilters.jsx
index 7c61454e0d5..2b209203c30 100644
--- a/web/src/components/table/mj-logs/MjLogsFilters.jsx
+++ b/web/src/components/table/mj-logs/MjLogsFilters.jsx
@@ -18,10 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Form } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+import { Button } from '@heroui/react';
 
 import { DATE_RANGE_PRESETS } from '../../../constants/console.constants';
+import {
+  FilterDateRange,
+  FilterInput,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const MjLogsFilters = ({
   formInitValues,
@@ -33,56 +37,45 @@ const MjLogsFilters = ({
   isAdminUser,
   t,
 }) => {
+  const { values, setFieldValue, handleSubmit } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: refresh,
+  });
+  const presets = DATE_RANGE_PRESETS.map((preset) => ({
+    text: t(preset.text),
+    start: preset.start(),
+    end: preset.end(),
+  }));
+
   return (
-    <Form
-      initValues={formInitValues}
-      getFormApi={(api) => setFormApi(api)}
-      onSubmit={refresh}
-      allowEmpty={true}
-      autoComplete='off'
-      layout='vertical'
-      trigger='change'
-      stopValidateWithError={false}
-    >
+    <form onSubmit={handleSubmit} autoComplete='off'>
       <div className='flex flex-col gap-2'>
         <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2'>
           {/* 时间选择器 */}
           <div className='col-span-1 lg:col-span-2'>
-            <Form.DatePicker
-              field='dateRange'
-              className='w-full'
-              type='dateTimeRange'
-              placeholder={[t('开始时间'), t('结束时间')]}
-              showClear
-              pure
-              size='small'
-              presets={DATE_RANGE_PRESETS.map((preset) => ({
-                text: t(preset.text),
-                start: preset.start(),
-                end: preset.end(),
-              }))}
+            <FilterDateRange
+              value={values.dateRange}
+              onChange={(nextValue) => setFieldValue('dateRange', nextValue)}
+              startPlaceholder={t('开始时间')}
+              endPlaceholder={t('结束时间')}
+              presets={presets}
             />
           </div>
 
           {/* 任务 ID */}
-          <Form.Input
-            field='mj_id'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.mj_id}
+            onChange={(nextValue) => setFieldValue('mj_id', nextValue)}
             placeholder={t('任务 ID')}
-            showClear
-            pure
-            size='small'
           />
 
           {/* 渠道 ID - 仅管理员可见 */}
           {isAdminUser && (
-            <Form.Input
-              field='channel_id'
-              prefix={<IconSearch />}
+            <FilterInput
+              value={values.channel_id}
+              onChange={(nextValue) => setFieldValue('channel_id', nextValue)}
               placeholder={t('渠道 ID')}
-              showClear
-              pure
-              size='small'
             />
           )}
         </div>
@@ -92,15 +85,15 @@ const MjLogsFilters = ({
           <div></div>
           <div className='flex gap-2'>
             <Button
-              type='tertiary'
-              htmlType='submit'
+              type='submit'
+              variant='flat'
               loading={loading}
-              size='small'
+              size='sm'
             >
               {t('查询')}
             </Button>
             <Button
-              type='tertiary'
+              variant='flat'
               onClick={() => {
                 if (formApi) {
                   formApi.reset();
@@ -109,21 +102,21 @@ const MjLogsFilters = ({
                   }, 100);
                 }
               }}
-              size='small'
+              size='sm'
             >
               {t('重置')}
             </Button>
             <Button
-              type='tertiary'
+              variant='flat'
               onClick={() => setShowColumnSelector(true)}
-              size='small'
+              size='sm'
             >
               {t('列设置')}
             </Button>
           </div>
         </div>
       </div>
-    </Form>
+    </form>
   );
 };
 
diff --git a/web/src/components/table/mj-logs/MjLogsTable.jsx b/web/src/components/table/mj-logs/MjLogsTable.jsx
index 490a1803728..a3f1958023e 100644
--- a/web/src/components/table/mj-logs/MjLogsTable.jsx
+++ b/web/src/components/table/mj-logs/MjLogsTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getMjLogsColumns } from './MjLogsColumnDefs';
 
 const MjLogsTable = (mjLogsData) => {
@@ -82,14 +78,7 @@ const MjLogsTable = (mjLogsData) => {
       className='rounded-xl overflow-hidden'
       size='middle'
       empty={
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={t('搜索无结果')}
-          style={{ padding: 30 }}
-        />
+        <TableEmptyState description={t('搜索无结果')} />
       }
       pagination={{
         currentPage: activePage,
diff --git a/web/src/components/table/mj-logs/index.jsx b/web/src/components/table/mj-logs/index.jsx
index 7160a5363ea..23d0cd65b67 100644
--- a/web/src/components/table/mj-logs/index.jsx
+++ b/web/src/components/table/mj-logs/index.jsx
@@ -18,7 +18,6 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Layout } from '@douyinfe/semi-ui';
 import CardPro from '../../common/ui/CardPro';
 import MjLogsTable from './MjLogsTable';
 import MjLogsActions from './MjLogsActions';
@@ -39,25 +38,24 @@ const MjLogsPage = () => {
       <ColumnSelectorModal {...mjLogsData} />
       <ContentModal {...mjLogsData} />
 
-      <Layout>
-        <CardPro
-          type='type2'
-          statsArea={<MjLogsActions {...mjLogsData} />}
-          searchArea={<MjLogsFilters {...mjLogsData} />}
-          paginationArea={createCardProPagination({
-            currentPage: mjLogsData.activePage,
-            pageSize: mjLogsData.pageSize,
-            total: mjLogsData.logCount,
-            onPageChange: mjLogsData.handlePageChange,
-            onPageSizeChange: mjLogsData.handlePageSizeChange,
-            isMobile: isMobile,
-            t: mjLogsData.t,
-          })}
-          t={mjLogsData.t}
-        >
-          <MjLogsTable {...mjLogsData} />
-        </CardPro>
-      </Layout>
+      <CardPro
+        type='type2'
+        className='w-full'
+        statsArea={<MjLogsActions {...mjLogsData} />}
+        searchArea={<MjLogsFilters {...mjLogsData} />}
+        paginationArea={createCardProPagination({
+          currentPage: mjLogsData.activePage,
+          pageSize: mjLogsData.pageSize,
+          total: mjLogsData.logCount,
+          onPageChange: mjLogsData.handlePageChange,
+          onPageSizeChange: mjLogsData.handlePageSizeChange,
+          isMobile: isMobile,
+          t: mjLogsData.t,
+        })}
+        t={mjLogsData.t}
+      >
+        <MjLogsTable {...mjLogsData} />
+      </CardPro>
     </>
   );
 };
diff --git a/web/src/components/table/mj-logs/modals/ColumnSelectorModal.jsx b/web/src/components/table/mj-logs/modals/ColumnSelectorModal.jsx
index d514555f126..2dfe6622043 100644
--- a/web/src/components/table/mj-logs/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/mj-logs/modals/ColumnSelectorModal.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
 import { getMjLogsColumns } from '../MjLogsColumnDefs';
+import ColumnSelectorDialog from '../../../common/ui/ColumnSelectorDialog';
 
 const ColumnSelectorModal = ({
   showColumnSelector,
@@ -43,66 +43,28 @@ const ColumnSelectorModal = ({
     openContentModal,
     openImageModal,
     isAdminUser,
-  });
+  }).filter(
+    (column) =>
+      isAdminUser ||
+      (column.key !== COLUMN_KEYS.CHANNEL &&
+        column.key !== COLUMN_KEYS.SUBMIT_RESULT),
+  );
 
   return (
-    <Modal
+    <ColumnSelectorDialog
       title={t('列设置')}
       visible={showColumnSelector}
-      onCancel={() => setShowColumnSelector(false)}
-      footer={
-        <div className='flex justify-end'>
-          <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
-          <Button onClick={() => setShowColumnSelector(false)}>
-            {t('取消')}
-          </Button>
-          <Button onClick={() => setShowColumnSelector(false)}>
-            {t('确定')}
-          </Button>
-        </div>
-      }
-    >
-      <div style={{ marginBottom: 20 }}>
-        <Checkbox
-          checked={Object.values(visibleColumns).every((v) => v === true)}
-          indeterminate={
-            Object.values(visibleColumns).some((v) => v === true) &&
-            !Object.values(visibleColumns).every((v) => v === true)
-          }
-          onChange={(e) => handleSelectAll(e.target.checked)}
-        >
-          {t('全选')}
-        </Checkbox>
-      </div>
-      <div
-        className='flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4'
-        style={{ border: '1px solid var(--semi-color-border)' }}
-      >
-        {allColumns.map((column) => {
-          // Skip admin-only columns for non-admin users
-          if (
-            !isAdminUser &&
-            (column.key === COLUMN_KEYS.CHANNEL ||
-              column.key === COLUMN_KEYS.SUBMIT_RESULT)
-          ) {
-            return null;
-          }
-
-          return (
-            <div key={column.key} className='w-1/2 mb-4 pr-2'>
-              <Checkbox
-                checked={!!visibleColumns[column.key]}
-                onChange={(e) =>
-                  handleColumnVisibilityChange(column.key, e.target.checked)
-                }
-              >
-                {column.title}
-              </Checkbox>
-            </div>
-          );
-        })}
-      </div>
-    </Modal>
+      onClose={() => setShowColumnSelector(false)}
+      resetText={t('重置')}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
+      allText={t('全选')}
+      visibleColumns={visibleColumns}
+      columns={allColumns}
+      onColumnChange={handleColumnVisibilityChange}
+      onSelectAll={handleSelectAll}
+      onReset={initDefaultColumns}
+    />
   );
 };
 
diff --git a/web/src/components/table/mj-logs/modals/ContentModal.jsx b/web/src/components/table/mj-logs/modals/ContentModal.jsx
index 8197ba88dd8..06f10f85d90 100644
--- a/web/src/components/table/mj-logs/modals/ContentModal.jsx
+++ b/web/src/components/table/mj-logs/modals/ContentModal.jsx
@@ -18,7 +18,18 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, ImagePreview } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { useTranslation } from 'react-i18next';
 
 const ContentModal = ({
   isModalOpen,
@@ -28,26 +39,61 @@ const ContentModal = ({
   setIsModalOpenurl,
   modalImageUrl,
 }) => {
+  const { t } = useTranslation();
+  const textModalState = useOverlayState({
+    isOpen: isModalOpen,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setIsModalOpen(false);
+    },
+  });
+  const imageModalState = useOverlayState({
+    isOpen: isModalOpenurl,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setIsModalOpenurl(false);
+    },
+  });
+
   return (
     <>
       {/* Text Content Modal */}
-      <Modal
-        visible={isModalOpen}
-        onOk={() => setIsModalOpen(false)}
-        onCancel={() => setIsModalOpen(false)}
-        closable={null}
-        bodyStyle={{ height: '400px', overflow: 'auto' }}
-        width={800}
-      >
-        <p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
+      <Modal state={textModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='3xl' scroll='inside'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {t('内容预览')}
+              </ModalHeader>
+              <ModalBody className='max-h-[70vh] p-6'>
+                <p className='whitespace-pre-line text-sm text-foreground'>
+                  {modalContent}
+                </p>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button color='primary' onPress={() => setIsModalOpen(false)}>
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
       {/* Image Preview Modal */}
-      <ImagePreview
-        src={modalImageUrl}
-        visible={isModalOpenurl}
-        onVisibleChange={(visible) => setIsModalOpenurl(visible)}
-      />
+      <Modal state={imageModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='5xl' scroll='inside'>
+            <ModalDialog className='bg-black/90 text-white'>
+              <ModalBody className='flex max-h-[86vh] items-center justify-center p-4'>
+                <img
+                  src={modalImageUrl}
+                  alt='preview'
+                  className='max-h-[80vh] max-w-full rounded-2xl object-contain'
+                />
+              </ModalBody>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
     </>
   );
 };
diff --git a/web/src/components/table/model-deployments/DeploymentsActions.jsx b/web/src/components/table/model-deployments/DeploymentsActions.jsx
index 86b3b3bf0a6..038526a2165 100644
--- a/web/src/components/table/model-deployments/DeploymentsActions.jsx
+++ b/web/src/components/table/model-deployments/DeploymentsActions.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Popconfirm } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 
 const DeploymentsActions = ({
@@ -47,7 +47,13 @@ const DeploymentsActions = ({
   };
 
   const handleBatchDelete = () => {
-    batchDeleteDeployments();
+    if (
+      window.confirm(
+        `${t('确定要删除选中的')} ${selectedKeys.length} ${t('个部署吗？此操作不可逆。')}`,
+      )
+    ) {
+      batchDeleteDeployments();
+    }
   };
 
   const handleDeselectAll = () => {
@@ -57,39 +63,31 @@ const DeploymentsActions = ({
   return (
     <div className='flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1'>
       <Button
-        type='primary'
+        variant='primary'
         className='flex-1 md:flex-initial'
-        onClick={handleAddDeployment}
-        size='small'
+        onPress={handleAddDeployment}
+        size='sm'
       >
         {t('新建容器')}
       </Button>
 
       {hasSelected && (
         <>
-          <Popconfirm
-            title={t('确认删除')}
-            content={`${t('确定要删除选中的')} ${selectedKeys.length} ${t('个部署吗？此操作不可逆。')}`}
-            okText={t('删除')}
-            cancelText={t('取消')}
-            okType='danger'
-            onConfirm={handleBatchDelete}
+          <Button
+            variant='danger-soft'
+            className='flex-1 md:flex-initial'
+            isDisabled={selectedKeys.length === 0}
+            onPress={handleBatchDelete}
+            size='sm'
           >
-            <Button
-              type='danger'
-              className='flex-1 md:flex-initial'
-              disabled={selectedKeys.length === 0}
-              size='small'
-            >
-              {t('批量删除')} ({selectedKeys.length})
-            </Button>
-          </Popconfirm>
+            {t('批量删除')} ({selectedKeys.length})
+          </Button>
 
           <Button
-            type='tertiary'
+            variant='outline'
             className='flex-1 md:flex-initial'
-            onClick={handleDeselectAll}
-            size='small'
+            onPress={handleDeselectAll}
+            size='sm'
           >
             {t('取消选择')}
           </Button>
diff --git a/web/src/components/table/model-deployments/DeploymentsColumnDefs.jsx b/web/src/components/table/model-deployments/DeploymentsColumnDefs.jsx
index 7a13f7de1f8..b0305a1c3b4 100644
--- a/web/src/components/table/model-deployments/DeploymentsColumnDefs.jsx
+++ b/web/src/components/table/model-deployments/DeploymentsColumnDefs.jsx
@@ -18,9 +18,10 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Dropdown, Tag, Typography } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
+import { MoreVertical } from 'lucide-react';
 import { timestamp2string, showSuccess, showError } from '../../../helpers';
-import { IconMore } from '@douyinfe/semi-icons';
+import ClickMenu from '../../common/ui/ClickMenu';
 import {
   FaPlay,
   FaTrash,
@@ -34,7 +35,6 @@ import {
   FaBan,
   FaTerminal,
   FaPlus,
-  FaCog,
   FaInfoCircle,
   FaLink,
   FaStop,
@@ -45,63 +45,86 @@ import {
 const normalizeStatus = (status) =>
   typeof status === 'string' ? status.trim().toLowerCase() : '';
 
+// Tone palette mirrors the Semi `<Tag color>` palette we used to use for
+// status chips. Maps to semantic surface tones so light/dark inherit from
+// theme tokens.
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+  orange: 'bg-warning/15 text-warning',
+  red: 'bg-danger/15 text-danger',
+  grey: 'bg-surface-secondary text-muted',
+};
+
+function StatusChip({ tone = 'grey', icon, children }) {
+  const cls = TAG_TONE[tone] || TAG_TONE.grey;
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}
+    >
+      {icon}
+      <span>{children}</span>
+    </span>
+  );
+}
+
 const STATUS_TAG_CONFIG = {
   running: {
     color: 'green',
     labelKey: '运行中',
-    icon: <FaPlay size={12} className='text-green-600' />,
+    icon: <FaPlay size={10} />,
   },
   deploying: {
     color: 'blue',
     labelKey: '部署中',
-    icon: <FaSpinner size={12} className='text-blue-600' />,
+    icon: <FaSpinner size={10} />,
   },
   pending: {
     color: 'orange',
     labelKey: '待部署',
-    icon: <FaClock size={12} className='text-orange-600' />,
+    icon: <FaClock size={10} />,
   },
   stopped: {
     color: 'grey',
     labelKey: '已停止',
-    icon: <FaStop size={12} className='text-gray-500' />,
+    icon: <FaStop size={10} />,
   },
   error: {
     color: 'red',
     labelKey: '错误',
-    icon: <FaExclamationCircle size={12} className='text-red-500' />,
+    icon: <FaExclamationCircle size={10} />,
   },
   failed: {
     color: 'red',
     labelKey: '失败',
-    icon: <FaExclamationCircle size={12} className='text-red-500' />,
+    icon: <FaExclamationCircle size={10} />,
   },
   destroyed: {
     color: 'red',
     labelKey: '已销毁',
-    icon: <FaBan size={12} className='text-red-500' />,
+    icon: <FaBan size={10} />,
   },
   completed: {
     color: 'green',
     labelKey: '已完成',
-    icon: <FaCheckCircle size={12} className='text-green-600' />,
+    icon: <FaCheckCircle size={10} />,
   },
   'deployment requested': {
     color: 'blue',
     labelKey: '部署请求中',
-    icon: <FaSpinner size={12} className='text-blue-600' />,
+    icon: <FaSpinner size={10} />,
   },
   'termination requested': {
     color: 'orange',
     labelKey: '终止请求中',
-    icon: <FaClock size={12} className='text-orange-600' />,
+    icon: <FaClock size={10} />,
   },
 };
 
 const DEFAULT_STATUS_CONFIG = {
   color: 'grey',
   labelKey: null,
-  icon: <FaInfoCircle size={12} className='text-gray-500' />,
+  icon: <FaInfoCircle size={10} />,
 };
 
 const parsePercentValue = (value) => {
@@ -144,35 +167,37 @@ const formatRemainingMinutes = (minutes, t) => {
   return parts.join(' ');
 };
 
+// Returns CSS-variable colors keyed off the semantic palette so the
+// "traffic light" remaining-time indicator stays theme-aware.
 const getRemainingTheme = (percentRemaining) => {
   if (percentRemaining === null) {
     return {
-      iconColor: 'var(--semi-color-primary)',
-      tagColor: 'blue',
-      textColor: 'var(--semi-color-text-2)',
+      tone: 'blue',
+      iconColor: 'var(--app-primary)',
+      textColor: 'var(--app-muted)',
     };
   }
 
   if (percentRemaining <= 10) {
     return {
-      iconColor: '#ff5a5f',
-      tagColor: 'red',
-      textColor: '#ff5a5f',
+      tone: 'red',
+      iconColor: 'var(--app-danger)',
+      textColor: 'var(--app-danger)',
     };
   }
 
   if (percentRemaining <= 30) {
     return {
-      iconColor: '#ffb400',
-      tagColor: 'orange',
-      textColor: '#ffb400',
+      tone: 'orange',
+      iconColor: 'var(--app-warning)',
+      textColor: 'var(--app-warning)',
     };
   }
 
   return {
-    iconColor: '#2ecc71',
-    tagColor: 'green',
-    textColor: '#2ecc71',
+    tone: 'green',
+    iconColor: 'var(--app-success)',
+    textColor: 'var(--app-success)',
   };
 };
 
@@ -185,18 +210,14 @@ const renderStatus = (status, t) => {
     : statusText || t('未知状态');
 
   return (
-    <Tag
-      color={config.color}
-      shape='circle'
-      size='small'
-      prefixIcon={config.icon}
-    >
+    <StatusChip tone={config.color} icon={config.icon}>
       {labelText}
-    </Tag>
+    </StatusChip>
   );
 };
 
-// Container Name Cell Component - to properly handle React hooks
+// Container Name Cell Component - kept as a component so the inline copy
+// handler can use hooks if it ever needs to.
 const ContainerNameCell = ({ text, record, t }) => {
   const handleCopyId = async () => {
     try {
@@ -209,18 +230,15 @@ const ContainerNameCell = ({ text, record, t }) => {
 
   return (
     <div className='flex flex-col gap-1'>
-      <Typography.Text strong className='text-base'>
-        {text}
-      </Typography.Text>
-      <Typography.Text
-        type='secondary'
-        size='small'
-        className='text-xs cursor-pointer hover:text-blue-600 transition-colors select-all'
+      <span className='text-base font-semibold text-foreground'>{text}</span>
+      <button
+        type='button'
         onClick={handleCopyId}
         title={t('点击复制ID')}
+        className='select-all text-xs text-muted hover:text-primary transition-colors text-left cursor-pointer'
       >
         ID: {record.id}
-      </Typography.Text>
+      </button>
     </div>
   );
 };
@@ -235,19 +253,19 @@ const renderResourceConfig = (resource, t) => {
     <div className='flex flex-col gap-1'>
       {cpu && (
         <div className='flex items-center gap-1 text-xs'>
-          <FaMicrochip className='text-blue-500' />
+          <FaMicrochip className='text-primary' />
           <span>CPU: {cpu}</span>
         </div>
       )}
       {memory && (
         <div className='flex items-center gap-1 text-xs'>
-          <FaMemory className='text-green-500' />
-          <span>内存: {memory}</span>
+          <FaMemory className='text-success' />
+          <span>{t('内存')}: {memory}</span>
         </div>
       )}
       {gpu && (
         <div className='flex items-center gap-1 text-xs'>
-          <FaServer className='text-purple-500' />
+          <FaServer className='text-accent' />
           <span>GPU: {gpu}</span>
         </div>
       )}
@@ -255,19 +273,6 @@ const renderResourceConfig = (resource, t) => {
   );
 };
 
-// Render instance count with status indicator
-const renderInstanceCount = (count, record, t) => {
-  const normalizedStatus = normalizeStatus(record?.status);
-  const statusConfig = STATUS_TAG_CONFIG[normalizedStatus];
-  const countColor = statusConfig?.color ?? 'grey';
-
-  return (
-    <Tag color={countColor} size='small' shape='circle'>
-      {count || 0} {t('个实例')}
-    </Tag>
-  );
-};
-
 // Main function to get all deployment columns
 export const getDeploymentsColumns = ({
   t,
@@ -314,25 +319,12 @@ export const getDeploymentsColumns = ({
       width: 140,
       render: (provider) =>
         provider ? (
-          <div
-            className='flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide'
-            style={{
-              borderColor: 'rgba(59, 130, 246, 0.4)',
-              backgroundColor: 'rgba(59, 130, 246, 0.08)',
-              color: '#2563eb',
-            }}
-          >
+          <div className='inline-flex items-center gap-1.5 rounded-full border border-primary/30 bg-primary/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-primary'>
             <FaGlobe className='text-[11px]' />
             <span>{provider}</span>
           </div>
         ) : (
-          <Typography.Text
-            type='tertiary'
-            size='small'
-            className='text-xs text-gray-500'
-          >
-            {t('暂无')}
-          </Typography.Text>
+          <span className='text-xs text-muted'>{t('暂无')}</span>
         ),
     },
     {
@@ -380,21 +372,17 @@ export const getDeploymentsColumns = ({
                 className='text-sm'
                 style={{ color: theme.iconColor }}
               />
-              <Typography.Text className='text-sm font-medium text-[var(--semi-color-text-0)]'>
+              <span className='text-sm font-medium text-foreground'>
                 {timeDisplay}
-              </Typography.Text>
+              </span>
               {showProgress && percentRemaining !== null ? (
-                <Tag size='small' color={theme.tagColor}>
-                  {percentRemaining}%
-                </Tag>
+                <StatusChip tone={theme.tone}>{percentRemaining}%</StatusChip>
               ) : statusOverride ? (
-                <Tag size='small' color='grey'>
-                  {statusOverride}
-                </Tag>
+                <StatusChip tone='grey'>{statusOverride}</StatusChip>
               ) : null}
             </div>
             {showExtraInfo && (
-              <div className='flex items-center gap-3 text-[var(--semi-color-text-2)]'>
+              <div className='flex items-center gap-3 text-muted'>
                 {humanReadable && (
                   <span className='flex items-center gap-1'>
                     <FaClock className='text-[11px]' />
@@ -426,13 +414,13 @@ export const getDeploymentsColumns = ({
       ellipsis: true,
       render: (text, record) => (
         <div className='flex items-center gap-2'>
-          <div className='flex items-center gap-1 px-2 py-1 bg-green-50 border border-green-200 rounded-md'>
-            <FaServer className='text-green-600 text-xs' />
-            <span className='text-xs font-medium text-green-700'>
+          <div className='flex items-center gap-1 rounded-md border border-success/30 bg-success/10 px-2 py-1'>
+            <FaServer className='text-success text-xs' />
+            <span className='text-xs font-medium text-success'>
               {record.hardware_name}
             </span>
           </div>
-          <span className='text-xs text-gray-500 font-medium'>
+          <span className='text-xs text-muted font-medium'>
             x{record.hardware_quantity}
           </span>
         </div>
@@ -444,7 +432,9 @@ export const getDeploymentsColumns = ({
       key: COLUMN_KEYS.created_at,
       width: 150,
       render: (text) => (
-        <span className='text-sm text-gray-600'>{timestamp2string(text)}</span>
+        <span className='text-sm text-muted tabular-nums'>
+          {timestamp2string(text)}
+        </span>
       ),
     },
     {
@@ -459,65 +449,61 @@ export const getDeploymentsColumns = ({
           normalizedStatus === 'completed' || normalizedStatus === 'destroyed';
 
         const handleDelete = () => {
-          // Use enhanced confirmation dialog
+          // Routes through the parent's confirm dialog (passed via
+          // onUpdateConfig with the special 'delete' verb).
           onUpdateConfig?.(record, 'delete');
         };
 
-        // Get primary action based on status
+        // Get primary action based on status — drives the leading button
+        // before the "more" dropdown.
         const getPrimaryAction = () => {
           switch (normalizedStatus) {
             case 'running':
               return {
                 icon: <FaInfoCircle className='text-xs' />,
                 text: t('查看详情'),
-                onClick: () => onViewDetails?.(record),
-                type: 'secondary',
-                theme: 'borderless',
+                onPress: () => onViewDetails?.(record),
+                variant: 'light',
               };
             case 'failed':
             case 'error':
               return {
                 icon: <FaPlay className='text-xs' />,
                 text: t('重试'),
-                onClick: () => startDeployment(id),
-                type: 'primary',
-                theme: 'solid',
+                onPress: () => startDeployment(id),
+                color: 'primary',
               };
             case 'stopped':
               return {
                 icon: <FaPlay className='text-xs' />,
                 text: t('启动'),
-                onClick: () => startDeployment(id),
-                type: 'primary',
-                theme: 'solid',
+                onPress: () => startDeployment(id),
+                color: 'primary',
               };
             case 'deployment requested':
             case 'deploying':
               return {
                 icon: <FaClock className='text-xs' />,
                 text: t('部署中'),
-                onClick: () => {},
-                type: 'secondary',
-                theme: 'light',
-                disabled: true,
+                onPress: () => {},
+                variant: 'flat',
+                isDisabled: true,
               };
             case 'pending':
               return {
                 icon: <FaClock className='text-xs' />,
                 text: t('待部署'),
-                onClick: () => {},
-                type: 'secondary',
-                theme: 'light',
-                disabled: true,
+                onPress: () => {},
+                variant: 'flat',
+                isDisabled: true,
               };
             case 'termination requested':
               return {
                 icon: <FaClock className='text-xs' />,
                 text: t('终止中'),
-                onClick: () => {},
-                type: 'secondary',
-                theme: 'light',
-                disabled: true,
+                onPress: () => {},
+                variant: 'flat',
+                isDisabled: true,
               };
             case 'completed':
             case 'destroyed':
@@ -525,27 +511,23 @@ export const getDeploymentsColumns = ({
               return {
                 icon: <FaInfoCircle className='text-xs' />,
                 text: t('已结束'),
-                onClick: () => {},
-                type: 'tertiary',
-                theme: 'borderless',
-                disabled: true,
+                onPress: () => {},
+                variant: 'light',
+                isDisabled: true,
               };
           }
         };
 
         const primaryAction = getPrimaryAction();
-        const primaryTheme = primaryAction.theme || 'solid';
-        const primaryType = primaryAction.type || 'primary';
 
         if (isEnded) {
           return (
             <div className='flex w-full items-center justify-start gap-1 pr-2'>
               <Button
-                size='small'
-                type='tertiary'
-                theme='borderless'
-                onClick={() => onViewDetails?.(record)}
-                icon={<FaInfoCircle className='text-xs' />}
+                size='sm'
+                variant='light'
+                onPress={() => onViewDetails?.(record)}
+                startContent={<FaInfoCircle className='text-xs' />}
               >
                 {t('查看详情')}
               </Button>
@@ -553,69 +535,50 @@ export const getDeploymentsColumns = ({
           );
         }
 
-        // All actions dropdown with enhanced operations
-        const dropdownItems = [
-          <Dropdown.Item
-            key='details'
-            onClick={() => onViewDetails?.(record)}
-            icon={<FaInfoCircle />}
-          >
-            {t('查看详情')}
-          </Dropdown.Item>,
+        // Build the dropdown items array. Mirrors the original Dropdown.Menu
+        // ordering: details → logs (if active) → management actions →
+        // config actions → destructive action, with dividers between groups.
+        const items = [
+          {
+            label: t('查看详情'),
+            icon: <FaInfoCircle />,
+            onClick: () => onViewDetails?.(record),
+          },
         ];
 
         if (!isEnded) {
-          dropdownItems.push(
-            <Dropdown.Item
-              key='logs'
-              onClick={() => onViewLogs?.(record)}
-              icon={<FaTerminal />}
-            >
-              {t('查看日志')}
-            </Dropdown.Item>,
-          );
+          items.push({
+            label: t('查看日志'),
+            icon: <FaTerminal />,
+            onClick: () => onViewLogs?.(record),
+          });
         }
 
         const managementItems = [];
-        if (normalizedStatus === 'running') {
-          if (onSyncToChannel) {
-            managementItems.push(
-              <Dropdown.Item
-                key='sync-channel'
-                onClick={() => onSyncToChannel(record)}
-                icon={<FaLink />}
-              >
-                {t('同步到渠道')}
-              </Dropdown.Item>,
-            );
-          }
+        if (normalizedStatus === 'running' && onSyncToChannel) {
+          managementItems.push({
+            label: t('同步到渠道'),
+            icon: <FaLink />,
+            onClick: () => onSyncToChannel(record),
+          });
         }
         if (normalizedStatus === 'failed' || normalizedStatus === 'error') {
-          managementItems.push(
-            <Dropdown.Item
-              key='retry'
-              onClick={() => startDeployment(id)}
-              icon={<FaPlay />}
-            >
-              {t('重试')}
-            </Dropdown.Item>,
-          );
+          managementItems.push({
+            label: t('重试'),
+            icon: <FaPlay />,
+            onClick: () => startDeployment(id),
+          });
         }
         if (normalizedStatus === 'stopped') {
-          managementItems.push(
-            <Dropdown.Item
-              key='start'
-              onClick={() => startDeployment(id)}
-              icon={<FaPlay />}
-            >
-              {t('启动')}
-            </Dropdown.Item>,
-          );
+          managementItems.push({
+            label: t('启动'),
+            icon: <FaPlay />,
+            onClick: () => startDeployment(id),
+          });
         }
-
         if (managementItems.length > 0) {
-          dropdownItems.push(<Dropdown.Divider key='management-divider' />);
-          dropdownItems.push(...managementItems);
+          items.push({ divider: true });
+          items.push(...managementItems);
         }
 
         const configItems = [];
@@ -624,73 +587,56 @@ export const getDeploymentsColumns = ({
           (normalizedStatus === 'running' ||
             normalizedStatus === 'deployment requested')
         ) {
-          configItems.push(
-            <Dropdown.Item
-              key='extend'
-              onClick={() => onExtendDuration?.(record)}
-              icon={<FaPlus />}
-            >
-              {t('延长时长')}
-            </Dropdown.Item>,
-          );
+          configItems.push({
+            label: t('延长时长'),
+            icon: <FaPlus />,
+            onClick: () => onExtendDuration?.(record),
+          });
         }
-        // if (!isEnded && normalizedStatus === 'running') {
-        //   configItems.push(
-        //     <Dropdown.Item key="update-config" onClick={() => onUpdateConfig?.(record)} icon={<FaCog />}>
-        //       {t('更新配置')}
-        //     </Dropdown.Item>,
-        //   );
-        // }
-
         if (configItems.length > 0) {
-          dropdownItems.push(<Dropdown.Divider key='config-divider' />);
-          dropdownItems.push(...configItems);
+          items.push({ divider: true });
+          items.push(...configItems);
         }
+
         if (!isEnded) {
-          dropdownItems.push(<Dropdown.Divider key='danger-divider' />);
-          dropdownItems.push(
-            <Dropdown.Item
-              key='delete'
-              type='danger'
-              onClick={handleDelete}
-              icon={<FaTrash />}
-            >
-              {t('销毁容器')}
-            </Dropdown.Item>,
-          );
+          items.push({ divider: true });
+          items.push({
+            label: t('销毁容器'),
+            icon: <FaTrash />,
+            danger: true,
+            onClick: handleDelete,
+          });
         }
 
-        const allActions = <Dropdown.Menu>{dropdownItems}</Dropdown.Menu>;
-        const hasDropdown = dropdownItems.length > 0;
-
         return (
           <div className='flex w-full items-center justify-start gap-1 pr-2'>
             <Button
-              size='small'
-              theme={primaryTheme}
-              type={primaryType}
-              icon={primaryAction.icon}
-              onClick={primaryAction.onClick}
+              size='sm'
+              variant={primaryAction.variant || 'solid'}
+              color={primaryAction.color}
+              startContent={primaryAction.icon}
+              onPress={primaryAction.onPress}
+              isDisabled={primaryAction.isDisabled}
               className='px-2 text-xs'
-              disabled={primaryAction.disabled}
             >
               {primaryAction.text}
             </Button>
 
-            {hasDropdown && (
-              <Dropdown
-                trigger='click'
-                position='bottomRight'
-                render={allActions}
-              >
-                <Button
-                  size='small'
-                  theme='light'
-                  type='tertiary'
-                  icon={<IconMore />}
-                  className='px-1'
-                />
-              </Dropdown>
+            {items.length > 0 && (
+              <ClickMenu
+                items={items}
+                trigger={
+                  <Button
+                    isIconOnly
+                    size='sm'
+                    variant='light'
+                    aria-label={t('更多操作')}
+                    className='px-1'
+                  >
+                    <MoreVertical size={14} />
+                  </Button>
+                }
+              />
             )}
           </div>
         );
diff --git a/web/src/components/table/model-deployments/DeploymentsFilters.jsx b/web/src/components/table/model-deployments/DeploymentsFilters.jsx
index b268f6832a3..cee620cbf92 100644
--- a/web/src/components/table/model-deployments/DeploymentsFilters.jsx
+++ b/web/src/components/table/model-deployments/DeploymentsFilters.jsx
@@ -17,9 +17,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef } from 'react';
-import { Form, Button } from '@douyinfe/semi-ui';
-import { IconSearch, IconRefresh } from '@douyinfe/semi-icons';
+import React from 'react';
+import { Button } from '@heroui/react';
+import { RefreshCw, Search } from 'lucide-react';
+import {
+  FilterInput,
+  FilterSelect,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const DeploymentsFilters = ({
   formInitValues,
@@ -30,17 +35,16 @@ const DeploymentsFilters = ({
   setShowColumnSelector,
   t,
 }) => {
-  const formApiRef = useRef(null);
-
-  const handleSubmit = (values) => {
-    searchDeployments(values);
-  };
+  const { values, setFieldValue, handleSubmit, api } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: searchDeployments,
+  });
 
   const handleReset = () => {
-    if (!formApiRef.current) return;
-    formApiRef.current.reset();
+    api.reset();
     setTimeout(() => {
-      formApiRef.current.submitForm();
+      searchDeployments(formInitValues);
     }, 0);
   };
 
@@ -55,75 +59,65 @@ const DeploymentsFilters = ({
   ];
 
   return (
-    <Form
-      layout='horizontal'
+    <form
       onSubmit={handleSubmit}
-      initValues={formInitValues}
-      getFormApi={(formApi) => {
-        setFormApi(formApi);
-        formApiRef.current = formApi;
-      }}
       className='w-full md:w-auto order-1 md:order-2'
     >
       <div className='flex flex-col md:flex-row items-center gap-2 w-full md:w-auto'>
         <div className='w-full md:w-64'>
-          <Form.Input
-            field='searchKeyword'
+          <FilterInput
+            value={values.searchKeyword}
+            onChange={(value) => setFieldValue('searchKeyword', value)}
             placeholder={t('搜索部署名称')}
-            prefix={<IconSearch />}
-            showClear
-            size='small'
-            pure
           />
         </div>
 
         <div className='w-full md:w-48'>
-          <Form.Select
-            field='searchStatus'
+          <FilterSelect
+            value={values.searchStatus}
+            onChange={(value) => setFieldValue('searchStatus', value)}
             placeholder={t('选择状态')}
-            optionList={statusOptions}
-            className='w-full'
-            showClear
-            size='small'
-            pure
+            options={statusOptions}
           />
         </div>
 
         <div className='flex gap-2 w-full md:w-auto'>
           <Button
-            htmlType='submit'
-            type='tertiary'
-            icon={<IconSearch />}
-            loading={searching}
-            disabled={loading}
-            size='small'
+            type='submit'
+            variant='outline'
+            isPending={searching}
+            isDisabled={loading}
+            size='sm'
             className='flex-1 md:flex-initial md:w-auto'
           >
+            <Search size={15} />
             {t('查询')}
           </Button>
 
           <Button
-            type='tertiary'
-            icon={<IconRefresh />}
-            onClick={handleReset}
-            disabled={loading || searching}
-            size='small'
+            type='button'
+            variant='outline'
+            onPress={handleReset}
+            isDisabled={loading || searching}
+            size='sm'
             className='flex-1 md:flex-initial md:w-auto'
           >
+            <RefreshCw size={15} />
             {t('重置')}
           </Button>
 
           <Button
-            type='tertiary'
-            onClick={() => setShowColumnSelector(true)}
-            size='small'
+            type='button'
+            variant='outline'
+            onPress={() => setShowColumnSelector(true)}
+            size='sm'
             className='flex-1 md:flex-initial md:w-auto'
           >
             {t('列设置')}
           </Button>
         </div>
       </div>
-    </Form>
+    </form>
   );
 };
 
diff --git a/web/src/components/table/model-deployments/DeploymentsTable.jsx b/web/src/components/table/model-deployments/DeploymentsTable.jsx
index 7a7eb981e13..7cc7ccc12c4 100644
--- a/web/src/components/table/model-deployments/DeploymentsTable.jsx
+++ b/web/src/components/table/model-deployments/DeploymentsTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo, useState } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getDeploymentsColumns } from './DeploymentsColumnDefs';
 
 // Import all the new modals
@@ -185,14 +181,7 @@ const DeploymentsTable = (deploymentsData) => {
         onRow={handleRow}
         rowSelection={batchOperationsEnabled ? rowSelection : undefined}
         empty={
-          <Empty
-            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-            darkModeImage={
-              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('搜索无结果')}
-            style={{ padding: 30 }}
-          />
+          <TableEmptyState description={t('搜索无结果')} />
         }
         className='rounded-xl overflow-hidden'
         size='middle'
diff --git a/web/src/components/table/model-deployments/modals/ColumnSelectorModal.jsx b/web/src/components/table/model-deployments/modals/ColumnSelectorModal.jsx
index 3589ec491fe..ebc6cda2a85 100644
--- a/web/src/components/table/model-deployments/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/model-deployments/modals/ColumnSelectorModal.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo } from 'react';
-import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
+import ColumnSelectorDialog from '../../../common/ui/ColumnSelectorDialog';
 
 const ColumnSelectorModal = ({
   visible,
@@ -68,59 +68,25 @@ const ColumnSelectorModal = ({
     });
   };
 
-  const allSelected = columnOptions.every(
-    ({ key, required }) => required || visibleColumns[key],
-  );
-  const indeterminate =
-    columnOptions.some(
-      ({ key, required }) => !required && visibleColumns[key],
-    ) && !allSelected;
-
-  const handleConfirm = () => onCancel();
-
   return (
-    <Modal
+    <ColumnSelectorDialog
       title={t('列设置')}
       visible={visible}
-      onCancel={onCancel}
-      footer={
-        <div className='flex justify-end gap-2'>
-          <Button onClick={handleReset}>{t('重置')}</Button>
-          <Button onClick={onCancel}>{t('取消')}</Button>
-          <Button type='primary' onClick={handleConfirm}>
-            {t('确定')}
-          </Button>
-        </div>
-      }
-    >
-      <div style={{ marginBottom: 20 }}>
-        <Checkbox
-          checked={allSelected}
-          indeterminate={indeterminate}
-          onChange={(e) => handleSelectAll(e.target.checked)}
-        >
-          {t('全选')}
-        </Checkbox>
-      </div>
-      <div
-        className='flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4'
-        style={{ border: '1px solid var(--semi-color-border)' }}
-      >
-        {columnOptions.map(({ key, label, required }) => (
-          <div key={key} className='w-1/2 mb-4 pr-2'>
-            <Checkbox
-              checked={!!visibleColumns[key]}
-              disabled={required}
-              onChange={(e) =>
-                handleColumnVisibilityChange(key, e.target.checked)
-              }
-            >
-              {label}
-            </Checkbox>
-          </div>
-        ))}
-      </div>
-    </Modal>
+      onClose={onCancel}
+      resetText={t('重置')}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
+      allText={t('全选')}
+      visibleColumns={visibleColumns}
+      columns={columnOptions.map(({ key, label, required }) => ({
+        key,
+        title: label,
+        disabled: required,
+      }))}
+      onColumnChange={handleColumnVisibilityChange}
+      onSelectAll={handleSelectAll}
+      onReset={handleReset}
+    />
   );
 };
 
diff --git a/web/src/components/table/model-deployments/modals/ConfirmationDialog.jsx b/web/src/components/table/model-deployments/modals/ConfirmationDialog.jsx
index 5e90b153bbc..588dbfe97a6 100644
--- a/web/src/components/table/model-deployments/modals/ConfirmationDialog.jsx
+++ b/web/src/components/table/model-deployments/modals/ConfirmationDialog.jsx
@@ -18,9 +18,19 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useEffect } from 'react';
-import { Modal, Typography, Input } from '@douyinfe/semi-ui';
-
-const { Text } = Typography;
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { TriangleAlert } from 'lucide-react';
 
 const ConfirmationDialog = ({
   visible,
@@ -35,9 +45,7 @@ const ConfirmationDialog = ({
   const [confirmText, setConfirmText] = useState('');
 
   useEffect(() => {
-    if (!visible) {
-      setConfirmText('');
-    }
+    if (!visible) setConfirmText('');
   }, [visible]);
 
   const requiredText = deployment?.container_name || deployment?.id || '';
@@ -45,53 +53,78 @@ const ConfirmationDialog = ({
 
   const handleCancel = () => {
     setConfirmText('');
-    onCancel();
+    onCancel?.();
   };
 
   const handleConfirm = () => {
     if (isConfirmed) {
-      onConfirm();
+      onConfirm?.();
       handleCancel();
     }
   };
 
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleCancel();
+    },
+  });
+
   return (
-    <Modal
-      title={title}
-      visible={visible}
-      onCancel={handleCancel}
-      onOk={handleConfirm}
-      okText={t('确认')}
-      cancelText={t('取消')}
-      okButtonProps={{
-        disabled: !isConfirmed,
-        type: type === 'danger' ? 'danger' : 'primary',
-        loading,
-      }}
-      width={480}
-    >
-      <div className='space-y-4'>
-        <Text type='danger' strong>
-          {t('此操作具有风险，请确认要继续执行')}。
-        </Text>
-        <Text>
-          {t('请输入部署名称以完成二次确认')}：
-          <Text code className='ml-1'>
-            {requiredText || t('未知部署')}
-          </Text>
-        </Text>
-        <Input
-          value={confirmText}
-          onChange={setConfirmText}
-          placeholder={t('再次输入部署名称')}
-          autoFocus
-        />
-        {!isConfirmed && confirmText && (
-          <Text type='danger' size='small'>
-            {t('部署名称不匹配，请检查后重新输入')}
-          </Text>
-        )}
-      </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='md' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <TriangleAlert
+                  size={18}
+                  className={type === 'danger' ? 'text-red-500' : 'text-amber-500'}
+                />
+                <span>{title}</span>
+              </div>
+            </ModalHeader>
+            <ModalBody className='space-y-4 px-6 py-5'>
+              <div className='font-semibold text-red-600 dark:text-red-400'>
+                {t('此操作具有风险，请确认要继续执行')}。
+              </div>
+              <div className='text-sm text-foreground'>
+                {t('请输入部署名称以完成二次确认')}：
+                <code className='ml-1 rounded bg-[color:var(--app-background)] px-1.5 py-0.5 text-xs text-foreground'>
+                  {requiredText || t('未知部署')}
+                </code>
+              </div>
+              <Input
+                type='text'
+                value={confirmText}
+                onChange={(e) => setConfirmText(e.target.value)}
+                placeholder={t('再次输入部署名称')}
+                aria-label={t('部署名称')}
+                autoFocus
+                className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+              />
+              {!isConfirmed && confirmText && (
+                <div className='text-xs text-red-600 dark:text-red-400'>
+                  {t('部署名称不匹配，请检查后重新输入')}
+                </div>
+              )}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={handleCancel}>
+                {t('取消')}
+              </Button>
+              <Button
+                color={type === 'danger' ? 'danger' : 'primary'}
+                onPress={handleConfirm}
+                isDisabled={!isConfirmed}
+                isPending={loading}
+              >
+                {t('确认')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/model-deployments/modals/CreateDeploymentModal.jsx b/web/src/components/table/model-deployments/modals/CreateDeploymentModal.jsx
index 35887b15b83..87dd17319c4 100644
--- a/web/src/components/table/model-deployments/modals/CreateDeploymentModal.jsx
+++ b/web/src/components/table/model-deployments/modals/CreateDeploymentModal.jsx
@@ -6,50 +6,326 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect, useMemo, useRef } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
-  Modal,
-  Form,
-  Input,
-  Select,
-  InputNumber,
-  Switch,
-  Collapse,
-  Card,
-  Divider,
   Button,
-  Typography,
-  Space,
-  Spin,
-  Tag,
-  Row,
-  Col,
+  Card,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
   Tooltip,
-  Radio,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
 import {
-  IconPlus,
-  IconMinus,
-  IconHelpCircle,
-  IconCopy,
-} from '@douyinfe/semi-icons';
-import { API } from '../../../../helpers';
-import { showError, showSuccess, copy } from '../../../../helpers';
-
-const { Text, Title } = Typography;
-const { Option } = Select;
-const RadioGroup = Radio.Group;
+  ChevronDown,
+  Copy,
+  HelpCircle,
+  Minus,
+  Plus,
+  X,
+} from 'lucide-react';
+import { API, copy, showError, showSuccess } from '../../../../helpers';
+
+// ----------------------------- helpers -----------------------------
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:cursor-not-allowed disabled:opacity-50';
+
+const inputClassSm =
+  'h-8 rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:cursor-not-allowed disabled:opacity-50';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function FieldError({ children }) {
+  if (!children) return null;
+  return <div className='mt-1 text-xs text-danger'>{children}</div>;
+}
+
+function StatusChip({ tone = 'grey', size = 'sm', children }) {
+  const TONE = {
+    green: 'bg-success/15 text-success',
+    red: 'bg-danger/15 text-danger',
+    blue: 'bg-primary/15 text-primary',
+    grey: 'bg-surface-secondary text-muted',
+  };
+  const sizeCls = size === 'xs' ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-0.5 text-xs';
+  return (
+    <span
+      className={`inline-flex items-center rounded-full font-semibold ${sizeCls} ${
+        TONE[tone] || TONE.grey
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+// ----------------------------- custom dropdowns -----------------------------
+
+// Single-select dropdown with rich item rendering. Replaces Semi
+// `<Form.Select renderSelectedItem>` with `<Option>` children.
+function RichSingleSelect({
+  value,
+  options,
+  placeholder,
+  loading,
+  disabled,
+  onChange,
+  renderItem,
+  renderSelected,
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onClickOutside);
+    return () => document.removeEventListener('mousedown', onClickOutside);
+  }, [open]);
+
+  const selected = options.find((opt) => opt.value === value) || null;
+
+  return (
+    <div ref={ref} className='relative'>
+      <button
+        type='button'
+        disabled={disabled}
+        onClick={() => setOpen((v) => !v)}
+        className={`flex h-10 w-full items-center justify-between gap-2 rounded-xl border bg-background px-3 text-sm transition disabled:cursor-not-allowed disabled:opacity-50 ${
+          open ? 'border-primary' : 'border-border'
+        } ${disabled ? '' : 'hover:border-primary/60'}`}
+      >
+        <span className='min-w-0 flex-1 truncate text-left'>
+          {loading ? (
+            <span className='inline-flex items-center gap-2 text-muted'>
+              <Spinner size='sm' />
+              <span>{placeholder}</span>
+            </span>
+          ) : selected ? (
+            renderSelected ? (
+              renderSelected(selected)
+            ) : (
+              selected.label || String(selected.value)
+            )
+          ) : (
+            <span className='text-muted'>{placeholder}</span>
+          )}
+        </span>
+        <ChevronDown
+          size={14}
+          className={`shrink-0 text-muted transition-transform ${
+            open ? 'rotate-180' : ''
+          }`}
+        />
+      </button>
+
+      {open && !disabled ? (
+        <div className='absolute left-0 right-0 z-30 mt-1 max-h-[360px] overflow-auto rounded-xl border border-border bg-background shadow-lg'>
+          {options.length === 0 ? (
+            <div className='px-3 py-2 text-xs text-muted'>
+              {placeholder}
+            </div>
+          ) : (
+            <ul className='py-1'>
+              {options.map((option) => {
+                const active = option.value === value;
+                return (
+                  <li key={String(option.value)}>
+                    <button
+                      type='button'
+                      disabled={option.disabled}
+                      onClick={() => {
+                        onChange?.(option.value);
+                        setOpen(false);
+                      }}
+                      className={`flex w-full items-start gap-2 px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                        active
+                          ? 'bg-primary/10 text-primary'
+                          : 'text-foreground hover:bg-surface-secondary'
+                      }`}
+                    >
+                      <span className='min-w-0 flex-1'>
+                        {renderItem ? renderItem(option) : option.label}
+                      </span>
+                      {active ? <span className='text-xs'>{'✓'}</span> : null}
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// Multi-select dropdown with rich item rendering + chips.
+function RichMultiSelect({
+  value = [],
+  options,
+  placeholder,
+  loading,
+  disabled,
+  onChange,
+  renderItem,
+  renderSelectedLabel,
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onClickOutside);
+    return () => document.removeEventListener('mousedown', onClickOutside);
+  }, [open]);
+
+  const toggle = (val, optionDisabled) => {
+    if (optionDisabled) return;
+    if ((value || []).includes(val)) {
+      onChange?.((value || []).filter((v) => v !== val));
+    } else {
+      onChange?.([...(value || []), val]);
+    }
+  };
+
+  const removeAt = (val) => {
+    onChange?.((value || []).filter((v) => v !== val));
+  };
+
+  return (
+    <div ref={ref} className='relative'>
+      <div
+        className={`flex min-h-[40px] flex-wrap items-center gap-1.5 rounded-xl border bg-background px-2 py-1.5 text-sm transition focus-within:border-primary ${
+          open ? 'border-primary' : 'border-border'
+        } ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-text'}`}
+        onClick={() => {
+          if (!disabled) setOpen(true);
+        }}
+      >
+        {(value || []).length === 0 ? (
+          <span className='px-1 text-muted'>
+            {loading ? (
+              <span className='inline-flex items-center gap-2'>
+                <Spinner size='sm' />
+                <span>{placeholder}</span>
+              </span>
+            ) : (
+              placeholder
+            )}
+          </span>
+        ) : (
+          (value || []).map((v) => {
+            const opt = options.find((o) => o.value === v);
+            const label = renderSelectedLabel
+              ? renderSelectedLabel(opt, v)
+              : opt?.label ?? String(v);
+            return (
+              <span
+                key={String(v)}
+                className='inline-flex items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs'
+              >
+                <span>{label}</span>
+                <button
+                  type='button'
+                  onClick={(event) => {
+                    event.stopPropagation();
+                    removeAt(v);
+                  }}
+                  aria-label='remove'
+                  className='text-muted hover:text-foreground'
+                >
+                  <X size={12} />
+                </button>
+              </span>
+            );
+          })
+        )}
+        <span className='ml-auto inline-flex items-center'>
+          <ChevronDown
+            size={14}
+            className={`text-muted transition-transform ${
+              open ? 'rotate-180' : ''
+            }`}
+          />
+        </span>
+      </div>
+
+      {open && !disabled ? (
+        <div className='absolute left-0 right-0 z-30 mt-1 max-h-[360px] overflow-auto rounded-xl border border-border bg-background shadow-lg'>
+          {options.length === 0 ? (
+            <div className='px-3 py-2 text-xs text-muted'>
+              {placeholder}
+            </div>
+          ) : (
+            <ul className='py-1'>
+              {options.map((option) => {
+                const selected = (value || []).includes(option.value);
+                return (
+                  <li key={String(option.value)}>
+                    <button
+                      type='button'
+                      disabled={option.disabled}
+                      onClick={() =>
+                        toggle(option.value, option.disabled)
+                      }
+                      className={`flex w-full items-start gap-2 px-3 py-2 text-left text-sm transition disabled:cursor-not-allowed disabled:opacity-50 ${
+                        selected
+                          ? 'bg-primary/10 text-primary'
+                          : 'text-foreground hover:bg-surface-secondary'
+                      }`}
+                    >
+                      <input
+                        type='checkbox'
+                        readOnly
+                        checked={selected}
+                        className='mt-1 h-4 w-4 shrink-0 accent-primary'
+                      />
+                      <span className='min-w-0 flex-1'>
+                        {renderItem ? renderItem(option) : option.label}
+                      </span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
+          )}
+        </div>
+      ) : null}
+    </div>
+  );
+}
+
+// ----------------------------- constants -----------------------------
 
 const BUILTIN_IMAGE = 'ollama/ollama:latest';
 const DEFAULT_TRAFFIC_PORT = 11434;
@@ -67,31 +343,33 @@ const generateRandomKey = () => {
     .slice(2)}`;
 };
 
+// ----------------------------- main -----------------------------
+
 const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
-  const [formApi, setFormApi] = useState(null);
-  const [loading, setLoading] = useState(false);
   const [submitting, setSubmitting] = useState(false);
 
-  // Resource data states
+  // Resource data
   const [hardwareTypes, setHardwareTypes] = useState([]);
   const [hardwareTotalAvailable, setHardwareTotalAvailable] = useState(null);
   const [locations, setLocations] = useState([]);
   const [locationTotalAvailable, setLocationTotalAvailable] = useState(null);
   const [priceEstimation, setPriceEstimation] = useState(null);
 
-  // UI states
   const [loadingHardware, setLoadingHardware] = useState(false);
   const [loadingReplicas, setLoadingReplicas] = useState(false);
   const [loadingPrice, setLoadingPrice] = useState(false);
-  const [showAdvanced, setShowAdvanced] = useState(false);
+  const [advancedOpen, setAdvancedOpen] = useState(false);
+
   const [envVariables, setEnvVariables] = useState([{ key: '', value: '' }]);
   const [secretEnvVariables, setSecretEnvVariables] = useState([
     { key: '', value: '' },
   ]);
   const [entrypoint, setEntrypoint] = useState(['']);
   const [args, setArgs] = useState(['']);
+
   const [imageMode, setImageMode] = useState('builtin');
   const [autoOllamaKey, setAutoOllamaKey] = useState('');
+
   const customSecretEnvRef = useRef(null);
   const customEnvRef = useRef(null);
   const customImageRef = useRef('');
@@ -101,33 +379,46 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
   const priceSectionRef = useRef(null);
   const advancedSectionRef = useRef(null);
   const replicaRequestIdRef = useRef(0);
-  const [formDefaults, setFormDefaults] = useState({
+
+  // Form values (controlled)
+  const [values, setValues] = useState({
     resource_private_name: '',
     image_url: BUILTIN_IMAGE,
+    hardware_id: null,
     gpus_per_container: 1,
+    location_ids: [],
     replica_count: 1,
     duration_hours: 1,
     traffic_port: DEFAULT_TRAFFIC_PORT,
-    location_ids: [],
+    registry_username: '',
+    registry_secret: '',
   });
-  const [formKey, setFormKey] = useState(0);
+  const [errors, setErrors] = useState({});
   const [priceCurrency, setPriceCurrency] = useState('usdc');
-  const normalizeCurrencyValue = (value) => {
-    if (typeof value === 'string') return value.toLowerCase();
-    if (value && typeof value === 'object') {
-      if (typeof value.value === 'string') return value.value.toLowerCase();
-      if (typeof value.target?.value === 'string') {
-        return value.target.value.toLowerCase();
-      }
-    }
-    return 'usdc';
+
+  const setField = (key) => (value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
   };
 
-  const handleCurrencyChange = (value) => {
-    const normalized = normalizeCurrencyValue(value);
-    setPriceCurrency(normalized);
+  const setNumberField = (key) => (event) => {
+    const raw = event?.target ? event.target.value : event;
+    if (raw === '' || raw === null || raw === undefined) {
+      setField(key)('');
+      return;
+    }
+    const num = Number(raw);
+    if (Number.isNaN(num)) return;
+    setField(key)(num);
   };
 
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
   const hardwareLabelMap = useMemo(() => {
     const map = {};
     hardwareTypes.forEach((hardware) => {
@@ -154,26 +445,15 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     return Number.isFinite(maxGpus) && maxGpus > 0 ? maxGpus : 1;
   };
 
-  // Form values for price calculation
-  const [selectedHardwareId, setSelectedHardwareId] = useState(null);
-  const [selectedLocationIds, setSelectedLocationIds] = useState([]);
-  const [gpusPerContainer, setGpusPerContainer] = useState(1);
-  const [durationHours, setDurationHours] = useState(1);
-  const [replicaCount, setReplicaCount] = useState(1);
-
+  // Update gpus_per_container when hardware changes
   useEffect(() => {
-    if (!selectedHardwareId) {
-      return;
-    }
-
-    const nextMaxGpus = getHardwareMaxGpus(selectedHardwareId);
-    if (gpusPerContainer !== nextMaxGpus) {
-      setGpusPerContainer(nextMaxGpus);
+    if (!values.hardware_id) return;
+    const nextMaxGpus = getHardwareMaxGpus(values.hardware_id);
+    if (values.gpus_per_container !== nextMaxGpus) {
+      setValues((prev) => ({ ...prev, gpus_per_container: nextMaxGpus }));
     }
-    if (formApi) {
-      formApi.setValue('gpus_per_container', nextMaxGpus);
-    }
-  }, [selectedHardwareId, hardwareTypes, formApi, gpusPerContainer]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values.hardware_id, hardwareTypes]);
 
   // Load initial data when modal opens
   useEffect(() => {
@@ -181,61 +461,54 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
       loadHardwareTypes();
       resetFormState();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
-  // Load available replicas when hardware or locations change
+  // Load available replicas when hardware or gpu count change
   useEffect(() => {
-    if (!visible) {
-      return;
-    }
-    if (selectedHardwareId && gpusPerContainer > 0) {
-      loadAvailableReplicas(selectedHardwareId, gpusPerContainer);
+    if (!visible) return;
+    if (values.hardware_id && values.gpus_per_container > 0) {
+      loadAvailableReplicas(values.hardware_id, values.gpus_per_container);
     }
-  }, [selectedHardwareId, gpusPerContainer, visible]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values.hardware_id, values.gpus_per_container, visible]);
 
   // Calculate price when relevant parameters change
   useEffect(() => {
-    if (!visible) {
-      return;
-    }
+    if (!visible) return;
     if (
-      selectedHardwareId &&
-      selectedLocationIds.length > 0 &&
-      gpusPerContainer > 0 &&
-      durationHours > 0 &&
-      replicaCount > 0
+      values.hardware_id &&
+      (values.location_ids || []).length > 0 &&
+      values.gpus_per_container > 0 &&
+      values.duration_hours > 0 &&
+      values.replica_count > 0
     ) {
       calculatePrice();
     } else {
       setPriceEstimation(null);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
-    selectedHardwareId,
-    selectedLocationIds,
-    gpusPerContainer,
-    durationHours,
-    replicaCount,
+    values.hardware_id,
+    values.location_ids,
+    values.gpus_per_container,
+    values.duration_hours,
+    values.replica_count,
     priceCurrency,
     visible,
   ]);
 
+  // Image mode switch
   useEffect(() => {
-    if (!visible) {
-      return;
-    }
+    if (!visible) return;
     const prevMode = prevImageModeRef.current;
-    if (prevMode === imageMode) {
-      return;
-    }
+    if (prevMode === imageMode) return;
 
     if (imageMode === 'builtin') {
       if (prevMode === 'custom') {
-        if (formApi) {
-          customImageRef.current =
-            formApi.getValue('image_url') || customImageRef.current;
-          customTrafficPortRef.current =
-            formApi.getValue('traffic_port') ?? customTrafficPortRef.current;
-        }
+        customImageRef.current = values.image_url || customImageRef.current;
+        customTrafficPortRef.current =
+          values.traffic_port ?? customTrafficPortRef.current;
         customSecretEnvRef.current = secretEnvVariables.map((item) => ({
           ...item,
         }));
@@ -245,10 +518,11 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
       setAutoOllamaKey(newKey);
       setSecretEnvVariables([{ key: 'OLLAMA_API_KEY', value: newKey }]);
       setEnvVariables([{ key: '', value: '' }]);
-      if (formApi) {
-        formApi.setValue('image_url', BUILTIN_IMAGE);
-        formApi.setValue('traffic_port', DEFAULT_TRAFFIC_PORT);
-      }
+      setValues((prev) => ({
+        ...prev,
+        image_url: BUILTIN_IMAGE,
+        traffic_port: DEFAULT_TRAFFIC_PORT,
+      }));
     } else {
       const restoredSecrets =
         customSecretEnvRef.current && customSecretEnvRef.current.length > 0
@@ -260,71 +534,65 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
           : [{ key: '', value: '' }];
       setSecretEnvVariables(restoredSecrets);
       setEnvVariables(restoredEnv);
-      if (formApi) {
-        const restoredImage = customImageRef.current || '';
-        formApi.setValue('image_url', restoredImage);
-        if (customTrafficPortRef.current) {
-          formApi.setValue('traffic_port', customTrafficPortRef.current);
-        }
-      }
+      const restoredImage = customImageRef.current || '';
+      setValues((prev) => ({
+        ...prev,
+        image_url: restoredImage,
+        traffic_port: customTrafficPortRef.current || prev.traffic_port,
+      }));
     }
 
     prevImageModeRef.current = imageMode;
-  }, [imageMode, visible, secretEnvVariables, envVariables, formApi]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [imageMode, visible]);
 
+  // Reset locations when hardware cleared
   useEffect(() => {
-    if (!visible || !formApi) {
-      return;
-    }
-    if (imageMode === 'builtin') {
-      formApi.setValue('image_url', BUILTIN_IMAGE);
-    }
-  }, [formApi, imageMode, visible]);
+    if (!visible) return;
+    if (values.hardware_id) return;
+    setLocations([]);
+    setValues((prev) => ({ ...prev, location_ids: [] }));
+    setLocationTotalAvailable(null);
+    setLoadingReplicas(false);
+    replicaRequestIdRef.current = 0;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [values.hardware_id, visible]);
 
-  useEffect(() => {
-    if (!formApi) {
-      return;
-    }
-    if (selectedHardwareId !== null && selectedHardwareId !== undefined) {
-      formApi.setValue('hardware_id', selectedHardwareId);
-    }
-  }, [formApi, selectedHardwareId]);
+  const arraysEqual = (a = [], b = []) =>
+    a.length === b.length && a.every((value, index) => value === b[index]);
 
+  // Filter location_ids to keep only locations that are still valid+available
   useEffect(() => {
-    if (!formApi) {
+    if (!visible) return;
+    if (!values.hardware_id) {
+      if ((values.location_ids || []).length > 0) {
+        setValues((prev) => ({ ...prev, location_ids: [] }));
+      }
       return;
     }
-    formApi.setValue('location_ids', selectedLocationIds);
-  }, [formApi, selectedLocationIds]);
-
-  useEffect(() => {
-    if (!visible) {
+    const validLocationIds = locations
+      .filter((location) => (Number(location.available) || 0) > 0)
+      .map((location) => location.id);
+    if (validLocationIds.length === 0) {
+      if ((values.location_ids || []).length > 0) {
+        setValues((prev) => ({ ...prev, location_ids: [] }));
+      }
       return;
     }
-    if (selectedHardwareId) {
-      return;
-    } else {
-      setLocations([]);
-      setSelectedLocationIds([]);
-      setLocationTotalAvailable(null);
-      setLoadingReplicas(false);
-      replicaRequestIdRef.current = 0;
-      if (formApi) {
-        formApi.setValue('location_ids', []);
-      }
+    if ((values.location_ids || []).length === 0) return;
+    const filteredSelection = (values.location_ids || []).filter((id) =>
+      validLocationIds.includes(id),
+    );
+    if (!arraysEqual(values.location_ids, filteredSelection)) {
+      setValues((prev) => ({ ...prev, location_ids: filteredSelection }));
     }
-  }, [selectedHardwareId, visible, formApi]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [locations, values.hardware_id, values.location_ids, visible]);
 
-  const resetFormState = () => {
+  function resetFormState() {
     const randomName = `deployment-${Math.random().toString(36).slice(2, 8)}`;
     const generatedKey = generateRandomKey();
 
-    setSelectedHardwareId(null);
-    setSelectedLocationIds([]);
-    setGpusPerContainer(1);
-    setDurationHours(1);
-    setReplicaCount(1);
-    setPriceEstimation(null);
     setLocations([]);
     setLocationTotalAvailable(null);
     setHardwareTotalAvailable(null);
@@ -332,7 +600,7 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     setSecretEnvVariables([{ key: 'OLLAMA_API_KEY', value: generatedKey }]);
     setEntrypoint(['']);
     setArgs(['']);
-    setShowAdvanced(false);
+    setAdvancedOpen(false);
     setImageMode('builtin');
     setAutoOllamaKey(generatedKey);
     customSecretEnvRef.current = null;
@@ -340,23 +608,24 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     customImageRef.current = '';
     customTrafficPortRef.current = DEFAULT_TRAFFIC_PORT;
     prevImageModeRef.current = 'builtin';
-    setFormDefaults({
+    setPriceCurrency('usdc');
+    setPriceEstimation(null);
+    setErrors({});
+    setValues({
       resource_private_name: randomName,
       image_url: BUILTIN_IMAGE,
+      hardware_id: null,
       gpus_per_container: 1,
+      location_ids: [],
       replica_count: 1,
       duration_hours: 1,
       traffic_port: DEFAULT_TRAFFIC_PORT,
-      location_ids: [],
+      registry_username: '',
+      registry_secret: '',
     });
-    setFormKey((prev) => prev + 1);
-    setPriceCurrency('usdc');
-  };
-
-  const arraysEqual = (a = [], b = []) =>
-    a.length === b.length && a.every((value, index) => value === b[index]);
+  }
 
-  const loadHardwareTypes = async () => {
+  async function loadHardwareTypes() {
     try {
       setLoadingHardware(true);
       const response = await API.get('/api/deployments/hardware-types');
@@ -406,9 +675,9 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     } finally {
       setLoadingHardware(false);
     }
-  };
+  }
 
-  const loadAvailableReplicas = async (hardwareId, gpuCount) => {
+  async function loadAvailableReplicas(hardwareId, gpuCount) {
     if (!hardwareId || !gpuCount) {
       setLocations([]);
       setLocationTotalAvailable(null);
@@ -427,19 +696,14 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
         `/api/deployments/available-replicas?hardware_id=${hardwareId}&gpu_count=${gpuCount}`,
       );
 
-      if (replicaRequestIdRef.current !== requestId) {
-        return;
-      }
+      if (replicaRequestIdRef.current !== requestId) return;
 
       if (response.data.success) {
         const replicasList = response.data.data?.replicas || [];
-
         const nextLocationsMap = new Map();
         replicasList.forEach((replica) => {
           const rawId = replica?.location_id ?? replica?.location?.id;
-          if (rawId === null || rawId === undefined) {
-            return;
-          }
+          if (rawId === null || rawId === undefined) return;
           const id = rawId;
           const mapKey = String(rawId);
           const existing = nextLocationsMap.get(mapKey) || null;
@@ -459,7 +723,6 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
             existing.available += available;
             return;
           }
-
           nextLocationsMap.set(mapKey, {
             id,
             name: String(name),
@@ -501,21 +764,21 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
         setLoadingReplicas(false);
       }
     }
-  };
+  }
 
-  const calculatePrice = async () => {
+  async function calculatePrice() {
     try {
       setLoadingPrice(true);
       const requestData = {
-        location_ids: selectedLocationIds,
-        hardware_id: selectedHardwareId,
-        gpus_per_container: gpusPerContainer,
-        duration_hours: durationHours,
-        replica_count: replicaCount,
+        location_ids: values.location_ids,
+        hardware_id: values.hardware_id,
+        gpus_per_container: values.gpus_per_container,
+        duration_hours: values.duration_hours,
+        replica_count: values.replica_count,
         currency: priceCurrency?.toLowerCase?.() || priceCurrency,
         duration_type: 'hour',
-        duration_qty: durationHours,
-        hardware_qty: gpusPerContainer,
+        duration_qty: values.duration_hours,
+        hardware_qty: values.gpus_per_container,
       };
 
       const response = await API.post(
@@ -534,25 +797,38 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     } finally {
       setLoadingPrice(false);
     }
+  }
+
+  const validate = () => {
+    const next = {};
+    if (!values.resource_private_name?.trim())
+      next.resource_private_name = t('请输入容器名称');
+    if (!values.image_url?.trim()) next.image_url = t('请输入镜像地址');
+    if (!values.hardware_id) next.hardware_id = t('请选择硬件类型');
+    if ((values.location_ids || []).length === 0)
+      next.location_ids = t('请选择至少一个部署位置');
+    if (!values.replica_count || values.replica_count < 1)
+      next.replica_count = t('请输入副本数量');
+    if (!values.duration_hours || values.duration_hours < 1)
+      next.duration_hours = t('请输入运行时长');
+    setErrors(next);
+    return Object.keys(next).length === 0;
   };
 
-  const handleSubmit = async (values) => {
+  async function handleSubmit() {
+    if (!validate()) return;
+
     try {
       setSubmitting(true);
 
-      // Prepare environment variables
       const envVars = {};
       envVariables.forEach((env) => {
-        if (env.key && env.value) {
-          envVars[env.key] = env.value;
-        }
+        if (env.key && env.value) envVars[env.key] = env.value;
       });
 
       const secretEnvVars = {};
       secretEnvVariables.forEach((env) => {
-        if (env.key && env.value) {
-          secretEnvVars[env.key] = env.value;
-        }
+        if (env.key && env.value) secretEnvVars[env.key] = env.value;
       });
 
       if (imageMode === 'builtin') {
@@ -563,7 +839,6 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
         }
       }
 
-      // Prepare entrypoint and args
       const cleanEntrypoint = entrypoint.filter((item) => item.trim() !== '');
       const cleanArgs = args.filter((item) => item.trim() !== '');
 
@@ -576,7 +851,7 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
       const requestData = {
         resource_private_name: values.resource_private_name,
         duration_hours: values.duration_hours,
-        gpus_per_container: gpusPerContainer,
+        gpus_per_container: values.gpus_per_container,
         hardware_id: values.hardware_id,
         location_ids: values.location_ids,
         container_config: {
@@ -608,8 +883,9 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     } finally {
       setSubmitting(false);
     }
-  };
+  }
 
+  // Env variable / array helpers
   const handleAddEnvVariable = (type) => {
     if (type === 'env') {
       setEnvVariables([...envVariables, { key: '', value: '' }]);
@@ -676,75 +952,44 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     }
   };
 
-  useEffect(() => {
-    if (!visible) {
-      return;
-    }
-
-    if (!selectedHardwareId) {
-      if (selectedLocationIds.length > 0) {
-        setSelectedLocationIds([]);
-        if (formApi) {
-          formApi.setValue('location_ids', []);
-        }
-      }
-      return;
-    }
-
-    const validLocationIds = locations
-      .filter((location) => (Number(location.available) || 0) > 0)
-      .map((location) => location.id);
-
-    if (validLocationIds.length === 0) {
-      if (selectedLocationIds.length > 0) {
-        setSelectedLocationIds([]);
-        if (formApi) {
-          formApi.setValue('location_ids', []);
-        }
-      }
-      return;
-    }
-
-    if (selectedLocationIds.length === 0) {
-      return;
-    }
-
-    const filteredSelection = selectedLocationIds.filter((id) =>
-      validLocationIds.includes(id),
-    );
-
-    if (!arraysEqual(selectedLocationIds, filteredSelection)) {
-      setSelectedLocationIds(filteredSelection);
-      if (formApi) {
-        formApi.setValue('location_ids', filteredSelection);
-      }
-    }
-  }, [locations, selectedHardwareId, selectedLocationIds, visible, formApi]);
-
   const maxAvailableReplicas = useMemo(() => {
-    if (!selectedLocationIds.length) return 0;
-
+    if (!(values.location_ids || []).length) return 0;
     return locations
-      .filter((location) => selectedLocationIds.includes(location.id))
+      .filter((location) => values.location_ids.includes(location.id))
       .reduce((total, location) => {
         const availableValue = Number(location.available);
         return total + (Number.isNaN(availableValue) ? 0 : availableValue);
       }, 0);
-  }, [selectedLocationIds, locations]);
+  }, [values.location_ids, locations]);
+
+  // Clamp replica_count to max available
+  useEffect(() => {
+    if (!visible) return;
+    if (
+      maxAvailableReplicas > 0 &&
+      values.replica_count > maxAvailableReplicas
+    ) {
+      setValues((prev) => ({
+        ...prev,
+        replica_count: maxAvailableReplicas,
+      }));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [maxAvailableReplicas, values.replica_count, visible]);
 
   const isPriceReady = useMemo(
     () =>
-      selectedHardwareId &&
-      selectedLocationIds.length > 0 &&
-      gpusPerContainer > 0 &&
-      durationHours > 0 &&
-      replicaCount > 0,
+      values.hardware_id &&
+      (values.location_ids || []).length > 0 &&
+      values.gpus_per_container > 0 &&
+      values.duration_hours > 0 &&
+      values.replica_count > 0,
     [
-      selectedHardwareId,
-      selectedLocationIds,
-      gpusPerContainer,
-      durationHours,
-      replicaCount,
+      values.hardware_id,
+      values.location_ids,
+      values.gpus_per_container,
+      values.duration_hours,
+      values.replica_count,
     ],
   );
 
@@ -753,16 +998,16 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     priceCurrency ||
     ''
   ).toUpperCase();
-  const selectedHardwareLabel = selectedHardwareId
-    ? hardwareLabelMap[selectedHardwareId]
+  const selectedHardwareLabel = values.hardware_id
+    ? hardwareLabelMap[values.hardware_id]
     : '';
-  const selectedLocationNames = selectedLocationIds
+  const selectedLocationNames = (values.location_ids || [])
     .map((id) => locationLabelMap[id])
     .filter(Boolean);
   const totalGpuHours =
-    Number(gpusPerContainer || 0) *
-    Number(replicaCount || 0) *
-    Number(durationHours || 0);
+    Number(values.gpus_per_container || 0) *
+    Number(values.replica_count || 0) *
+    Number(values.duration_hours || 0);
   const priceSummaryItems = [
     {
       key: 'hardware',
@@ -779,17 +1024,17 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     {
       key: 'replicas',
       label: t('副本数量'),
-      value: (replicaCount ?? 0).toString(),
+      value: (values.replica_count ?? 0).toString(),
     },
     {
       key: 'gpus',
       label: t('最大GPU数量'),
-      value: (gpusPerContainer ?? 0).toString(),
+      value: (values.gpus_per_container ?? 0).toString(),
     },
     {
       key: 'duration',
       label: t('运行时长（小时）'),
-      value: durationHours ? durationHours.toString() : '0',
+      value: values.duration_hours ? values.duration_hours.toString() : '0',
     },
     {
       key: 'gpu-hours',
@@ -804,706 +1049,840 @@ const CreateDeploymentModal = ({ visible, onCancel, onSuccess, t }) => {
     }
   };
 
+  const hardwareOptions = useMemo(
+    () =>
+      hardwareTypes.map((hardware) => {
+        const displayName = hardware.brand_name
+          ? `${hardware.brand_name} ${hardware.name}`.trim()
+          : hardware.name;
+        return {
+          value: hardware.id,
+          label: displayName,
+          _data: hardware,
+        };
+      }),
+    [hardwareTypes],
+  );
+
+  const locationOptions = useMemo(
+    () =>
+      locations.map((location) => {
+        const numeric = Number(location.available);
+        const availableCount = Number.isNaN(numeric) ? 0 : numeric;
+        return {
+          value: location.id,
+          label: location.name,
+          disabled: availableCount === 0,
+          _data: { ...location, availableCount },
+        };
+      }),
+    [locations],
+  );
+
+  // ESC-to-close (only when visible and not currently submitting)
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') onCancel?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [visible, onCancel]);
+
+  // ----------------------------- render -----------------------------
+
+  const renderHardwareItem = (option) => {
+    const hardware = option._data;
+    const availableCount = Number(hardware.available_count) || 0;
+    return (
+      <div className='flex flex-col gap-1'>
+        <span className='text-sm font-semibold'>{option.label}</span>
+        <div className='flex items-center gap-2 text-xs text-muted'>
+          <span>
+            {t('最大GPU数量')}: {hardware.max_gpus}
+          </span>
+          <StatusChip
+            tone={availableCount > 0 ? 'green' : 'red'}
+            size='xs'
+          >
+            {t('可用数量')}: {availableCount}
+          </StatusChip>
+        </div>
+      </div>
+    );
+  };
+
+  const renderLocationItem = (option) => {
+    const location = option._data;
+    const availableCount = location.availableCount;
+    const locationLabel =
+      location.region ||
+      location.country ||
+      (location.iso2 ? location.iso2.toUpperCase() : '') ||
+      location.code ||
+      '';
+    return (
+      <div className='flex flex-col gap-1'>
+        <div className='flex items-center gap-2'>
+          <span className='text-sm font-semibold'>{location.name}</span>
+          {locationLabel ? (
+            <StatusChip tone='blue' size='xs'>
+              {locationLabel}
+            </StatusChip>
+          ) : null}
+        </div>
+        <span
+          className={`text-xs ${
+            availableCount > 0 ? 'text-success' : 'text-danger'
+          }`}
+        >
+          {t('可用数量')}: {availableCount}
+        </span>
+      </div>
+    );
+  };
+
   const priceUnavailableContent = (
-    <div style={{ marginTop: 12 }}>
+    <div className='mt-3'>
       {loadingPrice ? (
-        <Space spacing={8} align='center'>
-          <Spin size='small' />
-          <Text size='small' type='tertiary'>
-            {t('价格计算中...')}
-          </Text>
-        </Space>
+        <div className='inline-flex items-center gap-2'>
+          <Spinner size='sm' />
+          <span className='text-xs text-muted'>{t('价格计算中...')}</span>
+        </div>
       ) : (
-        <Text size='small' type='tertiary'>
+        <span className='text-xs text-muted'>
           {isPriceReady
             ? t('价格暂时不可用，请稍后重试')
             : t('完成硬件类型、部署位置、副本数量等配置后，将自动计算价格')}
-        </Text>
+        </span>
       )}
     </div>
   );
 
-  useEffect(() => {
-    if (!visible || !formApi) {
-      return;
-    }
-    if (maxAvailableReplicas > 0 && replicaCount > maxAvailableReplicas) {
-      setReplicaCount(maxAvailableReplicas);
-      formApi.setValue('replica_count', maxAvailableReplicas);
-    }
-  }, [maxAvailableReplicas, replicaCount, visible, formApi]);
-
   return (
-    <Modal
-      title={t('新建容器部署')}
-      visible={visible}
-      onCancel={onCancel}
-      onOk={() => formApi?.submitForm()}
-      okText={t('创建')}
-      cancelText={t('取消')}
-      width={800}
-      confirmLoading={submitting}
-      style={{ top: 20 }}
-    >
-      <Form
-        key={formKey}
-        initValues={formDefaults}
-        getFormApi={setFormApi}
-        onSubmit={handleSubmit}
-        style={{ maxHeight: '70vh', overflowY: 'auto' }}
-        labelPosition='top'
-      >
-        <Space
-          wrap
-          spacing={8}
-          style={{ justifyContent: 'flex-end', width: '100%', marginBottom: 8 }}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer
+          size='4xl'
+          placement='center'
+          className='max-w-[95vw]'
         >
-          <Button
-            size='small'
-            theme='borderless'
-            type='tertiary'
-            onClick={() => scrollToSection(basicSectionRef)}
-          >
-            {t('部署配置')}
-          </Button>
-          <Button
-            size='small'
-            theme='borderless'
-            type='tertiary'
-            onClick={() => scrollToSection(priceSectionRef)}
-          >
-            {t('价格预估')}
-          </Button>
-          <Button
-            size='small'
-            theme='borderless'
-            type='tertiary'
-            onClick={() => scrollToSection(advancedSectionRef)}
-          >
-            {t('高级配置')}
-          </Button>
-        </Space>
-
-        <div ref={basicSectionRef}>
-          <Card className='mb-4'>
-            <Title heading={6}>{t('部署配置')}</Title>
-
-            <Form.Input
-              field='resource_private_name'
-              label={t('容器名称')}
-              placeholder={t('请输入容器名称')}
-              rules={[{ required: true, message: t('请输入容器名称') }]}
-            />
-
-            <div className='mt-2'>
-              <Text strong>{t('镜像选择')}</Text>
-              <div style={{ marginTop: 8 }}>
-                <RadioGroup
-                  type='button'
-                  value={imageMode}
-                  onChange={(value) =>
-                    setImageMode(value?.target?.value ?? value)
-                  }
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <span>{t('新建容器部署')}</span>
+            </ModalHeader>
+            <ModalBody className='max-h-[70vh] overflow-y-auto px-6 py-5'>
+              {/* Quick nav */}
+              <div className='mb-3 flex flex-wrap items-center justify-end gap-2'>
+                <Button
+                  size='sm'
+                  variant='light'
+                  onPress={() => scrollToSection(basicSectionRef)}
                 >
-                  <Radio value='builtin'>{t('内置 Ollama 镜像')}</Radio>
-                  <Radio value='custom'>{t('自定义镜像')}</Radio>
-                </RadioGroup>
-              </div>
-            </div>
-
-            <Form.Input
-              field='image_url'
-              label={t('镜像地址')}
-              placeholder={t('例如：nginx:latest')}
-              rules={[{ required: true, message: t('请输入镜像地址') }]}
-              disabled={imageMode === 'builtin'}
-              onChange={(value) => {
-                if (imageMode === 'custom') {
-                  customImageRef.current = value;
-                }
-              }}
-            />
-
-            {imageMode === 'builtin' && (
-              <Space align='center' spacing={8} className='mt-2'>
-                <Text size='small' type='tertiary'>
-                  {t('系统已为该部署准备 Ollama 镜像与随机 API Key')}
-                </Text>
-                <Input
-                  readOnly
-                  value={autoOllamaKey}
-                  size='small'
-                  style={{ width: 220 }}
-                />
+                  {t('部署配置')}
+                </Button>
                 <Button
-                  icon={<IconCopy />}
-                  size='small'
-                  theme='borderless'
-                  onClick={async () => {
-                    if (!autoOllamaKey) {
-                      return;
-                    }
-                    const copied = await copy(autoOllamaKey);
-                    if (copied) {
-                      showSuccess(t('已复制自动生成的 API Key'));
-                    } else {
-                      showError(t('复制失败，请手动选择文本复制'));
-                    }
-                  }}
+                  size='sm'
+                  variant='light'
+                  onPress={() => scrollToSection(priceSectionRef)}
                 >
-                  {t('复制')}
+                  {t('价格预估')}
                 </Button>
-              </Space>
-            )}
-
-            <Row gutter={16}>
-              <Col xs={24} md={12}>
-                <Form.Select
-                  field='hardware_id'
-                  label={t('硬件类型')}
-                  placeholder={t('选择硬件类型')}
-                  loading={loadingHardware}
-                  rules={[{ required: true, message: t('请选择硬件类型') }]}
-                  onChange={(value) => {
-                    const nextMaxGpus = getHardwareMaxGpus(value);
-                    setSelectedHardwareId(value);
-                    setGpusPerContainer(nextMaxGpus);
-                    setSelectedLocationIds([]);
-                    if (formApi) {
-                      formApi.setValue('location_ids', []);
-                      formApi.setValue('gpus_per_container', nextMaxGpus);
-                    }
-                  }}
-                  style={{ width: '100%' }}
-                  dropdownStyle={{ maxHeight: 360, overflowY: 'auto' }}
-                  renderSelectedItem={(optionNode) =>
-                    optionNode
-                      ? hardwareLabelMap[optionNode?.value] ||
-                        optionNode?.label ||
-                        optionNode?.value ||
-                        ''
-                      : ''
-                  }
+                <Button
+                  size='sm'
+                  variant='light'
+                  onPress={() => scrollToSection(advancedSectionRef)}
                 >
-                  {hardwareTypes.map((hardware) => {
-                    const displayName = hardware.brand_name
-                      ? `${hardware.brand_name} ${hardware.name}`.trim()
-                      : hardware.name;
-                    const availableCount =
-                      typeof hardware.available_count === 'number'
-                        ? hardware.available_count
-                        : 0;
-                    const hasAvailability = availableCount > 0;
-
-                    return (
-                      <Option key={hardware.id} value={hardware.id}>
-                        <div className='flex flex-col gap-1'>
-                          <Text strong>{displayName}</Text>
-                          <div className='flex items-center gap-2 text-xs text-[var(--semi-color-text-2)]'>
-                            <span>
-                              {t('最大GPU数量')}: {hardware.max_gpus}
-                            </span>
-                            <Tag
-                              color={hasAvailability ? 'green' : 'red'}
-                              size='small'
-                            >
-                              {t('可用数量')}: {availableCount}
-                            </Tag>
-                          </div>
-                        </div>
-                      </Option>
-                    );
-                  })}
-                </Form.Select>
-              </Col>
-              <Col xs={24} md={12}>
-                <Form.InputNumber
-                  field='gpus_per_container'
-                  label={t('最大GPU数量')}
-                  placeholder={1}
-                  min={1}
-                  max={getHardwareMaxGpus(selectedHardwareId)}
-                  step={1}
-                  disabled
-                  style={{ width: '100%' }}
-                />
-              </Col>
-            </Row>
-
-            {typeof hardwareTotalAvailable === 'number' && (
-              <Text size='small' type='tertiary'>
-                {t('全部硬件总可用资源')}: {hardwareTotalAvailable}
-              </Text>
-            )}
+                  {t('高级配置')}
+                </Button>
+              </div>
 
-            <Form.Select
-              field='location_ids'
-              label={
-                <Space>
-                  {t('部署位置')}
-                  {loadingReplicas && <Spin size='small' />}
-                </Space>
-              }
-              placeholder={
-                !selectedHardwareId
-                  ? t('请先选择硬件类型')
-                  : loadingReplicas
-                    ? t('正在加载可用部署位置...')
-                    : t('选择部署位置（可多选）')
-              }
-              multiple
-              loading={loadingReplicas}
-              disabled={!selectedHardwareId || loadingReplicas}
-              rules={[{ required: true, message: t('请选择至少一个部署位置') }]}
-              onChange={(value) => setSelectedLocationIds(value)}
-              style={{ width: '100%' }}
-              dropdownStyle={{ maxHeight: 360, overflowY: 'auto' }}
-              renderSelectedItem={(optionNode) => ({
-                isRenderInTag: true,
-                content: !optionNode
-                  ? ''
-                  : loadingReplicas
-                    ? t('部署位置加载中...')
-                    : locationLabelMap[optionNode?.value] ||
-                      optionNode?.label ||
-                      optionNode?.value ||
-                      '',
-              })}
-            >
-              {locations.map((location) => {
-                const numeric = Number(location.available);
-                const availableCount = Number.isNaN(numeric) ? 0 : numeric;
-                const locationLabel =
-                  location.region ||
-                  location.country ||
-                  (location.iso2 ? location.iso2.toUpperCase() : '') ||
-                  location.code ||
-                  '';
-                const disableOption = availableCount === 0;
+              {/* 部署配置 */}
+              <div ref={basicSectionRef} className='mb-4'>
+                <Card>
+                  <Card.Content className='space-y-4 p-5'>
+                    <h6 className='m-0 text-base font-semibold text-foreground'>
+                      {t('部署配置')}
+                    </h6>
+
+                    <div className='space-y-2'>
+                      <FieldLabel required>{t('容器名称')}</FieldLabel>
+                      <input
+                        type='text'
+                        value={values.resource_private_name || ''}
+                        onChange={(event) =>
+                          setField('resource_private_name')(
+                            event.target.value,
+                          )
+                        }
+                        placeholder={t('请输入容器名称')}
+                        className={inputClass}
+                      />
+                      <FieldError>{errors.resource_private_name}</FieldError>
+                    </div>
 
-                return (
-                  <Option
-                    key={location.id}
-                    value={location.id}
-                    disabled={disableOption}
-                  >
-                    <div className='flex flex-col gap-1'>
-                      <div className='flex items-center gap-2'>
-                        <Text strong>{location.name}</Text>
-                        {locationLabel && (
-                          <Tag color='blue' size='small'>
-                            {locationLabel}
-                          </Tag>
-                        )}
+                    <div className='space-y-2'>
+                      <FieldLabel>{t('镜像选择')}</FieldLabel>
+                      <div className='inline-flex overflow-hidden rounded-xl border border-border'>
+                        {[
+                          { value: 'builtin', label: t('内置 Ollama 镜像') },
+                          { value: 'custom', label: t('自定义镜像') },
+                        ].map((mode) => {
+                          const active = mode.value === imageMode;
+                          return (
+                            <button
+                              key={mode.value}
+                              type='button'
+                              onClick={() => setImageMode(mode.value)}
+                              className={`px-4 py-1.5 text-sm font-medium transition-colors ${
+                                active
+                                  ? 'bg-foreground text-background'
+                                  : 'bg-background text-muted hover:bg-surface-secondary'
+                              }`}
+                            >
+                              {mode.label}
+                            </button>
+                          );
+                        })}
                       </div>
-                      <Text
-                        size='small'
-                        type={availableCount > 0 ? 'success' : 'danger'}
-                      >
-                        {t('可用数量')}: {availableCount}
-                      </Text>
                     </div>
-                  </Option>
-                );
-              })}
-            </Form.Select>
 
-            {typeof locationTotalAvailable === 'number' && (
-              <Text size='small' type='tertiary'>
-                {t('全部地区总可用资源')}: {locationTotalAvailable}
-              </Text>
-            )}
+                    <div className='space-y-2'>
+                      <FieldLabel required>{t('镜像地址')}</FieldLabel>
+                      <input
+                        type='text'
+                        value={values.image_url || ''}
+                        onChange={(event) => {
+                          const v = event.target.value;
+                          setField('image_url')(v);
+                          if (imageMode === 'custom') customImageRef.current = v;
+                        }}
+                        placeholder={t('例如：nginx:latest')}
+                        disabled={imageMode === 'builtin'}
+                        className={inputClass}
+                      />
+                      <FieldError>{errors.image_url}</FieldError>
+                    </div>
 
-            <Row gutter={16}>
-              <Col xs={24} md={8}>
-                <Form.InputNumber
-                  field='replica_count'
-                  label={t('副本数量')}
-                  placeholder={1}
-                  min={1}
-                  max={maxAvailableReplicas || 100}
-                  rules={[{ required: true, message: t('请输入副本数量') }]}
-                  onChange={(value) => setReplicaCount(value)}
-                  style={{ width: '100%' }}
-                />
-                {maxAvailableReplicas > 0 && (
-                  <Text size='small' type='tertiary'>
-                    {t('最大可用')}: {maxAvailableReplicas}
-                  </Text>
-                )}
-              </Col>
-              <Col xs={24} md={8}>
-                <Form.InputNumber
-                  field='duration_hours'
-                  label={t('运行时长（小时）')}
-                  placeholder={1}
-                  min={1}
-                  max={8760} // 1 year
-                  rules={[{ required: true, message: t('请输入运行时长') }]}
-                  onChange={(value) => setDurationHours(value)}
-                  style={{ width: '100%' }}
-                />
-              </Col>
-              <Col xs={24} md={8}>
-                <Form.InputNumber
-                  field='traffic_port'
-                  label={
-                    <Space>
-                      {t('流量端口')}
-                      <Tooltip content={t('容器对外服务的端口号，可选')}>
-                        <IconHelpCircle />
-                      </Tooltip>
-                    </Space>
-                  }
-                  placeholder={DEFAULT_TRAFFIC_PORT}
-                  min={1}
-                  max={65535}
-                  style={{ width: '100%' }}
-                  disabled={imageMode === 'builtin'}
-                />
-              </Col>
-            </Row>
-
-            <div ref={advancedSectionRef}>
-              <Collapse className='mt-4'>
-                <Collapse.Panel header={t('高级配置')} itemKey='advanced'>
-                  <Card>
-                    <Title heading={6}>{t('镜像仓库配置')}</Title>
-                    <Row gutter={16}>
-                      <Col span={12}>
-                        <Form.Input
-                          field='registry_username'
-                          label={t('镜像仓库用户名')}
-                          placeholder={t('私有镜像仓库的用户名')}
+                    {imageMode === 'builtin' && (
+                      <div className='flex flex-wrap items-center gap-2'>
+                        <span className='text-xs text-muted'>
+                          {t('系统已为该部署准备 Ollama 镜像与随机 API Key')}
+                        </span>
+                        <input
+                          type='text'
+                          readOnly
+                          value={autoOllamaKey}
+                          className={`${inputClassSm} w-[220px]`}
                         />
-                      </Col>
-                      <Col span={12}>
-                        <Form.Input
-                          field='registry_secret'
-                          label={t('镜像仓库密码')}
-                          type='password'
-                          placeholder={t('私有镜像仓库的密码')}
+                        <Button
+                          size='sm'
+                          variant='light'
+                          startContent={<Copy size={14} />}
+                          onPress={async () => {
+                            if (!autoOllamaKey) return;
+                            const copied = await copy(autoOllamaKey);
+                            if (copied) showSuccess(t('已复制自动生成的 API Key'));
+                            else showError(t('复制失败，请手动选择文本复制'));
+                          }}
+                        >
+                          {t('复制')}
+                        </Button>
+                      </div>
+                    )}
+
+                    <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                      <div className='space-y-2'>
+                        <FieldLabel required>{t('硬件类型')}</FieldLabel>
+                        <RichSingleSelect
+                          value={values.hardware_id}
+                          options={hardwareOptions}
+                          placeholder={t('选择硬件类型')}
+                          loading={loadingHardware}
+                          onChange={(value) => {
+                            const nextMaxGpus = getHardwareMaxGpus(value);
+                            setValues((prev) => ({
+                              ...prev,
+                              hardware_id: value,
+                              gpus_per_container: nextMaxGpus,
+                              location_ids: [],
+                            }));
+                          }}
+                          renderItem={renderHardwareItem}
+                          renderSelected={(option) =>
+                            hardwareLabelMap[option.value] ||
+                            option.label ||
+                            String(option.value)
+                          }
                         />
-                      </Col>
-                    </Row>
-                  </Card>
-
-                  <Divider />
+                        <FieldError>{errors.hardware_id}</FieldError>
+                      </div>
+                      <div className='space-y-2'>
+                        <FieldLabel>{t('最大GPU数量')}</FieldLabel>
+                        <input
+                          type='number'
+                          min={1}
+                          max={getHardwareMaxGpus(values.hardware_id)}
+                          step={1}
+                          value={values.gpus_per_container ?? 1}
+                          disabled
+                          className={inputClass}
+                        />
+                      </div>
+                    </div>
 
-                  <Card>
-                    <Title heading={6}>{t('容器启动配置')}</Title>
+                    {typeof hardwareTotalAvailable === 'number' && (
+                      <div className='text-xs text-muted'>
+                        {t('全部硬件总可用资源')}: {hardwareTotalAvailable}
+                      </div>
+                    )}
+
+                    <div className='space-y-2'>
+                      <FieldLabel required>
+                        <span className='inline-flex items-center gap-2'>
+                          {t('部署位置')}
+                          {loadingReplicas ? <Spinner size='sm' /> : null}
+                        </span>
+                      </FieldLabel>
+                      <RichMultiSelect
+                        value={values.location_ids}
+                        options={locationOptions}
+                        placeholder={
+                          !values.hardware_id
+                            ? t('请先选择硬件类型')
+                            : loadingReplicas
+                              ? t('正在加载可用部署位置...')
+                              : t('选择部署位置（可多选）')
+                        }
+                        loading={loadingReplicas}
+                        disabled={!values.hardware_id || loadingReplicas}
+                        onChange={setField('location_ids')}
+                        renderItem={renderLocationItem}
+                        renderSelectedLabel={(option, v) =>
+                          loadingReplicas
+                            ? t('部署位置加载中...')
+                            : option?.label ||
+                              locationLabelMap[v] ||
+                              String(v)
+                        }
+                      />
+                      <FieldError>{errors.location_ids}</FieldError>
+                    </div>
 
-                    <div style={{ marginBottom: 16 }}>
-                      <Text strong>{t('启动命令 (Entrypoint)')}</Text>
-                      {entrypoint.map((cmd, index) => (
-                        <div
-                          key={index}
-                          style={{ display: 'flex', marginTop: 8 }}
-                        >
-                          <Input
-                            value={cmd}
-                            placeholder={t('例如：/bin/bash')}
-                            onChange={(value) =>
-                              handleArrayFieldChange(index, value, 'entrypoint')
-                            }
-                            style={{ flex: 1, marginRight: 8 }}
-                          />
-                          <Button
-                            icon={<IconMinus />}
-                            onClick={() =>
-                              handleRemoveArrayField(index, 'entrypoint')
-                            }
-                            disabled={entrypoint.length === 1}
-                          />
-                        </div>
-                      ))}
-                      <Button
-                        icon={<IconPlus />}
-                        onClick={() => handleAddArrayField('entrypoint')}
-                        style={{ marginTop: 8 }}
-                      >
-                        {t('添加启动命令')}
-                      </Button>
+                    {typeof locationTotalAvailable === 'number' && (
+                      <div className='text-xs text-muted'>
+                        {t('全部地区总可用资源')}: {locationTotalAvailable}
+                      </div>
+                    )}
+
+                    <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+                      <div className='space-y-2'>
+                        <FieldLabel required>{t('副本数量')}</FieldLabel>
+                        <input
+                          type='number'
+                          min={1}
+                          max={maxAvailableReplicas || 100}
+                          value={values.replica_count ?? 1}
+                          onChange={setNumberField('replica_count')}
+                          className={inputClass}
+                        />
+                        {maxAvailableReplicas > 0 ? (
+                          <FieldHint>
+                            {t('最大可用')}: {maxAvailableReplicas}
+                          </FieldHint>
+                        ) : null}
+                        <FieldError>{errors.replica_count}</FieldError>
+                      </div>
+                      <div className='space-y-2'>
+                        <FieldLabel required>
+                          {t('运行时长（小时）')}
+                        </FieldLabel>
+                        <input
+                          type='number'
+                          min={1}
+                          max={8760}
+                          value={values.duration_hours ?? 1}
+                          onChange={setNumberField('duration_hours')}
+                          className={inputClass}
+                        />
+                        <FieldError>{errors.duration_hours}</FieldError>
+                      </div>
+                      <div className='space-y-2'>
+                        <FieldLabel>
+                          <span className='inline-flex items-center gap-1'>
+                            {t('流量端口')}
+                            <Tooltip
+                              content={t('容器对外服务的端口号，可选')}
+                            >
+                              <HelpCircle size={14} className='text-muted' />
+                            </Tooltip>
+                          </span>
+                        </FieldLabel>
+                        <input
+                          type='number'
+                          min={1}
+                          max={65535}
+                          value={values.traffic_port ?? DEFAULT_TRAFFIC_PORT}
+                          onChange={setNumberField('traffic_port')}
+                          disabled={imageMode === 'builtin'}
+                          className={inputClass}
+                          placeholder={`${DEFAULT_TRAFFIC_PORT}`}
+                        />
+                      </div>
                     </div>
 
-                    <div style={{ marginBottom: 16 }}>
-                      <Text strong>{t('启动参数 (Args)')}</Text>
-                      {args.map((arg, index) => (
-                        <div
-                          key={index}
-                          style={{ display: 'flex', marginTop: 8 }}
-                        >
-                          <Input
-                            value={arg}
-                            placeholder={t('例如：-c')}
-                            onChange={(value) =>
-                              handleArrayFieldChange(index, value, 'args')
-                            }
-                            style={{ flex: 1, marginRight: 8 }}
-                          />
-                          <Button
-                            icon={<IconMinus />}
-                            onClick={() =>
-                              handleRemoveArrayField(index, 'args')
-                            }
-                            disabled={args.length === 1}
+                    {/* 高级配置 (collapsible) */}
+                    <div ref={advancedSectionRef} className='mt-4'>
+                      <details
+                        className='group rounded-xl border border-border bg-background'
+                        open={advancedOpen}
+                        onToggle={(event) =>
+                          setAdvancedOpen(event.currentTarget.open)
+                        }
+                      >
+                        <summary className='flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-foreground'>
+                          <span>{t('高级配置')}</span>
+                          <ChevronDown
+                            size={16}
+                            className='text-muted transition-transform group-open:rotate-180'
                           />
+                        </summary>
+
+                        <div className='space-y-4 border-t border-border px-3 py-3'>
+                          {/* 镜像仓库配置 */}
+                          <Card>
+                            <Card.Content className='space-y-4 p-5'>
+                              <h6 className='m-0 text-base font-semibold text-foreground'>
+                                {t('镜像仓库配置')}
+                              </h6>
+                              <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                                <div className='space-y-2'>
+                                  <FieldLabel>
+                                    {t('镜像仓库用户名')}
+                                  </FieldLabel>
+                                  <input
+                                    type='text'
+                                    value={values.registry_username || ''}
+                                    onChange={(event) =>
+                                      setField('registry_username')(
+                                        event.target.value,
+                                      )
+                                    }
+                                    placeholder={t('私有镜像仓库的用户名')}
+                                    className={inputClass}
+                                  />
+                                </div>
+                                <div className='space-y-2'>
+                                  <FieldLabel>{t('镜像仓库密码')}</FieldLabel>
+                                  <input
+                                    type='password'
+                                    value={values.registry_secret || ''}
+                                    onChange={(event) =>
+                                      setField('registry_secret')(
+                                        event.target.value,
+                                      )
+                                    }
+                                    placeholder={t('私有镜像仓库的密码')}
+                                    className={inputClass}
+                                  />
+                                </div>
+                              </div>
+                            </Card.Content>
+                          </Card>
+
+                          <div className='border-t border-border' />
+
+                          {/* 容器启动配置 */}
+                          <Card>
+                            <Card.Content className='space-y-4 p-5'>
+                              <h6 className='m-0 text-base font-semibold text-foreground'>
+                                {t('容器启动配置')}
+                              </h6>
+
+                              <div className='space-y-2'>
+                                <div className='text-sm font-medium text-foreground'>
+                                  {t('启动命令 (Entrypoint)')}
+                                </div>
+                                {entrypoint.map((cmd, index) => (
+                                  <div
+                                    key={index}
+                                    className='flex items-center gap-2'
+                                  >
+                                    <input
+                                      type='text'
+                                      value={cmd}
+                                      onChange={(event) =>
+                                        handleArrayFieldChange(
+                                          index,
+                                          event.target.value,
+                                          'entrypoint',
+                                        )
+                                      }
+                                      placeholder={t('例如：/bin/bash')}
+                                      className={inputClass}
+                                    />
+                                    <Button
+                                      isIconOnly
+                                      size='sm'
+                                      variant='flat'
+                                      isDisabled={entrypoint.length === 1}
+                                      aria-label={t('删除')}
+                                      onPress={() =>
+                                        handleRemoveArrayField(
+                                          index,
+                                          'entrypoint',
+                                        )
+                                      }
+                                    >
+                                      <Minus size={14} />
+                                    </Button>
+                                  </div>
+                                ))}
+                                <Button
+                                  size='sm'
+                                  variant='flat'
+                                  startContent={<Plus size={14} />}
+                                  onPress={() =>
+                                    handleAddArrayField('entrypoint')
+                                  }
+                                >
+                                  {t('添加启动命令')}
+                                </Button>
+                              </div>
+
+                              <div className='space-y-2'>
+                                <div className='text-sm font-medium text-foreground'>
+                                  {t('启动参数 (Args)')}
+                                </div>
+                                {args.map((arg, index) => (
+                                  <div
+                                    key={index}
+                                    className='flex items-center gap-2'
+                                  >
+                                    <input
+                                      type='text'
+                                      value={arg}
+                                      onChange={(event) =>
+                                        handleArrayFieldChange(
+                                          index,
+                                          event.target.value,
+                                          'args',
+                                        )
+                                      }
+                                      placeholder={t('例如：-c')}
+                                      className={inputClass}
+                                    />
+                                    <Button
+                                      isIconOnly
+                                      size='sm'
+                                      variant='flat'
+                                      isDisabled={args.length === 1}
+                                      aria-label={t('删除')}
+                                      onPress={() =>
+                                        handleRemoveArrayField(index, 'args')
+                                      }
+                                    >
+                                      <Minus size={14} />
+                                    </Button>
+                                  </div>
+                                ))}
+                                <Button
+                                  size='sm'
+                                  variant='flat'
+                                  startContent={<Plus size={14} />}
+                                  onPress={() => handleAddArrayField('args')}
+                                >
+                                  {t('添加启动参数')}
+                                </Button>
+                              </div>
+                            </Card.Content>
+                          </Card>
+
+                          <div className='border-t border-border' />
+
+                          {/* 环境变量 */}
+                          <Card>
+                            <Card.Content className='space-y-4 p-5'>
+                              <h6 className='m-0 text-base font-semibold text-foreground'>
+                                {t('环境变量')}
+                              </h6>
+
+                              <div className='space-y-2'>
+                                <div className='text-sm font-medium text-foreground'>
+                                  {t('普通环境变量')}
+                                </div>
+                                {envVariables.map((env, index) => (
+                                  <div
+                                    key={index}
+                                    className='grid grid-cols-12 gap-2'
+                                  >
+                                    <input
+                                      type='text'
+                                      placeholder={t('变量名')}
+                                      value={env.key}
+                                      onChange={(event) =>
+                                        handleEnvVariableChange(
+                                          index,
+                                          'key',
+                                          event.target.value,
+                                          'env',
+                                        )
+                                      }
+                                      className={`${inputClass} col-span-5`}
+                                    />
+                                    <input
+                                      type='text'
+                                      placeholder={t('变量值')}
+                                      value={env.value}
+                                      onChange={(event) =>
+                                        handleEnvVariableChange(
+                                          index,
+                                          'value',
+                                          event.target.value,
+                                          'env',
+                                        )
+                                      }
+                                      className={`${inputClass} col-span-5`}
+                                    />
+                                    <div className='col-span-2 flex items-center'>
+                                      <Button
+                                        isIconOnly
+                                        size='sm'
+                                        variant='flat'
+                                        isDisabled={envVariables.length === 1}
+                                        aria-label={t('删除')}
+                                        onPress={() =>
+                                          handleRemoveEnvVariable(
+                                            index,
+                                            'env',
+                                          )
+                                        }
+                                      >
+                                        <Minus size={14} />
+                                      </Button>
+                                    </div>
+                                  </div>
+                                ))}
+                                <Button
+                                  size='sm'
+                                  variant='flat'
+                                  startContent={<Plus size={14} />}
+                                  onPress={() =>
+                                    handleAddEnvVariable('env')
+                                  }
+                                >
+                                  {t('添加环境变量')}
+                                </Button>
+                              </div>
+
+                              <div className='space-y-2'>
+                                <div className='text-sm font-medium text-foreground'>
+                                  {t('密钥环境变量')}
+                                </div>
+                                {secretEnvVariables.map((env, index) => {
+                                  const isAutoSecret =
+                                    imageMode === 'builtin' &&
+                                    env.key === 'OLLAMA_API_KEY';
+                                  return (
+                                    <div
+                                      key={index}
+                                      className='grid grid-cols-12 gap-2'
+                                    >
+                                      <input
+                                        type='text'
+                                        placeholder={t('变量名')}
+                                        value={env.key}
+                                        onChange={(event) =>
+                                          handleEnvVariableChange(
+                                            index,
+                                            'key',
+                                            event.target.value,
+                                            'secret',
+                                          )
+                                        }
+                                        disabled={isAutoSecret}
+                                        className={`${inputClass} col-span-5`}
+                                      />
+                                      <input
+                                        type='password'
+                                        placeholder={t('变量值')}
+                                        value={env.value}
+                                        onChange={(event) =>
+                                          handleEnvVariableChange(
+                                            index,
+                                            'value',
+                                            event.target.value,
+                                            'secret',
+                                          )
+                                        }
+                                        disabled={isAutoSecret}
+                                        className={`${inputClass} col-span-5`}
+                                      />
+                                      <div className='col-span-2 flex items-center'>
+                                        <Button
+                                          isIconOnly
+                                          size='sm'
+                                          variant='flat'
+                                          isDisabled={
+                                            secretEnvVariables.length === 1 ||
+                                            isAutoSecret
+                                          }
+                                          aria-label={t('删除')}
+                                          onPress={() =>
+                                            handleRemoveEnvVariable(
+                                              index,
+                                              'secret',
+                                            )
+                                          }
+                                        >
+                                          <Minus size={14} />
+                                        </Button>
+                                      </div>
+                                    </div>
+                                  );
+                                })}
+                                <Button
+                                  size='sm'
+                                  variant='flat'
+                                  startContent={<Plus size={14} />}
+                                  onPress={() =>
+                                    handleAddEnvVariable('secret')
+                                  }
+                                >
+                                  {t('添加密钥环境变量')}
+                                </Button>
+                              </div>
+                            </Card.Content>
+                          </Card>
                         </div>
-                      ))}
-                      <Button
-                        icon={<IconPlus />}
-                        onClick={() => handleAddArrayField('args')}
-                        style={{ marginTop: 8 }}
-                      >
-                        {t('添加启动参数')}
-                      </Button>
-                    </div>
-                  </Card>
-
-                  <Divider />
-
-                  <Card>
-                    <Title heading={6}>{t('环境变量')}</Title>
-
-                    <div style={{ marginBottom: 16 }}>
-                      <Text strong>{t('普通环境变量')}</Text>
-                      {envVariables.map((env, index) => (
-                        <Row key={index} gutter={8} style={{ marginTop: 8 }}>
-                          <Col span={10}>
-                            <Input
-                              placeholder={t('变量名')}
-                              value={env.key}
-                              onChange={(value) =>
-                                handleEnvVariableChange(
-                                  index,
-                                  'key',
-                                  value,
-                                  'env',
-                                )
-                              }
-                            />
-                          </Col>
-                          <Col span={10}>
-                            <Input
-                              placeholder={t('变量值')}
-                              value={env.value}
-                              onChange={(value) =>
-                                handleEnvVariableChange(
-                                  index,
-                                  'value',
-                                  value,
-                                  'env',
-                                )
-                              }
-                            />
-                          </Col>
-                          <Col span={4}>
-                            <Button
-                              icon={<IconMinus />}
-                              onClick={() =>
-                                handleRemoveEnvVariable(index, 'env')
-                              }
-                              disabled={envVariables.length === 1}
-                            />
-                          </Col>
-                        </Row>
-                      ))}
-                      <Button
-                        icon={<IconPlus />}
-                        onClick={() => handleAddEnvVariable('env')}
-                        style={{ marginTop: 8 }}
-                      >
-                        {t('添加环境变量')}
-                      </Button>
+                      </details>
                     </div>
+                  </Card.Content>
+                </Card>
+              </div>
 
-                    <div>
-                      <Text strong>{t('密钥环境变量')}</Text>
-                      {secretEnvVariables.map((env, index) => {
-                        const isAutoSecret =
-                          imageMode === 'builtin' &&
-                          env.key === 'OLLAMA_API_KEY';
-                        return (
-                          <Row key={index} gutter={8} style={{ marginTop: 8 }}>
-                            <Col span={10}>
-                              <Input
-                                placeholder={t('变量名')}
-                                value={env.key}
-                                onChange={(value) =>
-                                  handleEnvVariableChange(
-                                    index,
-                                    'key',
-                                    value,
-                                    'secret',
-                                  )
-                                }
-                                disabled={isAutoSecret}
-                              />
-                            </Col>
-                            <Col span={10}>
-                              <Input
-                                placeholder={t('变量值')}
-                                type='password'
-                                value={env.value}
-                                onChange={(value) =>
-                                  handleEnvVariableChange(
-                                    index,
-                                    'value',
-                                    value,
-                                    'secret',
-                                  )
-                                }
-                                disabled={isAutoSecret}
-                              />
-                            </Col>
-                            <Col span={4}>
-                              <Button
-                                icon={<IconMinus />}
-                                onClick={() =>
-                                  handleRemoveEnvVariable(index, 'secret')
-                                }
-                                disabled={
-                                  secretEnvVariables.length === 1 ||
-                                  isAutoSecret
-                                }
-                              />
-                            </Col>
-                          </Row>
-                        );
-                      })}
-                      <Button
-                        icon={<IconPlus />}
-                        onClick={() => handleAddEnvVariable('secret')}
-                        style={{ marginTop: 8 }}
-                      >
-                        {t('添加密钥环境变量')}
-                      </Button>
+              {/* 价格预估 */}
+              <div ref={priceSectionRef} className='mb-4'>
+                <Card>
+                  <Card.Content className='space-y-4 p-5'>
+                    <div className='flex flex-wrap items-center justify-between gap-3'>
+                      <h6 className='m-0 text-base font-semibold text-foreground'>
+                        {t('价格预估')}
+                      </h6>
+                      <div className='flex flex-wrap items-center gap-3'>
+                        <span className='text-xs text-muted'>
+                          {t('计价币种')}
+                        </span>
+                        <div className='inline-flex overflow-hidden rounded-xl border border-border'>
+                          {[
+                            { value: 'usdc', label: 'USDC' },
+                            { value: 'iocoin', label: 'IOCOIN' },
+                          ].map((option) => {
+                            const active = option.value === priceCurrency;
+                            return (
+                              <button
+                                key={option.value}
+                                type='button'
+                                onClick={() => setPriceCurrency(option.value)}
+                                className={`px-3 py-1 text-xs font-medium transition-colors ${
+                                  active
+                                    ? 'bg-foreground text-background'
+                                    : 'bg-background text-muted hover:bg-surface-secondary'
+                                }`}
+                              >
+                                {option.label}
+                              </button>
+                            );
+                          })}
+                        </div>
+                        <StatusChip tone='blue'>{currencyLabel}</StatusChip>
+                      </div>
                     </div>
-                  </Card>
-                </Collapse.Panel>
-              </Collapse>
-            </div>
-          </Card>
-        </div>
 
-        <div ref={priceSectionRef}>
-          <Card className='mb-4'>
-            <div className='flex flex-wrap items-center justify-between gap-3'>
-              <Title heading={6} style={{ margin: 0 }}>
-                {t('价格预估')}
-              </Title>
-              <Space align='center' spacing={12} className='flex flex-wrap'>
-                <Text type='secondary' size='small'>
-                  {t('计价币种')}
-                </Text>
-                <RadioGroup
-                  type='button'
-                  value={priceCurrency}
-                  onChange={handleCurrencyChange}
-                >
-                  <Radio value='usdc'>USDC</Radio>
-                  <Radio value='iocoin'>IOCOIN</Radio>
-                </RadioGroup>
-                <Tag size='small' color='blue'>
-                  {currencyLabel}
-                </Tag>
-              </Space>
-            </div>
+                    {priceEstimation ? (
+                      <div className='flex w-full flex-col gap-4'>
+                        <div className='grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3'>
+                          <div className='flex flex-col gap-1 rounded-md border border-border bg-surface-secondary px-4 py-3'>
+                            <span className='text-xs text-muted'>
+                              {t('预估总费用')}
+                            </span>
+                            <div className='text-2xl font-semibold text-foreground'>
+                              {typeof priceEstimation.estimated_cost === 'number'
+                                ? `${priceEstimation.estimated_cost.toFixed(4)} ${currencyLabel}`
+                                : '--'}
+                            </div>
+                          </div>
+                          <div className='flex flex-col gap-1 rounded-md border border-border bg-surface-secondary px-4 py-3'>
+                            <span className='text-xs text-muted'>
+                              {t('小时费率')}
+                            </span>
+                            <span className='text-sm font-semibold text-foreground'>
+                              {typeof priceEstimation.price_breakdown?.hourly_rate ===
+                              'number'
+                                ? `${priceEstimation.price_breakdown.hourly_rate.toFixed(4)} ${currencyLabel}/h`
+                                : '--'}
+                            </span>
+                          </div>
+                          <div className='flex flex-col gap-1 rounded-md border border-border bg-surface-secondary px-4 py-3'>
+                            <span className='text-xs text-muted'>
+                              {t('计算成本')}
+                            </span>
+                            <span className='text-sm font-semibold text-foreground'>
+                              {typeof priceEstimation.price_breakdown?.compute_cost ===
+                              'number'
+                                ? `${priceEstimation.price_breakdown.compute_cost.toFixed(4)} ${currencyLabel}`
+                                : '--'}
+                            </span>
+                          </div>
+                        </div>
 
-            {priceEstimation ? (
-              <div className='mt-4 flex w-full flex-col gap-4'>
-                <div className='grid w-full gap-4 md:grid-cols-2 lg:grid-cols-3'>
-                  <div
-                    className='flex flex-col gap-1 rounded-md px-4 py-3'
-                    style={{
-                      border: '1px solid var(--semi-color-border)',
-                      backgroundColor: 'var(--semi-color-fill-0)',
-                    }}
-                  >
-                    <Text size='small' type='tertiary'>
-                      {t('预估总费用')}
-                    </Text>
-                    <div
-                      style={{
-                        fontSize: 24,
-                        fontWeight: 600,
-                        color: 'var(--semi-color-text-0)',
-                      }}
-                    >
-                      {typeof priceEstimation.estimated_cost === 'number'
-                        ? `${priceEstimation.estimated_cost.toFixed(4)} ${currencyLabel}`
-                        : '--'}
-                    </div>
-                  </div>
-                  <div
-                    className='flex flex-col gap-1 rounded-md px-4 py-3'
-                    style={{
-                      border: '1px solid var(--semi-color-border)',
-                      backgroundColor: 'var(--semi-color-fill-0)',
-                    }}
-                  >
-                    <Text size='small' type='tertiary'>
-                      {t('小时费率')}
-                    </Text>
-                    <Text strong>
-                      {typeof priceEstimation.price_breakdown?.hourly_rate ===
-                      'number'
-                        ? `${priceEstimation.price_breakdown.hourly_rate.toFixed(4)} ${currencyLabel}/h`
-                        : '--'}
-                    </Text>
-                  </div>
-                  <div
-                    className='flex flex-col gap-1 rounded-md px-4 py-3'
-                    style={{
-                      border: '1px solid var(--semi-color-border)',
-                      backgroundColor: 'var(--semi-color-fill-0)',
-                    }}
-                  >
-                    <Text size='small' type='tertiary'>
-                      {t('计算成本')}
-                    </Text>
-                    <Text strong>
-                      {typeof priceEstimation.price_breakdown?.compute_cost ===
-                      'number'
-                        ? `${priceEstimation.price_breakdown.compute_cost.toFixed(4)} ${currencyLabel}`
-                        : '--'}
-                    </Text>
-                  </div>
-                </div>
-
-                <div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-3'>
-                  {priceSummaryItems.map((item) => (
-                    <div
-                      key={item.key}
-                      className='flex items-center justify-between gap-3 rounded-md px-3 py-2'
-                      style={{
-                        border: '1px solid var(--semi-color-border)',
-                        backgroundColor: 'var(--semi-color-fill-0)',
-                      }}
-                    >
-                      <Text size='small' type='tertiary'>
-                        {item.label}
-                      </Text>
-                      <Text strong>{item.value}</Text>
-                    </div>
-                  ))}
-                </div>
+                        <div className='grid gap-3 sm:grid-cols-2 lg:grid-cols-3'>
+                          {priceSummaryItems.map((item) => (
+                            <div
+                              key={item.key}
+                              className='flex items-center justify-between gap-3 rounded-md border border-border bg-surface-secondary px-3 py-2'
+                            >
+                              <span className='text-xs text-muted'>
+                                {item.label}
+                              </span>
+                              <span className='text-sm font-semibold text-foreground'>
+                                {item.value}
+                              </span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ) : (
+                      priceUnavailableContent
+                    )}
+
+                    {priceEstimation && loadingPrice && (
+                      <div className='inline-flex items-center gap-2'>
+                        <Spinner size='sm' />
+                        <span className='text-xs text-muted'>
+                          {t('价格重新计算中...')}
+                        </span>
+                      </div>
+                    )}
+                  </Card.Content>
+                </Card>
               </div>
-            ) : (
-              priceUnavailableContent
-            )}
-
-            {priceEstimation && loadingPrice && (
-              <Space align='center' spacing={8} style={{ marginTop: 12 }}>
-                <Spin size='small' />
-                <Text size='small' type='tertiary'>
-                  {t('价格重新计算中...')}
-                </Text>
-              </Space>
-            )}
-          </Card>
-        </div>
-      </Form>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={onCancel}>
+                {t('取消')}
+              </Button>
+              <Button
+                color='primary'
+                isPending={submitting}
+                onPress={handleSubmit}
+              >
+                {t('创建')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/model-deployments/modals/EditDeploymentModal.jsx b/web/src/components/table/model-deployments/modals/EditDeploymentModal.jsx
index 4d95b91ac3f..04f49f94532 100644
--- a/web/src/components/table/model-deployments/modals/EditDeploymentModal.jsx
+++ b/web/src/components/table/model-deployments/modals/EditDeploymentModal.jsx
@@ -17,29 +17,28 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
-  SideSheet,
-  Form,
   Button,
-  Space,
-  Spin,
-  Typography,
   Card,
-  InputNumber,
-  Select,
   Input,
-  Row,
-  Col,
-  Divider,
-  Tag,
-} from '@douyinfe/semi-ui';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import { Save, X, Server } from 'lucide-react';
 import { API, showError, showSuccess } from '../../../../helpers';
 import { useTranslation } from 'react-i18next';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 
-const { Text, Title } = Typography;
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+const NAME_PATTERN = /^[a-zA-Z0-9-_\u4e00-\u9fa5]+$/;
 
 const EditDeploymentModal = ({
   refresh,
@@ -48,193 +47,161 @@ const EditDeploymentModal = ({
   handleClose,
 }) => {
   const { t } = useTranslation();
-  const isMobile = useIsMobile();
   const [loading, setLoading] = useState(false);
-  const [models, setModels] = useState([]);
-  const [loadingModels, setLoadingModels] = useState(false);
-  const formRef = useRef();
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
 
   const isEdit = Boolean(editingDeployment?.id);
   const title = t('重命名部署');
 
-  // Resource configuration options
-  const cpuOptions = [
-    { label: '0.5 Core', value: '0.5' },
-    { label: '1 Core', value: '1' },
-    { label: '2 Cores', value: '2' },
-    { label: '4 Cores', value: '4' },
-    { label: '8 Cores', value: '8' },
-  ];
-
-  const memoryOptions = [
-    { label: '1GB', value: '1Gi' },
-    { label: '2GB', value: '2Gi' },
-    { label: '4GB', value: '4Gi' },
-    { label: '8GB', value: '8Gi' },
-    { label: '16GB', value: '16Gi' },
-    { label: '32GB', value: '32Gi' },
-  ];
-
-  const gpuOptions = [
-    { label: t('无GPU'), value: '' },
-    { label: '1 GPU', value: '1' },
-    { label: '2 GPUs', value: '2' },
-    { label: '4 GPUs', value: '4' },
-  ];
-
-  // Load available models
-  const loadModels = async () => {
-    setLoadingModels(true);
-    try {
-      const res = await API.get('/api/models/?page_size=1000');
-      if (res.data.success) {
-        const items = res.data.data.items || res.data.data || [];
-        const modelOptions = items.map((model) => ({
-          label: `${model.model_name} (${model.vendor?.name || 'Unknown'})`,
-          value: model.model_name,
-          model_id: model.id,
-        }));
-        setModels(modelOptions);
-      }
-    } catch (error) {
-      console.error('Failed to load models:', error);
-      showError(t('加载模型列表失败'));
+  useEffect(() => {
+    if (visible) {
+      setName(editingDeployment?.deployment_name || '');
+      setError('');
+    } else {
+      setName('');
+      setError('');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, editingDeployment?.id]);
+
+  const validate = () => {
+    if (!name.trim()) {
+      setError(t('请输入部署名称'));
+      return false;
+    }
+    if (!NAME_PATTERN.test(name.trim())) {
+      setError(t('部署名称只能包含字母、数字、横线、下划线和中文'));
+      return false;
     }
-    setLoadingModels(false);
+    setError('');
+    return true;
   };
 
-  // Form submission
-  const handleSubmit = async (values) => {
+  const handleSubmit = async () => {
     if (!isEdit || !editingDeployment?.id) {
       showError(t('无效的部署信息'));
       return;
     }
+    if (!validate()) return;
 
     setLoading(true);
     try {
-      // Only handle name update for now
       const res = await API.put(
         `/api/deployments/${editingDeployment.id}/name`,
-        {
-          name: values.deployment_name,
-        },
+        { name: name.trim() },
       );
-
-      if (res.data.success) {
+      if (res.data?.success) {
         showSuccess(t('部署名称更新成功'));
-        handleClose();
-        refresh();
+        handleClose?.();
+        refresh?.();
       } else {
-        showError(res.data.message || t('更新失败'));
+        showError(res.data?.message || t('更新失败'));
       }
-    } catch (error) {
-      console.error('Submit error:', error);
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.error('Submit error:', err);
       showError(t('更新失败，请检查输入信息'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
-  // Load models when modal opens
-  useEffect(() => {
-    if (visible) {
-      loadModels();
-    }
-  }, [visible]);
-
-  // Set form values when editing
-  useEffect(() => {
-    if (formRef.current && editingDeployment && visible && isEdit) {
-      formRef.current.setValues({
-        deployment_name: editingDeployment.deployment_name || '',
-      });
-    }
-  }, [editingDeployment, visible, isEdit]);
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleClose?.();
+    },
+  });
 
   return (
-    <SideSheet
-      title={
-        <div className='flex items-center gap-2'>
-          <Server size={20} />
-          <span>{title}</span>
-        </div>
-      }
-      visible={visible}
-      onCancel={handleClose}
-      width={isMobile ? '100%' : 600}
-      bodyStyle={{ padding: 0 }}
-      maskClosable={false}
-      closeOnEsc={true}
-    >
-      <div className='p-6 h-full overflow-auto'>
-        <Spin spinning={loading} style={{ width: '100%' }}>
-          <Form
-            ref={formRef}
-            onSubmit={handleSubmit}
-            labelPosition='top'
-            style={{ width: '100%' }}
-          >
-            <Card>
-              <Title heading={5} style={{ marginBottom: 16 }}>
-                {t('修改部署名称')}
-              </Title>
-
-              <Row gutter={16}>
-                <Col span={24}>
-                  <Form.Input
-                    field='deployment_name'
-                    label={t('部署名称')}
-                    placeholder={t('请输入新的部署名称')}
-                    rules={[
-                      { required: true, message: t('请输入部署名称') },
-                      {
-                        pattern: /^[a-zA-Z0-9-_\u4e00-\u9fa5]+$/,
-                        message: t(
-                          '部署名称只能包含字母、数字、横线、下划线和中文',
-                        ),
-                      },
-                    ]}
-                  />
-                </Col>
-              </Row>
-
-              {isEdit && (
-                <div className='mt-4 p-3 bg-gray-50 rounded'>
-                  <Text type='secondary'>{t('部署ID')}: </Text>
-                  <Text code>{editingDeployment.id}</Text>
-                  <br />
-                  <Text type='secondary'>{t('当前状态')}: </Text>
-                  <Tag
-                    color={
-                      editingDeployment.status === 'running' ? 'green' : 'grey'
-                    }
-                  >
-                    {editingDeployment.status}
-                  </Tag>
-                </div>
-              )}
-            </Card>
-          </Form>
-        </Spin>
-      </div>
-
-      <div className='p-4 border-t border-gray-200 bg-gray-50 flex justify-end'>
-        <Space>
-          <Button theme='outline' onClick={handleClose} disabled={loading}>
-            <X size={16} className='mr-1' />
-            {t('取消')}
-          </Button>
-          <Button
-            theme='solid'
-            type='primary'
-            loading={loading}
-            onClick={() => formRef.current?.submitForm()}
-          >
-            <Save size={16} className='mr-1' />
-            {isEdit ? t('更新') : t('创建')}
-          </Button>
-        </Space>
-      </div>
-    </SideSheet>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='md' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <Server size={18} />
+                <span>{title}</span>
+              </div>
+            </ModalHeader>
+            <ModalBody className='space-y-4 px-6 py-5'>
+              <Card className='!rounded-xl border border-[color:var(--app-border)] shadow-sm'>
+                <Card.Content className='space-y-4 p-5'>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('修改部署名称')}
+                  </div>
+
+                  <div className='space-y-2'>
+                    <div className='text-sm font-medium text-foreground'>
+                      {t('部署名称')}
+                      <span className='ml-1 text-red-500'>*</span>
+                    </div>
+                    <Input
+                      type='text'
+                      value={name}
+                      onChange={(event) => {
+                        setName(event.target.value);
+                        if (error) setError('');
+                      }}
+                      placeholder={t('请输入新的部署名称')}
+                      aria-label={t('部署名称')}
+                      className={inputClass}
+                    />
+                    {error ? (
+                      <div className='text-xs text-red-600 dark:text-red-400'>
+                        {error}
+                      </div>
+                    ) : null}
+                  </div>
+
+                  {isEdit ? (
+                    <div className='space-y-1 rounded-lg bg-[color:var(--app-background)] p-3 text-sm'>
+                      <div className='flex flex-wrap items-center gap-1'>
+                        <span className='text-muted'>{t('部署ID')}:</span>
+                        <code className='rounded bg-background px-1.5 py-0.5 text-xs text-foreground'>
+                          {editingDeployment.id}
+                        </code>
+                      </div>
+                      <div className='flex flex-wrap items-center gap-1'>
+                        <span className='text-muted'>{t('当前状态')}:</span>
+                        <span
+                          className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium ${
+                            editingDeployment.status === 'running'
+                              ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
+                              : 'bg-surface-secondary text-foreground'
+                          }`}
+                        >
+                          {editingDeployment.status}
+                        </span>
+                      </div>
+                    </div>
+                  ) : null}
+                </Card.Content>
+              </Card>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button
+                variant='light'
+                onPress={handleClose}
+                isDisabled={loading}
+                startContent={<X size={14} />}
+              >
+                {t('取消')}
+              </Button>
+              <Button
+                color='primary'
+                onPress={handleSubmit}
+                isPending={loading}
+                startContent={<Save size={14} />}
+              >
+                {isEdit ? t('更新') : t('创建')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
+    </Modal>
   );
 };
 
diff --git a/web/src/components/table/model-deployments/modals/ExtendDurationModal.jsx b/web/src/components/table/model-deployments/modals/ExtendDurationModal.jsx
index e4e9b7bb909..c522a1b9f17 100644
--- a/web/src/components/table/model-deployments/modals/ExtendDurationModal.jsx
+++ b/web/src/components/table/model-deployments/modals/ExtendDurationModal.jsx
@@ -6,11 +6,6 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
@@ -19,18 +14,17 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useEffect, useRef, useState } from 'react';
 import {
-  Modal,
-  Form,
-  InputNumber,
-  Typography,
-  Card,
-  Space,
-  Divider,
   Button,
-  Tag,
-  Banner,
-  Spin,
-} from '@douyinfe/semi-ui';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
 import {
   FaClock,
   FaCalculator,
@@ -39,7 +33,28 @@ import {
 } from 'react-icons/fa';
 import { API, showError, showSuccess } from '../../../../helpers';
 
-const { Text } = Typography;
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+  orange: 'bg-warning/15 text-warning',
+  red: 'bg-danger/15 text-danger',
+  grey: 'bg-surface-secondary text-muted',
+};
+
+function StatusChip({ tone = 'grey', children }) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${
+        TAG_TONE[tone] || TAG_TONE.grey
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+const MIN_HOURS = 1;
+const MAX_HOURS = 720;
 
 const ExtendDurationModal = ({
   visible,
@@ -48,9 +63,9 @@ const ExtendDurationModal = ({
   onSuccess,
   t,
 }) => {
-  const formRef = useRef(null);
   const [loading, setLoading] = useState(false);
   const [durationHours, setDurationHours] = useState(1);
+  const [durationError, setDurationError] = useState('');
   const [costLoading, setCostLoading] = useState(false);
   const [priceEstimation, setPriceEstimation] = useState(null);
   const [priceError, setPriceError] = useState(null);
@@ -58,15 +73,46 @@ const ExtendDurationModal = ({
   const [deploymentDetails, setDeploymentDetails] = useState(null);
   const costRequestIdRef = useRef(0);
 
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
   const resetState = () => {
     costRequestIdRef.current += 1;
     setDurationHours(1);
+    setDurationError('');
     setPriceEstimation(null);
     setPriceError(null);
     setDeploymentDetails(null);
     setCostLoading(false);
   };
 
+  const validateDuration = (value) => {
+    if (value === '' || value === null || value === undefined) {
+      return t('请输入延长时长');
+    }
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) {
+      return t('请输入延长时长');
+    }
+    if (numeric < MIN_HOURS) {
+      return t('延长时长至少为1小时');
+    }
+    if (numeric > MAX_HOURS) {
+      return t('延长时长不能超过720小时（30天）');
+    }
+    return '';
+  };
+
+  const handleDurationChange = (raw) => {
+    const value = raw === '' ? '' : Number(raw);
+    setDurationHours(value);
+    setDurationError(validateDuration(value));
+  };
+
   const fetchDeploymentDetails = async (deploymentId) => {
     setDetailsLoading(true);
     try {
@@ -199,9 +245,6 @@ const ExtendDurationModal = ({
   useEffect(() => {
     if (visible && deployment?.id) {
       resetState();
-      if (formRef.current) {
-        formRef.current.setValue('duration_hours', 1);
-      }
       fetchDeploymentDetails(deployment.id);
     }
     if (!visible) {
@@ -211,27 +254,25 @@ const ExtendDurationModal = ({
   }, [visible, deployment?.id]);
 
   useEffect(() => {
-    if (!visible) {
-      return;
-    }
-    if (!deploymentDetails) {
-      return;
-    }
+    if (!visible || !deploymentDetails) return;
     calculatePrice(durationHours, deploymentDetails);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [durationHours, deploymentDetails, visible]);
 
   const handleExtend = async () => {
+    const error = validateDuration(durationHours);
+    if (error) {
+      setDurationError(error);
+      return;
+    }
+
     try {
-      if (formRef.current) {
-        await formRef.current.validate();
-      }
       setLoading(true);
 
       const response = await API.post(
         `/api/deployments/${deployment.id}/extend`,
         {
-          duration_hours: Math.round(durationHours),
+          duration_hours: Math.round(Number(durationHours)),
         },
       );
 
@@ -252,9 +293,6 @@ const ExtendDurationModal = ({
   };
 
   const handleCancel = () => {
-    if (formRef.current) {
-      formRef.current.reset();
-    }
     resetState();
     onCancel();
   };
@@ -291,250 +329,275 @@ const ExtendDurationModal = ({
     deploymentDetails?.total_gpus || deployment?.hardware_quantity || 0;
   const containers = deploymentDetails?.total_containers || 0;
 
-  return (
-    <Modal
-      title={
-        <div className='flex items-center gap-2'>
-          <FaClock className='text-blue-500' />
-          <span>{t('延长容器时长')}</span>
-        </div>
-      }
-      visible={visible}
-      onCancel={handleCancel}
-      onOk={handleExtend}
-      okText={t('确认延长')}
-      cancelText={t('取消')}
-      confirmLoading={loading}
-      okButtonProps={{
-        disabled:
-          !deployment?.id ||
-          detailsLoading ||
-          !durationHours ||
-          durationHours < 1,
-      }}
-      width={600}
-      className='extend-duration-modal'
-    >
-      <div className='space-y-4'>
-        <Card className='border-0 bg-gray-50'>
-          <div className='flex items-center justify-between'>
-            <div>
-              <Text strong className='text-base'>
-                {deployment?.container_name || deployment?.deployment_name}
-              </Text>
-              <div className='mt-1'>
-                <Text type='secondary' size='small'>
-                  ID: {deployment?.id}
-                </Text>
-              </div>
-            </div>
-            <div className='text-right'>
-              <div className='flex items-center gap-2 mb-1'>
-                <Tag color='blue' size='small'>
-                  {resolvedHardwareName}
-                  {gpuCount ? ` x${gpuCount}` : ''}
-                </Tag>
-              </div>
-              <Text size='small' type='secondary'>
-                {t('当前剩余')}: <Text strong>{currentRemainingTime}</Text>
-              </Text>
-            </div>
-          </div>
-        </Card>
-
-        <Banner
-          type='warning'
-          icon={<FaExclamationTriangle />}
-          title={t('重要提醒')}
-          description={
-            <div className='space-y-2'>
-              <p>
-                {t('延长容器时长将会产生额外费用，请确认您有足够的账户余额。')}
-              </p>
-              <p>{t('延长操作一旦确认无法撤销，费用将立即扣除。')}</p>
-            </div>
-          }
-        />
-
-        <Form
-          getFormApi={(api) => (formRef.current = api)}
-          layout='vertical'
-          onValueChange={(values) => {
-            if (values.duration_hours !== undefined) {
-              const numericValue = Number(values.duration_hours);
-              setDurationHours(
-                Number.isFinite(numericValue) ? numericValue : 0,
-              );
-            }
-          }}
-        >
-          <Form.InputNumber
-            field='duration_hours'
-            label={t('延长时长（小时）')}
-            placeholder={t('请输入要延长的小时数')}
-            min={1}
-            max={720}
-            step={1}
-            initValue={1}
-            style={{ width: '100%' }}
-            suffix={t('小时')}
-            rules={[
-              { required: true, message: t('请输入延长时长') },
-              {
-                type: 'number',
-                min: 1,
-                message: t('延长时长至少为1小时'),
-              },
-              {
-                type: 'number',
-                max: 720,
-                message: t('延长时长不能超过720小时（30天）'),
-              },
-            ]}
-          />
-        </Form>
-
-        <div className='space-y-2'>
-          <Text size='small' type='secondary'>
-            {t('快速选择')}:
-          </Text>
-          <Space wrap>
-            {[1, 2, 6, 12, 24, 48, 72, 168].map((hours) => (
-              <Button
-                key={hours}
-                size='small'
-                theme={durationHours === hours ? 'solid' : 'borderless'}
-                type={durationHours === hours ? 'primary' : 'secondary'}
-                onClick={() => {
-                  setDurationHours(hours);
-                  if (formRef.current) {
-                    formRef.current.setValue('duration_hours', hours);
-                  }
-                }}
-              >
-                {hours < 24
-                  ? `${hours}${t('小时')}`
-                  : `${hours / 24}${t('天')}`}
-              </Button>
-            ))}
-          </Space>
-        </div>
-
-        <Divider />
-
-        <Card
-          title={
-            <div className='flex items-center gap-2'>
-              <FaCalculator className='text-green-500' />
-              <span>{t('费用预估')}</span>
-            </div>
-          }
-          className='border border-green-200'
-        >
-          {priceEstimation ? (
-            <div className='space-y-3'>
-              <div className='flex items-center justify-between'>
-                <Text>{t('延长时长')}:</Text>
-                <Text strong>
-                  {Math.round(durationHours)} {t('小时')}
-                </Text>
-              </div>
+  const confirmDisabled =
+    !deployment?.id ||
+    detailsLoading ||
+    !durationHours ||
+    Number(durationHours) < MIN_HOURS ||
+    Number(durationHours) > MAX_HOURS ||
+    Boolean(durationError);
 
-              <div className='flex items-center justify-between'>
-                <Text>{t('硬件配置')}:</Text>
-                <Text strong>
-                  {resolvedHardwareName}
-                  {gpuCount ? ` x${gpuCount}` : ''}
-                </Text>
+  return (
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='lg' scroll='inside' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <FaClock className='text-primary' />
+                <span>{t('延长容器时长')}</span>
               </div>
-
-              {containers ? (
-                <div className='flex items-center justify-between'>
-                  <Text>{t('容器数量')}:</Text>
-                  <Text strong>{containers}</Text>
+            </ModalHeader>
+            <ModalBody className='max-h-[70vh] overflow-y-auto px-4 py-4 md:px-6'>
+              <div className='space-y-4'>
+                {/* Container summary */}
+                <section className='rounded-2xl border border-border bg-surface-secondary px-4 py-3'>
+                  <div className='flex items-center justify-between gap-3'>
+                    <div>
+                      <div className='text-base font-semibold text-foreground'>
+                        {deployment?.container_name ||
+                          deployment?.deployment_name}
+                      </div>
+                      <div className='mt-1 text-xs text-muted'>
+                        ID: {deployment?.id}
+                      </div>
+                    </div>
+                    <div className='text-right'>
+                      <div className='mb-1'>
+                        <StatusChip tone='blue'>
+                          {resolvedHardwareName}
+                          {gpuCount ? ` x${gpuCount}` : ''}
+                        </StatusChip>
+                      </div>
+                      <div className='text-xs text-muted'>
+                        {t('当前剩余')}:{' '}
+                        <span className='font-semibold text-foreground'>
+                          {currentRemainingTime}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </section>
+
+                {/* Warning banner */}
+                <section className='rounded-2xl border border-warning/30 bg-warning/5 px-4 py-3'>
+                  <div className='flex items-start gap-3'>
+                    <FaExclamationTriangle className='mt-0.5 shrink-0 text-warning' />
+                    <div className='space-y-2 text-sm'>
+                      <div className='font-semibold text-foreground'>
+                        {t('重要提醒')}
+                      </div>
+                      <p className='text-muted'>
+                        {t(
+                          '延长容器时长将会产生额外费用，请确认您有足够的账户余额。',
+                        )}
+                      </p>
+                      <p className='text-muted'>
+                        {t('延长操作一旦确认无法撤销，费用将立即扣除。')}
+                      </p>
+                    </div>
+                  </div>
+                </section>
+
+                {/* Duration input */}
+                <div className='space-y-1.5'>
+                  <label className='text-sm font-medium text-foreground'>
+                    {t('延长时长（小时）')}
+                  </label>
+                  <div className='relative'>
+                    <input
+                      type='number'
+                      min={MIN_HOURS}
+                      max={MAX_HOURS}
+                      step={1}
+                      value={durationHours}
+                      onChange={(event) =>
+                        handleDurationChange(event.target.value)
+                      }
+                      placeholder={t('请输入要延长的小时数')}
+                      aria-label={t('延长时长（小时）')}
+                      className={`h-10 w-full rounded-xl border bg-background pl-3 pr-14 text-sm text-foreground outline-none transition focus:border-primary ${
+                        durationError ? 'border-danger' : 'border-border'
+                      }`}
+                    />
+                    <span className='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted'>
+                      {t('小时')}
+                    </span>
+                  </div>
+                  {durationError ? (
+                    <div className='text-xs text-danger'>{durationError}</div>
+                  ) : null}
                 </div>
-              ) : null}
-
-              <div className='flex items-center justify-between'>
-                <Text>{t('单GPU小时费率')}:</Text>
-                <Text strong>
-                  {typeof hourlyRate === 'number'
-                    ? `${hourlyRate.toFixed(4)} ${currencyLabel}`
-                    : '--'}
-                </Text>
-              </div>
 
-              {typeof computeCost === 'number' && (
-                <div className='flex items-center justify-between'>
-                  <Text>{t('计算成本')}:</Text>
-                  <Text strong>
-                    {computeCost.toFixed(4)} {currencyLabel}
-                  </Text>
+                {/* Quick select chips */}
+                <div className='space-y-2'>
+                  <div className='text-xs text-muted'>{t('快速选择')}:</div>
+                  <div className='flex flex-wrap gap-2'>
+                    {[1, 2, 6, 12, 24, 48, 72, 168].map((hours) => {
+                      const active = Number(durationHours) === hours;
+                      return (
+                        <Button
+                          key={hours}
+                          size='sm'
+                          variant={active ? 'solid' : 'flat'}
+                          color={active ? 'primary' : undefined}
+                          onPress={() => handleDurationChange(hours)}
+                        >
+                          {hours < 24
+                            ? `${hours}${t('小时')}`
+                            : `${hours / 24}${t('天')}`}
+                        </Button>
+                      );
+                    })}
+                  </div>
                 </div>
-              )}
-
-              <Divider margin='12px' />
-
-              <div className='flex items-center justify-between'>
-                <Text strong className='text-lg'>
-                  {t('预估总费用')}:
-                </Text>
-                <Text strong className='text-lg text-green-600'>
-                  {typeof estimatedTotalCost === 'number'
-                    ? `${estimatedTotalCost.toFixed(4)} ${currencyLabel}`
-                    : '--'}
-                </Text>
-              </div>
 
-              <div className='bg-blue-50 p-3 rounded-lg'>
-                <div className='flex items-start gap-2'>
-                  <FaInfoCircle className='text-blue-500 mt-0.5' />
-                  <div>
-                    <Text size='small' type='secondary'>
-                      {t('延长后总时长')}: <Text strong>{newTotalTime}</Text>
-                    </Text>
-                    <br />
-                    <Text size='small' type='secondary'>
-                      {t('预估费用仅供参考，实际费用可能略有差异')}
-                    </Text>
+                <div className='h-px bg-border' />
+
+                {/* Cost estimate card */}
+                <section className='rounded-2xl border border-success/30 bg-background'>
+                  <header className='flex items-center gap-2 border-b border-border px-4 py-3 text-sm font-semibold text-foreground'>
+                    <FaCalculator className='text-success' />
+                    <span>{t('费用预估')}</span>
+                  </header>
+                  <div className='px-4 py-4'>
+                    {priceEstimation ? (
+                      <div className='space-y-3 text-sm'>
+                        <div className='flex items-center justify-between'>
+                          <span className='text-muted'>{t('延长时长')}:</span>
+                          <span className='font-semibold tabular-nums'>
+                            {Math.round(Number(durationHours))} {t('小时')}
+                          </span>
+                        </div>
+
+                        <div className='flex items-center justify-between'>
+                          <span className='text-muted'>{t('硬件配置')}:</span>
+                          <span className='font-semibold'>
+                            {resolvedHardwareName}
+                            {gpuCount ? ` x${gpuCount}` : ''}
+                          </span>
+                        </div>
+
+                        {containers ? (
+                          <div className='flex items-center justify-between'>
+                            <span className='text-muted'>{t('容器数量')}:</span>
+                            <span className='font-semibold tabular-nums'>
+                              {containers}
+                            </span>
+                          </div>
+                        ) : null}
+
+                        <div className='flex items-center justify-between'>
+                          <span className='text-muted'>
+                            {t('单GPU小时费率')}:
+                          </span>
+                          <span className='font-semibold tabular-nums'>
+                            {typeof hourlyRate === 'number'
+                              ? `${hourlyRate.toFixed(4)} ${currencyLabel}`
+                              : '--'}
+                          </span>
+                        </div>
+
+                        {typeof computeCost === 'number' && (
+                          <div className='flex items-center justify-between'>
+                            <span className='text-muted'>
+                              {t('计算成本')}:
+                            </span>
+                            <span className='font-semibold tabular-nums'>
+                              {computeCost.toFixed(4)} {currencyLabel}
+                            </span>
+                          </div>
+                        )}
+
+                        <div className='h-px bg-border' />
+
+                        <div className='flex items-center justify-between'>
+                          <span className='text-base font-semibold text-foreground'>
+                            {t('预估总费用')}:
+                          </span>
+                          <span className='text-lg font-semibold text-success tabular-nums'>
+                            {typeof estimatedTotalCost === 'number'
+                              ? `${estimatedTotalCost.toFixed(4)} ${currencyLabel}`
+                              : '--'}
+                          </span>
+                        </div>
+
+                        <div className='rounded-lg bg-primary/5 p-3'>
+                          <div className='flex items-start gap-2'>
+                            <FaInfoCircle className='mt-0.5 text-primary' />
+                            <div className='text-xs leading-5 text-muted'>
+                              <div>
+                                {t('延长后总时长')}:{' '}
+                                <span className='font-semibold text-foreground'>
+                                  {newTotalTime}
+                                </span>
+                              </div>
+                              <div>
+                                {t('预估费用仅供参考，实际费用可能略有差异')}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    ) : (
+                      <div className='flex flex-col items-center justify-center gap-2 py-4 text-sm'>
+                        {costLoading ? (
+                          <>
+                            <Spinner color='primary' size='sm' />
+                            <span className='text-muted'>
+                              {t('计算费用中...')}
+                            </span>
+                          </>
+                        ) : priceError ? (
+                          <span className='text-danger'>{priceError}</span>
+                        ) : deploymentDetails ? (
+                          <span className='text-muted'>
+                            {t('请输入延长时长')}
+                          </span>
+                        ) : (
+                          <span className='text-muted'>
+                            {t('加载详情中...')}
+                          </span>
+                        )}
+                      </div>
+                    )}
                   </div>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className='text-center text-gray-500 py-4'>
-              {costLoading ? (
-                <Space align='center' className='justify-center'>
-                  <Spin size='small' />
-                  <Text type='secondary'>{t('计算费用中...')}</Text>
-                </Space>
-              ) : priceError ? (
-                <Text type='danger'>{priceError}</Text>
-              ) : deploymentDetails ? (
-                <Text type='secondary'>{t('请输入延长时长')}</Text>
-              ) : (
-                <Text type='secondary'>{t('加载详情中...')}</Text>
-              )}
-            </div>
-          )}
-        </Card>
-
-        <div className='bg-red-50 border border-red-200 rounded-lg p-3'>
-          <div className='flex items-start gap-2'>
-            <FaExclamationTriangle className='text-red-500 mt-0.5' />
-            <div>
-              <Text strong className='text-red-700'>
-                {t('确认延长容器时长')}
-              </Text>
-              <div className='mt-1'>
-                <Text size='small' className='text-red-600'>
-                  {t('点击"确认延长"后将立即扣除费用并延长容器运行时间')}
-                </Text>
+                </section>
+
+                {/* Final confirm reminder */}
+                <section className='rounded-lg border border-danger/30 bg-danger/5 p-3'>
+                  <div className='flex items-start gap-2'>
+                    <FaExclamationTriangle className='mt-0.5 shrink-0 text-danger' />
+                    <div>
+                      <div className='font-semibold text-danger'>
+                        {t('确认延长容器时长')}
+                      </div>
+                      <div className='mt-1 text-xs text-danger/80'>
+                        {t(
+                          '点击"确认延长"后将立即扣除费用并延长容器运行时间',
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </section>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={handleCancel}>
+                {t('取消')}
+              </Button>
+              <Button
+                color='primary'
+                isPending={loading}
+                isDisabled={confirmDisabled}
+                onPress={handleExtend}
+              >
+                {t('确认延长')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/model-deployments/modals/UpdateConfigModal.jsx b/web/src/components/table/model-deployments/modals/UpdateConfigModal.jsx
index 8d30415dbeb..fa674851078 100644
--- a/web/src/components/table/model-deployments/modals/UpdateConfigModal.jsx
+++ b/web/src/components/table/model-deployments/modals/UpdateConfigModal.jsx
@@ -6,34 +6,25 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import {
-  Modal,
-  Form,
-  Input,
-  InputNumber,
-  Typography,
-  Card,
-  Space,
-  Divider,
   Button,
-  Banner,
-  Tag,
-  Collapse,
-  TextArea,
-  Switch,
-} from '@douyinfe/semi-ui';
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import {
   FaCog,
   FaDocker,
@@ -44,34 +35,110 @@ import {
   FaPlus,
   FaMinus,
 } from 'react-icons/fa';
+import { ChevronDown } from 'lucide-react';
 import { API, showError, showSuccess } from '../../../../helpers';
 
-const { Text, Title } = Typography;
+const TAG_TONE = {
+  blue: 'bg-primary/15 text-primary',
+  red: 'bg-danger/15 text-danger',
+  grey: 'bg-surface-secondary text-muted',
+};
 
-const UpdateConfigModal = ({ visible, onCancel, deployment, onSuccess, t }) => {
-  const formRef = useRef(null);
+function StatusChip({ tone = 'grey', children }) {
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${
+        TAG_TONE[tone] || TAG_TONE.grey
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+// Replaces Semi `<Collapse>` / `<Collapse.Panel>` with a `<details>`
+// element so accordion state is native (no extra hook + accessible by
+// default).
+function CollapseSection({ icon, title, suffix, defaultOpen = false, children }) {
+  return (
+    <details
+      open={defaultOpen}
+      className='group rounded-2xl border border-border bg-background'
+    >
+      <summary className='flex cursor-pointer list-none items-center gap-2 px-4 py-3 text-sm font-semibold text-foreground'>
+        <span className='shrink-0'>{icon}</span>
+        <span className='flex-1'>{title}</span>
+        {suffix}
+        <ChevronDown
+          size={16}
+          className='shrink-0 text-muted transition-transform group-open:rotate-180'
+        />
+      </summary>
+      <div className='border-t border-border px-4 py-3'>{children}</div>
+    </details>
+  );
+}
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+const UpdateConfigModal = ({
+  visible,
+  onCancel,
+  deployment,
+  onSuccess,
+  t,
+}) => {
   const [loading, setLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    image_url: '',
+    traffic_port: '',
+    entrypoint: '',
+    registry_username: '',
+    registry_secret: '',
+    command: '',
+  });
   const [envVars, setEnvVars] = useState([]);
   const [secretEnvVars, setSecretEnvVars] = useState([]);
+  const [portError, setPortError] = useState('');
+
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
 
   // Initialize form data when modal opens
   useEffect(() => {
     if (visible && deployment) {
-      // Set initial form values based on deployment data
-      const initialValues = {
+      setFormData({
         image_url: deployment.container_config?.image_url || '',
-        traffic_port: deployment.container_config?.traffic_port || null,
+        traffic_port:
+          deployment.container_config?.traffic_port != null
+            ? String(deployment.container_config.traffic_port)
+            : '',
         entrypoint: deployment.container_config?.entrypoint?.join(' ') || '',
         registry_username: '',
         registry_secret: '',
         command: '',
-      };
+      });
+      setPortError('');
 
-      if (formRef.current) {
-        formRef.current.setValues(initialValues);
-      }
-
-      // Initialize environment variables
       const envVarsList = deployment.container_config?.env_variables
         ? Object.entries(deployment.container_config.env_variables).map(
             ([key, value]) => ({
@@ -86,33 +153,51 @@ const UpdateConfigModal = ({ visible, onCancel, deployment, onSuccess, t }) => {
     }
   }, [visible, deployment]);
 
+  const updateField = (field) => (value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    if (field === 'traffic_port') {
+      setPortError(validatePort(value));
+    }
+  };
+
+  const validatePort = (value) => {
+    if (!value) return '';
+    const numeric = Number(value);
+    if (!Number.isFinite(numeric)) return t('端口号必须为数字');
+    if (numeric < 1 || numeric > 65535) {
+      return t('端口号必须在1-65535之间');
+    }
+    return '';
+  };
+
   const handleUpdate = async () => {
+    const portValidation = validatePort(formData.traffic_port);
+    if (portValidation) {
+      setPortError(portValidation);
+      return;
+    }
+
     try {
-      const formValues = formRef.current
-        ? await formRef.current.validate()
-        : {};
       setLoading(true);
 
       // Prepare the update payload
       const payload = {};
 
-      if (formValues.image_url) payload.image_url = formValues.image_url;
-      if (formValues.traffic_port)
-        payload.traffic_port = formValues.traffic_port;
-      if (formValues.registry_username)
-        payload.registry_username = formValues.registry_username;
-      if (formValues.registry_secret)
-        payload.registry_secret = formValues.registry_secret;
-      if (formValues.command) payload.command = formValues.command;
-
-      // Process entrypoint
-      if (formValues.entrypoint) {
-        payload.entrypoint = formValues.entrypoint
+      if (formData.image_url) payload.image_url = formData.image_url;
+      if (formData.traffic_port)
+        payload.traffic_port = Number(formData.traffic_port);
+      if (formData.registry_username)
+        payload.registry_username = formData.registry_username;
+      if (formData.registry_secret)
+        payload.registry_secret = formData.registry_secret;
+      if (formData.command) payload.command = formData.command;
+
+      if (formData.entrypoint) {
+        payload.entrypoint = formData.entrypoint
           .split(' ')
           .filter((cmd) => cmd.trim());
       }
 
-      // Process environment variables
       if (envVars.length > 0) {
         payload.env_variables = envVars.reduce((acc, env) => {
           if (env.key && env.value !== undefined) {
@@ -122,7 +207,6 @@ const UpdateConfigModal = ({ visible, onCancel, deployment, onSuccess, t }) => {
         }, {});
       }
 
-      // Process secret environment variables
       if (secretEnvVars.length > 0) {
         payload.secret_env_variables = secretEnvVars.reduce((acc, env) => {
           if (env.key && env.value !== undefined) {
@@ -154,342 +238,366 @@ const UpdateConfigModal = ({ visible, onCancel, deployment, onSuccess, t }) => {
   };
 
   const handleCancel = () => {
-    if (formRef.current) {
-      formRef.current.reset();
-    }
+    setFormData({
+      image_url: '',
+      traffic_port: '',
+      entrypoint: '',
+      registry_username: '',
+      registry_secret: '',
+      command: '',
+    });
     setEnvVars([]);
     setSecretEnvVars([]);
+    setPortError('');
     onCancel();
   };
 
-  const addEnvVar = () => {
-    setEnvVars([...envVars, { key: '', value: '' }]);
-  };
-
-  const removeEnvVar = (index) => {
-    const newEnvVars = envVars.filter((_, i) => i !== index);
-    setEnvVars(newEnvVars);
-  };
-
+  const addEnvVar = () => setEnvVars([...envVars, { key: '', value: '' }]);
+  const removeEnvVar = (index) =>
+    setEnvVars(envVars.filter((_, i) => i !== index));
   const updateEnvVar = (index, field, value) => {
-    const newEnvVars = [...envVars];
-    newEnvVars[index][field] = value;
-    setEnvVars(newEnvVars);
+    const next = [...envVars];
+    next[index][field] = value;
+    setEnvVars(next);
   };
 
-  const addSecretEnvVar = () => {
+  const addSecretEnvVar = () =>
     setSecretEnvVars([...secretEnvVars, { key: '', value: '' }]);
-  };
-
-  const removeSecretEnvVar = (index) => {
-    const newSecretEnvVars = secretEnvVars.filter((_, i) => i !== index);
-    setSecretEnvVars(newSecretEnvVars);
-  };
-
+  const removeSecretEnvVar = (index) =>
+    setSecretEnvVars(secretEnvVars.filter((_, i) => i !== index));
   const updateSecretEnvVar = (index, field, value) => {
-    const newSecretEnvVars = [...secretEnvVars];
-    newSecretEnvVars[index][field] = value;
-    setSecretEnvVars(newSecretEnvVars);
+    const next = [...secretEnvVars];
+    next[index][field] = value;
+    setSecretEnvVars(next);
   };
 
   return (
-    <Modal
-      title={
-        <div className='flex items-center gap-2'>
-          <FaCog className='text-blue-500' />
-          <span>{t('更新容器配置')}</span>
-        </div>
-      }
-      visible={visible}
-      onCancel={handleCancel}
-      onOk={handleUpdate}
-      okText={t('更新配置')}
-      cancelText={t('取消')}
-      confirmLoading={loading}
-      width={700}
-      className='update-config-modal'
-    >
-      <div className='space-y-4 max-h-[600px] overflow-y-auto'>
-        {/* Container Info */}
-        <Card className='border-0 bg-gray-50'>
-          <div className='flex items-center justify-between'>
-            <div>
-              <Text strong className='text-base'>
-                {deployment?.container_name}
-              </Text>
-              <div className='mt-1'>
-                <Text type='secondary' size='small'>
-                  ID: {deployment?.id}
-                </Text>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='2xl' scroll='inside' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <FaCog className='text-primary' />
+                <span>{t('更新容器配置')}</span>
               </div>
-            </div>
-            <Tag color='blue'>{deployment?.status}</Tag>
-          </div>
-        </Card>
-
-        {/* Warning Banner */}
-        <Banner
-          type='warning'
-          icon={<FaExclamationTriangle />}
-          title={t('重要提醒')}
-          description={
-            <div className='space-y-2'>
-              <p>
-                {t(
-                  '更新容器配置可能会导致容器重启，请确保在合适的时间进行此操作。',
-                )}
-              </p>
-              <p>{t('某些配置更改可能需要几分钟才能生效。')}</p>
-            </div>
-          }
-        />
-
-        <Form getFormApi={(api) => (formRef.current = api)} layout='vertical'>
-          <Collapse defaultActiveKey={['docker']}>
-            {/* Docker Configuration */}
-            <Collapse.Panel
-              header={
-                <div className='flex items-center gap-2'>
-                  <FaDocker className='text-blue-600' />
-                  <span>{t('镜像配置')}</span>
-                </div>
-              }
-              itemKey='docker'
-            >
+            </ModalHeader>
+            <ModalBody className='max-h-[70vh] overflow-y-auto px-4 py-4 md:px-6'>
               <div className='space-y-4'>
-                <Form.Input
-                  field='image_url'
-                  label={t('镜像地址')}
-                  placeholder={t('例如: nginx:latest')}
-                  rules={[
-                    {
-                      type: 'string',
-                      message: t('请输入有效的镜像地址'),
-                    },
-                  ]}
-                />
-
-                <Form.Input
-                  field='registry_username'
-                  label={t('镜像仓库用户名')}
-                  placeholder={t('如果镜像为私有，请填写用户名')}
-                />
-
-                <Form.Input
-                  field='registry_secret'
-                  label={t('镜像仓库密码')}
-                  mode='password'
-                  placeholder={t('如果镜像为私有，请填写密码或Token')}
-                />
-              </div>
-            </Collapse.Panel>
-
-            {/* Network Configuration */}
-            <Collapse.Panel
-              header={
-                <div className='flex items-center gap-2'>
-                  <FaNetworkWired className='text-green-600' />
-                  <span>{t('网络配置')}</span>
-                </div>
-              }
-              itemKey='network'
-            >
-              <Form.InputNumber
-                field='traffic_port'
-                label={t('流量端口')}
-                placeholder={t('容器对外暴露的端口')}
-                min={1}
-                max={65535}
-                style={{ width: '100%' }}
-                rules={[
-                  {
-                    type: 'number',
-                    min: 1,
-                    max: 65535,
-                    message: t('端口号必须在1-65535之间'),
-                  },
-                ]}
-              />
-            </Collapse.Panel>
-
-            {/* Startup Configuration */}
-            <Collapse.Panel
-              header={
-                <div className='flex items-center gap-2'>
-                  <FaTerminal className='text-purple-600' />
-                  <span>{t('启动配置')}</span>
-                </div>
-              }
-              itemKey='startup'
-            >
-              <div className='space-y-4'>
-                <Form.Input
-                  field='entrypoint'
-                  label={t('启动命令 (Entrypoint)')}
-                  placeholder={t('例如: /bin/bash -c "python app.py"')}
-                  helpText={t('多个命令用空格分隔')}
-                />
-
-                <Form.Input
-                  field='command'
-                  label={t('运行命令 (Command)')}
-                  placeholder={t('容器启动后执行的命令')}
-                />
-              </div>
-            </Collapse.Panel>
-
-            {/* Environment Variables */}
-            <Collapse.Panel
-              header={
-                <div className='flex items-center gap-2'>
-                  <FaKey className='text-orange-600' />
-                  <span>{t('环境变量')}</span>
-                  <Tag size='small'>{envVars.length}</Tag>
-                </div>
-              }
-              itemKey='env'
-            >
-              <div className='space-y-4'>
-                {/* Regular Environment Variables */}
-                <div>
-                  <div className='flex items-center justify-between mb-3'>
-                    <Text strong>{t('普通环境变量')}</Text>
-                    <Button
-                      size='small'
-                      icon={<FaPlus />}
-                      onClick={addEnvVar}
-                      theme='borderless'
-                      type='primary'
-                    >
-                      {t('添加')}
-                    </Button>
+                {/* Container info */}
+                <section className='rounded-2xl border border-border bg-surface-secondary px-4 py-3'>
+                  <div className='flex items-center justify-between gap-3'>
+                    <div>
+                      <div className='text-base font-semibold text-foreground'>
+                        {deployment?.container_name}
+                      </div>
+                      <div className='mt-1 text-xs text-muted'>
+                        ID: {deployment?.id}
+                      </div>
+                    </div>
+                    <StatusChip tone='blue'>{deployment?.status}</StatusChip>
                   </div>
-
-                  {envVars.map((envVar, index) => (
-                    <div key={index} className='flex items-end gap-2 mb-2'>
-                      <Input
-                        placeholder={t('变量名')}
-                        value={envVar.key}
-                        onChange={(value) => updateEnvVar(index, 'key', value)}
-                        style={{ flex: 1 }}
-                      />
-                      <Text>=</Text>
-                      <Input
-                        placeholder={t('变量值')}
-                        value={envVar.value}
-                        onChange={(value) =>
-                          updateEnvVar(index, 'value', value)
+                </section>
+
+                {/* Warning banner */}
+                <section className='rounded-2xl border border-warning/30 bg-warning/5 px-4 py-3'>
+                  <div className='flex items-start gap-3'>
+                    <FaExclamationTriangle className='mt-0.5 shrink-0 text-warning' />
+                    <div className='space-y-2 text-sm'>
+                      <div className='font-semibold text-foreground'>
+                        {t('重要提醒')}
+                      </div>
+                      <p className='text-muted'>
+                        {t(
+                          '更新容器配置可能会导致容器重启，请确保在合适的时间进行此操作。',
+                        )}
+                      </p>
+                      <p className='text-muted'>
+                        {t('某些配置更改可能需要几分钟才能生效。')}
+                      </p>
+                    </div>
+                  </div>
+                </section>
+
+                {/* Docker Configuration */}
+                <CollapseSection
+                  defaultOpen
+                  icon={<FaDocker className='text-primary' />}
+                  title={t('镜像配置')}
+                >
+                  <div className='space-y-4'>
+                    <div className='space-y-1.5'>
+                      <FieldLabel>{t('镜像地址')}</FieldLabel>
+                      <input
+                        type='text'
+                        value={formData.image_url}
+                        onChange={(event) =>
+                          updateField('image_url')(event.target.value)
                         }
-                        style={{ flex: 2 }}
-                      />
-                      <Button
-                        size='small'
-                        icon={<FaMinus />}
-                        onClick={() => removeEnvVar(index)}
-                        theme='borderless'
-                        type='danger'
+                        placeholder={t('例如: nginx:latest')}
+                        className={inputClass}
                       />
                     </div>
-                  ))}
-
-                  {envVars.length === 0 && (
-                    <div className='text-center text-gray-500 py-4 border-2 border-dashed border-gray-300 rounded-lg'>
-                      <Text type='secondary'>{t('暂无环境变量')}</Text>
+                    <div className='space-y-1.5'>
+                      <FieldLabel>{t('镜像仓库用户名')}</FieldLabel>
+                      <input
+                        type='text'
+                        value={formData.registry_username}
+                        onChange={(event) =>
+                          updateField('registry_username')(event.target.value)
+                        }
+                        placeholder={t('如果镜像为私有，请填写用户名')}
+                        className={inputClass}
+                      />
                     </div>
-                  )}
-                </div>
-
-                <Divider />
-
-                {/* Secret Environment Variables */}
-                <div>
-                  <div className='flex items-center justify-between mb-3'>
-                    <div className='flex items-center gap-2'>
-                      <Text strong>{t('机密环境变量')}</Text>
-                      <Tag size='small' type='danger'>
-                        {t('加密存储')}
-                      </Tag>
+                    <div className='space-y-1.5'>
+                      <FieldLabel>{t('镜像仓库密码')}</FieldLabel>
+                      <input
+                        type='password'
+                        value={formData.registry_secret}
+                        onChange={(event) =>
+                          updateField('registry_secret')(event.target.value)
+                        }
+                        placeholder={t('如果镜像为私有，请填写密码或Token')}
+                        className={inputClass}
+                      />
                     </div>
-                    <Button
-                      size='small'
-                      icon={<FaPlus />}
-                      onClick={addSecretEnvVar}
-                      theme='borderless'
-                      type='danger'
-                    >
-                      {t('添加')}
-                    </Button>
                   </div>
-
-                  {secretEnvVars.map((envVar, index) => (
-                    <div key={index} className='flex items-end gap-2 mb-2'>
-                      <Input
-                        placeholder={t('变量名')}
-                        value={envVar.key}
-                        onChange={(value) =>
-                          updateSecretEnvVar(index, 'key', value)
+                </CollapseSection>
+
+                {/* Network Configuration */}
+                <CollapseSection
+                  icon={<FaNetworkWired className='text-success' />}
+                  title={t('网络配置')}
+                >
+                  <div className='space-y-1.5'>
+                    <FieldLabel>{t('流量端口')}</FieldLabel>
+                    <input
+                      type='number'
+                      min={1}
+                      max={65535}
+                      value={formData.traffic_port}
+                      onChange={(event) =>
+                        updateField('traffic_port')(event.target.value)
+                      }
+                      placeholder={t('容器对外暴露的端口')}
+                      className={`${inputClass} ${portError ? 'border-danger' : ''}`}
+                    />
+                    {portError ? (
+                      <div className='text-xs text-danger'>{portError}</div>
+                    ) : null}
+                  </div>
+                </CollapseSection>
+
+                {/* Startup Configuration */}
+                <CollapseSection
+                  icon={<FaTerminal className='text-accent' />}
+                  title={t('启动配置')}
+                >
+                  <div className='space-y-4'>
+                    <div className='space-y-1.5'>
+                      <FieldLabel>{t('启动命令 (Entrypoint)')}</FieldLabel>
+                      <input
+                        type='text'
+                        value={formData.entrypoint}
+                        onChange={(event) =>
+                          updateField('entrypoint')(event.target.value)
                         }
-                        style={{ flex: 1 }}
+                        placeholder={t('例如: /bin/bash -c "python app.py"')}
+                        className={inputClass}
                       />
-                      <Text>=</Text>
-                      <Input
-                        mode='password'
-                        placeholder={t('变量值')}
-                        value={envVar.value}
-                        onChange={(value) =>
-                          updateSecretEnvVar(index, 'value', value)
+                      <FieldHint>{t('多个命令用空格分隔')}</FieldHint>
+                    </div>
+                    <div className='space-y-1.5'>
+                      <FieldLabel>{t('运行命令 (Command)')}</FieldLabel>
+                      <input
+                        type='text'
+                        value={formData.command}
+                        onChange={(event) =>
+                          updateField('command')(event.target.value)
                         }
-                        style={{ flex: 2 }}
-                      />
-                      <Button
-                        size='small'
-                        icon={<FaMinus />}
-                        onClick={() => removeSecretEnvVar(index)}
-                        theme='borderless'
-                        type='danger'
+                        placeholder={t('容器启动后执行的命令')}
+                        className={inputClass}
                       />
                     </div>
-                  ))}
+                  </div>
+                </CollapseSection>
+
+                {/* Environment Variables */}
+                <CollapseSection
+                  icon={<FaKey className='text-warning' />}
+                  title={t('环境变量')}
+                  suffix={<StatusChip tone='grey'>{envVars.length}</StatusChip>}
+                >
+                  <div className='space-y-4'>
+                    {/* Regular env vars */}
+                    <div>
+                      <div className='mb-3 flex items-center justify-between'>
+                        <span className='text-sm font-semibold text-foreground'>
+                          {t('普通环境变量')}
+                        </span>
+                        <Button
+                          size='sm'
+                          variant='light'
+                          color='primary'
+                          startContent={<FaPlus />}
+                          onPress={addEnvVar}
+                        >
+                          {t('添加')}
+                        </Button>
+                      </div>
+
+                      {envVars.map((envVar, index) => (
+                        <div key={index} className='mb-2 flex items-center gap-2'>
+                          <Input
+                            placeholder={t('变量名')}
+                            value={envVar.key}
+                            onValueChange={(value) =>
+                              updateEnvVar(index, 'key', value)
+                            }
+                            size='sm'
+                            className='flex-1'
+                          />
+                          <span className='text-muted'>=</span>
+                          <Input
+                            placeholder={t('变量值')}
+                            value={envVar.value}
+                            onValueChange={(value) =>
+                              updateEnvVar(index, 'value', value)
+                            }
+                            size='sm'
+                            className='flex-[2]'
+                          />
+                          <Button
+                            isIconOnly
+                            size='sm'
+                            variant='light'
+                            color='danger'
+                            onPress={() => removeEnvVar(index)}
+                            aria-label={t('移除')}
+                          >
+                            <FaMinus />
+                          </Button>
+                        </div>
+                      ))}
+
+                      {envVars.length === 0 && (
+                        <div className='rounded-lg border-2 border-dashed border-border py-4 text-center text-sm text-muted'>
+                          {t('暂无环境变量')}
+                        </div>
+                      )}
+                    </div>
 
-                  {secretEnvVars.length === 0 && (
-                    <div className='text-center text-gray-500 py-4 border-2 border-dashed border-red-200 rounded-lg bg-red-50'>
-                      <Text type='secondary'>{t('暂无机密环境变量')}</Text>
+                    <div className='h-px bg-border' />
+
+                    {/* Secret env vars */}
+                    <div>
+                      <div className='mb-3 flex items-center justify-between'>
+                        <div className='flex items-center gap-2'>
+                          <span className='text-sm font-semibold text-foreground'>
+                            {t('机密环境变量')}
+                          </span>
+                          <StatusChip tone='red'>{t('加密存储')}</StatusChip>
+                        </div>
+                        <Button
+                          size='sm'
+                          variant='light'
+                          color='danger'
+                          startContent={<FaPlus />}
+                          onPress={addSecretEnvVar}
+                        >
+                          {t('添加')}
+                        </Button>
+                      </div>
+
+                      {secretEnvVars.map((envVar, index) => (
+                        <div key={index} className='mb-2 flex items-center gap-2'>
+                          <Input
+                            placeholder={t('变量名')}
+                            value={envVar.key}
+                            onValueChange={(value) =>
+                              updateSecretEnvVar(index, 'key', value)
+                            }
+                            size='sm'
+                            className='flex-1'
+                          />
+                          <span className='text-muted'>=</span>
+                          <Input
+                            type='password'
+                            placeholder={t('变量值')}
+                            value={envVar.value}
+                            onValueChange={(value) =>
+                              updateSecretEnvVar(index, 'value', value)
+                            }
+                            size='sm'
+                            className='flex-[2]'
+                          />
+                          <Button
+                            isIconOnly
+                            size='sm'
+                            variant='light'
+                            color='danger'
+                            onPress={() => removeSecretEnvVar(index)}
+                            aria-label={t('移除')}
+                          >
+                            <FaMinus />
+                          </Button>
+                        </div>
+                      ))}
+
+                      {secretEnvVars.length === 0 && (
+                        <div className='rounded-lg border-2 border-dashed border-danger/30 bg-danger/5 py-4 text-center text-sm text-muted'>
+                          {t('暂无机密环境变量')}
+                        </div>
+                      )}
+
+                      <div className='mt-3 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-xs text-muted'>
+                        <span className='font-semibold text-foreground'>
+                          {t('机密环境变量说明')}
+                        </span>
+                        ：
+                        {t(
+                          '机密环境变量将被加密存储，适用于存储密码、API密钥等敏感信息。',
+                        )}
+                      </div>
                     </div>
-                  )}
-
-                  <Banner
-                    type='info'
-                    title={t('机密环境变量说明')}
-                    description={t(
-                      '机密环境变量将被加密存储，适用于存储密码、API密钥等敏感信息。',
-                    )}
-                    size='small'
-                  />
-                </div>
-              </div>
-            </Collapse.Panel>
-          </Collapse>
-        </Form>
-
-        {/* Final Warning */}
-        <div className='bg-yellow-50 border border-yellow-200 rounded-lg p-3'>
-          <div className='flex items-start gap-2'>
-            <FaExclamationTriangle className='text-yellow-600 mt-0.5' />
-            <div>
-              <Text strong className='text-yellow-800'>
-                {t('配置更新确认')}
-              </Text>
-              <div className='mt-1'>
-                <Text size='small' className='text-yellow-700'>
-                  {t(
-                    '更新配置后，容器可能需要重启以应用新的设置。请确保您了解这些更改的影响。',
-                  )}
-                </Text>
+                  </div>
+                </CollapseSection>
+
+                {/* Final warning */}
+                <section className='rounded-lg border border-warning/30 bg-warning/5 p-3'>
+                  <div className='flex items-start gap-2'>
+                    <FaExclamationTriangle className='mt-0.5 shrink-0 text-warning' />
+                    <div>
+                      <div className='font-semibold text-foreground'>
+                        {t('配置更新确认')}
+                      </div>
+                      <div className='mt-1 text-xs text-muted'>
+                        {t(
+                          '更新配置后，容器可能需要重启以应用新的设置。请确保您了解这些更改的影响。',
+                        )}
+                      </div>
+                    </div>
+                  </div>
+                </section>
               </div>
-            </div>
-          </div>
-        </div>
-      </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={handleCancel}>
+                {t('取消')}
+              </Button>
+              <Button
+                color='primary'
+                isPending={loading}
+                isDisabled={Boolean(portError)}
+                onPress={handleUpdate}
+              >
+                {t('更新配置')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/model-deployments/modals/ViewDetailsModal.jsx b/web/src/components/table/model-deployments/modals/ViewDetailsModal.jsx
index f004fe54e11..ced3758d3ff 100644
--- a/web/src/components/table/model-deployments/modals/ViewDetailsModal.jsx
+++ b/web/src/components/table/model-deployments/modals/ViewDetailsModal.jsx
@@ -19,18 +19,18 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useState, useEffect } from 'react';
 import {
-  Modal,
-  Typography,
-  Card,
-  Tag,
-  Progress,
-  Descriptions,
-  Spin,
-  Empty,
   Button,
-  Badge,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
   Tooltip,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
 import {
   FaInfoCircle,
   FaServer,
@@ -42,7 +42,7 @@ import {
   FaCopy,
   FaLink,
 } from 'react-icons/fa';
-import { IconRefresh } from '@douyinfe/semi-icons';
+import { Inbox, RefreshCw } from 'lucide-react';
 import {
   API,
   showError,
@@ -50,7 +50,82 @@ import {
   timestamp2string,
 } from '../../../../helpers';
 
-const { Text, Title } = Typography;
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+  orange: 'bg-warning/15 text-warning',
+  red: 'bg-danger/15 text-danger',
+  grey: 'bg-surface-secondary text-muted',
+};
+
+function StatusTag({ tone, size = 'sm', children }) {
+  const cls = TAG_TONE[tone] || TAG_TONE.grey;
+  const sizeCls = size === 'lg' ? 'px-3 py-1 text-sm' : 'px-2 py-0.5 text-xs';
+  return (
+    <span
+      className={`inline-flex items-center rounded-full font-medium ${cls} ${sizeCls}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+// Lightweight section card — replaces Semi `<Card title=...>` with a flat
+// surface that follows the rest of /console (no shadow, just a thin border).
+function SectionCard({ title, icon, iconClass = 'text-primary', children }) {
+  return (
+    <section className='rounded-2xl border border-border bg-background'>
+      <header className='flex items-center gap-2 border-b border-border px-4 py-3 text-sm font-semibold text-foreground'>
+        <span className={iconClass}>{icon}</span>
+        <span>{title}</span>
+      </header>
+      <div className='px-4 py-3'>{children}</div>
+    </section>
+  );
+}
+
+// Replaces Semi `<Descriptions data=[{key, value}]>` with a stacked
+// label/value list. Wider screens get 2-column layout.
+function DescList({ items }) {
+  return (
+    <dl className='grid grid-cols-1 gap-y-2 sm:grid-cols-[140px_minmax(0,1fr)] sm:gap-x-4'>
+      {items.map((item, idx) => (
+        <React.Fragment key={`${item.key}-${idx}`}>
+          <dt className='text-xs font-medium text-muted sm:pt-1'>
+            {item.key}
+          </dt>
+          <dd className='text-sm text-foreground'>{item.value}</dd>
+        </React.Fragment>
+      ))}
+    </dl>
+  );
+}
+
+// Tailwind progress bar — replaces Semi `<Progress>` for the completed
+// percent indicator.
+function ProgressBar({ percent }) {
+  const clamped = Math.min(100, Math.max(0, Number(percent) || 0));
+  const tone = clamped >= 100 ? 'bg-success' : 'bg-primary';
+  return (
+    <div className='h-2 w-full overflow-hidden rounded-full bg-surface-secondary'>
+      <div
+        className={`h-full rounded-full transition-all ${tone}`}
+        style={{ width: `${clamped}%` }}
+      />
+    </div>
+  );
+}
+
+function EmptyBlock({ description }) {
+  return (
+    <div className='flex flex-col items-center gap-3 py-10 text-center'>
+      <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+        <Inbox size={28} />
+      </div>
+      <span className='text-sm text-muted'>{description}</span>
+    </div>
+  );
+}
 
 const ViewDetailsModal = ({ visible, onCancel, deployment, t }) => {
   const [details, setDetails] = useState(null);
@@ -58,6 +133,13 @@ const ViewDetailsModal = ({ visible, onCancel, deployment, t }) => {
   const [containers, setContainers] = useState([]);
   const [containersLoading, setContainersLoading] = useState(false);
 
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
   const fetchDetails = async () => {
     if (!deployment?.id) return;
 
@@ -139,461 +221,447 @@ const ViewDetailsModal = ({ visible, onCancel, deployment, t }) => {
   const statusConfig = getStatusConfig(deployment?.status);
 
   return (
-    <Modal
-      title={
-        <div className='flex items-center gap-2'>
-          <FaInfoCircle className='text-blue-500' />
-          <span>{t('容器详情')}</span>
-        </div>
-      }
-      visible={visible}
-      onCancel={onCancel}
-      footer={
-        <div className='flex justify-between'>
-          <Button
-            icon={<IconRefresh />}
-            onClick={handleRefresh}
-            loading={loading || containersLoading}
-            theme='borderless'
-          >
-            {t('刷新')}
-          </Button>
-          <Button onClick={onCancel}>{t('关闭')}</Button>
-        </div>
-      }
-      width={800}
-      className='deployment-details-modal'
-    >
-      {loading && !details ? (
-        <div className='flex items-center justify-center py-12'>
-          <Spin size='large' tip={t('加载详情中...')} />
-        </div>
-      ) : details ? (
-        <div className='space-y-4 max-h-[600px] overflow-y-auto'>
-          {/* Basic Info */}
-          <Card
-            title={
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='2xl' scroll='inside' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
               <div className='flex items-center gap-2'>
-                <FaServer className='text-blue-500' />
-                <span>{t('基本信息')}</span>
+                <FaInfoCircle className='text-primary' />
+                <span>{t('容器详情')}</span>
               </div>
-            }
-            className='border-0 shadow-sm'
-          >
-            <Descriptions
-              data={[
-                {
-                  key: t('容器名称'),
-                  value: (
-                    <div className='flex items-center gap-2'>
-                      <Text strong className='text-base'>
-                        {details.deployment_name || details.id}
-                      </Text>
-                      <Button
-                        size='small'
-                        theme='borderless'
-                        icon={<FaCopy />}
-                        onClick={handleCopyId}
-                        className='opacity-70 hover:opacity-100'
+            </ModalHeader>
+            <ModalBody className='max-h-[70vh] overflow-y-auto px-4 py-4 md:px-6'>
+              {loading && !details ? (
+                <div className='flex flex-col items-center justify-center gap-3 py-12'>
+                  <Spinner color='primary' />
+                  <span className='text-sm text-muted'>
+                    {t('加载详情中...')}
+                  </span>
+                </div>
+              ) : details ? (
+                <div className='space-y-4'>
+                  {/* Basic Info */}
+                  <SectionCard
+                    title={t('基本信息')}
+                    icon={<FaServer />}
+                    iconClass='text-primary'
+                  >
+                    <DescList
+                      items={[
+                        {
+                          key: t('容器名称'),
+                          value: (
+                            <div className='flex items-center gap-2'>
+                              <span className='text-base font-semibold text-foreground'>
+                                {details.deployment_name || details.id}
+                              </span>
+                              <Button
+                                isIconOnly
+                                size='sm'
+                                variant='light'
+                                onPress={handleCopyId}
+                                aria-label={t('复制')}
+                                className='opacity-70 hover:opacity-100'
+                              >
+                                <FaCopy />
+                              </Button>
+                            </div>
+                          ),
+                        },
+                        {
+                          key: t('容器ID'),
+                          value: (
+                            <span className='font-mono text-sm text-muted'>
+                              {details.id}
+                            </span>
+                          ),
+                        },
+                        {
+                          key: t('状态'),
+                          value: (
+                            <div className='flex items-center gap-2'>
+                              <span>{statusConfig.icon}</span>
+                              <StatusTag tone={statusConfig.color}>
+                                {t(statusConfig.text)}
+                              </StatusTag>
+                            </div>
+                          ),
+                        },
+                        {
+                          key: t('创建时间'),
+                          value: (
+                            <span className='tabular-nums'>
+                              {timestamp2string(details.created_at)}
+                            </span>
+                          ),
+                        },
+                      ]}
+                    />
+                  </SectionCard>
+
+                  {/* Hardware & Performance */}
+                  <SectionCard
+                    title={t('硬件与性能')}
+                    icon={<FaChartLine />}
+                    iconClass='text-success'
+                  >
+                    <div className='space-y-4'>
+                      <DescList
+                        items={[
+                          {
+                            key: t('硬件类型'),
+                            value: (
+                              <div className='flex items-center gap-2'>
+                                <StatusTag tone='blue'>
+                                  {details.brand_name}
+                                </StatusTag>
+                                <span className='font-semibold'>
+                                  {details.hardware_name}
+                                </span>
+                              </div>
+                            ),
+                          },
+                          {
+                            key: t('GPU数量'),
+                            value: (
+                              <div className='flex items-center gap-2'>
+                                <span className='inline-flex items-center justify-center rounded-full bg-primary px-2 py-0.5 text-xs font-semibold text-white'>
+                                  {details.total_gpus}
+                                </span>
+                                <span>
+                                  {t('总计')} {details.total_gpus}{' '}
+                                  {t('个GPU')}
+                                </span>
+                              </div>
+                            ),
+                          },
+                          {
+                            key: t('容器配置'),
+                            value: (
+                              <div className='space-y-1'>
+                                <div>
+                                  {t('每容器GPU数')}: {details.gpus_per_container}
+                                </div>
+                                <div>
+                                  {t('容器总数')}: {details.total_containers}
+                                </div>
+                              </div>
+                            ),
+                          },
+                        ]}
                       />
-                    </div>
-                  ),
-                },
-                {
-                  key: t('容器ID'),
-                  value: (
-                    <Text type='secondary' className='font-mono text-sm'>
-                      {details.id}
-                    </Text>
-                  ),
-                },
-                {
-                  key: t('状态'),
-                  value: (
-                    <div className='flex items-center gap-2'>
-                      <span>{statusConfig.icon}</span>
-                      <Tag color={statusConfig.color}>
-                        {t(statusConfig.text)}
-                      </Tag>
-                    </div>
-                  ),
-                },
-                {
-                  key: t('创建时间'),
-                  value: timestamp2string(details.created_at),
-                },
-              ]}
-            />
-          </Card>
-
-          {/* Hardware & Performance */}
-          <Card
-            title={
-              <div className='flex items-center gap-2'>
-                <FaChartLine className='text-green-500' />
-                <span>{t('硬件与性能')}</span>
-              </div>
-            }
-            className='border-0 shadow-sm'
-          >
-            <div className='space-y-4'>
-              <Descriptions
-                data={[
-                  {
-                    key: t('硬件类型'),
-                    value: (
-                      <div className='flex items-center gap-2'>
-                        <Tag color='blue'>{details.brand_name}</Tag>
-                        <Text strong>{details.hardware_name}</Text>
-                      </div>
-                    ),
-                  },
-                  {
-                    key: t('GPU数量'),
-                    value: (
-                      <div className='flex items-center gap-2'>
-                        <Badge
-                          count={details.total_gpus}
-                          theme='solid'
-                          type='primary'
-                        >
-                          <FaServer className='text-purple-500' />
-                        </Badge>
-                        <Text>
-                          {t('总计')} {details.total_gpus} {t('个GPU')}
-                        </Text>
-                      </div>
-                    ),
-                  },
-                  {
-                    key: t('容器配置'),
-                    value: (
-                      <div className='space-y-1'>
-                        <div>
-                          {t('每容器GPU数')}: {details.gpus_per_container}
+
+                      {/* Progress Bar */}
+                      <div className='space-y-2'>
+                        <div className='flex items-center justify-between text-sm'>
+                          <span className='font-semibold text-foreground'>
+                            {t('完成进度')}
+                          </span>
+                          <span className='tabular-nums text-foreground'>
+                            {details.completed_percent}%
+                          </span>
                         </div>
-                        <div>
-                          {t('容器总数')}: {details.total_containers}
+                        <ProgressBar percent={details.completed_percent} />
+                        <div className='flex justify-between text-xs text-muted'>
+                          <span>
+                            {t('已服务')}: {details.compute_minutes_served}{' '}
+                            {t('分钟')}
+                          </span>
+                          <span>
+                            {t('剩余')}: {details.compute_minutes_remaining}{' '}
+                            {t('分钟')}
+                          </span>
                         </div>
                       </div>
-                    ),
-                  },
-                ]}
-              />
-
-              {/* Progress Bar */}
-              <div className='space-y-2'>
-                <div className='flex items-center justify-between'>
-                  <Text strong>{t('完成进度')}</Text>
-                  <Text>{details.completed_percent}%</Text>
-                </div>
-                <Progress
-                  percent={details.completed_percent}
-                  status={
-                    details.completed_percent === 100 ? 'success' : 'normal'
-                  }
-                  strokeWidth={8}
-                  showInfo={false}
-                />
-                <div className='flex justify-between text-xs text-gray-500'>
-                  <span>
-                    {t('已服务')}: {details.compute_minutes_served} {t('分钟')}
-                  </span>
-                  <span>
-                    {t('剩余')}: {details.compute_minutes_remaining} {t('分钟')}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </Card>
-
-          {/* Container Configuration */}
-          {details.container_config && (
-            <Card
-              title={
-                <div className='flex items-center gap-2'>
-                  <FaDocker className='text-blue-600' />
-                  <span>{t('容器配置')}</span>
-                </div>
-              }
-              className='border-0 shadow-sm'
-            >
-              <div className='space-y-3'>
-                <Descriptions
-                  data={[
-                    {
-                      key: t('镜像地址'),
-                      value: (
-                        <Text className='font-mono text-sm break-all'>
-                          {details.container_config.image_url || 'N/A'}
-                        </Text>
-                      ),
-                    },
-                    {
-                      key: t('流量端口'),
-                      value: details.container_config.traffic_port || 'N/A',
-                    },
-                    {
-                      key: t('启动命令'),
-                      value: (
-                        <Text className='font-mono text-sm'>
-                          {details.container_config.entrypoint
-                            ? details.container_config.entrypoint.join(' ')
-                            : 'N/A'}
-                        </Text>
-                      ),
-                    },
-                  ]}
-                />
-
-                {/* Environment Variables */}
-                {details.container_config.env_variables &&
-                  Object.keys(details.container_config.env_variables).length >
-                    0 && (
-                    <div className='mt-4'>
-                      <Text strong className='block mb-2'>
-                        {t('环境变量')}:
-                      </Text>
-                      <div className='bg-gray-50 p-3 rounded-lg max-h-32 overflow-y-auto'>
-                        {Object.entries(
-                          details.container_config.env_variables,
-                        ).map(([key, value]) => (
+                    </div>
+                  </SectionCard>
+
+                  {/* Container Configuration */}
+                  {details.container_config && (
+                    <SectionCard
+                      title={t('容器配置')}
+                      icon={<FaDocker />}
+                      iconClass='text-primary'
+                    >
+                      <div className='space-y-3'>
+                        <DescList
+                          items={[
+                            {
+                              key: t('镜像地址'),
+                              value: (
+                                <span className='break-all font-mono text-sm'>
+                                  {details.container_config.image_url || 'N/A'}
+                                </span>
+                              ),
+                            },
+                            {
+                              key: t('流量端口'),
+                              value: details.container_config.traffic_port || 'N/A',
+                            },
+                            {
+                              key: t('启动命令'),
+                              value: (
+                                <span className='font-mono text-sm'>
+                                  {details.container_config.entrypoint
+                                    ? details.container_config.entrypoint.join(' ')
+                                    : 'N/A'}
+                                </span>
+                              ),
+                            },
+                          ]}
+                        />
+
+                        {/* Environment Variables */}
+                        {details.container_config.env_variables &&
+                          Object.keys(details.container_config.env_variables)
+                            .length > 0 && (
+                            <div className='mt-4'>
+                              <div className='mb-2 text-sm font-semibold text-foreground'>
+                                {t('环境变量')}:
+                              </div>
+                              <div className='max-h-32 overflow-y-auto rounded-lg bg-surface-secondary p-3'>
+                                {Object.entries(
+                                  details.container_config.env_variables,
+                                ).map(([key, value]) => (
+                                  <div
+                                    key={key}
+                                    className='mb-1 flex gap-2 font-mono text-sm'
+                                  >
+                                    <span className='font-medium text-primary'>
+                                      {key}=
+                                    </span>
+                                    <span className='break-all text-foreground'>
+                                      {String(value)}
+                                    </span>
+                                  </div>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                      </div>
+                    </SectionCard>
+                  )}
+
+                  {/* Containers List */}
+                  <SectionCard
+                    title={t('容器实例')}
+                    icon={<FaServer />}
+                    iconClass='text-accent'
+                  >
+                    {containersLoading ? (
+                      <div className='flex flex-col items-center justify-center gap-3 py-6'>
+                        <Spinner color='primary' />
+                        <span className='text-sm text-muted'>
+                          {t('加载容器信息中...')}
+                        </span>
+                      </div>
+                    ) : containers.length === 0 ? (
+                      <EmptyBlock description={t('暂无容器信息')} />
+                    ) : (
+                      <div className='space-y-3'>
+                        {containers.map((ctr) => (
                           <div
-                            key={key}
-                            className='flex gap-2 text-sm font-mono mb-1'
+                            key={ctr.container_id}
+                            className='rounded-xl border border-border bg-surface-secondary px-4 py-3'
                           >
-                            <span className='text-blue-600 font-medium'>
-                              {key}=
-                            </span>
-                            <span className='text-gray-700 break-all'>
-                              {String(value)}
-                            </span>
+                            <div className='flex flex-wrap items-center justify-between gap-3'>
+                              <div className='flex flex-col gap-1'>
+                                <span className='font-mono text-sm font-semibold'>
+                                  {ctr.container_id}
+                                </span>
+                                <span className='text-xs text-muted'>
+                                  {t('设备')} {ctr.device_id || '--'} ·{' '}
+                                  {t('状态')} {ctr.status || '--'}
+                                </span>
+                                <span className='text-xs text-muted'>
+                                  {t('创建时间')}:{' '}
+                                  {ctr.created_at
+                                    ? timestamp2string(ctr.created_at)
+                                    : '--'}
+                                </span>
+                              </div>
+                              <div className='flex flex-col items-end gap-2'>
+                                <StatusTag tone='blue'>
+                                  {t('GPU/容器')}:{' '}
+                                  {ctr.gpus_per_container ?? '--'}
+                                </StatusTag>
+                                {ctr.public_url && (
+                                  <Tooltip content={ctr.public_url}>
+                                    <Button
+                                      size='sm'
+                                      variant='flat'
+                                      startContent={<FaLink />}
+                                      onPress={() =>
+                                        window.open(
+                                          ctr.public_url,
+                                          '_blank',
+                                          'noopener,noreferrer',
+                                        )
+                                      }
+                                    >
+                                      {t('访问容器')}
+                                    </Button>
+                                  </Tooltip>
+                                )}
+                              </div>
+                            </div>
+
+                            {ctr.events && ctr.events.length > 0 && (
+                              <div className='mt-3 rounded-md border border-border bg-background p-3'>
+                                <div className='mb-2 text-xs text-muted'>
+                                  {t('最近事件')}
+                                </div>
+                                <div className='max-h-32 space-y-2 overflow-y-auto'>
+                                  {ctr.events.map((event, index) => (
+                                    <div
+                                      key={`${ctr.container_id}-${event.time}-${index}`}
+                                      className='flex gap-3 font-mono text-xs'
+                                    >
+                                      <span className='min-w-[140px] text-muted'>
+                                        {event.time
+                                          ? timestamp2string(event.time)
+                                          : '--'}
+                                      </span>
+                                      <span className='flex-1 break-all text-foreground'>
+                                        {event.message || '--'}
+                                      </span>
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            )}
                           </div>
                         ))}
                       </div>
-                    </div>
+                    )}
+                  </SectionCard>
+
+                  {/* Location Information */}
+                  {details.locations && details.locations.length > 0 && (
+                    <SectionCard
+                      title={t('部署位置')}
+                      icon={<FaMapMarkerAlt />}
+                      iconClass='text-warning'
+                    >
+                      <div className='flex flex-wrap gap-2'>
+                        {details.locations.map((location) => (
+                          <StatusTag
+                            key={location.id}
+                            tone='orange'
+                            size='lg'
+                          >
+                            <span className='mr-1'>🌍</span>
+                            <span>
+                              {location.name} ({location.iso2})
+                            </span>
+                          </StatusTag>
+                        ))}
+                      </div>
+                    </SectionCard>
                   )}
-              </div>
-            </Card>
-          )}
 
-          {/* Containers List */}
-          <Card
-            title={
-              <div className='flex items-center gap-2'>
-                <FaServer className='text-indigo-500' />
-                <span>{t('容器实例')}</span>
-              </div>
-            }
-            className='border-0 shadow-sm'
-          >
-            {containersLoading ? (
-              <div className='flex items-center justify-center py-6'>
-                <Spin tip={t('加载容器信息中...')} />
-              </div>
-            ) : containers.length === 0 ? (
-              <Empty
-                description={t('暂无容器信息')}
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-              />
-            ) : (
-              <div className='space-y-3'>
-                {containers.map((ctr) => (
-                  <Card
-                    key={ctr.container_id}
-                    className='bg-gray-50 border border-gray-100'
-                    bodyStyle={{ padding: '12px 16px' }}
+                  {/* Cost Information */}
+                  <SectionCard
+                    title={t('费用信息')}
+                    icon={<FaMoneyBillWave />}
+                    iconClass='text-success'
                   >
-                    <div className='flex flex-wrap items-center justify-between gap-3'>
-                      <div className='flex flex-col gap-1'>
-                        <Text strong className='font-mono text-sm'>
-                          {ctr.container_id}
-                        </Text>
-                        <Text size='small' type='secondary'>
-                          {t('设备')} {ctr.device_id || '--'} · {t('状态')}{' '}
-                          {ctr.status || '--'}
-                        </Text>
-                        <Text size='small' type='secondary'>
-                          {t('创建时间')}:{' '}
-                          {ctr.created_at
-                            ? timestamp2string(ctr.created_at)
-                            : '--'}
-                        </Text>
+                    <div className='space-y-3'>
+                      <div className='flex items-center justify-between rounded-lg bg-success/10 p-3'>
+                        <span>{t('已支付金额')}</span>
+                        <span className='text-lg font-semibold text-success tabular-nums'>
+                          $
+                          {details.amount_paid
+                            ? details.amount_paid.toFixed(2)
+                            : '0.00'}{' '}
+                          USDC
+                        </span>
                       </div>
-                      <div className='flex flex-col items-end gap-2'>
-                        <Tag color='blue' size='small'>
-                          {t('GPU/容器')}: {ctr.gpus_per_container ?? '--'}
-                        </Tag>
-                        {ctr.public_url && (
-                          <Tooltip content={ctr.public_url}>
-                            <Button
-                              icon={<FaLink />}
-                              size='small'
-                              theme='light'
-                              onClick={() =>
-                                window.open(
-                                  ctr.public_url,
-                                  '_blank',
-                                  'noopener,noreferrer',
-                                )
-                              }
-                            >
-                              {t('访问容器')}
-                            </Button>
-                          </Tooltip>
-                        )}
+
+                      <div className='grid grid-cols-1 gap-4 text-sm sm:grid-cols-2'>
+                        <div className='flex justify-between'>
+                          <span className='text-muted'>
+                            {t('计费开始')}:
+                          </span>
+                          <span className='tabular-nums'>
+                            {details.started_at
+                              ? timestamp2string(details.started_at)
+                              : 'N/A'}
+                          </span>
+                        </div>
+                        <div className='flex justify-between'>
+                          <span className='text-muted'>
+                            {t('预计结束')}:
+                          </span>
+                          <span className='tabular-nums'>
+                            {details.finished_at
+                              ? timestamp2string(details.finished_at)
+                              : 'N/A'}
+                          </span>
+                        </div>
                       </div>
                     </div>
+                  </SectionCard>
 
-                    {ctr.events && ctr.events.length > 0 && (
-                      <div className='mt-3 bg-white rounded-md border border-gray-100 p-3'>
-                        <Text
-                          size='small'
-                          type='secondary'
-                          className='block mb-2'
-                        >
-                          {t('最近事件')}
-                        </Text>
-                        <div className='space-y-2 max-h-32 overflow-y-auto'>
-                          {ctr.events.map((event, index) => (
-                            <div
-                              key={`${ctr.container_id}-${event.time}-${index}`}
-                              className='flex gap-3 text-xs font-mono'
-                            >
-                              <span className='text-gray-500 min-w-[140px]'>
-                                {event.time
-                                  ? timestamp2string(event.time)
-                                  : '--'}
-                              </span>
-                              <span className='text-gray-700 break-all flex-1'>
-                                {event.message || '--'}
-                              </span>
-                            </div>
-                          ))}
+                  {/* Time Information */}
+                  <SectionCard
+                    title={t('时间信息')}
+                    icon={<FaClock />}
+                    iconClass='text-accent'
+                  >
+                    <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                      <div className='space-y-2'>
+                        <div className='flex items-center justify-between'>
+                          <span className='text-muted'>{t('已运行时间')}:</span>
+                          <span className='font-semibold tabular-nums'>
+                            {Math.floor(details.compute_minutes_served / 60)}h{' '}
+                            {details.compute_minutes_served % 60}m
+                          </span>
+                        </div>
+                        <div className='flex items-center justify-between'>
+                          <span className='text-muted'>{t('剩余时间')}:</span>
+                          <span className='font-semibold text-warning tabular-nums'>
+                            {Math.floor(details.compute_minutes_remaining / 60)}
+                            h {details.compute_minutes_remaining % 60}m
+                          </span>
+                        </div>
+                      </div>
+                      <div className='space-y-2'>
+                        <div className='flex items-center justify-between'>
+                          <span className='text-muted'>{t('创建时间')}:</span>
+                          <span className='tabular-nums'>
+                            {timestamp2string(details.created_at)}
+                          </span>
+                        </div>
+                        <div className='flex items-center justify-between'>
+                          <span className='text-muted'>{t('最后更新')}:</span>
+                          <span className='tabular-nums'>
+                            {timestamp2string(details.updated_at)}
+                          </span>
                         </div>
                       </div>
-                    )}
-                  </Card>
-                ))}
-              </div>
-            )}
-          </Card>
-
-          {/* Location Information */}
-          {details.locations && details.locations.length > 0 && (
-            <Card
-              title={
-                <div className='flex items-center gap-2'>
-                  <FaMapMarkerAlt className='text-orange-500' />
-                  <span>{t('部署位置')}</span>
-                </div>
-              }
-              className='border-0 shadow-sm'
-            >
-              <div className='flex flex-wrap gap-2'>
-                {details.locations.map((location) => (
-                  <Tag key={location.id} color='orange' size='large'>
-                    <div className='flex items-center gap-1'>
-                      <span>🌍</span>
-                      <span>
-                        {location.name} ({location.iso2})
-                      </span>
                     </div>
-                  </Tag>
-                ))}
-              </div>
-            </Card>
-          )}
-
-          {/* Cost Information */}
-          <Card
-            title={
-              <div className='flex items-center gap-2'>
-                <FaMoneyBillWave className='text-green-500' />
-                <span>{t('费用信息')}</span>
-              </div>
-            }
-            className='border-0 shadow-sm'
-          >
-            <div className='space-y-3'>
-              <div className='flex items-center justify-between p-3 bg-green-50 rounded-lg'>
-                <Text>{t('已支付金额')}</Text>
-                <Text strong className='text-lg text-green-600'>
-                  $
-                  {details.amount_paid
-                    ? details.amount_paid.toFixed(2)
-                    : '0.00'}{' '}
-                  USDC
-                </Text>
-              </div>
-
-              <div className='grid grid-cols-2 gap-4 text-sm'>
-                <div className='flex justify-between'>
-                  <Text type='secondary'>{t('计费开始')}:</Text>
-                  <Text>
-                    {details.started_at
-                      ? timestamp2string(details.started_at)
-                      : 'N/A'}
-                  </Text>
-                </div>
-                <div className='flex justify-between'>
-                  <Text type='secondary'>{t('预计结束')}:</Text>
-                  <Text>
-                    {details.finished_at
-                      ? timestamp2string(details.finished_at)
-                      : 'N/A'}
-                  </Text>
-                </div>
-              </div>
-            </div>
-          </Card>
-
-          {/* Time Information */}
-          <Card
-            title={
-              <div className='flex items-center gap-2'>
-                <FaClock className='text-purple-500' />
-                <span>{t('时间信息')}</span>
-              </div>
-            }
-            className='border-0 shadow-sm'
-          >
-            <div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
-              <div className='space-y-2'>
-                <div className='flex items-center justify-between'>
-                  <Text type='secondary'>{t('已运行时间')}:</Text>
-                  <Text strong>
-                    {Math.floor(details.compute_minutes_served / 60)}h{' '}
-                    {details.compute_minutes_served % 60}m
-                  </Text>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <Text type='secondary'>{t('剩余时间')}:</Text>
-                  <Text strong className='text-orange-600'>
-                    {Math.floor(details.compute_minutes_remaining / 60)}h{' '}
-                    {details.compute_minutes_remaining % 60}m
-                  </Text>
-                </div>
-              </div>
-              <div className='space-y-2'>
-                <div className='flex items-center justify-between'>
-                  <Text type='secondary'>{t('创建时间')}:</Text>
-                  <Text>{timestamp2string(details.created_at)}</Text>
-                </div>
-                <div className='flex items-center justify-between'>
-                  <Text type='secondary'>{t('最后更新')}:</Text>
-                  <Text>{timestamp2string(details.updated_at)}</Text>
+                  </SectionCard>
                 </div>
-              </div>
-            </div>
-          </Card>
-        </div>
-      ) : (
-        <Empty
-          image={Empty.PRESENTED_IMAGE_SIMPLE}
-          description={t('无法获取容器详情')}
-        />
-      )}
+              ) : (
+                <EmptyBlock description={t('无法获取容器详情')} />
+              )}
+            </ModalBody>
+            <ModalFooter className='flex justify-between border-t border-border'>
+              <Button
+                variant='light'
+                startContent={<RefreshCw size={14} />}
+                onPress={handleRefresh}
+                isPending={loading || containersLoading}
+              >
+                {t('刷新')}
+              </Button>
+              <Button onPress={onCancel}>{t('关闭')}</Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/model-deployments/modals/ViewLogsModal.jsx b/web/src/components/table/model-deployments/modals/ViewLogsModal.jsx
index 3d0446aeab9..6a1bf87703a 100644
--- a/web/src/components/table/model-deployments/modals/ViewLogsModal.jsx
+++ b/web/src/components/table/model-deployments/modals/ViewLogsModal.jsx
@@ -19,21 +19,19 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useState, useEffect, useRef } from 'react';
 import {
-  Modal,
   Button,
-  Typography,
-  Select,
   Input,
-  Space,
-  Spin,
-  Card,
-  Tag,
-  Empty,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  Spinner,
   Switch,
-  Divider,
   Tooltip,
-  Radio,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
 import {
   FaCopy,
   FaSearch,
@@ -43,7 +41,7 @@ import {
   FaInfoCircle,
   FaLink,
 } from 'react-icons/fa';
-import { IconRefresh, IconDownload } from '@douyinfe/semi-icons';
+import { Download, Inbox, RefreshCw } from 'lucide-react';
 import {
   API,
   showError,
@@ -52,10 +50,63 @@ import {
   timestamp2string,
 } from '../../../../helpers';
 
-const { Text } = Typography;
-
 const ALL_CONTAINERS = '__all__';
 
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+  orange: 'bg-warning/15 text-warning',
+  red: 'bg-danger/15 text-danger',
+  grey: 'bg-surface-secondary text-muted',
+};
+
+function StatusTag({ tone, children }) {
+  const cls = TAG_TONE[tone] || TAG_TONE.grey;
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+// Compact segmented control replaces Semi `<Radio.Group type='button'>`.
+function StreamSegment({ value, onChange, options }) {
+  return (
+    <div className='inline-flex overflow-hidden rounded-lg border border-border'>
+      {options.map((option) => {
+        const active = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type='button'
+            onClick={() => onChange(option.value)}
+            className={`px-3 py-1 text-xs font-medium transition-colors ${
+              active
+                ? 'bg-foreground text-background'
+                : 'bg-background text-muted hover:bg-surface-secondary'
+            }`}
+          >
+            {option.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function EmptyBlock({ description }) {
+  return (
+    <div className='flex flex-col items-center gap-3 py-12 text-center'>
+      <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+        <Inbox size={28} />
+      </div>
+      <span className='text-sm text-muted'>{description}</span>
+    </div>
+  );
+}
+
 const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
   const [logLines, setLogLines] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -74,31 +125,19 @@ const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
   const logContainerRef = useRef(null);
   const autoRefreshRef = useRef(null);
 
-  // Auto scroll to bottom when new logs arrive
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
   const scrollToBottom = () => {
     if (logContainerRef.current) {
       logContainerRef.current.scrollTop = logContainerRef.current.scrollHeight;
     }
   };
 
-  const resolveStreamValue = (value) => {
-    if (typeof value === 'string') {
-      return value;
-    }
-    if (value && typeof value.value === 'string') {
-      return value.value;
-    }
-    if (value && value.target && typeof value.target.value === 'string') {
-      return value.target.value;
-    }
-    return '';
-  };
-
-  const handleStreamChange = (value) => {
-    const next = resolveStreamValue(value) || 'stdout';
-    setStreamFilter(next);
-  };
-
   const fetchLogs = async (containerIdOverride = undefined) => {
     if (!deployment?.id) return;
 
@@ -119,9 +158,8 @@ const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
       const params = new URLSearchParams();
       params.append('container_id', containerId);
 
-      const streamValue = resolveStreamValue(streamFilter) || 'stdout';
-      if (streamValue && streamValue !== 'all') {
-        params.append('stream', streamValue);
+      if (streamFilter && streamFilter !== 'all') {
+        params.append('stream', streamFilter);
       }
       if (following) params.append('follow', 'true');
 
@@ -231,11 +269,7 @@ const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
 
   const renderContainerStatusTag = (status) => {
     if (!status) {
-      return (
-        <Tag color='grey' size='small'>
-          {t('未知状态')}
-        </Tag>
-      );
+      return <StatusTag tone='grey'>{t('未知状态')}</StatusTag>;
     }
 
     const normalized =
@@ -252,11 +286,7 @@ const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
 
     const config = statusMap[normalized] || { color: 'grey', label: status };
 
-    return (
-      <Tag color={config.color} size='small'>
-        {t(config.label)}
-      </Tag>
-    );
+    return <StatusTag tone={config.color}>{t(config.label)}</StatusTag>;
   };
 
   const currentContainer =
@@ -271,6 +301,14 @@ const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
     fetchLogs();
   };
 
+  // Filter logs based on search term
+  const filteredLogs = logLines
+    .map((line) => line ?? '')
+    .filter(
+      (line) =>
+        !searchTerm || line.toLowerCase().includes(searchTerm.toLowerCase()),
+    );
+
   const downloadLogs = () => {
     const sourceLogs = filteredLogs.length > 0 ? filteredLogs : logLines;
     if (sourceLogs.length === 0) {
@@ -360,7 +398,6 @@ const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
     }
   }, [visible, deployment?.id, selectedContainerId]);
 
-  // Initial load and cleanup
   useEffect(() => {
     if (visible && deployment?.id) {
       fetchLogs();
@@ -373,349 +410,378 @@ const ViewLogsModal = ({ visible, onCancel, deployment, t }) => {
     };
   }, [visible, deployment?.id, streamFilter, selectedContainerId, following]);
 
-  // Filter logs based on search term
-  const filteredLogs = logLines
-    .map((line) => line ?? '')
-    .filter(
-      (line) =>
-        !searchTerm || line.toLowerCase().includes(searchTerm.toLowerCase()),
-    );
-
   const renderLogEntry = (line, index) => (
     <div
       key={`${index}-${line.slice(0, 20)}`}
-      className='py-1 px-3 hover:bg-gray-50 font-mono text-sm border-b border-gray-100 whitespace-pre-wrap break-words'
+      className='whitespace-pre-wrap break-words border-b border-border px-3 py-1 font-mono text-sm hover:bg-surface-secondary'
     >
       {line}
     </div>
   );
 
   return (
-    <Modal
-      title={
-        <div className='flex items-center gap-2'>
-          <FaTerminal className='text-blue-500' />
-          <span>{t('容器日志')}</span>
-          <Text type='secondary' size='small'>
-            - {deployment?.container_name || deployment?.id}
-          </Text>
-        </div>
-      }
-      visible={visible}
-      onCancel={onCancel}
-      footer={null}
-      width={1000}
-      height={700}
-      className='logs-modal'
-      style={{ top: 20 }}
-    >
-      <div className='flex flex-col h-full max-h-[600px]'>
-        {/* Controls */}
-        <Card className='mb-4 border-0 shadow-sm'>
-          <div className='flex items-center justify-between flex-wrap gap-3'>
-            <Space wrap>
-              <Select
-                prefix={<FaServer />}
-                placeholder={t('选择容器')}
-                value={selectedContainerId}
-                onChange={handleContainerChange}
-                style={{ width: 240 }}
-                size='small'
-                loading={containersLoading}
-                dropdownStyle={{ maxHeight: 320, overflowY: 'auto' }}
-              >
-                <Select.Option value={ALL_CONTAINERS}>
-                  {t('全部容器')}
-                </Select.Option>
-                {containers.map((ctr) => (
-                  <Select.Option
-                    key={ctr.container_id}
-                    value={ctr.container_id}
-                  >
-                    <div className='flex flex-col'>
-                      <span className='font-mono text-xs'>
-                        {ctr.container_id}
-                      </span>
-                      <span className='text-xs text-gray-500'>
-                        {ctr.brand_name || 'IO.NET'}
-                        {ctr.hardware ? ` · ${ctr.hardware}` : ''}
-                      </span>
-                    </div>
-                  </Select.Option>
-                ))}
-              </Select>
-
-              <Input
-                prefix={<FaSearch />}
-                placeholder={t('搜索日志内容')}
-                value={searchTerm}
-                onChange={setSearchTerm}
-                style={{ width: 200 }}
-                size='small'
-              />
-
-              <Space align='center' className='ml-2'>
-                <Text size='small' type='secondary'>
-                  {t('日志流')}
-                </Text>
-                <Radio.Group
-                  type='button'
-                  size='small'
-                  value={streamFilter}
-                  onChange={handleStreamChange}
-                >
-                  <Radio value='stdout'>STDOUT</Radio>
-                  <Radio value='stderr'>STDERR</Radio>
-                </Radio.Group>
-              </Space>
-
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='3xl' scroll='inside' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
               <div className='flex items-center gap-2'>
-                <Switch
-                  checked={autoRefresh}
-                  onChange={setAutoRefresh}
-                  size='small'
-                />
-                <Text size='small'>{t('自动刷新')}</Text>
+                <FaTerminal className='text-primary' />
+                <span>{t('容器日志')}</span>
+                <span className='text-xs text-muted'>
+                  - {deployment?.container_name || deployment?.id}
+                </span>
               </div>
+            </ModalHeader>
+            <ModalBody className='px-4 py-4 md:px-6'>
+              <div className='flex max-h-[70vh] flex-col gap-3'>
+                {/* Toolbar */}
+                <div className='rounded-2xl border border-border bg-background px-3 py-3'>
+                  <div className='flex flex-wrap items-center justify-between gap-3'>
+                    <div className='flex flex-wrap items-center gap-3'>
+                      <select
+                        value={selectedContainerId}
+                        onChange={(event) =>
+                          handleContainerChange(event.target.value)
+                        }
+                        aria-label={t('选择容器')}
+                        disabled={containersLoading}
+                        className='h-8 max-w-[260px] rounded-lg border border-border bg-background px-2 text-xs outline-none focus:border-primary'
+                      >
+                        <option value={ALL_CONTAINERS}>{t('全部容器')}</option>
+                        {containers.map((ctr) => (
+                          <option
+                            key={ctr.container_id}
+                            value={ctr.container_id}
+                          >
+                            {ctr.container_id}
+                            {ctr.brand_name ? ` · ${ctr.brand_name}` : ''}
+                          </option>
+                        ))}
+                      </select>
+
+                      <div className='relative'>
+                        <FaSearch className='pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-muted' />
+                        <Input
+                          aria-label={t('搜索日志内容')}
+                          placeholder={t('搜索日志内容')}
+                          value={searchTerm}
+                          onValueChange={setSearchTerm}
+                          size='sm'
+                          className='w-44 [&_input]:pl-7'
+                        />
+                      </div>
 
-              <div className='flex items-center gap-2'>
-                <Switch
-                  checked={following}
-                  onChange={setFollowing}
-                  size='small'
-                />
-                <Text size='small'>{t('跟随日志')}</Text>
-              </div>
-            </Space>
-
-            <Space>
-              <Tooltip content={t('刷新日志')}>
-                <Button
-                  icon={<IconRefresh />}
-                  onClick={refreshLogs}
-                  loading={loading}
-                  size='small'
-                  theme='borderless'
-                />
-              </Tooltip>
-
-              <Tooltip content={t('复制日志')}>
-                <Button
-                  icon={<FaCopy />}
-                  onClick={copyAllLogs}
-                  size='small'
-                  theme='borderless'
-                  disabled={logLines.length === 0}
-                />
-              </Tooltip>
-
-              <Tooltip content={t('下载日志')}>
-                <Button
-                  icon={<IconDownload />}
-                  onClick={downloadLogs}
-                  size='small'
-                  theme='borderless'
-                  disabled={logLines.length === 0}
-                />
-              </Tooltip>
-            </Space>
-          </div>
-
-          {/* Status Info */}
-          <Divider margin='12px' />
-          <div className='flex items-center justify-between'>
-            <Space size='large'>
-              <Text size='small' type='secondary'>
-                {t('共 {{count}} 条日志', { count: logLines.length })}
-              </Text>
-              {searchTerm && (
-                <Text size='small' type='secondary'>
-                  {t('(筛选后显示 {{count}} 条)', {
-                    count: filteredLogs.length,
-                  })}
-                </Text>
-              )}
-              {autoRefresh && (
-                <Tag color='green' size='small'>
-                  <FaClock className='mr-1' />
-                  {t('自动刷新中')}
-                </Tag>
-              )}
-            </Space>
-
-            <Text size='small' type='secondary'>
-              {t('状态')}: {deployment?.status || 'unknown'}
-            </Text>
-          </div>
-
-          {selectedContainerId !== ALL_CONTAINERS && (
-            <>
-              <Divider margin='12px' />
-              <div className='flex flex-col gap-3'>
-                <div className='flex items-center justify-between flex-wrap gap-2'>
-                  <Space>
-                    <Tag color='blue' size='small'>
-                      {t('容器')}
-                    </Tag>
-                    <Text className='font-mono text-xs'>
-                      {selectedContainerId}
-                    </Text>
-                    {renderContainerStatusTag(
-                      containerDetails?.status || currentContainer?.status,
-                    )}
-                  </Space>
+                      <div className='flex items-center gap-2'>
+                        <span className='text-xs text-muted'>
+                          {t('日志流')}
+                        </span>
+                        <StreamSegment
+                          value={streamFilter}
+                          onChange={setStreamFilter}
+                          options={[
+                            { value: 'stdout', label: 'STDOUT' },
+                            { value: 'stderr', label: 'STDERR' },
+                          ]}
+                        />
+                      </div>
 
-                  <Space>
-                    {containerDetails?.public_url && (
-                      <Tooltip content={containerDetails.public_url}>
+                      <label className='flex items-center gap-2'>
+                        <Switch
+                          isSelected={autoRefresh}
+                          onValueChange={setAutoRefresh}
+                          size='sm'
+                          aria-label={t('自动刷新')}
+                        >
+                          <Switch.Control>
+                            <Switch.Thumb />
+                          </Switch.Control>
+                        </Switch>
+                        <span className='text-xs'>{t('自动刷新')}</span>
+                      </label>
+
+                      <label className='flex items-center gap-2'>
+                        <Switch
+                          isSelected={following}
+                          onValueChange={setFollowing}
+                          size='sm'
+                          aria-label={t('跟随日志')}
+                        >
+                          <Switch.Control>
+                            <Switch.Thumb />
+                          </Switch.Control>
+                        </Switch>
+                        <span className='text-xs'>{t('跟随日志')}</span>
+                      </label>
+                    </div>
+
+                    <div className='flex items-center gap-1'>
+                      <Tooltip content={t('刷新日志')}>
                         <Button
-                          icon={<FaLink />}
-                          size='small'
-                          theme='borderless'
-                          onClick={() =>
-                            window.open(containerDetails.public_url, '_blank')
-                          }
-                        />
+                          isIconOnly
+                          size='sm'
+                          variant='light'
+                          onPress={refreshLogs}
+                          isPending={loading}
+                          aria-label={t('刷新日志')}
+                        >
+                          <RefreshCw size={14} />
+                        </Button>
                       </Tooltip>
-                    )}
-                    <Tooltip content={t('刷新容器信息')}>
-                      <Button
-                        icon={<IconRefresh />}
-                        onClick={refreshContainerDetails}
-                        size='small'
-                        theme='borderless'
-                        loading={containerDetailsLoading}
-                      />
-                    </Tooltip>
-                  </Space>
-                </div>
 
-                {containerDetailsLoading ? (
-                  <div className='flex items-center justify-center py-6'>
-                    <Spin tip={t('加载容器详情中...')} />
-                  </div>
-                ) : containerDetails ? (
-                  <div className='grid gap-4 md:grid-cols-2 text-sm'>
-                    <div className='flex items-center gap-2'>
-                      <FaInfoCircle className='text-blue-500' />
-                      <Text type='secondary'>{t('硬件')}</Text>
-                      <Text>
-                        {containerDetails?.brand_name ||
-                          currentContainer?.brand_name ||
-                          t('未知品牌')}
-                        {containerDetails?.hardware ||
-                        currentContainer?.hardware
-                          ? ` · ${containerDetails?.hardware || currentContainer?.hardware}`
-                          : ''}
-                      </Text>
-                    </div>
-                    <div className='flex items-center gap-2'>
-                      <FaServer className='text-purple-500' />
-                      <Text type='secondary'>{t('GPU/容器')}</Text>
-                      <Text>
-                        {containerDetails?.gpus_per_container ??
-                          currentContainer?.gpus_per_container ??
-                          0}
-                      </Text>
-                    </div>
-                    <div className='flex items-center gap-2'>
-                      <FaClock className='text-orange-500' />
-                      <Text type='secondary'>{t('创建时间')}</Text>
-                      <Text>
-                        {containerDetails?.created_at
-                          ? timestamp2string(containerDetails.created_at)
-                          : currentContainer?.created_at
-                            ? timestamp2string(currentContainer.created_at)
-                            : t('未知')}
-                      </Text>
+                      <Tooltip content={t('复制日志')}>
+                        <Button
+                          isIconOnly
+                          size='sm'
+                          variant='light'
+                          onPress={copyAllLogs}
+                          isDisabled={logLines.length === 0}
+                          aria-label={t('复制日志')}
+                        >
+                          <FaCopy />
+                        </Button>
+                      </Tooltip>
+
+                      <Tooltip content={t('下载日志')}>
+                        <Button
+                          isIconOnly
+                          size='sm'
+                          variant='light'
+                          onPress={downloadLogs}
+                          isDisabled={logLines.length === 0}
+                          aria-label={t('下载日志')}
+                        >
+                          <Download size={14} />
+                        </Button>
+                      </Tooltip>
                     </div>
-                    <div className='flex items-center gap-2'>
-                      <FaInfoCircle className='text-green-500' />
-                      <Text type='secondary'>{t('运行时长')}</Text>
-                      <Text>
-                        {containerDetails?.uptime_percent ??
-                          currentContainer?.uptime_percent ??
-                          0}
-                        %
-                      </Text>
+                  </div>
+
+                  {/* Status row */}
+                  <div className='mt-3 border-t border-border pt-3 flex items-center justify-between text-xs text-muted'>
+                    <div className='flex items-center gap-4'>
+                      <span>
+                        {t('共 {{count}} 条日志', { count: logLines.length })}
+                      </span>
+                      {searchTerm && (
+                        <span>
+                          {t('(筛选后显示 {{count}} 条)', {
+                            count: filteredLogs.length,
+                          })}
+                        </span>
+                      )}
+                      {autoRefresh && (
+                        <StatusTag tone='green'>
+                          <FaClock />
+                          {t('自动刷新中')}
+                        </StatusTag>
+                      )}
                     </div>
+
+                    <span>
+                      {t('状态')}: {deployment?.status || 'unknown'}
+                    </span>
                   </div>
-                ) : (
-                  <Text size='small' type='secondary'>
-                    {t('暂无容器详情')}
-                  </Text>
-                )}
-
-                {containerDetails?.events &&
-                  containerDetails.events.length > 0 && (
-                    <div className='bg-gray-50 rounded-lg p-3'>
-                      <Text size='small' type='secondary'>
-                        {t('最近事件')}
-                      </Text>
-                      <div className='mt-2 space-y-2 max-h-32 overflow-y-auto'>
-                        {containerDetails.events
-                          .slice(0, 5)
-                          .map((event, index) => (
-                            <div
-                              key={`${event.time}-${index}`}
-                              className='flex gap-3 text-xs font-mono'
-                            >
-                              <span className='text-gray-500'>
-                                {event.time
-                                  ? timestamp2string(event.time)
-                                  : '--'}
+
+                  {/* Container detail strip */}
+                  {selectedContainerId !== ALL_CONTAINERS && (
+                    <>
+                      <div className='my-3 h-px bg-border' />
+                      <div className='flex flex-col gap-3'>
+                        <div className='flex flex-wrap items-center justify-between gap-2'>
+                          <div className='flex items-center gap-2'>
+                            <StatusTag tone='blue'>{t('容器')}</StatusTag>
+                            <span className='font-mono text-xs'>
+                              {selectedContainerId}
+                            </span>
+                            {renderContainerStatusTag(
+                              containerDetails?.status ||
+                                currentContainer?.status,
+                            )}
+                          </div>
+
+                          <div className='flex items-center gap-1'>
+                            {containerDetails?.public_url && (
+                              <Tooltip content={containerDetails.public_url}>
+                                <Button
+                                  isIconOnly
+                                  size='sm'
+                                  variant='light'
+                                  onPress={() =>
+                                    window.open(
+                                      containerDetails.public_url,
+                                      '_blank',
+                                    )
+                                  }
+                                  aria-label={t('打开容器')}
+                                >
+                                  <FaLink />
+                                </Button>
+                              </Tooltip>
+                            )}
+                            <Tooltip content={t('刷新容器信息')}>
+                              <Button
+                                isIconOnly
+                                size='sm'
+                                variant='light'
+                                onPress={refreshContainerDetails}
+                                isPending={containerDetailsLoading}
+                                aria-label={t('刷新容器信息')}
+                              >
+                                <RefreshCw size={14} />
+                              </Button>
+                            </Tooltip>
+                          </div>
+                        </div>
+
+                        {containerDetailsLoading ? (
+                          <div className='flex flex-col items-center justify-center gap-2 py-6'>
+                            <Spinner color='primary' />
+                            <span className='text-xs text-muted'>
+                              {t('加载容器详情中...')}
+                            </span>
+                          </div>
+                        ) : containerDetails ? (
+                          <div className='grid gap-4 text-sm md:grid-cols-2'>
+                            <div className='flex items-center gap-2'>
+                              <FaInfoCircle className='text-primary' />
+                              <span className='text-muted'>{t('硬件')}</span>
+                              <span>
+                                {containerDetails?.brand_name ||
+                                  currentContainer?.brand_name ||
+                                  t('未知品牌')}
+                                {containerDetails?.hardware ||
+                                currentContainer?.hardware
+                                  ? ` · ${containerDetails?.hardware || currentContainer?.hardware}`
+                                  : ''}
                               </span>
-                              <span className='text-gray-700 break-all flex-1'>
-                                {event.message}
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <FaServer className='text-accent' />
+                              <span className='text-muted'>
+                                {t('GPU/容器')}
+                              </span>
+                              <span>
+                                {containerDetails?.gpus_per_container ??
+                                  currentContainer?.gpus_per_container ??
+                                  0}
                               </span>
                             </div>
-                          ))}
+                            <div className='flex items-center gap-2'>
+                              <FaClock className='text-warning' />
+                              <span className='text-muted'>
+                                {t('创建时间')}
+                              </span>
+                              <span className='tabular-nums'>
+                                {containerDetails?.created_at
+                                  ? timestamp2string(containerDetails.created_at)
+                                  : currentContainer?.created_at
+                                    ? timestamp2string(currentContainer.created_at)
+                                    : t('未知')}
+                              </span>
+                            </div>
+                            <div className='flex items-center gap-2'>
+                              <FaInfoCircle className='text-success' />
+                              <span className='text-muted'>
+                                {t('运行时长')}
+                              </span>
+                              <span className='tabular-nums'>
+                                {containerDetails?.uptime_percent ??
+                                  currentContainer?.uptime_percent ??
+                                  0}
+                                %
+                              </span>
+                            </div>
+                          </div>
+                        ) : (
+                          <span className='text-xs text-muted'>
+                            {t('暂无容器详情')}
+                          </span>
+                        )}
+
+                        {containerDetails?.events &&
+                          containerDetails.events.length > 0 && (
+                            <div className='rounded-lg bg-surface-secondary p-3'>
+                              <div className='text-xs text-muted'>
+                                {t('最近事件')}
+                              </div>
+                              <div className='mt-2 max-h-32 space-y-2 overflow-y-auto'>
+                                {containerDetails.events
+                                  .slice(0, 5)
+                                  .map((event, index) => (
+                                    <div
+                                      key={`${event.time}-${index}`}
+                                      className='flex gap-3 font-mono text-xs'
+                                    >
+                                      <span className='text-muted'>
+                                        {event.time
+                                          ? timestamp2string(event.time)
+                                          : '--'}
+                                      </span>
+                                      <span className='flex-1 break-all text-foreground'>
+                                        {event.message}
+                                      </span>
+                                    </div>
+                                  ))}
+                              </div>
+                            </div>
+                          )}
+                      </div>
+                    </>
+                  )}
+                </div>
+
+                {/* Log Content */}
+                <div className='flex flex-1 flex-col overflow-hidden rounded-lg border border-border bg-surface-secondary'>
+                  <div
+                    ref={logContainerRef}
+                    className='flex-1 overflow-y-auto bg-background'
+                    style={{ maxHeight: '400px' }}
+                  >
+                    {loading && logLines.length === 0 ? (
+                      <div className='flex flex-col items-center justify-center gap-2 p-8'>
+                        <Spinner color='primary' />
+                        <span className='text-sm text-muted'>
+                          {t('加载日志中...')}
+                        </span>
+                      </div>
+                    ) : filteredLogs.length === 0 ? (
+                      <EmptyBlock
+                        description={
+                          searchTerm ? t('没有匹配的日志条目') : t('暂无日志')
+                        }
+                      />
+                    ) : (
+                      <div>
+                        {filteredLogs.map((log, index) =>
+                          renderLogEntry(log, index),
+                        )}
                       </div>
+                    )}
+                  </div>
+
+                  {/* Footer status */}
+                  {logLines.length > 0 && (
+                    <div className='flex items-center justify-between border-t border-border bg-surface-secondary px-3 py-2 text-xs text-muted'>
+                      <span>
+                        {following
+                          ? t('正在跟随最新日志')
+                          : t('日志已加载')}
+                      </span>
+                      <span className='tabular-nums'>
+                        {t('最后更新')}:{' '}
+                        {lastUpdatedAt
+                          ? lastUpdatedAt.toLocaleTimeString()
+                          : '--'}
+                      </span>
                     </div>
                   )}
+                </div>
               </div>
-            </>
-          )}
-        </Card>
-
-        {/* Log Content */}
-        <div className='flex-1 flex flex-col border rounded-lg bg-gray-50 overflow-hidden'>
-          <div
-            ref={logContainerRef}
-            className='flex-1 overflow-y-auto bg-white'
-            style={{ maxHeight: '400px' }}
-          >
-            {loading && logLines.length === 0 ? (
-              <div className='flex items-center justify-center p-8'>
-                <Spin tip={t('加载日志中...')} />
-              </div>
-            ) : filteredLogs.length === 0 ? (
-              <Empty
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
-                description={
-                  searchTerm ? t('没有匹配的日志条目') : t('暂无日志')
-                }
-                style={{ padding: '60px 20px' }}
-              />
-            ) : (
-              <div>
-                {filteredLogs.map((log, index) => renderLogEntry(log, index))}
-              </div>
-            )}
-          </div>
-
-          {/* Footer status */}
-          {logLines.length > 0 && (
-            <div className='flex items-center justify-between px-3 py-2 bg-gray-50 border-t text-xs text-gray-500'>
-              <span>{following ? t('正在跟随最新日志') : t('日志已加载')}</span>
-              <span>
-                {t('最后更新')}:{' '}
-                {lastUpdatedAt ? lastUpdatedAt.toLocaleTimeString() : '--'}
-              </span>
-            </div>
-          )}
-        </div>
-      </div>
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/model-pricing/layout/PricingPage.jsx b/web/src/components/table/model-pricing/layout/PricingPage.jsx
index 806c502d071..e8f07586633 100644
--- a/web/src/components/table/model-pricing/layout/PricingPage.jsx
+++ b/web/src/components/table/model-pricing/layout/PricingPage.jsx
@@ -18,7 +18,6 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Layout, ImagePreview } from '@douyinfe/semi-ui';
 import PricingSidebar from './PricingSidebar';
 import PricingContent from './content/PricingContent';
 import ModelDetailSideSheet from '../modal/ModelDetailSideSheet';
@@ -27,7 +26,6 @@ import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 
 const PricingPage = () => {
   const pricingData = useModelPricingData();
-  const { Sider, Content } = Layout;
   const isMobile = useIsMobile();
   const [showRatio, setShowRatio] = React.useState(false);
   const [viewMode, setViewMode] = React.useState('card');
@@ -40,28 +38,36 @@ const PricingPage = () => {
   };
 
   return (
-    <div className='bg-white'>
-      <Layout className='pricing-layout'>
+    <div className='h-[100dvh] overflow-hidden bg-background pt-[60px]'>
+      <div className='flex h-[calc(100dvh-60px)] min-h-0 bg-transparent'>
         {!isMobile && (
-          <Sider className='pricing-scroll-hide pricing-sidebar'>
+          <aside className='pricing-scroll-hide h-full w-72 shrink-0 overflow-y-auto border-r border-border bg-background px-2 py-4'>
             <PricingSidebar {...allProps} />
-          </Sider>
+          </aside>
         )}
 
-        <Content className='pricing-scroll-hide pricing-content'>
+        <main className='pricing-scroll-hide h-full min-w-0 flex-1 overflow-y-auto bg-background'>
           <PricingContent
             {...allProps}
             isMobile={isMobile}
             sidebarProps={allProps}
           />
-        </Content>
-      </Layout>
+        </main>
+      </div>
 
-      <ImagePreview
-        src={pricingData.modalImageUrl}
-        visible={pricingData.isModalOpenurl}
-        onVisibleChange={(visible) => pricingData.setIsModalOpenurl(visible)}
-      />
+      {pricingData.isModalOpenurl && pricingData.modalImageUrl ? (
+        <div
+          className='fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4'
+          onClick={() => pricingData.setIsModalOpenurl(false)}
+        >
+          <img
+            src={pricingData.modalImageUrl}
+            alt=''
+            className='max-h-[90vh] max-w-[90vw] rounded-2xl bg-white object-contain shadow-2xl'
+            onClick={(event) => event.stopPropagation()}
+          />
+        </div>
+      ) : null}
 
       <ModelDetailSideSheet
         visible={pricingData.showModelDetail}
diff --git a/web/src/components/table/model-pricing/layout/PricingSidebar.jsx b/web/src/components/table/model-pricing/layout/PricingSidebar.jsx
index 968c4bc8b45..2413b9a704d 100644
--- a/web/src/components/table/model-pricing/layout/PricingSidebar.jsx
+++ b/web/src/components/table/model-pricing/layout/PricingSidebar.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import PricingGroups from '../filter/PricingGroups';
 import PricingQuotaTypes from '../filter/PricingQuotaTypes';
 import PricingEndpointTypes from '../filter/PricingEndpointTypes';
@@ -93,12 +93,11 @@ const PricingSidebar = ({
   return (
     <div className='p-2'>
       <div className='flex items-center justify-between mb-6'>
-        <div className='text-lg font-semibold text-gray-800'>{t('筛选')}</div>
+        <div className='text-lg font-semibold text-foreground'>{t('筛选')}</div>
         <Button
-          theme='outline'
-          type='tertiary'
-          onClick={handleResetFilters}
-          className='text-gray-500 hover:text-gray-700'
+          variant='outline'
+          onPress={handleResetFilters}
+          className='text-muted hover:text-foreground'
         >
           {t('重置')}
         </Button>
diff --git a/web/src/components/table/model-pricing/layout/content/PricingContent.jsx b/web/src/components/table/model-pricing/layout/content/PricingContent.jsx
index fd4e37a2a2d..5c115171f1a 100644
--- a/web/src/components/table/model-pricing/layout/content/PricingContent.jsx
+++ b/web/src/components/table/model-pricing/layout/content/PricingContent.jsx
@@ -24,10 +24,14 @@ import PricingView from './PricingView';
 const PricingContent = ({ isMobile, sidebarProps, ...props }) => {
   return (
     <div
-      className={isMobile ? 'pricing-content-mobile' : 'pricing-scroll-hide'}
+      className={
+        isMobile
+          ? 'flex min-h-[calc(100dvh-60px)] flex-col'
+          : 'pricing-scroll-hide flex min-h-full flex-col'
+      }
     >
-      {/* 固定的顶部区域（分类介绍 + 搜索和操作） */}
-      <div className='pricing-search-header'>
+      {/* Sticky header with vendor intro, search, and actions. */}
+      <div className='sticky top-0 z-10 bg-background/95 p-4 pb-3 backdrop-blur'>
         <PricingTopSection
           {...props}
           isMobile={isMobile}
@@ -45,10 +49,12 @@ const PricingContent = ({ isMobile, sidebarProps, ...props }) => {
         />
       </div>
 
-      {/* 可滚动的内容区域 */}
+      {/* Scrollable content area. */}
       <div
         className={
-          isMobile ? 'pricing-view-container-mobile' : 'pricing-view-container'
+          isMobile
+            ? 'min-h-0 flex-1 px-4 pb-4'
+            : 'min-h-0 flex-1 px-4 pb-6'
         }
       >
         <PricingView {...props} viewMode={sidebarProps.viewMode} />
diff --git a/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx b/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
index 60226264470..fdbd1973b8c 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx
@@ -19,18 +19,21 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useState, useEffect, useMemo, useCallback, memo } from 'react';
 import {
+  Button,
   Card,
-  Tag,
-  Avatar,
-  Typography,
-  Tooltip,
+  Chip,
   Modal,
-} from '@douyinfe/semi-ui';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import { getLobeHubIcon } from '../../../../../helpers';
 import SearchActions from './SearchActions';
 
-const { Paragraph } = Typography;
-
 const CONFIG = {
   CAROUSEL_INTERVAL: 2000,
   ICON_SIZE: 40,
@@ -86,9 +89,9 @@ const getVendorDisplayName = (vendorName, t) => {
 
 const createDefaultAvatar = () => (
   <div className={COMPONENT_STYLES.avatarContainer}>
-    <Avatar size='large' color='transparent'>
+    <span className='text-base font-semibold text-foreground'>
       AI
-    </Avatar>
+    </span>
   </div>
 );
 
@@ -108,12 +111,12 @@ const createAvatarContent = (vendor, isAllVendors) => {
   }
 
   return (
-    <Avatar
-      size='large'
+    <div
+      className='flex h-10 w-10 items-center justify-center rounded-full text-sm font-semibold text-foreground'
       style={{ backgroundColor: getAvatarBackgroundColor(isAllVendors) }}
     >
       {getAvatarText(vendor.name)}
-    </Avatar>
+    </div>
   );
 };
 
@@ -126,9 +129,9 @@ const renderVendorAvatar = (vendor, t, isAllVendors = false) => {
   const avatarContent = createAvatarContent(vendor, isAllVendors);
 
   return (
-    <Tooltip content={displayName} position='top'>
-      <div className={COMPONENT_STYLES.avatarContainer}>{avatarContent}</div>
-    </Tooltip>
+    <div className={COMPONENT_STYLES.avatarContainer} title={displayName}>
+      {avatarContent}
+    </div>
   );
 };
 
@@ -161,32 +164,45 @@ const PricingVendorIntro = memo(
     const [descModalVisible, setDescModalVisible] = useState(false);
     const [descModalContent, setDescModalContent] = useState('');
 
+    const handleCloseDescModal = useCallback(() => {
+      setDescModalVisible(false);
+    }, []);
+
+    const descModalState = useOverlayState({
+      isOpen: descModalVisible,
+      onOpenChange: (isOpen) => {
+        if (!isOpen) handleCloseDescModal();
+      },
+    });
+
     const handleOpenDescModal = useCallback((content) => {
       setDescModalContent(content || '');
       setDescModalVisible(true);
     }, []);
 
-    const handleCloseDescModal = useCallback(() => {
-      setDescModalVisible(false);
-    }, []);
-
     const renderDescriptionModal = useCallback(
       () => (
-        <Modal
-          title={t('供应商介绍')}
-          visible={descModalVisible}
-          onCancel={handleCloseDescModal}
-          footer={null}
-          width={isMobile ? '95%' : 600}
-          bodyStyle={{
-            maxHeight: isMobile ? '70vh' : '60vh',
-            overflowY: 'auto',
-          }}
-        >
-          <div className='text-sm mb-4'>{descModalContent}</div>
+        <Modal state={descModalState}>
+          <ModalBackdrop variant='blur'>
+            <ModalContainer size={isMobile ? 'full' : 'lg'} placement='center'>
+              <ModalDialog className='bg-background/95 backdrop-blur'>
+                <ModalHeader className='border-b border-border'>
+                  {t('供应商介绍')}
+                </ModalHeader>
+                <ModalBody className='max-h-[70vh] overflow-y-auto text-sm'>
+                  {descModalContent}
+                </ModalBody>
+                <ModalFooter className='border-t border-border'>
+                  <Button variant='primary' onPress={handleCloseDescModal}>
+                    {t('确定')}
+                  </Button>
+                </ModalFooter>
+              </ModalDialog>
+            </ModalContainer>
+          </ModalBackdrop>
         </Modal>
       ),
-      [descModalVisible, descModalContent, handleCloseDescModal, isMobile, t],
+      [descModalState, descModalContent, handleCloseDescModal, isMobile, t],
     );
 
     const vendorInfo = useMemo(() => {
@@ -319,11 +335,9 @@ const PricingVendorIntro = memo(
 
     const renderHeaderCard = useCallback(
       ({ title, count, description, rightContent, primaryDarkerChannel }) => (
-        <Card
-          className='!rounded-2xl shadow-sm border-0'
-          cover={
+        <Card className='overflow-hidden rounded-2xl border-0 shadow-sm'>
             <div
-              className='relative h-full'
+              className='relative min-h-28'
               style={createCoverStyle(primaryDarkerChannel)}
             >
               <div className='relative z-10 h-full flex items-center justify-between p-4'>
@@ -335,31 +349,29 @@ const PricingVendorIntro = memo(
                     >
                       {title}
                     </h2>
-                    <Tag
+                    <Chip
                       style={COMPONENT_STYLES.tag}
-                      shape='circle'
-                      size='small'
+                      size='sm'
+                      variant='secondary'
                       className='self-center'
                     >
                       {t('共 {{count}} 个模型', { count })}
-                    </Tag>
+                    </Chip>
                   </div>
-                  <Paragraph
-                    className='text-xs sm:text-sm leading-relaxed !mb-0 cursor-pointer'
+                  <button
+                    type='button'
+                    className='line-clamp-2 text-left text-xs leading-relaxed sm:text-sm'
                     style={COMPONENT_STYLES.descriptionText}
-                    ellipsis={{ rows: 2 }}
                     onClick={() => handleOpenDescModal(description)}
                   >
                     {description}
-                  </Paragraph>
+                  </button>
                 </div>
 
                 <div className='flex-shrink-0'>{rightContent}</div>
               </div>
             </div>
-          }
-        >
-          {renderSearchActions()}
+          <Card.Content className='p-4'>{renderSearchActions()}</Card.Content>
         </Card>
       ),
       [renderSearchActions, createCoverStyle, handleOpenDescModal, t],
diff --git a/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx b/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
index 6905c58847e..8e1675bcfe0 100644
--- a/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
+++ b/web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { memo } from 'react';
-import { Card, Skeleton } from '@douyinfe/semi-ui';
+import { Card } from '@heroui/react';
 
 const THEME_COLORS = {
   allVendors: {
@@ -98,12 +98,10 @@ const createSkeletonRect = (style = {}, key = null) => (
 
 const PricingVendorIntroSkeleton = memo(
   ({ isAllVendors = false, isMobile = false }) => {
-    const placeholder = (
-      <Card
-        className='!rounded-2xl shadow-sm border-0'
-        cover={
+    return (
+      <Card className='overflow-hidden rounded-2xl border-0 shadow-sm'>
           <div
-            className='relative h-full'
+            className='relative min-h-28'
             style={SKELETON_STYLES.cover(
               isAllVendors
                 ? THEME_COLORS.allVendors.primary
@@ -165,9 +163,8 @@ const PricingVendorIntroSkeleton = memo(
               </div>
             </div>
           </div>
-        }
-      >
-        <div className='flex items-center gap-2 w-full'>
+        <Card.Content className='p-4'>
+        <div className='flex w-full items-center gap-2'>
           <div className='flex-1'>
             {createSkeletonRect(
               {
@@ -198,12 +195,9 @@ const PricingVendorIntroSkeleton = memo(
               'filter-button',
             )}
         </div>
+        </Card.Content>
       </Card>
     );
-
-    return (
-      <Skeleton loading={true} active placeholder={placeholder}></Skeleton>
-    );
   },
 );
 
diff --git a/web/src/components/table/model-pricing/layout/header/SearchActions.jsx b/web/src/components/table/model-pricing/layout/header/SearchActions.jsx
index e285d3fba34..25d257cf9df 100644
--- a/web/src/components/table/model-pricing/layout/header/SearchActions.jsx
+++ b/web/src/components/table/model-pricing/layout/header/SearchActions.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { memo, useCallback } from 'react';
-import { Input, Button, Switch, Select, Divider } from '@douyinfe/semi-ui';
-import { IconSearch, IconCopy, IconFilter } from '@douyinfe/semi-icons';
+import { Button, Input, Separator, Switch } from '@heroui/react';
+import { Copy, Filter, Search } from 'lucide-react';
 
 const SearchActions = memo(
   ({
@@ -66,77 +66,89 @@ const SearchActions = memo(
 
     return (
       <div className='flex items-center gap-2 w-full'>
-        <div className='flex-1'>
+        <div className='relative flex-1'>
+          <Search
+            size={16}
+            className='pointer-events-none absolute left-3 top-1/2 z-10 -translate-y-1/2 text-muted'
+          />
           <Input
-            prefix={<IconSearch />}
             placeholder={t('模糊搜索模型名称')}
             value={searchValue}
             onCompositionStart={handleCompositionStart}
             onCompositionEnd={handleCompositionEnd}
-            onChange={handleChange}
-            showClear
+            onChange={(event) => handleChange?.(event)}
+            className='pl-9'
           />
         </div>
 
         <Button
-          theme='outline'
-          type='primary'
-          icon={<IconCopy />}
-          onClick={handleCopyClick}
-          disabled={selectedRowKeys.length === 0}
-          className='!bg-blue-500 hover:!bg-blue-600 !text-white disabled:!bg-gray-300 disabled:!text-gray-500'
+          variant='primary'
+          onPress={handleCopyClick}
+          isDisabled={selectedRowKeys.length === 0}
         >
+          <Copy size={16} />
           {t('复制')}
         </Button>
 
         {!isMobile && (
           <>
-            <Divider layout='vertical' margin='8px' />
+            <Separator orientation='vertical' className='h-8' />
 
             {/* 充值价格显示开关 */}
             {supportsCurrencyDisplay && (
               <div className='flex items-center gap-2'>
-                <span className='text-sm text-gray-600'>{t('充值价格显示')}</span>
+                <span className='text-sm text-muted'>{t('充值价格显示')}</span>
                 <Switch
-                  checked={showWithRecharge}
+                  isSelected={showWithRecharge}
                   onChange={setShowWithRecharge}
-                />
+                  aria-label={t('充值价格显示')}
+                >
+                  <Switch.Control>
+                    <Switch.Thumb />
+                  </Switch.Control>
+                </Switch>
               </div>
             )}
 
             {/* 货币单位选择 */}
             {supportsCurrencyDisplay && showWithRecharge && (
-              <Select
+              <select
                 value={currency}
-                onChange={setCurrency}
-                optionList={[
-                  { value: 'USD', label: 'USD' },
-                  { value: 'CNY', label: 'CNY' },
-                  { value: 'CUSTOM', label: t('自定义货币') },
-                ]}
-              />
+                onChange={(event) => setCurrency?.(event.target.value)}
+                className='h-9 rounded-lg border border-border bg-background px-2 text-sm text-foreground outline-none transition focus:border-accent'
+              >
+                <option value='USD'>USD</option>
+                <option value='CNY'>CNY</option>
+                <option value='CUSTOM'>{t('自定义货币')}</option>
+              </select>
             )}
 
             {/* 显示倍率开关 */}
             <div className='flex items-center gap-2'>
-              <span className='text-sm text-gray-600'>{t('倍率')}</span>
-              <Switch checked={showRatio} onChange={setShowRatio} />
+              <span className='text-sm text-muted'>{t('倍率')}</span>
+              <Switch
+                isSelected={showRatio}
+                onChange={setShowRatio}
+                aria-label={t('倍率')}
+              >
+                <Switch.Control>
+                  <Switch.Thumb />
+                </Switch.Control>
+              </Switch>
             </div>
 
             {/* 视图模式切换按钮 */}
             <Button
-              theme={viewMode === 'table' ? 'solid' : 'outline'}
-              type={viewMode === 'table' ? 'primary' : 'tertiary'}
-              onClick={handleViewModeToggle}
+              variant={viewMode === 'table' ? 'primary' : 'outline'}
+              onPress={handleViewModeToggle}
             >
               {t('表格视图')}
             </Button>
 
             {/* Token单位切换按钮 */}
             <Button
-              theme={tokenUnit === 'K' ? 'solid' : 'outline'}
-              type={tokenUnit === 'K' ? 'primary' : 'tertiary'}
-              onClick={handleTokenUnitToggle}
+              variant={tokenUnit === 'K' ? 'primary' : 'outline'}
+              onPress={handleTokenUnitToggle}
             >
               {tokenUnit}
             </Button>
@@ -145,11 +157,10 @@ const SearchActions = memo(
 
         {isMobile && (
           <Button
-            theme='outline'
-            type='tertiary'
-            icon={<IconFilter />}
-            onClick={handleFilterClick}
+            variant='outline'
+            onPress={handleFilterClick}
           >
+            <Filter size={16} />
             {t('筛选')}
           </Button>
         )}
diff --git a/web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx b/web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx
index d547b7f4e55..0b843cc7586 100644
--- a/web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx
+++ b/web/src/components/table/model-pricing/modal/ModelDetailSideSheet.jsx
@@ -17,9 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import { SideSheet, Typography, Button } from '@douyinfe/semi-ui';
-import { IconClose } from '@douyinfe/semi-icons';
+import React, { useEffect } from 'react';
+import { Button } from '@heroui/react';
+import { X } from 'lucide-react';
 
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import ModelHeader from './components/ModelHeader';
@@ -27,8 +27,6 @@ import ModelBasicInfo from './components/ModelBasicInfo';
 import ModelEndpoints from './components/ModelEndpoints';
 import ModelPricingTable from './components/ModelPricingTable';
 
-const { Text } = Typography;
-
 const ModelDetailSideSheet = ({
   visible,
   onClose,
@@ -47,64 +45,91 @@ const ModelDetailSideSheet = ({
 }) => {
   const isMobile = useIsMobile();
 
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') onClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [visible, onClose]);
+
   return (
-    <SideSheet
-      placement='right'
-      title={
-        <ModelHeader modelData={modelData} vendorsMap={vendorsMap} t={t} />
-      }
-      bodyStyle={{
-        padding: '0',
-        display: 'flex',
-        flexDirection: 'column',
-        borderBottom: '1px solid var(--semi-color-border)',
-      }}
-      visible={visible}
-      width={isMobile ? '100%' : 600}
-      closeIcon={
-        <Button
-          className='semi-button-tertiary semi-button-size-small semi-button-borderless'
-          type='button'
-          icon={<IconClose />}
-          onClick={onClose}
-        />
-      }
-      onCancel={onClose}
-    >
-      <div className='p-2'>
-        {!modelData && (
-          <div className='flex justify-center items-center py-10'>
-            <Text type='secondary'>{t('加载中...')}</Text>
+    <>
+      <div
+        aria-hidden={!visible}
+        onClick={onClose}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!visible}
+        style={{ width: isMobile ? '100%' : 600 }}
+        className={`fixed bottom-0 right-0 top-0 z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          visible ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-[color:var(--app-border)] px-5 py-3'>
+          <div className='min-w-0 flex-1'>
+            {modelData ? (
+              <ModelHeader
+                modelData={modelData}
+                vendorsMap={vendorsMap}
+                t={t}
+              />
+            ) : (
+              <span className='text-sm text-muted'>{t('加载中...')}</span>
+            )}
           </div>
-        )}
-        {modelData && (
-          <>
-            <ModelBasicInfo
-              modelData={modelData}
-              vendorsMap={vendorsMap}
-              t={t}
-            />
-            <ModelEndpoints
-              modelData={modelData}
-              endpointMap={endpointMap}
-              t={t}
-            />
-            <ModelPricingTable
-              modelData={modelData}
-              groupRatio={groupRatio}
-              currency={currency}
-              siteDisplayType={siteDisplayType}
-              tokenUnit={tokenUnit}
-              displayPrice={displayPrice}
-              showRatio={showRatio}
-              usableGroup={usableGroup}
-              autoGroups={autoGroups}
-              t={t}
-            />
-          </>
-        )}
-      </div>
-    </SideSheet>
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={onClose}
+          >
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='flex-1 overflow-y-auto p-3'>
+          {!modelData && (
+            <div className='flex items-center justify-center py-10 text-sm text-muted'>
+              {t('加载中...')}
+            </div>
+          )}
+          {modelData && (
+            <>
+              <ModelBasicInfo
+                modelData={modelData}
+                vendorsMap={vendorsMap}
+                t={t}
+              />
+              <ModelEndpoints
+                modelData={modelData}
+                endpointMap={endpointMap}
+                t={t}
+              />
+              <ModelPricingTable
+                modelData={modelData}
+                groupRatio={groupRatio}
+                currency={currency}
+                siteDisplayType={siteDisplayType}
+                tokenUnit={tokenUnit}
+                displayPrice={displayPrice}
+                showRatio={showRatio}
+                usableGroup={usableGroup}
+                autoGroups={autoGroups}
+                t={t}
+              />
+            </>
+          )}
+        </div>
+      </aside>
+    </>
   );
 };
 
diff --git a/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx b/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
index 8875f8b1c53..394af16c51a 100644
--- a/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
+++ b/web/src/components/table/model-pricing/modal/PricingFilterModal.jsx
@@ -18,7 +18,16 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import {
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import { resetPricingFilters } from '../../../../helpers/utils';
 import FilterModalContent from './components/FilterModalContent';
 import FilterModalFooter from './components/FilterModalFooter';
@@ -40,26 +49,40 @@ const PricingFilterModal = ({ visible, onClose, sidebarProps, t }) => {
       setTokenUnit: sidebarProps.setTokenUnit,
     });
 
-  const footer = (
-    <FilterModalFooter onReset={handleResetFilters} onConfirm={onClose} t={t} />
-  );
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onClose?.();
+    },
+  });
 
   return (
-    <Modal
-      title={t('筛选')}
-      visible={visible}
-      onCancel={onClose}
-      footer={footer}
-      style={{ width: '100%', height: '100%', margin: 0 }}
-      bodyStyle={{
-        padding: 0,
-        height: 'calc(100vh - 160px)',
-        overflowY: 'auto',
-        scrollbarWidth: 'none',
-        msOverflowStyle: 'none',
-      }}
-    >
-      <FilterModalContent sidebarProps={sidebarProps} t={t} />
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='full' placement='center'>
+          <ModalDialog className='flex h-full max-h-[100vh] flex-col bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('筛选')}
+            </ModalHeader>
+            <ModalBody
+              className='flex-1 overflow-y-auto p-0'
+              style={{
+                scrollbarWidth: 'none',
+                msOverflowStyle: 'none',
+              }}
+            >
+              <FilterModalContent sidebarProps={sidebarProps} t={t} />
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <FilterModalFooter
+                onReset={handleResetFilters}
+                onConfirm={onClose}
+                t={t}
+              />
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/model-pricing/modal/components/FilterModalFooter.jsx b/web/src/components/table/model-pricing/modal/components/FilterModalFooter.jsx
index d99d62fec44..75ce524c5df 100644
--- a/web/src/components/table/model-pricing/modal/components/FilterModalFooter.jsx
+++ b/web/src/components/table/model-pricing/modal/components/FilterModalFooter.jsx
@@ -18,15 +18,15 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 
 const FilterModalFooter = ({ onReset, onConfirm, t }) => {
   return (
-    <div className='flex justify-end'>
-      <Button theme='outline' type='tertiary' onClick={onReset}>
+    <div className='flex justify-end gap-2'>
+      <Button variant='outline' onPress={onReset}>
         {t('重置')}
       </Button>
-      <Button theme='solid' type='primary' onClick={onConfirm}>
+      <Button variant='primary' onPress={onConfirm}>
         {t('确定')}
       </Button>
     </div>
diff --git a/web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx b/web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx
index d07d6fd16b9..51a607e38d6 100644
--- a/web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx
+++ b/web/src/components/table/model-pricing/modal/components/ModelBasicInfo.jsx
@@ -18,34 +18,21 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Typography, Tag, Space } from '@douyinfe/semi-ui';
-import { IconInfoCircle } from '@douyinfe/semi-icons';
+import { Card } from '@heroui/react';
+import { Info } from 'lucide-react';
 import { stringToColor } from '../../../../../helpers';
 
-const { Text } = Typography;
-
 const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
-  // 获取模型描述（使用后端真实数据）
   const getModelDescription = () => {
     if (!modelData) return t('暂无模型描述');
-
-    // 优先使用后端提供的描述
-    if (modelData.description) {
-      return modelData.description;
-    }
-
-    // 如果没有描述但有供应商描述，显示供应商信息
-    if (modelData.vendor_description) {
+    if (modelData.description) return modelData.description;
+    if (modelData.vendor_description)
       return t('供应商信息：') + modelData.vendor_description;
-    }
-
     return t('暂无模型描述');
   };
 
-  // 获取模型标签
   const getModelTags = () => {
     const tags = [];
-
     if (modelData?.tags) {
       const customTags = modelData.tags.split(',').filter((tag) => tag.trim());
       customTags.forEach((tag) => {
@@ -53,35 +40,48 @@ const ModelBasicInfo = ({ modelData, vendorsMap = {}, t }) => {
         tags.push({ text: tagText, color: stringToColor(tagText) });
       });
     }
-
     return tags;
   };
 
+  const tags = getModelTags();
+
   return (
-    <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-      <div className='flex items-center mb-4'>
-        <Avatar size='small' color='blue' className='mr-2 shadow-md'>
-          <IconInfoCircle size={16} />
-        </Avatar>
-        <div>
-          <Text className='text-lg font-medium'>{t('基本信息')}</Text>
-          <div className='text-xs text-gray-600'>
-            {t('模型的详细描述和基本特性')}
+    <Card className='!rounded-2xl mb-6 border border-[color:var(--app-border)] shadow-sm'>
+      <Card.Content className='space-y-4 p-5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-600 dark:bg-sky-950/40 dark:text-sky-300'>
+            <Info size={16} />
           </div>
+          <div>
+            <div className='text-base font-semibold text-foreground'>
+              {t('基本信息')}
+            </div>
+            <div className='text-xs text-muted'>
+              {t('模型的详细描述和基本特性')}
+            </div>
+          </div>
+        </div>
+
+        <div className='text-sm text-muted'>
+          <p className='mb-3 leading-relaxed'>{getModelDescription()}</p>
+          {tags.length > 0 && (
+            <div className='flex flex-wrap gap-1.5'>
+              {tags.map((tag, index) => (
+                <span
+                  key={index}
+                  className='inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium'
+                  style={{
+                    backgroundColor: `${tag.color}1A`,
+                    color: tag.color,
+                  }}
+                >
+                  {tag.text}
+                </span>
+              ))}
+            </div>
+          )}
         </div>
-      </div>
-      <div className='text-gray-600'>
-        <p className='mb-4'>{getModelDescription()}</p>
-        {getModelTags().length > 0 && (
-          <Space wrap>
-            {getModelTags().map((tag, index) => (
-              <Tag key={index} color={tag.color} shape='circle' size='small'>
-                {tag.text}
-              </Tag>
-            ))}
-          </Space>
-        )}
-      </div>
+      </Card.Content>
     </Card>
   );
 };
diff --git a/web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx b/web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx
index 509389f0511..623f3fcf848 100644
--- a/web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx
+++ b/web/src/components/table/model-pricing/modal/components/ModelEndpoints.jsx
@@ -18,22 +18,18 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Typography, Badge } from '@douyinfe/semi-ui';
-import { IconLink } from '@douyinfe/semi-icons';
-
-const { Text } = Typography;
+import { Card } from '@heroui/react';
+import { Link as LinkIcon } from 'lucide-react';
 
 const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
   const renderAPIEndpoints = () => {
     if (!modelData) return null;
-
     const mapping = endpointMap;
     const types = modelData.supported_endpoint_types || [];
 
     return types.map((type) => {
       const info = mapping[type] || {};
       let path = info.path || '';
-      // 如果路径中包含 {model} 占位符，替换为真实模型名称
       if (path.includes('{model}')) {
         const modelName = modelData.model_name || modelData.modelName || '';
         path = path.replaceAll('{model}', modelName);
@@ -42,19 +38,24 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
       return (
         <div
           key={type}
-          className='flex justify-between border-b border-dashed last:border-0 py-2 last:pb-0'
-          style={{ borderColor: 'var(--semi-color-border)' }}
+          className='flex items-start justify-between gap-3 border-b border-dashed border-[color:var(--app-border)] py-2 last:border-0 last:pb-0'
         >
-          <span className='flex items-center pr-5'>
-            <Badge dot type='success' className='mr-2' />
-            {type}
-            {path && '：'}
+          <span className='flex min-w-0 flex-1 items-center gap-1.5 text-sm text-foreground'>
+            <span className='inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500' />
+            <span className='shrink-0 font-medium'>{type}</span>
             {path && (
-              <span className='text-gray-500 md:ml-1 break-all'>{path}</span>
+              <>
+                <span className='shrink-0 text-muted'>：</span>
+                <span className='min-w-0 break-all text-xs text-muted'>
+                  {path}
+                </span>
+              </>
             )}
           </span>
           {path && (
-            <span className='text-gray-500 text-xs md:ml-1'>{method}</span>
+            <span className='shrink-0 text-xs uppercase tracking-wide text-muted'>
+              {method}
+            </span>
           )}
         </div>
       );
@@ -62,19 +63,23 @@ const ModelEndpoints = ({ modelData, endpointMap = {}, t }) => {
   };
 
   return (
-    <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-      <div className='flex items-center mb-4'>
-        <Avatar size='small' color='purple' className='mr-2 shadow-md'>
-          <IconLink size={16} />
-        </Avatar>
-        <div>
-          <Text className='text-lg font-medium'>{t('API端点')}</Text>
-          <div className='text-xs text-gray-600'>
-            {t('模型支持的接口端点信息')}
+    <Card className='!rounded-2xl mb-6 border border-[color:var(--app-border)] shadow-sm'>
+      <Card.Content className='space-y-3 p-5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-purple-100 text-purple-600 dark:bg-purple-950/40 dark:text-purple-300'>
+            <LinkIcon size={16} />
+          </div>
+          <div>
+            <div className='text-base font-semibold text-foreground'>
+              {t('API端点')}
+            </div>
+            <div className='text-xs text-muted'>
+              {t('模型支持的接口端点信息')}
+            </div>
           </div>
         </div>
-      </div>
-      {renderAPIEndpoints()}
+        <div className='space-y-1'>{renderAPIEndpoints()}</div>
+      </Card.Content>
     </Card>
   );
 };
diff --git a/web/src/components/table/model-pricing/modal/components/ModelHeader.jsx b/web/src/components/table/model-pricing/modal/components/ModelHeader.jsx
index d46492b76ec..8b5d414f470 100644
--- a/web/src/components/table/model-pricing/modal/components/ModelHeader.jsx
+++ b/web/src/components/table/model-pricing/modal/components/ModelHeader.jsx
@@ -18,21 +18,17 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Typography, Toast, Avatar } from '@douyinfe/semi-ui';
-import { getLobeHubIcon } from '../../../../../helpers';
-
-const { Paragraph } = Typography;
+import { Copy } from 'lucide-react';
+import { showSuccess, getLobeHubIcon } from '../../../../../helpers';
 
 const CARD_STYLES = {
   container:
-    'w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md',
+    'w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md bg-[color:var(--app-background)] border border-[color:var(--app-border)]',
   icon: 'w-8 h-8 flex items-center justify-center',
 };
 
 const ModelHeader = ({ modelData, vendorsMap = {}, t }) => {
-  // 获取模型图标（优先模型图标，其次供应商图标）
   const getModelIcon = () => {
-    // 1) 优先使用模型自定义图标
     if (modelData?.icon) {
       return (
         <div className={CARD_STYLES.container}>
@@ -42,7 +38,6 @@ const ModelHeader = ({ modelData, vendorsMap = {}, t }) => {
         </div>
       );
     }
-    // 2) 退化为供应商图标
     if (modelData?.vendor_icon) {
       return (
         <div className={CARD_STYLES.container}>
@@ -52,42 +47,44 @@ const ModelHeader = ({ modelData, vendorsMap = {}, t }) => {
         </div>
       );
     }
-
-    // 如果没有供应商图标，使用模型名称的前两个字符
     const avatarText = modelData?.model_name?.slice(0, 2).toUpperCase() || 'AI';
     return (
-      <div className={CARD_STYLES.container}>
-        <Avatar
-          size='large'
-          style={{
-            width: 48,
-            height: 48,
-            borderRadius: 16,
-            fontSize: 16,
-            fontWeight: 'bold',
-          }}
-        >
-          {avatarText}
-        </Avatar>
+      <div className={`${CARD_STYLES.container} bg-primary/10 text-primary`}>
+        <span className='text-base font-bold'>{avatarText}</span>
       </div>
     );
   };
 
+  const handleCopy = async () => {
+    const text = modelData?.model_name || '';
+    if (!text) return;
+    try {
+      await navigator.clipboard.writeText(text);
+      showSuccess(t('已复制模型名称'));
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn('Copy failed', err);
+    }
+  };
+
   return (
     <div className='flex items-center'>
       {getModelIcon()}
-      <div className='ml-3 font-normal'>
-        <Paragraph
-          className='!mb-0 !text-lg !font-medium'
-          copyable={{
-            content: modelData?.model_name || '',
-            onCopy: () => Toast.success({ content: t('已复制模型名称') }),
-          }}
-        >
-          <span className='truncate max-w-60 font-bold'>
-            {modelData?.model_name || t('未知模型')}
-          </span>
-        </Paragraph>
+      <div className='ml-3 flex items-center gap-1.5 font-normal'>
+        <span className='max-w-60 truncate text-lg font-bold text-foreground'>
+          {modelData?.model_name || t('未知模型')}
+        </span>
+        {modelData?.model_name ? (
+          <button
+            type='button'
+            onClick={handleCopy}
+            aria-label={t('复制模型名称')}
+            title={t('复制')}
+            className='inline-flex h-7 w-7 items-center justify-center rounded-md text-muted transition hover:bg-[color:var(--app-background)] hover:text-foreground'
+          >
+            <Copy size={14} />
+          </button>
+        ) : null}
       </div>
     </div>
   );
diff --git a/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx b/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
index b2064609464..d6ddbc3c2f3 100644
--- a/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
+++ b/web/src/components/table/model-pricing/modal/components/ModelPricingTable.jsx
@@ -18,11 +18,25 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Avatar, Typography, Table, Tag } from '@douyinfe/semi-ui';
-import { IconCoinMoneyStroked } from '@douyinfe/semi-icons';
+import { Card } from '@heroui/react';
+import { CircleDollarSign } from 'lucide-react';
 import { calculateModelPrice, getModelPriceItems } from '../../../../../helpers';
 
-const { Text } = Typography;
+function GroupChip({ children, tone = 'default' }) {
+  const toneClass =
+    tone === 'violet'
+      ? 'bg-violet-100 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300'
+      : tone === 'teal'
+        ? 'bg-teal-100 text-teal-700 dark:bg-teal-950/40 dark:text-teal-300'
+        : 'border border-[color:var(--app-border)] bg-background text-foreground';
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${toneClass}`}
+    >
+      {children}
+    </span>
+  );
+}
 
 const ModelPricingTable = ({
   modelData,
@@ -40,147 +54,154 @@ const ModelPricingTable = ({
     ? modelData.enable_groups
     : [];
   const autoChain = autoGroups.filter((g) => modelEnableGroups.includes(g));
-  const renderGroupPriceTable = () => {
-    // 仅展示模型可用的分组：模型 enable_groups 与用户可用分组的交集
-
-    const availableGroups = Object.keys(usableGroup || {})
-      .filter((g) => g !== '')
-      .filter((g) => g !== 'auto')
-      .filter((g) => modelEnableGroups.includes(g));
-
-    // 准备表格数据
-    const tableData = availableGroups.map((group) => {
-      const priceData = modelData
-        ? calculateModelPrice({
-            record: modelData,
-            selectedGroup: group,
-            groupRatio,
-            tokenUnit,
-            displayPrice,
-            currency,
-            quotaDisplayType: siteDisplayType,
-          })
-        : { inputPrice: '-', outputPrice: '-', price: '-' };
-
-      // 获取分组倍率
-      const groupRatioValue =
-        groupRatio && groupRatio[group] ? groupRatio[group] : 1;
 
-      return {
-        key: group,
-        group: group,
-        ratio: groupRatioValue,
-        billingType:
-          modelData?.quota_type === 0
-            ? t('按量计费')
-            : modelData?.quota_type === 1
-              ? t('按次计费')
-              : '-',
-        priceItems: getModelPriceItems(priceData, t, siteDisplayType),
-      };
-    });
+  const availableGroups = Object.keys(usableGroup || {})
+    .filter((g) => g !== '')
+    .filter((g) => g !== 'auto')
+    .filter((g) => modelEnableGroups.includes(g));
+
+  const tableData = availableGroups.map((group) => {
+    const priceData = modelData
+      ? calculateModelPrice({
+          record: modelData,
+          selectedGroup: group,
+          groupRatio,
+          tokenUnit,
+          displayPrice,
+          currency,
+          quotaDisplayType: siteDisplayType,
+        })
+      : { inputPrice: '-', outputPrice: '-', price: '-' };
+
+    const groupRatioValue =
+      groupRatio && groupRatio[group] ? groupRatio[group] : 1;
+
+    return {
+      key: group,
+      group,
+      ratio: groupRatioValue,
+      billingType:
+        modelData?.quota_type === 0
+          ? t('按量计费')
+          : modelData?.quota_type === 1
+            ? t('按次计费')
+            : '-',
+      priceItems: getModelPriceItems(priceData, t, siteDisplayType),
+    };
+  });
 
-    // 定义表格列
-    const columns = [
-      {
-        title: t('分组'),
-        dataIndex: 'group',
-        render: (text) => (
-          <Tag color='white' size='small' shape='circle'>
-            {text}
-            {t('分组')}
-          </Tag>
-        ),
-      },
-    ];
-
-    // 如果显示倍率，添加倍率列
-    if (showRatio) {
-      columns.push({
-        title: t('倍率'),
-        dataIndex: 'ratio',
-        render: (text) => (
-          <Tag color='white' size='small' shape='circle'>
-            {text}x
-          </Tag>
-        ),
-      });
-    }
-
-    // 添加计费类型列
-    columns.push({
-      title: t('计费类型'),
-      dataIndex: 'billingType',
-      render: (text) => {
-        let color = 'white';
-        if (text === t('按量计费')) color = 'violet';
-        else if (text === t('按次计费')) color = 'teal';
-        return (
-          <Tag color={color} size='small' shape='circle'>
-            {text || '-'}
-          </Tag>
-        );
-      },
-    });
-
-    columns.push({
-      title: siteDisplayType === 'TOKENS' ? t('计费摘要') : t('价格摘要'),
-      dataIndex: 'priceItems',
-      render: (items) => (
-        <div className='space-y-1'>
-          {items.map((item) => (
-            <div key={item.key}>
-              <div className='font-semibold text-orange-600'>
-                {item.label} {item.value}
-              </div>
-              <div className='text-xs text-gray-500'>{item.suffix}</div>
+  return (
+    <Card className='!rounded-2xl border border-[color:var(--app-border)] shadow-sm'>
+      <Card.Content className='space-y-4 p-5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-orange-100 text-orange-600 dark:bg-orange-950/40 dark:text-orange-300'>
+            <CircleDollarSign size={16} />
+          </div>
+          <div>
+            <div className='text-base font-semibold text-foreground'>
+              {t('分组价格')}
+            </div>
+            <div className='text-xs text-muted'>
+              {t('不同用户分组的价格信息')}
             </div>
-          ))}
+          </div>
         </div>
-      ),
-    });
 
-    return (
-      <Table
-        dataSource={tableData}
-        columns={columns}
-        pagination={false}
-        size='small'
-        bordered={false}
-        className='!rounded-lg'
-      />
-    );
-  };
+        {autoChain.length > 0 && (
+          <div className='flex flex-wrap items-center gap-1'>
+            <span className='text-sm text-muted'>{t('auto分组调用链路')}</span>
+            <span className='text-sm text-muted'>→</span>
+            {autoChain.map((g, idx) => (
+              <React.Fragment key={g}>
+                <GroupChip>
+                  {g}
+                  {t('分组')}
+                </GroupChip>
+                {idx < autoChain.length - 1 && (
+                  <span className='text-sm text-muted'>→</span>
+                )}
+              </React.Fragment>
+            ))}
+          </div>
+        )}
 
-  return (
-    <Card className='!rounded-2xl shadow-sm border-0'>
-      <div className='flex items-center mb-4'>
-        <Avatar size='small' color='orange' className='mr-2 shadow-md'>
-          <IconCoinMoneyStroked size={16} />
-        </Avatar>
-        <div>
-          <Text className='text-lg font-medium'>{t('分组价格')}</Text>
-          <div className='text-xs text-gray-600'>
-            {t('不同用户分组的价格信息')}
+        {tableData.length === 0 ? (
+          <div className='py-6 text-center text-sm text-muted'>
+            {t('暂无可用分组')}
           </div>
-        </div>
-      </div>
-      {autoChain.length > 0 && (
-        <div className='flex flex-wrap items-center gap-1 mb-4'>
-          <span className='text-sm text-gray-600'>{t('auto分组调用链路')}</span>
-          <span className='text-sm'>→</span>
-          {autoChain.map((g, idx) => (
-            <React.Fragment key={g}>
-              <Tag color='white' size='small' shape='circle'>
-                {g}
-                {t('分组')}
-              </Tag>
-              {idx < autoChain.length - 1 && <span className='text-sm'>→</span>}
-            </React.Fragment>
-          ))}
-        </div>
-      )}
-      {renderGroupPriceTable()}
+        ) : (
+          <div className='overflow-hidden rounded-xl border border-[color:var(--app-border)]'>
+            <table className='w-full text-sm'>
+              <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+                <tr>
+                  <th className='px-3 py-2 text-left font-semibold'>
+                    {t('分组')}
+                  </th>
+                  {showRatio ? (
+                    <th className='px-3 py-2 text-left font-semibold'>
+                      {t('倍率')}
+                    </th>
+                  ) : null}
+                  <th className='px-3 py-2 text-left font-semibold'>
+                    {t('计费类型')}
+                  </th>
+                  <th className='px-3 py-2 text-left font-semibold'>
+                    {siteDisplayType === 'TOKENS'
+                      ? t('计费摘要')
+                      : t('价格摘要')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className='divide-y divide-[color:var(--app-border)]'>
+                {tableData.map((row) => {
+                  const billingTone =
+                    row.billingType === t('按量计费')
+                      ? 'violet'
+                      : row.billingType === t('按次计费')
+                        ? 'teal'
+                        : 'default';
+                  return (
+                    <tr key={row.key}>
+                      <td className='px-3 py-2'>
+                        <GroupChip>
+                          {row.group}
+                          {t('分组')}
+                        </GroupChip>
+                      </td>
+                      {showRatio ? (
+                        <td className='px-3 py-2'>
+                          <GroupChip>{row.ratio}x</GroupChip>
+                        </td>
+                      ) : null}
+                      <td className='px-3 py-2'>
+                        <GroupChip tone={billingTone}>
+                          {row.billingType || '-'}
+                        </GroupChip>
+                      </td>
+                      <td className='px-3 py-2'>
+                        <div className='space-y-1'>
+                          {row.priceItems.map((item) => (
+                            <div key={item.key}>
+                              <div className='font-semibold text-orange-600 dark:text-orange-300'>
+                                {item.label} {item.value}
+                              </div>
+                              {item.suffix ? (
+                                <div className='text-xs text-muted'>
+                                  {item.suffix}
+                                </div>
+                              ) : null}
+                            </div>
+                          ))}
+                        </div>
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </Card.Content>
     </Card>
   );
 };
diff --git a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
index 75514d1edfc..8ca6073dd08 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardSkeleton.jsx
@@ -18,127 +18,87 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Card, Skeleton } from '@douyinfe/semi-ui';
+import { Card } from '@heroui/react';
 
 const PricingCardSkeleton = ({
   skeletonCount = 100,
   rowSelection = false,
   showRatio = false,
 }) => {
-  const placeholder = (
+  const SkeletonLine = ({ className = '' }) => (
+    <div className={`animate-pulse rounded bg-surface-secondary ${className}`} />
+  );
+
+  return (
     <div className='px-2 pt-2'>
       <div className='grid grid-cols-1 xl:grid-cols-2 2xl:grid-cols-3 gap-4'>
         {Array.from({ length: skeletonCount }).map((_, index) => (
-          <Card
-            key={index}
-            className='!rounded-2xl border border-gray-200'
-            bodyStyle={{ padding: '24px' }}
-          >
-            {/* 头部：图标 + 模型名称 + 操作按钮 */}
+          <Card key={index} className='rounded-2xl border border-border'>
+            <Card.Content className='p-6'>
+            {/* Header: icon, model name, actions. */}
             <div className='flex items-start justify-between mb-3'>
               <div className='flex items-start space-x-3 flex-1 min-w-0'>
-                {/* 模型图标骨架 */}
+                {/* Model icon skeleton. */}
                 <div className='w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-sm'>
-                  <Skeleton.Avatar
-                    size='large'
-                    style={{ width: 48, height: 48, borderRadius: 16 }}
-                  />
+                  <SkeletonLine className='h-12 w-12 rounded-2xl' />
                 </div>
-                {/* 模型名称和价格区域 */}
+                {/* Model name and price skeleton. */}
                 <div className='flex-1 min-w-0'>
-                  {/* 模型名称骨架 */}
-                  <Skeleton.Title
-                    style={{
-                      width: `${120 + (index % 3) * 30}px`,
-                      height: 20,
-                      marginBottom: 8,
-                    }}
+                  <SkeletonLine
+                    className='mb-2 h-5'
+                    style={{ width: `${120 + (index % 3) * 30}px` }}
                   />
-                  {/* 价格信息骨架 */}
-                  <Skeleton.Title
-                    style={{
-                      width: `${160 + (index % 4) * 20}px`,
-                      height: 20,
-                      marginBottom: 0,
-                    }}
+                  <SkeletonLine
+                    className='h-5'
+                    style={{ width: `${160 + (index % 4) * 20}px` }}
                   />
                 </div>
               </div>
 
               <div className='flex items-center space-x-2 ml-3'>
-                {/* 复制按钮骨架 */}
-                <Skeleton.Button
-                  size='small'
-                  style={{ width: 16, height: 16, borderRadius: 4 }}
-                />
-                {/* 勾选框骨架 */}
-                {rowSelection && (
-                  <Skeleton.Button
-                    size='small'
-                    style={{ width: 16, height: 16, borderRadius: 2 }}
-                  />
-                )}
+                <SkeletonLine className='h-4 w-4 rounded' />
+                {rowSelection && <SkeletonLine className='h-4 w-4 rounded-sm' />}
               </div>
             </div>
 
-            {/* 模型描述骨架 */}
+            {/* Model description skeleton. */}
             <div className='mb-4'>
-              <Skeleton.Paragraph
-                rows={2}
-                style={{ marginBottom: 0 }}
-                title={false}
-              />
+              <SkeletonLine className='mb-2 h-4 w-full' />
+              <SkeletonLine className='h-4 w-4/5' />
             </div>
 
-            {/* 标签区域骨架 */}
+            {/* Tags skeleton. */}
             <div className='flex flex-wrap gap-2'>
               {Array.from({ length: 2 + (index % 3) }).map((_, tagIndex) => (
-                <Skeleton.Button
-                  key={tagIndex}
-                  size='small'
-                  style={{
-                    width: 64,
-                    height: 18,
-                    borderRadius: 10,
-                  }}
-                />
+                <SkeletonLine key={tagIndex} className='h-[18px] w-16 rounded-full' />
               ))}
             </div>
 
-            {/* 倍率信息骨架（可选） */}
+            {/* Ratio info skeleton. */}
             {showRatio && (
-              <div className='mt-4 pt-3 border-t border-gray-100'>
+              <div className='mt-4 pt-3 border-t border-border'>
                 <div className='flex items-center space-x-1 mb-2'>
-                  <Skeleton.Title
-                    style={{ width: 60, height: 12, marginBottom: 0 }}
-                  />
-                  <Skeleton.Button
-                    size='small'
-                    style={{ width: 14, height: 14, borderRadius: 7 }}
-                  />
+                  <SkeletonLine className='h-3 w-14' />
+                  <SkeletonLine className='h-3.5 w-3.5 rounded-full' />
                 </div>
                 <div className='grid grid-cols-3 gap-2'>
                   {Array.from({ length: 3 }).map((_, ratioIndex) => (
-                    <Skeleton.Title
-                      key={ratioIndex}
-                      style={{ width: '100%', height: 12, marginBottom: 0 }}
-                    />
+                    <SkeletonLine key={ratioIndex} className='h-3 w-full' />
                   ))}
                 </div>
               </div>
             )}
+            </Card.Content>
           </Card>
         ))}
       </div>
 
-      {/* 分页骨架 */}
+      {/* Pagination skeleton. */}
       <div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
-        <Skeleton.Button style={{ width: 300, height: 32 }} />
+        <SkeletonLine className='h-8 w-[300px]' />
       </div>
     </div>
   );
-
-  return <Skeleton loading={true} active placeholder={placeholder}></Skeleton>;
 };
 
 export default PricingCardSkeleton;
diff --git a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
index 477da259d7a..cfa6a53f125 100644
--- a/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
+++ b/web/src/components/table/model-pricing/view/card/PricingCardView.jsx
@@ -18,24 +18,10 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
+import { Button, Card, Checkbox, Chip, Pagination, Tooltip } from '@heroui/react';
+import { CircleHelp, Copy, SearchX } from 'lucide-react';
+import { EmptyState } from '@heroui-pro/react';
 import {
-  Card,
-  Tag,
-  Tooltip,
-  Checkbox,
-  Empty,
-  Pagination,
-  Button,
-  Avatar,
-} from '@douyinfe/semi-ui';
-import { IconHelpCircle } from '@douyinfe/semi-icons';
-import { Copy } from 'lucide-react';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import {
-  stringToColor,
   calculateModelPrice,
   formatPriceInfo,
   getLobeHubIcon,
@@ -50,7 +36,7 @@ const CARD_STYLES = {
     'w-12 h-12 rounded-2xl flex items-center justify-center relative shadow-md',
   icon: 'w-8 h-8 flex items-center justify-center',
   selected: 'border-blue-500 bg-blue-50',
-  default: 'border-gray-200 hover:border-gray-300',
+  default: 'border-border hover:border-border',
 };
 
 const PricingCardView = ({
@@ -100,11 +86,11 @@ const PricingCardView = ({
     if (!model || !model.model_name) {
       return (
         <div className={CARD_STYLES.container}>
-          <Avatar size='large'>?</Avatar>
+          <span className='text-base font-semibold text-foreground'>?</span>
         </div>
       );
     }
-    // 1) 优先使用模型自定义图标
+    // Prefer model custom icon.
     if (model.icon) {
       return (
         <div className={CARD_STYLES.container}>
@@ -114,7 +100,7 @@ const PricingCardView = ({
         </div>
       );
     }
-    // 2) 退化为供应商图标
+    // Fallback to vendor icon.
     if (model.vendor_icon) {
       return (
         <div className={CARD_STYLES.container}>
@@ -125,68 +111,58 @@ const PricingCardView = ({
       );
     }
 
-    // 如果没有供应商图标，使用模型名称生成头像
+    // Fallback to initials when no icon is available.
 
     const avatarText = model.model_name.slice(0, 2).toUpperCase();
     return (
       <div className={CARD_STYLES.container}>
-        <Avatar
-          size='large'
-          style={{
-            width: 48,
-            height: 48,
-            borderRadius: 16,
-            fontSize: 16,
-            fontWeight: 'bold',
-          }}
-        >
+        <span className='flex h-12 w-12 items-center justify-center rounded-2xl text-base font-bold text-foreground'>
           {avatarText}
-        </Avatar>
+        </span>
       </div>
     );
   };
 
-  // 获取模型描述
+  // Get model description.
   const getModelDescription = (record) => {
     return record.description || '';
   };
 
-  // 渲染标签
+  // Render tags.
   const renderTags = (record) => {
     // 计费类型标签（左边）
     let billingTag = (
-      <Tag key='billing' shape='circle' color='white' size='small'>
+      <Chip key='billing' size='sm' variant='secondary'>
         -
-      </Tag>
+      </Chip>
     );
     if (record.quota_type === 1) {
       billingTag = (
-        <Tag key='billing' shape='circle' color='teal' size='small'>
+        <Chip key='billing' size='sm' color='success' variant='secondary'>
           {t('按次计费')}
-        </Tag>
+        </Chip>
       );
     } else if (record.quota_type === 0) {
       billingTag = (
-        <Tag key='billing' shape='circle' color='violet' size='small'>
+        <Chip key='billing' size='sm' color='secondary' variant='secondary'>
           {t('按量计费')}
-        </Tag>
+        </Chip>
       );
     }
 
-    // 自定义标签（右边）
+    // Custom tags.
     const customTags = [];
     if (record.tags) {
       const tagArr = record.tags.split(',').filter(Boolean);
       tagArr.forEach((tg, idx) => {
         customTags.push(
-          <Tag
+          <Chip
             key={`custom-${idx}`}
-            shape='circle'
-            color={stringToColor(tg)}
-            size='small'
+            size='sm'
+            variant='secondary'
           >
             {tg}
-          </Tag>,
+          </Chip>,
         );
       });
     }
@@ -209,7 +185,7 @@ const PricingCardView = ({
     );
   };
 
-  // 显示骨架屏
+  // Show skeleton.
   if (showSkeleton) {
     return (
       <PricingCardSkeleton
@@ -222,13 +198,15 @@ const PricingCardView = ({
   if (!filteredModels || filteredModels.length === 0) {
     return (
       <div className='flex justify-center items-center py-20'>
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={t('搜索无结果')}
-        />
+        <EmptyState size='sm'>
+          <EmptyState.Header>
+            <EmptyState.Media variant='illustration'>
+              <SearchX size={96} className='text-muted/60' strokeWidth={1.25} />
+            </EmptyState.Media>
+            <EmptyState.Title>{t('暂无内容')}</EmptyState.Title>
+            <EmptyState.Description>{t('搜索无结果')}</EmptyState.Description>
+          </EmptyState.Header>
+        </EmptyState>
       </div>
     );
   }
@@ -254,16 +232,15 @@ const PricingCardView = ({
             <Card
               key={modelKey || index}
               className={`!rounded-2xl transition-all duration-200 hover:shadow-lg border cursor-pointer ${isSelected ? CARD_STYLES.selected : CARD_STYLES.default}`}
-              bodyStyle={{ height: '100%' }}
-              onClick={() => openModelDetail && openModelDetail(model)}
+              onPress={() => openModelDetail && openModelDetail(model)}
             >
-              <div className='flex flex-col h-full'>
-                {/* 头部：图标 + 模型名称 + 操作按钮 */}
+              <Card.Content className='flex h-full flex-col p-6'>
+                {/* Header: icon, model name, actions. */}
                 <div className='flex items-start justify-between mb-3'>
                   <div className='flex items-start space-x-3 flex-1 min-w-0'>
                     {getModelIcon(model)}
                     <div className='flex-1 min-w-0'>
-                      <h3 className='text-lg font-bold text-gray-900 truncate'>
+                      <h3 className='text-lg font-bold text-foreground truncate'>
                         {model.model_name}
                       </h3>
                       <div className='flex flex-col gap-1 text-xs mt-1'>
@@ -275,57 +252,63 @@ const PricingCardView = ({
                   <div className='flex items-center space-x-2 ml-3'>
                     {/* 复制按钮 */}
                     <Button
-                      size='small'
-                      theme='outline'
-                      type='tertiary'
-                      icon={<Copy size={12} />}
-                      onClick={(e) => {
+                      isIconOnly
+                      size='sm'
+                      variant='outline'
+                      onPress={(e) => {
                         e.stopPropagation();
                         copyText(model.model_name);
                       }}
-                    />
+                      aria-label={t('复制')}
+                    >
+                      <Copy size={12} />
+                    </Button>
 
-                    {/* 选择框 */}
+                    {/* Checkbox */}
                     {rowSelection && (
-                      <Checkbox
+                      <input
+                        type='checkbox'
                         checked={isSelected}
-                        onChange={(e) => {
-                          e.stopPropagation();
-                          handleCheckboxChange(model, e.target.checked);
+                        onChange={(event) => {
+                          event.stopPropagation();
+                          handleCheckboxChange(model, event.target.checked);
                         }}
+                        onClick={(event) => event.stopPropagation()}
+                        className='h-4 w-4 rounded border-border text-accent'
+                        aria-label={t('选择模型')}
                       />
                     )}
                   </div>
                 </div>
 
-                {/* 模型描述 - 占据剩余空间 */}
+                {/* Model description. */}
                 <div className='flex-1 mb-4'>
                   <p
                     className='text-xs line-clamp-2 leading-relaxed'
-                    style={{ color: 'var(--semi-color-text-2)' }}
+                    style={{ color: 'var(--app-muted)' }}
                   >
                     {getModelDescription(model)}
                   </p>
                 </div>
 
-                {/* 底部区域 */}
+                {/* Footer area. */}
                 <div className='mt-auto'>
-                  {/* 标签区域 */}
+                  {/* Tags. */}
                   {renderTags(model)}
 
-                  {/* 倍率信息（可选） */}
+                  {/* Ratio info. */}
                   {showRatio && (
                     <div className='pt-3'>
                       <div className='flex items-center space-x-1 mb-2'>
-                        <span className='text-xs font-medium text-gray-700'>
+                        <span className='text-xs font-medium text-foreground'>
                           {t('倍率信息')}
                         </span>
                         <Tooltip
                           content={t('倍率是为了方便换算不同价格的模型')}
                         >
-                          <IconHelpCircle
+                          <CircleHelp
                             className='text-blue-500 cursor-pointer'
-                            size='small'
+                            size={14}
                             onClick={(e) => {
                               e.stopPropagation();
                               setModalImageUrl('/ratio.png');
@@ -334,7 +317,7 @@ const PricingCardView = ({
                           />
                         </Tooltip>
                       </div>
-                      <div className='grid grid-cols-3 gap-2 text-xs text-gray-600'>
+                      <div className='grid grid-cols-3 gap-2 text-xs text-muted'>
                         <div>
                           {t('模型')}:{' '}
                           {model.quota_type === 0 ? model.model_ratio : t('无')}
@@ -352,13 +335,13 @@ const PricingCardView = ({
                     </div>
                   )}
                 </div>
-              </div>
+              </Card.Content>
             </Card>
           );
         })}
       </div>
 
-      {/* 分页 */}
+      {/* Pagination. */}
       {filteredModels.length > 0 && (
         <div className='flex justify-center mt-6 py-4 border-t pricing-pagination-divider'>
           <Pagination
diff --git a/web/src/components/table/model-pricing/view/table/PricingTable.jsx b/web/src/components/table/model-pricing/view/table/PricingTable.jsx
index 120840ebad4..fb6e2c2ff88 100644
--- a/web/src/components/table/model-pricing/view/table/PricingTable.jsx
+++ b/web/src/components/table/model-pricing/view/table/PricingTable.jsx
@@ -17,13 +17,41 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useMemo } from 'react';
-import { Card, Table, Empty } from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Skeleton } from '@heroui/react';
+import { Inbox } from 'lucide-react';
+import CardTable from '../../../../common/ui/CardTable';
 import { getPricingTableColumns } from './PricingTableColumns';
+import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
+import { useMinimumLoadingTime } from '../../../../../hooks/common/useMinimumLoadingTime';
+
+const PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
+
+// Renders the column header. Semi columns can supply either a string/JSX
+// node or a zero-arg function that returns JSX (used for the ratio column
+// help button); both shapes are mirrored here.
+const renderColumnTitle = (col) =>
+  typeof col.title === 'function' ? col.title() : col.title;
+
+// Tiny native checkbox with `indeterminate` support (mirrors the same helper
+// inlined across the dashboard tables — kept local to avoid pulling a shared
+// component for a single call site).
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
 
 const PricingTable = ({
   filteredModels,
@@ -31,6 +59,8 @@ const PricingTable = ({
   rowSelection,
   pageSize,
   setPageSize,
+  currentPage = 1,
+  setCurrentPage,
   selectedGroup,
   groupRatio,
   copyText,
@@ -46,6 +76,9 @@ const PricingTable = ({
   openModelDetail,
   t,
 }) => {
+  const isMobile = useIsMobile();
+  const showSkeleton = useMinimumLoadingTime(loading);
+
   const columns = useMemo(() => {
     return getPricingTableColumns({
       t,
@@ -59,6 +92,7 @@ const PricingTable = ({
       tokenUnit,
       displayPrice,
       showRatio,
+      isMobile,
     });
   }, [
     t,
@@ -72,76 +106,308 @@ const PricingTable = ({
     tokenUnit,
     displayPrice,
     showRatio,
+    isMobile,
   ]);
 
-  // 更新列定义中的 searchValue
+  // `compactMode` strips the `fixed: 'right'` hint so the price column flows
+  // inline rather than sticking to the right edge.
   const processedColumns = useMemo(() => {
-    const cols = columns.map((column) => {
-      if (column.dataIndex === 'model_name') {
-        return {
-          ...column,
-          filteredValue: searchValue ? [searchValue] : [],
-        };
-      }
-      return column;
-    });
-
-    // Remove fixed property when in compact mode (mobile view)
     if (compactMode) {
-      return cols.map(({ fixed, ...rest }) => rest);
+      return columns.map(({ fixed, ...rest }) => rest);
     }
-    return cols;
-  }, [columns, searchValue, compactMode]);
+    return columns;
+  }, [columns, compactMode]);
 
-  const ModelTable = useMemo(
-    () => (
-      <Card className='!rounded-xl overflow-hidden' bordered={false}>
-        <Table
+  const totalRows = filteredModels?.length ?? 0;
+  const effectivePageSize = pageSize || 20;
+  const totalPages = Math.max(1, Math.ceil(totalRows / effectivePageSize));
+  const safeCurrentPage = Math.min(Math.max(1, currentPage), totalPages);
+  const startIndex = (safeCurrentPage - 1) * effectivePageSize;
+  const pagedModels = useMemo(
+    () =>
+      (filteredModels || []).slice(startIndex, startIndex + effectivePageSize),
+    [filteredModels, startIndex, effectivePageSize],
+  );
+
+  // Mobile delegates to the shared CardTable: row selection on mobile falls
+  // back to the card view (PricingCardView), so the table view here only
+  // needs the read-only card stack.
+  if (isMobile) {
+    return (
+      <div className='rounded-2xl bg-white/0 p-0'>
+        <CardTable
           columns={processedColumns}
-          dataSource={filteredModels}
+          dataSource={pagedModels}
           loading={loading}
-          rowSelection={rowSelection}
-          scroll={compactMode ? undefined : { x: 'max-content' }}
+          rowKey='model_name'
           onRow={(record) => ({
             onClick: () => openModelDetail && openModelDetail(record),
             style: { cursor: 'pointer' },
           })}
           empty={
-            <Empty
-              image={
-                <IllustrationNoResult style={{ width: 150, height: 150 }} />
-              }
-              darkModeImage={
-                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-              }
-              description={t('搜索无结果')}
-              style={{ padding: 30 }}
-            />
+            <div className='flex flex-col items-center gap-3 py-10 text-center'>
+              <div className='flex h-20 w-20 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                <Inbox size={36} />
+              </div>
+              <div className='text-sm text-muted'>{t('搜索无结果')}</div>
+            </div>
           }
-          pagination={{
-            defaultPageSize: 20,
-            pageSize: pageSize,
-            showSizeChanger: true,
-            pageSizeOptions: [10, 20, 50, 100],
-            onPageSizeChange: (size) => setPageSize(size),
-          }}
+          hidePagination
         />
-      </Card>
-    ),
-    [
-      filteredModels,
-      loading,
-      processedColumns,
-      rowSelection,
-      pageSize,
-      setPageSize,
-      openModelDetail,
-      t,
-      compactMode,
-    ],
-  );
+        <PaginationBar
+          totalRows={totalRows}
+          currentPage={safeCurrentPage}
+          totalPages={totalPages}
+          pageSize={effectivePageSize}
+          setPageSize={setPageSize}
+          setCurrentPage={setCurrentPage}
+          t={t}
+        />
+      </div>
+    );
+  }
+
+  const selectionEnabled = !!rowSelection;
+  const selectedRowKeys = rowSelection?.selectedRowKeys ?? [];
+  const onSelectionChange = rowSelection?.onChange;
+  const getRowKey = (record) => record.key ?? record.model_name ?? record.id;
+
+  const pageRowKeys = pagedModels.map(getRowKey);
+  const allPageSelected =
+    pageRowKeys.length > 0 &&
+    pageRowKeys.every((key) => selectedRowKeys.includes(key));
+  const somePageSelected =
+    !allPageSelected &&
+    pageRowKeys.some((key) => selectedRowKeys.includes(key));
 
-  return ModelTable;
+  const togglePageSelection = (checked) => {
+    if (!onSelectionChange) return;
+    const next = checked
+      ? Array.from(new Set([...selectedRowKeys, ...pageRowKeys]))
+      : selectedRowKeys.filter((key) => !pageRowKeys.includes(key));
+    onSelectionChange(next, null);
+  };
+
+  const toggleRowSelection = (rowKey, checked) => {
+    if (!onSelectionChange) return;
+    const next = checked
+      ? Array.from(new Set([...selectedRowKeys, rowKey]))
+      : selectedRowKeys.filter((key) => key !== rowKey);
+    onSelectionChange(next, null);
+  };
+
+  // Compute sticky-right offset for the price column. We only honour
+  // `fixed: 'right'` on the *last* column to avoid pixel-perfect calculation
+  // of multiple sticky offsets.
+  const stickyLastColumn =
+    !compactMode &&
+    processedColumns.length > 0 &&
+    processedColumns[processedColumns.length - 1]?.fixed === 'right';
+
+  const stickyHeadCellClass =
+    'sticky right-0 z-10 bg-surface-secondary shadow-[-1px_0_0_0_rgba(0,0,0,0.04)]';
+  const stickyBodyCellClass =
+    'sticky right-0 z-10 bg-background shadow-[-1px_0_0_0_rgba(0,0,0,0.04)]';
+
+  if (showSkeleton) {
+    const colCount = processedColumns.length + (selectionEnabled ? 1 : 0);
+    return (
+      <div className='overflow-hidden rounded-2xl border border-border bg-background'>
+        <div className='grid gap-px bg-border'>
+          {[0, 1, 2, 3].map((row) => (
+            <div
+              key={row}
+              className='grid bg-background p-3'
+              style={{
+                gridTemplateColumns: `repeat(${Math.max(colCount, 1)}, minmax(0, 1fr))`,
+              }}
+            >
+              {Array.from({ length: colCount }).map((_, idx) => (
+                <Skeleton
+                  key={idx}
+                  className='h-4 w-3/4 rounded-lg bg-surface-secondary'
+                />
+              ))}
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className='flex flex-col gap-3'>
+      <div className='overflow-hidden rounded-2xl border border-border bg-background'>
+        <div className='overflow-x-auto'>
+          <table className='min-w-full border-collapse text-sm'>
+            <thead className='bg-surface-secondary text-left text-xs font-semibold uppercase tracking-wide text-muted'>
+              <tr>
+                {selectionEnabled && (
+                  <th className='w-10 whitespace-nowrap px-3 py-3'>
+                    <HeaderCheckbox
+                      checked={allPageSelected}
+                      indeterminate={somePageSelected}
+                      onChange={togglePageSelection}
+                      ariaLabel={t('选择当前页')}
+                    />
+                  </th>
+                )}
+                {processedColumns.map((col, idx) => {
+                  const isLast = idx === processedColumns.length - 1;
+                  const sticky = stickyLastColumn && isLast;
+                  return (
+                    <th
+                      key={col.key || col.dataIndex || idx}
+                      className={`whitespace-nowrap px-4 py-3 ${sticky ? stickyHeadCellClass : ''}`}
+                      style={{ width: col.width }}
+                    >
+                      {renderColumnTitle(col)}
+                    </th>
+                  );
+                })}
+              </tr>
+            </thead>
+            <tbody className='divide-y divide-[color:var(--app-border)]'>
+              {pagedModels.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={
+                      processedColumns.length + (selectionEnabled ? 1 : 0)
+                    }
+                    className='py-12 text-center text-sm text-muted'
+                  >
+                    <div className='flex flex-col items-center gap-3'>
+                      <div className='flex h-20 w-20 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                        <Inbox size={36} />
+                      </div>
+                      <div>{t('搜索无结果')}</div>
+                    </div>
+                  </td>
+                </tr>
+              ) : (
+                pagedModels.map((record, rowIdx) => {
+                  const rowKey = getRowKey(record) ?? rowIdx;
+                  const checked = selectedRowKeys.includes(rowKey);
+                  return (
+                    <tr
+                      key={rowKey}
+                      className='cursor-pointer transition-colors hover:bg-surface-secondary/60'
+                      onClick={() => openModelDetail && openModelDetail(record)}
+                    >
+                      {selectionEnabled && (
+                        <td
+                          className='w-10 px-3 py-3 align-middle'
+                          onClick={(event) => event.stopPropagation()}
+                        >
+                          <input
+                            type='checkbox'
+                            checked={checked}
+                            onChange={(event) =>
+                              toggleRowSelection(rowKey, event.target.checked)
+                            }
+                            aria-label={t('选择行')}
+                            className='h-4 w-4 accent-primary'
+                          />
+                        </td>
+                      )}
+                      {processedColumns.map((col, colIdx) => {
+                        const isLast = colIdx === processedColumns.length - 1;
+                        const sticky = stickyLastColumn && isLast;
+                        const value =
+                          typeof col.dataIndex === 'string'
+                            ? record?.[col.dataIndex]
+                            : undefined;
+                        const cell = col.render
+                          ? col.render(value, record, rowIdx)
+                          : (value ?? '-');
+                        return (
+                          <td
+                            key={col.key || col.dataIndex || colIdx}
+                            className={`px-4 py-3 align-middle text-foreground ${sticky ? stickyBodyCellClass : ''}`}
+                          >
+                            {cell}
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <PaginationBar
+        totalRows={totalRows}
+        currentPage={safeCurrentPage}
+        totalPages={totalPages}
+        pageSize={effectivePageSize}
+        setPageSize={setPageSize}
+        setCurrentPage={setCurrentPage}
+        t={t}
+      />
+    </div>
+  );
 };
 
+function PaginationBar({
+  totalRows,
+  currentPage,
+  totalPages,
+  pageSize,
+  setPageSize,
+  setCurrentPage,
+  t,
+}) {
+  if (totalRows === 0) return null;
+
+  return (
+    <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted'>
+      <div className='flex items-center gap-2'>
+        <span>{t('每页')}</span>
+        <select
+          value={String(pageSize)}
+          onChange={(event) => {
+            setPageSize?.(Number(event.target.value));
+            setCurrentPage?.(1);
+          }}
+          aria-label={t('每页数量')}
+          className='h-7 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-xs outline-none focus:border-primary'
+        >
+          {PAGE_SIZE_OPTIONS.map((n) => (
+            <option key={n} value={n}>
+              {n}
+            </option>
+          ))}
+        </select>
+        <span>{t('共 {{total}} 条', { total: totalRows })}</span>
+      </div>
+      <div className='flex items-center gap-1'>
+        <Button
+          size='sm'
+          variant='light'
+          isDisabled={currentPage <= 1}
+          onPress={() => setCurrentPage?.(Math.max(1, currentPage - 1))}
+        >
+          {t('上一页')}
+        </Button>
+        <span>
+          {currentPage} / {totalPages}
+        </span>
+        <Button
+          size='sm'
+          variant='light'
+          isDisabled={currentPage >= totalPages}
+          onPress={() =>
+            setCurrentPage?.(Math.min(totalPages, currentPage + 1))
+          }
+        >
+          {t('下一页')}
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 export default PricingTable;
diff --git a/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx b/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
index 8b61d5c80cc..8d4080d31a1 100644
--- a/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
+++ b/web/src/components/table/model-pricing/view/table/PricingTableColumns.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Tag, Space, Tooltip } from '@douyinfe/semi-ui';
-import { IconHelpCircle } from '@douyinfe/semi-icons';
+import { Tooltip } from '@heroui/react';
+import { HelpCircle } from 'lucide-react';
 import {
   renderModelTag,
   stringToColor,
@@ -31,56 +31,75 @@ import {
   renderLimitedItems,
   renderDescription,
 } from '../../../../common/ui/RenderUtils';
-import { useIsMobile } from '../../../../../hooks/common/useIsMobile';
+
+function ColorChip({ color, children }) {
+  return (
+    <span
+      className='inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium'
+      style={{
+        backgroundColor: `${color}1A`,
+        color,
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function WhiteChip({ children, prefix }) {
+  return (
+    <span className='inline-flex items-center gap-1 rounded-full border border-[color:var(--app-border)] bg-background px-2 py-0.5 text-xs font-medium text-foreground'>
+      {prefix}
+      {children}
+    </span>
+  );
+}
+
+function ToneChip({ tone, children }) {
+  const cls =
+    tone === 'teal'
+      ? 'bg-teal-100 text-teal-700 dark:bg-teal-950/40 dark:text-teal-300'
+      : tone === 'violet'
+        ? 'bg-violet-100 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300'
+        : '';
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}
+    >
+      {children}
+    </span>
+  );
+}
 
 function renderQuotaType(type, t) {
   switch (type) {
     case 1:
-      return (
-        <Tag color='teal' shape='circle'>
-          {t('按次计费')}
-        </Tag>
-      );
+      return <ToneChip tone='teal'>{t('按次计费')}</ToneChip>;
     case 0:
-      return (
-        <Tag color='violet' shape='circle'>
-          {t('按量计费')}
-        </Tag>
-      );
+      return <ToneChip tone='violet'>{t('按量计费')}</ToneChip>;
     default:
       return t('未知');
   }
 }
 
-// Render vendor name
-const renderVendor = (vendorName, vendorIcon, t) => {
+const renderVendor = (vendorName, vendorIcon) => {
   if (!vendorName) return '-';
   return (
-    <Tag
-      color='white'
-      shape='circle'
-      prefixIcon={getLobeHubIcon(vendorIcon || 'Layers', 14)}
-    >
+    <WhiteChip prefix={getLobeHubIcon(vendorIcon || 'Layers', 14)}>
       {vendorName}
-    </Tag>
+    </WhiteChip>
   );
 };
 
-// Render tags list using RenderUtils
 const renderTags = (text) => {
   if (!text) return '-';
   const tagsArr = text.split(',').filter((tag) => tag.trim());
   return renderLimitedItems({
     items: tagsArr,
     renderItem: (tag, idx) => (
-      <Tag
-        key={idx}
-        color={stringToColor(tag.trim())}
-        shape='circle'
-        size='small'
-      >
+      <ColorChip key={idx} color={stringToColor(tag.trim())}>
         {tag.trim()}
-      </Tag>
+      </ColorChip>
     ),
     maxDisplay: 3,
   });
@@ -91,13 +110,13 @@ function renderSupportedEndpoints(endpoints) {
     return null;
   }
   return (
-    <Space wrap>
-      {endpoints.map((endpoint, idx) => (
-        <Tag key={endpoint} color={stringToColor(endpoint)} shape='circle'>
+    <div className='flex flex-wrap items-center gap-1'>
+      {endpoints.map((endpoint) => (
+        <ColorChip key={endpoint} color={stringToColor(endpoint)}>
           {endpoint}
-        </Tag>
+        </ColorChip>
       ))}
-    </Space>
+    </div>
   );
 }
 
@@ -113,8 +132,8 @@ export const getPricingTableColumns = ({
   tokenUnit,
   displayPrice,
   showRatio,
+  isMobile,
 }) => {
-  const isMobile = useIsMobile();
   const priceDataCache = new WeakMap();
 
   const getPriceData = (record) => {
@@ -137,21 +156,16 @@ export const getPricingTableColumns = ({
   const endpointColumn = {
     title: t('可用端点类型'),
     dataIndex: 'supported_endpoint_types',
-    render: (text, record, index) => {
-      return renderSupportedEndpoints(text);
-    },
+    render: (text) => renderSupportedEndpoints(text),
   };
 
   const modelNameColumn = {
     title: t('模型名称'),
     dataIndex: 'model_name',
-    render: (text, record, index) => {
-      return renderModelTag(text, {
-        onClick: () => {
-          copyText(text);
-        },
-      });
-    },
+    render: (text) =>
+      renderModelTag(text, {
+        onClick: () => copyText(text),
+      }),
     onFilter: (value, record) =>
       record.model_name.toLowerCase().includes(value.toLowerCase()),
   };
@@ -159,9 +173,7 @@ export const getPricingTableColumns = ({
   const quotaColumn = {
     title: t('计费类型'),
     dataIndex: 'quota_type',
-    render: (text, record, index) => {
-      return renderQuotaType(parseInt(text), t);
-    },
+    render: (text) => renderQuotaType(parseInt(text), t),
     sorter: (a, b) => a.quota_type - b.quota_type,
   };
 
@@ -180,7 +192,7 @@ export const getPricingTableColumns = ({
   const vendorColumn = {
     title: t('供应商'),
     dataIndex: 'vendor_name',
-    render: (text, record) => renderVendor(text, record.vendor_icon, t),
+    render: (text, record) => renderVendor(text, record.vendor_icon),
   };
 
   const baseColumns = [
@@ -193,34 +205,41 @@ export const getPricingTableColumns = ({
 
   const ratioColumn = {
     title: () => (
-      <div className='flex items-center space-x-1'>
+      <div className='flex items-center gap-1'>
         <span>{t('倍率')}</span>
-        <Tooltip content={t('倍率是为了方便换算不同价格的模型')}>
-          <IconHelpCircle
-            className='text-blue-500 cursor-pointer'
+        <Tooltip
+          content={t('倍率是为了方便换算不同价格的模型')}
+          placement='top'
+        >
+          <button
+            type='button'
+            className='inline-flex h-4 w-4 items-center justify-center text-sky-500'
             onClick={() => {
               setModalImageUrl('/ratio.png');
               setIsModalOpenurl(true);
             }}
-          />
+            aria-label={t('倍率说明')}
+          >
+            <HelpCircle size={14} />
+          </button>
         </Tooltip>
       </div>
     ),
     dataIndex: 'model_ratio',
-    render: (text, record, index) => {
+    render: (text, record) => {
       const completionRatio = parseFloat(record.completion_ratio.toFixed(3));
       const priceData = getPriceData(record);
 
       return (
         <div className='space-y-1'>
-          <div className='text-gray-700'>
+          <div className='text-sm text-foreground'>
             {t('模型倍率')}：{record.quota_type === 0 ? text : t('无')}
           </div>
-          <div className='text-gray-700'>
+          <div className='text-sm text-foreground'>
             {t('补全倍率')}：
             {record.quota_type === 0 ? completionRatio : t('无')}
           </div>
-          <div className='text-gray-700'>
+          <div className='text-sm text-foreground'>
             {t('分组倍率')}：{priceData?.usedGroupRatio ?? '-'}
           </div>
         </div>
@@ -232,14 +251,14 @@ export const getPricingTableColumns = ({
     title: siteDisplayType === 'TOKENS' ? t('计费摘要') : t('模型价格'),
     dataIndex: 'model_price',
     ...(isMobile ? {} : { fixed: 'right' }),
-    render: (text, record, index) => {
+    render: (text, record) => {
       const priceData = getPriceData(record);
       const priceItems = getModelPriceItems(priceData, t, siteDisplayType);
 
       return (
         <div className='space-y-1'>
           {priceItems.map((item) => (
-            <div key={item.key} className='text-gray-700'>
+            <div key={item.key} className='text-sm text-foreground'>
               {item.label} {item.value}
               {item.suffix}
             </div>
diff --git a/web/src/components/table/models/ModelsActions.jsx b/web/src/components/table/models/ModelsActions.jsx
index 7e8f163bf88..fc3ceed0e51 100644
--- a/web/src/components/table/models/ModelsActions.jsx
+++ b/web/src/components/table/models/ModelsActions.jsx
@@ -17,16 +17,58 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import MissingModelsModal from './modals/MissingModelsModal';
 import PrefillGroupManagement from './modals/PrefillGroupManagement';
 import EditPrefillGroupModal from './modals/EditPrefillGroupModal';
-import { Button, Modal, Popover, RadioGroup, Radio } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import { showSuccess, showError, copy } from '../../../helpers';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 import SelectionNotification from './components/SelectionNotification';
 import UpstreamConflictModal from './modals/UpstreamConflictModal';
 import SyncWizardModal from './modals/SyncWizardModal';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
+
+function HoverPopover({ children, content }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const timer = useRef(null);
+
+  const show = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setOpen(true);
+  };
+  const hide = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(false), 120);
+  };
+
+  useEffect(() => () => timer.current && clearTimeout(timer.current), []);
+
+  return (
+    <span
+      ref={ref}
+      className='relative inline-flex'
+      onMouseEnter={show}
+      onMouseLeave={hide}
+      onFocusCapture={show}
+      onBlurCapture={hide}
+    >
+      {children}
+      {open ? (
+        <div
+          role='tooltip'
+          className='absolute left-1/2 top-full z-30 mt-2 w-[320px] -translate-x-1/2 rounded-lg border border-[color:var(--app-border)] bg-background p-3 text-sm shadow-lg'
+        >
+          {content}
+        </div>
+      ) : null}
+    </span>
+  );
+}
 
 const ModelsActions = ({
   selectedKeys,
@@ -43,7 +85,6 @@ const ModelsActions = ({
   setCompactMode,
   t,
 }) => {
-  // Modal states
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showMissingModal, setShowMissingModal] = useState(false);
   const [showGroupManagement, setShowGroupManagement] = useState(false);
@@ -55,7 +96,6 @@ const ModelsActions = ({
   const [syncLocale, setSyncLocale] = useState('zh');
 
   const handleSyncUpstream = async (locale) => {
-    // 先预览
     const data = await previewUpstreamDiff?.({ locale });
     const conflictItems = data?.conflicts || [];
     if (conflictItems.length > 0) {
@@ -63,27 +103,18 @@ const ModelsActions = ({
       setShowConflict(true);
       return;
     }
-    // 无冲突，直接同步缺失
     await syncUpstream?.({ locale });
   };
 
-  // Handle delete selected models with confirmation
-  const handleDeleteSelectedModels = () => {
-    setShowDeleteModal(true);
-  };
+  const handleDeleteSelectedModels = () => setShowDeleteModal(true);
 
-  // Handle delete confirmation
   const handleConfirmDelete = () => {
     batchDeleteModels();
     setShowDeleteModal(false);
   };
 
-  // Handle clear selection
-  const handleClearSelected = () => {
-    setSelectedKeys([]);
-  };
+  const handleClearSelected = () => setSelectedKeys([]);
 
-  // Handle add selected models to prefill group
   const handleCopyNames = async () => {
     const text = selectedKeys.map((m) => m.model_name).join(',');
     if (!text) return;
@@ -96,7 +127,6 @@ const ModelsActions = ({
   };
 
   const handleAddToPrefill = () => {
-    // Prepare initial data
     const items = selectedKeys.map((m) => m.model_name);
     setPrefillInit({ id: undefined, type: 'model', items });
     setShowAddPrefill(true);
@@ -104,36 +134,32 @@ const ModelsActions = ({
 
   return (
     <>
-      <div className='flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1'>
+      <div className='order-2 flex w-full flex-wrap gap-2 md:order-1 md:w-auto'>
         <Button
-          type='primary'
+          color='primary'
+          size='sm'
           className='flex-1 md:flex-initial'
-          onClick={() => {
-            setEditingModel({
-              id: undefined,
-            });
+          onPress={() => {
+            setEditingModel({ id: undefined });
             setShowEdit(true);
           }}
-          size='small'
         >
           {t('添加模型')}
         </Button>
 
         <Button
-          type='secondary'
+          variant='flat'
+          size='sm'
           className='flex-1 md:flex-initial'
-          size='small'
-          onClick={() => setShowMissingModal(true)}
+          onPress={() => setShowMissingModal(true)}
         >
           {t('未配置模型')}
         </Button>
 
-        <Popover
-          position='bottom'
-          trigger='hover'
+        <HoverPopover
           content={
-            <div className='p-2 max-w-[360px]'>
-              <div className='text-[var(--semi-color-text-2)] text-sm'>
+            <div className='space-y-2'>
+              <div className='text-muted'>
                 {t(
                   '模型社区需要大家的共同维护，如发现数据有误或想贡献新的模型数据，请访问：',
                 )}
@@ -142,7 +168,7 @@ const ModelsActions = ({
                 href='https://github.com/basellm/llm-metadata'
                 target='_blank'
                 rel='noreferrer'
-                className='text-blue-600 underline'
+                className='text-primary underline break-all'
               >
                 https://github.com/basellm/llm-metadata
               </a>
@@ -150,24 +176,24 @@ const ModelsActions = ({
           }
         >
           <Button
-            type='secondary'
+            variant='flat'
+            size='sm'
             className='flex-1 md:flex-initial'
-            size='small'
-            loading={syncing || previewing}
-            onClick={() => {
+            isPending={syncing || previewing}
+            onPress={() => {
               setSyncLocale('zh');
               setShowSyncModal(true);
             }}
           >
             {t('同步')}
           </Button>
-        </Popover>
+        </HoverPopover>
 
         <Button
-          type='secondary'
+          variant='flat'
+          size='sm'
           className='flex-1 md:flex-initial'
-          size='small'
-          onClick={() => setShowGroupManagement(true)}
+          onPress={() => setShowGroupManagement(true)}
         >
           {t('预填组管理')}
         </Button>
@@ -188,19 +214,19 @@ const ModelsActions = ({
         onCopy={handleCopyNames}
       />
 
-      <Modal
-        title={t('批量删除模型')}
+      <ConfirmDialog
         visible={showDeleteModal}
+        title={t('批量删除模型')}
+        cancelText={t('取消')}
+        confirmText={t('删除')}
+        danger
         onCancel={() => setShowDeleteModal(false)}
-        onOk={handleConfirmDelete}
-        type='warning'
+        onConfirm={handleConfirmDelete}
       >
-        <div>
-          {t('确定要删除所选的 {{count}} 个模型吗？', {
-            count: selectedKeys.length,
-          })}
-        </div>
-      </Modal>
+        {t('确定要删除所选的 {{count}} 个模型吗？', {
+          count: selectedKeys.length,
+        })}
+      </ConfirmDialog>
 
       <SyncWizardModal
         visible={showSyncModal}
diff --git a/web/src/components/table/models/ModelsColumnDefs.jsx b/web/src/components/table/models/ModelsColumnDefs.jsx
index 4520a1b4df1..38059687d05 100644
--- a/web/src/components/table/models/ModelsColumnDefs.jsx
+++ b/web/src/components/table/models/ModelsColumnDefs.jsx
@@ -17,33 +17,112 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import {
-  Button,
-  Space,
-  Tag,
-  Typography,
-  Modal,
-  Tooltip,
-} from '@douyinfe/semi-ui';
+import React, { useState } from 'react';
+import { Button, Tooltip } from '@heroui/react';
+import { Copy } from 'lucide-react';
 import {
   timestamp2string,
   getLobeHubIcon,
   stringToColor,
+  copy,
+  showSuccess,
 } from '../../../helpers';
 import {
   renderLimitedItems,
   renderDescription,
 } from '../../common/ui/RenderUtils';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 
-const { Text } = Typography;
+function StringTag({ children, color, tone }) {
+  if (tone === 'teal') {
+    return (
+      <span className='inline-flex items-center rounded-full bg-teal-100 px-2 py-0.5 text-xs font-medium text-teal-700 dark:bg-teal-950/40 dark:text-teal-300'>
+        {children}
+      </span>
+    );
+  }
+  if (tone === 'violet') {
+    return (
+      <span className='inline-flex items-center rounded-full bg-violet-100 px-2 py-0.5 text-xs font-medium text-violet-700 dark:bg-violet-950/40 dark:text-violet-300'>
+        {children}
+      </span>
+    );
+  }
+  if (tone === 'green') {
+    return (
+      <span className='inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'>
+        {children}
+      </span>
+    );
+  }
+  if (tone === 'orange') {
+    return (
+      <span className='inline-flex items-center rounded-full bg-orange-100 px-2 py-0.5 text-xs font-medium text-orange-700 dark:bg-orange-950/40 dark:text-orange-300'>
+        {children}
+      </span>
+    );
+  }
+  if (tone === 'blue') {
+    return (
+      <span className='inline-flex items-center rounded-full bg-sky-100 px-2 py-0.5 text-xs font-medium text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'>
+        {children}
+      </span>
+    );
+  }
+  if (tone === 'purple') {
+    return (
+      <span className='inline-flex items-center rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-950/40 dark:text-purple-300'>
+        {children}
+      </span>
+    );
+  }
+  if (color === 'white') {
+    return (
+      <span className='inline-flex items-center gap-1 rounded-full border border-[color:var(--app-border)] bg-background px-2 py-0.5 text-xs font-medium text-foreground'>
+        {children}
+      </span>
+    );
+  }
+  // Use stringToColor → palette already returns Tailwind-friendly hex via the
+  // helpers/render.jsx SEMI_TAG_PALETTE map. Render as light-tinted chip.
+  return (
+    <span
+      className='inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium'
+      style={{
+        backgroundColor: `${color}1A`,
+        color,
+      }}
+    >
+      {children}
+    </span>
+  );
+}
+
+function CopyableText({ children, value }) {
+  const handleCopy = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (await copy(value || '')) showSuccess('已复制');
+  };
+  return (
+    <div className='group inline-flex items-center gap-1'>
+      <span>{children}</span>
+      <button
+        type='button'
+        onClick={handleCopy}
+        aria-label='copy'
+        className='inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted opacity-0 transition group-hover:opacity-100 hover:bg-[color:var(--app-background)] hover:text-foreground'
+      >
+        <Copy size={11} />
+      </button>
+    </div>
+  );
+}
 
-// Render timestamp
 function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;
 }
 
-// Render model icon column: prefer model.icon, then fallback to vendor icon
 const renderModelIconCol = (record, vendorMap) => {
   const iconKey = record?.icon || vendorMap[record?.vendor_id]?.icon;
   if (!iconKey) return '-';
@@ -54,49 +133,42 @@ const renderModelIconCol = (record, vendorMap) => {
   );
 };
 
-// Render vendor column with icon
 const renderVendorTag = (vendorId, vendorMap, t) => {
   if (!vendorId || !vendorMap[vendorId]) return '-';
   const v = vendorMap[vendorId];
   return (
-    <Tag
-      color='white'
-      shape='circle'
-      prefixIcon={getLobeHubIcon(v.icon || 'Layers', 14)}
-    >
+    <span className='inline-flex items-center gap-1 rounded-full border border-[color:var(--app-border)] bg-background px-2 py-0.5 text-xs font-medium text-foreground'>
+      {getLobeHubIcon(v.icon || 'Layers', 14)}
       {v.name}
-    </Tag>
+    </span>
   );
 };
 
-// Render groups (enable_groups)
 const renderGroups = (groups) => {
   if (!groups || groups.length === 0) return '-';
   return renderLimitedItems({
     items: groups,
     renderItem: (g, idx) => (
-      <Tag key={idx} size='small' shape='circle' color={stringToColor(g)}>
+      <StringTag key={idx} color={stringToColor(g)}>
         {g}
-      </Tag>
+      </StringTag>
     ),
   });
 };
 
-// Render tags
 const renderTags = (text) => {
   if (!text) return '-';
   const tagsArr = text.split(',').filter(Boolean);
   return renderLimitedItems({
     items: tagsArr,
     renderItem: (tag, idx) => (
-      <Tag key={idx} size='small' shape='circle' color={stringToColor(tag)}>
+      <StringTag key={idx} color={stringToColor(tag)}>
         {tag}
-      </Tag>
+      </StringTag>
     ),
   });
 };
 
-// Render endpoints (supports object map or legacy array)
 const renderEndpoints = (value) => {
   try {
     const parsed = typeof value === 'string' ? JSON.parse(value) : value;
@@ -106,9 +178,9 @@ const renderEndpoints = (value) => {
       return renderLimitedItems({
         items: keys,
         renderItem: (key, idx) => (
-          <Tag key={idx} size='small' shape='circle' color={stringToColor(key)}>
+          <StringTag key={idx} color={stringToColor(key)}>
             {key}
-          </Tag>
+          </StringTag>
         ),
         maxDisplay: 3,
       });
@@ -118,9 +190,9 @@ const renderEndpoints = (value) => {
       return renderLimitedItems({
         items: parsed,
         renderItem: (ep, idx) => (
-          <Tag key={idx} color='white' size='small' shape='circle'>
+          <StringTag key={idx} color='white'>
             {ep}
-          </Tag>
+          </StringTag>
         ),
         maxDisplay: 3,
       });
@@ -131,7 +203,6 @@ const renderEndpoints = (value) => {
   }
 };
 
-// Render quota types (array) using common limited items renderer
 const renderQuotaTypes = (arr, t) => {
   if (!Array.isArray(arr) || arr.length === 0) return '-';
   return renderLimitedItems({
@@ -139,74 +210,75 @@ const renderQuotaTypes = (arr, t) => {
     renderItem: (qt, idx) => {
       if (qt === 1) {
         return (
-          <Tag key={`${qt}-${idx}`} color='teal' size='small' shape='circle'>
+          <StringTag key={`${qt}-${idx}`} tone='teal'>
             {t('按次计费')}
-          </Tag>
+          </StringTag>
         );
       }
       if (qt === 0) {
         return (
-          <Tag key={`${qt}-${idx}`} color='violet' size='small' shape='circle'>
+          <StringTag key={`${qt}-${idx}`} tone='violet'>
             {t('按量计费')}
-          </Tag>
+          </StringTag>
         );
       }
       return (
-        <Tag key={`${qt}-${idx}`} color='white' size='small' shape='circle'>
+        <StringTag key={`${qt}-${idx}`} color='white'>
           {qt}
-        </Tag>
+        </StringTag>
       );
     },
     maxDisplay: 3,
   });
 };
 
-// Render bound channels
 const renderBoundChannels = (channels) => {
   if (!channels || channels.length === 0) return '-';
   return renderLimitedItems({
     items: channels,
     renderItem: (c, idx) => (
-      <Tag key={idx} color='white' size='small' shape='circle'>
+      <StringTag key={idx} color='white'>
         {c.name}({c.type})
-      </Tag>
+      </StringTag>
     ),
   });
 };
 
-// Render operations column
-const renderOperations = (
-  text,
+function OperationsCell({
   record,
   setEditingModel,
   setShowEdit,
   manageModel,
   refresh,
   t,
-) => {
+}) {
+  const [showDelete, setShowDelete] = useState(false);
+
   return (
-    <Space wrap>
+    <div className='flex flex-wrap items-center gap-1.5'>
       {record.status === 1 ? (
         <Button
-          type='danger'
-          size='small'
-          onClick={() => manageModel(record.id, 'disable', record)}
+          color='danger'
+          variant='flat'
+          size='sm'
+          onPress={() => manageModel(record.id, 'disable', record)}
         >
           {t('禁用')}
         </Button>
       ) : (
         <Button
-          size='small'
-          onClick={() => manageModel(record.id, 'enable', record)}
+          variant='flat'
+          size='sm'
+          onPress={() => manageModel(record.id, 'enable', record)}
         >
           {t('启用')}
         </Button>
       )}
 
       <Button
-        type='tertiary'
-        size='small'
-        onClick={() => {
+        variant='light'
+        size='sm'
+        onPress={() => {
           setEditingModel(record);
           setShowEdit(true);
         }}
@@ -215,34 +287,58 @@ const renderOperations = (
       </Button>
 
       <Button
-        type='danger'
-        size='small'
-        onClick={() => {
-          Modal.confirm({
-            title: t('确定是否要删除此模型？'),
-            content: t('此修改将不可逆'),
-            onOk: () => {
-              (async () => {
-                await manageModel(record.id, 'delete', record);
-                await refresh();
-              })();
-            },
-          });
-        }}
+        color='danger'
+        variant='flat'
+        size='sm'
+        onPress={() => setShowDelete(true)}
       >
         {t('删除')}
       </Button>
-    </Space>
+
+      <ConfirmDialog
+        visible={showDelete}
+        title={t('确定是否要删除此模型？')}
+        cancelText={t('取消')}
+        confirmText={t('删除')}
+        danger
+        onCancel={() => setShowDelete(false)}
+        onConfirm={async () => {
+          setShowDelete(false);
+          await manageModel(record.id, 'delete', record);
+          await refresh?.();
+        }}
+      >
+        {t('此修改将不可逆')}
+      </ConfirmDialog>
+    </div>
   );
-};
+}
+
+const renderOperations = (
+  text,
+  record,
+  setEditingModel,
+  setShowEdit,
+  manageModel,
+  refresh,
+  t,
+) => (
+  <OperationsCell
+    record={record}
+    setEditingModel={setEditingModel}
+    setShowEdit={setShowEdit}
+    manageModel={manageModel}
+    refresh={refresh}
+    t={t}
+  />
+);
 
-// 名称匹配类型渲染（带匹配数量 Tooltip）
 const renderNameRule = (rule, record, t) => {
   const map = {
-    0: { color: 'green', label: t('精确') },
-    1: { color: 'blue', label: t('前缀') },
-    2: { color: 'orange', label: t('包含') },
-    3: { color: 'purple', label: t('后缀') },
+    0: { tone: 'green', label: t('精确') },
+    1: { tone: 'blue', label: t('前缀') },
+    2: { tone: 'orange', label: t('包含') },
+    3: { tone: 'purple', label: t('后缀') },
   };
   const cfg = map[rule];
   if (!cfg) return '-';
@@ -252,11 +348,7 @@ const renderNameRule = (rule, record, t) => {
     label = `${cfg.label} ${record.matched_count}${t('个模型')}`;
   }
 
-  const tagElement = (
-    <Tag color={cfg.color} size='small' shape='circle'>
-      {label}
-    </Tag>
-  );
+  const tagElement = <StringTag tone={cfg.tone}>{label}</StringTag>;
 
   if (
     rule === 0 ||
@@ -267,8 +359,8 @@ const renderNameRule = (rule, record, t) => {
   }
 
   return (
-    <Tooltip content={record.matched_models.join(', ')} showArrow>
-      {tagElement}
+    <Tooltip content={record.matched_models.join(', ')} placement='top'>
+      <span>{tagElement}</span>
     </Tooltip>
   );
 };
@@ -292,11 +384,7 @@ export const getModelsColumns = ({
     {
       title: t('模型名称'),
       dataIndex: 'model_name',
-      render: (text) => (
-        <Text copyable onClick={(e) => e.stopPropagation()}>
-          {text}
-        </Text>
-      ),
+      render: (text) => <CopyableText value={text}>{text}</CopyableText>,
     },
     {
       title: t('匹配类型'),
@@ -307,9 +395,9 @@ export const getModelsColumns = ({
       title: t('参与官方同步'),
       dataIndex: 'sync_official',
       render: (val) => (
-        <Tag size='small' shape='circle' color={val === 1 ? 'green' : 'orange'}>
+        <StringTag tone={val === 1 ? 'green' : 'orange'}>
           {val === 1 ? t('是') : t('否')}
-        </Tag>
+        </StringTag>
       ),
     },
     {
@@ -320,7 +408,7 @@ export const getModelsColumns = ({
     {
       title: t('供应商'),
       dataIndex: 'vendor_id',
-      render: (vendorId, record) => renderVendorTag(vendorId, vendorMap, t),
+      render: (vendorId) => renderVendorTag(vendorId, vendorMap, t),
     },
     {
       title: t('标签'),
@@ -350,22 +438,18 @@ export const getModelsColumns = ({
     {
       title: t('创建时间'),
       dataIndex: 'created_time',
-      render: (text, record, index) => {
-        return <div>{renderTimestamp(text)}</div>;
-      },
+      render: (text) => <div>{renderTimestamp(text)}</div>,
     },
     {
       title: t('更新时间'),
       dataIndex: 'updated_time',
-      render: (text, record, index) => {
-        return <div>{renderTimestamp(text)}</div>;
-      },
+      render: (text) => <div>{renderTimestamp(text)}</div>,
     },
     {
       title: '',
       dataIndex: 'operate',
       fixed: 'right',
-      render: (text, record, index) =>
+      render: (text, record) =>
         renderOperations(
           text,
           record,
diff --git a/web/src/components/table/models/ModelsFilters.jsx b/web/src/components/table/models/ModelsFilters.jsx
index 8a88676297f..35ad3f6e21d 100644
--- a/web/src/components/table/models/ModelsFilters.jsx
+++ b/web/src/components/table/models/ModelsFilters.jsx
@@ -17,9 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef } from 'react';
-import { Form, Button } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+import React from 'react';
+import { Button } from '@heroui/react';
+import {
+  FilterInput,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const ModelsFilters = ({
   formInitValues,
@@ -29,77 +32,65 @@ const ModelsFilters = ({
   searching,
   t,
 }) => {
-  // Handle form reset and immediate search
-  const formApiRef = useRef(null);
+  const { values, setFieldValue, handleSubmit, api } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: searchModels,
+  });
 
   const handleReset = () => {
-    if (!formApiRef.current) return;
-    formApiRef.current.reset();
+    api.reset();
     setTimeout(() => {
       searchModels();
     }, 100);
   };
 
   return (
-    <Form
-      initValues={formInitValues}
-      getFormApi={(api) => {
-        setFormApi(api);
-        formApiRef.current = api;
-      }}
-      onSubmit={searchModels}
-      allowEmpty={true}
+    <form
+      onSubmit={handleSubmit}
       autoComplete='off'
-      layout='horizontal'
-      trigger='change'
-      stopValidateWithError={false}
       className='w-full md:w-auto order-1 md:order-2'
     >
       <div className='flex flex-col md:flex-row items-center gap-2 w-full md:w-auto'>
         <div className='relative w-full md:w-56'>
-          <Form.Input
-            field='searchKeyword'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.searchKeyword}
+            onChange={(value) => setFieldValue('searchKeyword', value)}
             placeholder={t('搜索模型名称')}
-            showClear
-            pure
-            size='small'
           />
         </div>
 
         <div className='relative w-full md:w-56'>
-          <Form.Input
-            field='searchVendor'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.searchVendor}
+            onChange={(value) => setFieldValue('searchVendor', value)}
             placeholder={t('搜索供应商')}
-            showClear
-            pure
-            size='small'
           />
         </div>
 
         <div className='flex gap-2 w-full md:w-auto'>
           <Button
-            type='tertiary'
-            htmlType='submit'
-            loading={loading || searching}
+            type='submit'
+            variant='outline'
+            isPending={loading || searching}
             className='flex-1 md:flex-initial md:w-auto'
-            size='small'
+            size='sm'
           >
             {t('查询')}
           </Button>
 
           <Button
-            type='tertiary'
-            onClick={handleReset}
+            type='button'
+            variant='outline'
+            onPress={handleReset}
             className='flex-1 md:flex-initial md:w-auto'
-            size='small'
+            size='sm'
           >
             {t('重置')}
           </Button>
         </div>
       </div>
-    </Form>
+    </form>
   );
 };
 
diff --git a/web/src/components/table/models/ModelsTable.jsx b/web/src/components/table/models/ModelsTable.jsx
index 643bff66d19..a9c3e2462aa 100644
--- a/web/src/components/table/models/ModelsTable.jsx
+++ b/web/src/components/table/models/ModelsTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getModelsColumns } from './ModelsColumnDefs';
 
 const ModelsTable = (modelsData) => {
@@ -90,14 +86,7 @@ const ModelsTable = (modelsData) => {
       rowSelection={rowSelection}
       onRow={handleRow}
       empty={
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={t('搜索无结果')}
-          style={{ padding: 30 }}
-        />
+        <TableEmptyState description={t('搜索无结果')} />
       }
       className='rounded-xl overflow-hidden'
       size='middle'
diff --git a/web/src/components/table/models/ModelsTabs.jsx b/web/src/components/table/models/ModelsTabs.jsx
index 820d7076f51..b65888dea1f 100644
--- a/web/src/components/table/models/ModelsTabs.jsx
+++ b/web/src/components/table/models/ModelsTabs.jsx
@@ -17,11 +17,92 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import { Tabs, TabPane, Tag, Button, Dropdown, Modal } from '@douyinfe/semi-ui';
-import { IconEdit, IconDelete } from '@douyinfe/semi-icons';
-import { getLobeHubIcon, showError, showSuccess } from '../../../helpers';
-import { API } from '../../../helpers';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button } from '@heroui/react';
+import { Pencil, Trash2, MoreHorizontal } from 'lucide-react';
+import { getLobeHubIcon, showError, showSuccess, API } from '../../../helpers';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
+
+function CountChip({ active, count }) {
+  return (
+    <span
+      className={`inline-flex min-w-[1.5rem] shrink-0 items-center justify-center rounded-full px-1.5 text-[11px] font-semibold ${
+        active
+          ? 'bg-red-500 text-white'
+          : 'bg-surface-secondary text-muted'
+      }`}
+    >
+      {count}
+    </span>
+  );
+}
+
+function VendorActions({ vendor, onEdit, onDelete, t }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  return (
+    <span ref={ref} className='relative inline-flex items-center'>
+      <button
+        type='button'
+        aria-label={t('操作')}
+        title={t('操作')}
+        className='inline-flex h-6 w-6 items-center justify-center rounded-md text-muted transition hover:bg-[color:var(--app-background)] hover:text-foreground'
+        onClick={(event) => {
+          event.stopPropagation();
+          setOpen((prev) => !prev);
+        }}
+      >
+        <MoreHorizontal size={14} />
+      </button>
+      {open ? (
+        <div
+          role='menu'
+          className='absolute right-0 top-full z-30 mt-1 min-w-[8rem] overflow-hidden rounded-lg border border-[color:var(--app-border)] bg-background shadow-lg'
+          onClick={(event) => event.stopPropagation()}
+        >
+          <button
+            type='button'
+            role='menuitem'
+            className='flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-foreground transition hover:bg-[color:var(--app-background)]'
+            onClick={(event) => {
+              event.stopPropagation();
+              setOpen(false);
+              onEdit(vendor);
+            }}
+          >
+            <Pencil size={14} />
+            {t('编辑')}
+          </button>
+          <button
+            type='button'
+            role='menuitem'
+            className='flex w-full items-center gap-2 px-3 py-2 text-left text-sm text-red-600 transition hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40'
+            onClick={(event) => {
+              event.stopPropagation();
+              setOpen(false);
+              onDelete(vendor);
+            }}
+          >
+            <Trash2 size={14} />
+            {t('删除')}
+          </button>
+        </div>
+      ) : null}
+    </span>
+  );
+}
 
 const ModelsTabs = ({
   activeVendorKey,
@@ -38,140 +119,121 @@ const ModelsTabs = ({
   loadVendors,
   t,
 }) => {
+  const [pendingDelete, setPendingDelete] = useState(null);
+
   const handleTabChange = (key) => {
     setActiveVendorKey(key);
     setActivePage(1);
     loadModels(1, pageSize, key);
   };
 
-  const handleEditVendor = (vendor, e) => {
-    e.stopPropagation(); // 阻止事件冒泡，避免触发tab切换
+  const handleEditVendor = (vendor) => {
     setEditingVendor(vendor);
     setShowEditVendor(true);
   };
 
-  const handleDeleteVendor = async (vendor, e) => {
-    e.stopPropagation(); // 阻止事件冒泡，避免触发tab切换
+  const handleDeleteVendor = async (vendor) => {
     try {
       const res = await API.delete(`/api/vendors/${vendor.id}`);
-      if (res.data.success) {
+      if (res.data?.success) {
         showSuccess(t('供应商删除成功'));
-        // 如果删除的是当前选中的供应商，切换到"全部"
         if (activeVendorKey === String(vendor.id)) {
           setActiveVendorKey('all');
           loadModels(1, pageSize, 'all');
         } else {
           loadModels(activePage, pageSize, activeVendorKey);
         }
-        loadVendors(); // 重新加载供应商列表
+        loadVendors?.();
       } else {
-        showError(res.data.message || t('删除失败'));
+        showError(res.data?.message || t('删除失败'));
       }
     } catch (error) {
       showError(error.response?.data?.message || t('删除失败'));
     }
   };
 
+  const tabs = [
+    {
+      key: 'all',
+      label: t('全部'),
+      icon: null,
+      count: vendorCounts['all'] || 0,
+      vendor: null,
+    },
+    ...vendors.map((vendor) => ({
+      key: String(vendor.id),
+      label: vendor.name,
+      icon: getLobeHubIcon(vendor.icon || 'Layers', 14),
+      count: vendorCounts[vendor.id] || 0,
+      vendor,
+    })),
+  ];
+
   return (
-    <Tabs
-      activeKey={activeVendorKey}
-      type='card'
-      collapsible
-      onChange={handleTabChange}
-      className='mb-2'
-      tabBarExtraContent={
+    <>
+      <div className='mb-3 flex flex-wrap items-center gap-2'>
+        <div role='tablist' className='flex flex-1 flex-wrap items-center gap-2'>
+          {tabs.map((tab) => {
+            const active = activeVendorKey === tab.key;
+            return (
+              <div
+                key={tab.key}
+                role='tab'
+                aria-selected={active}
+                className={`group inline-flex items-center gap-2 rounded-full border px-3 py-1.5 text-sm transition ${
+                  active
+                    ? 'border-transparent bg-foreground text-background shadow-sm'
+                    : 'border-[color:var(--app-border)] bg-[color:var(--app-background)] text-foreground hover:bg-surface-secondary'
+                }`}
+              >
+                <button
+                  type='button'
+                  className='inline-flex items-center gap-2 outline-none'
+                  onClick={() => handleTabChange(tab.key)}
+                >
+                  {tab.icon}
+                  <span className='whitespace-nowrap'>{tab.label}</span>
+                  <CountChip active={active} count={tab.count} />
+                </button>
+                {tab.vendor ? (
+                  <VendorActions
+                    vendor={tab.vendor}
+                    onEdit={handleEditVendor}
+                    onDelete={(vendor) => setPendingDelete(vendor)}
+                    t={t}
+                  />
+                ) : null}
+              </div>
+            );
+          })}
+        </div>
         <Button
-          type='primary'
-          size='small'
-          onClick={() => setShowAddVendor(true)}
+          color='primary'
+          size='sm'
+          onPress={() => setShowAddVendor(true)}
         >
           {t('新增供应商')}
         </Button>
-      }
-    >
-      <TabPane
-        itemKey='all'
-        tab={
-          <span className='flex items-center gap-2'>
-            {t('全部')}
-            <Tag
-              color={activeVendorKey === 'all' ? 'red' : 'grey'}
-              shape='circle'
-            >
-              {vendorCounts['all'] || 0}
-            </Tag>
-          </span>
-        }
-      />
-
-      {vendors.map((vendor) => {
-        const key = String(vendor.id);
-        const count = vendorCounts[vendor.id] || 0;
-        return (
-          <TabPane
-            key={key}
-            itemKey={key}
-            tab={
-              <span className='flex items-center gap-2'>
-                {getLobeHubIcon(vendor.icon || 'Layers', 14)}
-                {vendor.name}
-                <Tag
-                  color={activeVendorKey === key ? 'red' : 'grey'}
-                  shape='circle'
-                >
-                  {count}
-                </Tag>
-                <Dropdown
-                  trigger='click'
-                  position='bottomRight'
-                  render={
-                    <Dropdown.Menu>
-                      <Dropdown.Item
-                        icon={<IconEdit />}
-                        onClick={(e) => handleEditVendor(vendor, e)}
-                      >
-                        {t('编辑')}
-                      </Dropdown.Item>
-                      <Dropdown.Item
-                        type='danger'
-                        icon={<IconDelete />}
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          Modal.confirm({
-                            title: t('确认删除'),
-                            content: t(
-                              '确定要删除供应商 "{{name}}" 吗？此操作不可撤销。',
-                              { name: vendor.name },
-                            ),
-                            onOk: () => handleDeleteVendor(vendor, e),
-                            okText: t('删除'),
-                            cancelText: t('取消'),
-                            type: 'warning',
-                            okType: 'danger',
-                          });
-                        }}
-                      >
-                        {t('删除')}
-                      </Dropdown.Item>
-                    </Dropdown.Menu>
-                  }
-                  onClickOutSide={(e) => e.stopPropagation()}
-                >
-                  <Button
-                    size='small'
-                    type='tertiary'
-                    theme='outline'
-                    onClick={(e) => e.stopPropagation()}
-                  >
-                    {t('操作')}
-                  </Button>
-                </Dropdown>
-              </span>
-            }
-          />
-        );
-      })}
-    </Tabs>
+      </div>
+
+      <ConfirmDialog
+        visible={!!pendingDelete}
+        title={t('确认删除')}
+        cancelText={t('取消')}
+        confirmText={t('删除')}
+        danger
+        onCancel={() => setPendingDelete(null)}
+        onConfirm={() => {
+          const target = pendingDelete;
+          setPendingDelete(null);
+          if (target) handleDeleteVendor(target);
+        }}
+      >
+        {t('确定要删除供应商 "{{name}}" 吗？此操作不可撤销。', {
+          name: pendingDelete?.name || '',
+        })}
+      </ConfirmDialog>
+    </>
   );
 };
 
diff --git a/web/src/components/table/models/components/SelectionNotification.jsx b/web/src/components/table/models/components/SelectionNotification.jsx
index f2fc8d2efaf..acb302254f3 100644
--- a/web/src/components/table/models/components/SelectionNotification.jsx
+++ b/web/src/components/table/models/components/SelectionNotification.jsx
@@ -17,16 +17,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect } from 'react';
-import { Notification, Button, Space, Typography } from '@douyinfe/semi-ui';
-
-// 固定通知 ID，保持同一个实例即可避免闪烁
-const NOTICE_ID = 'models-batch-actions';
+import React from 'react';
+import { Button } from '@heroui/react';
 
 /**
- * SelectionNotification 选择通知组件
- * 1. 当 selectedKeys.length > 0 时，使用固定 id 创建/更新通知
- * 2. 当 selectedKeys 清空时关闭通知
+ * SelectionNotification — bottom-anchored selection toolbar.
+ * Renders only when selection is non-empty; replaces the previous
+ * Semi Notification API which was missing in the v3 migration.
  */
 const SelectionNotification = ({
   selectedKeys = [],
@@ -36,65 +33,41 @@ const SelectionNotification = ({
   onClear,
   onCopy,
 }) => {
-  // 根据选中数量决定显示/隐藏或更新通知
-  useEffect(() => {
-    const selectedCount = selectedKeys.length;
-
-    if (selectedCount > 0) {
-      const titleNode = (
-        <Space wrap>
-          <span>{t('批量操作')}</span>
-          <Typography.Text type='tertiary' size='small'>
-            {t('已选择 {{count}} 个模型', { count: selectedCount })}
-          </Typography.Text>
-        </Space>
-      );
+  const count = selectedKeys.length;
+  if (count === 0) return null;
 
-      const content = (
-        <Space wrap>
-          <Button size='small' type='tertiary' theme='solid' onClick={onClear}>
+  return (
+    <div
+      role='region'
+      aria-label={t('批量操作')}
+      className='pointer-events-none fixed inset-x-0 bottom-4 z-40 flex justify-center px-4'
+    >
+      <div className='pointer-events-auto flex w-full max-w-2xl flex-wrap items-center gap-3 rounded-2xl border border-[color:var(--app-border)] bg-background/95 px-4 py-3 shadow-lg backdrop-blur'>
+        <div className='flex flex-1 flex-col'>
+          <div className='text-sm font-semibold text-foreground'>
+            {t('批量操作')}
+          </div>
+          <div className='text-xs text-muted'>
+            {t('已选择 {{count}} 个模型', { count })}
+          </div>
+        </div>
+        <div className='flex flex-wrap items-center gap-2'>
+          <Button size='sm' variant='flat' onPress={onClear}>
             {t('取消全选')}
           </Button>
-          <Button
-            size='small'
-            type='primary'
-            theme='solid'
-            onClick={onAddPrefill}
-          >
+          <Button size='sm' color='primary' onPress={onAddPrefill}>
             {t('加入预填组')}
           </Button>
-          <Button size='small' type='secondary' theme='solid' onClick={onCopy}>
+          <Button size='sm' variant='bordered' onPress={onCopy}>
             {t('复制名称')}
           </Button>
-          <Button size='small' type='danger' theme='solid' onClick={onDelete}>
+          <Button size='sm' color='danger' onPress={onDelete}>
             {t('删除所选')}
           </Button>
-        </Space>
-      );
-
-      // 使用相同 id 更新通知（若已存在则就地更新，不存在则创建）
-      Notification.info({
-        id: NOTICE_ID,
-        title: titleNode,
-        content,
-        duration: 0, // 不自动关闭
-        position: 'bottom',
-        showClose: false,
-      });
-    } else {
-      // 取消全部勾选时关闭通知
-      Notification.close(NOTICE_ID);
-    }
-  }, [selectedKeys, t, onDelete, onAddPrefill, onClear, onCopy]);
-
-  // 卸载时确保关闭通知
-  useEffect(() => {
-    return () => {
-      Notification.close(NOTICE_ID);
-    };
-  }, []);
-
-  return null; // 该组件不渲染可见内容
+        </div>
+      </div>
+    </div>
+  );
 };
 
 export default SelectionNotification;
diff --git a/web/src/components/table/models/index.jsx b/web/src/components/table/models/index.jsx
index 65ec7131a0b..e720a176d6b 100644
--- a/web/src/components/table/models/index.jsx
+++ b/web/src/components/table/models/index.jsx
@@ -18,9 +18,10 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState } from 'react';
-import { Banner, Button, Modal } from '@douyinfe/semi-ui';
-import { IconAlertTriangle, IconClose } from '@douyinfe/semi-icons';
+import { Button } from '@heroui/react';
+import { TriangleAlert, X } from 'lucide-react';
 import CardPro from '../../common/ui/CardPro';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 import ModelsTable from './ModelsTable';
 import ModelsActions from './ModelsActions';
 import ModelsFilters from './ModelsFilters';
@@ -86,25 +87,13 @@ const ModelsPage = () => {
         return true;
       }
     });
+  const [showCloseConfirm, setShowCloseConfirm] = useState(false);
 
-  const confirmCloseMarketplaceDisplayNotice = () => {
-    Modal.confirm({
-      title: t('确认关闭提示'),
-      content: t(
-        '关闭后将不再显示此提示（仅对当前浏览器生效）。确定要关闭吗？',
-      ),
-      okText: t('关闭提示'),
-      cancelText: t('取消'),
-      okButtonProps: {
-        type: 'danger',
-      },
-      onOk: () => {
-        try {
-          localStorage.setItem(MARKETPLACE_DISPLAY_NOTICE_STORAGE_KEY, '1');
-        } catch (_) {}
-        setShowMarketplaceDisplayNotice(false);
-      },
-    });
+  const dismissMarketplaceDisplayNotice = () => {
+    try {
+      localStorage.setItem(MARKETPLACE_DISPLAY_NOTICE_STORAGE_KEY, '1');
+    } catch (_) {}
+    setShowMarketplaceDisplayNotice(false);
   };
 
   return (
@@ -131,32 +120,38 @@ const ModelsPage = () => {
       />
 
       {showMarketplaceDisplayNotice ? (
-        <div style={{ position: 'relative', marginBottom: 12 }}>
-          <Banner
-            type='warning'
-            closeIcon={null}
-            icon={
-              <IconAlertTriangle
-                size='large'
-                style={{ color: 'var(--semi-color-warning)' }}
-              />
-            }
-            description={t(
+        <div className='relative mb-3 flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 pr-12 text-sm text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100'>
+          <TriangleAlert size={18} className='mt-0.5 shrink-0' />
+          <div className='min-w-0 flex-1'>
+            {t(
               '提示：此处配置仅用于控制「模型广场」对用户的展示效果，不会影响模型的实际调用与路由。若需配置真实调用行为，请前往「渠道管理」进行设置。',
             )}
-            style={{ marginBottom: 0 }}
-          />
-          <Button
-            theme='borderless'
-            size='small'
-            type='tertiary'
-            icon={<IconClose aria-hidden={true} />}
-            onClick={confirmCloseMarketplaceDisplayNotice}
-            style={{ position: 'absolute', top: 8, right: 8 }}
+          </div>
+          <button
+            type='button'
+            onClick={() => setShowCloseConfirm(true)}
             aria-label={t('关闭')}
-          />
+            className='absolute right-2 top-2 inline-flex h-6 w-6 items-center justify-center rounded-md text-amber-700/70 transition hover:bg-amber-100 hover:text-amber-700 dark:text-amber-100/70 dark:hover:bg-amber-900/50 dark:hover:text-amber-100'
+          >
+            <X size={14} />
+          </button>
         </div>
       ) : null}
+
+      <ConfirmDialog
+        visible={showCloseConfirm}
+        title={t('确认关闭提示')}
+        cancelText={t('取消')}
+        confirmText={t('关闭提示')}
+        danger
+        onCancel={() => setShowCloseConfirm(false)}
+        onConfirm={() => {
+          setShowCloseConfirm(false);
+          dismissMarketplaceDisplayNotice();
+        }}
+      >
+        {t('关闭后将不再显示此提示（仅对当前浏览器生效）。确定要关闭吗？')}
+      </ConfirmDialog>
       <CardPro
         type='type3'
         tabsArea={<ModelsTabs {...modelsData} />}
diff --git a/web/src/components/table/models/modals/EditModelModal.jsx b/web/src/components/table/models/modals/EditModelModal.jsx
index 12ca48ec1a6..1ba434b5a04 100644
--- a/web/src/components/table/models/modals/EditModelModal.jsx
+++ b/web/src/components/table/models/modals/EditModelModal.jsx
@@ -6,40 +6,82 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import JSONEditor from '../../../common/ui/JSONEditor';
+import { Button, Card, Spinner, Switch } from '@heroui/react';
 import {
-  Banner,
-  SideSheet,
-  Form,
-  Button,
-  Space,
-  Spin,
-  Typography,
-  Card,
-  Tag,
-  Avatar,
-  Col,
-  Row,
-} from '@douyinfe/semi-ui';
-import { Save, X, FileText } from 'lucide-react';
-import { IconAlertTriangle, IconLink } from '@douyinfe/semi-icons';
+  AlertTriangle,
+  ExternalLink,
+  FileText,
+  Save,
+  X,
+} from 'lucide-react';
 import { API, showError, showSuccess } from '../../../../helpers';
 import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 
-const { Text, Title } = Typography;
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+};
+
+function StatusChip({ tone, children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.blue
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function IconTile({ tone, children }) {
+  const cls =
+    {
+      blue: 'bg-primary/10 text-primary',
+      green: 'bg-success/10 text-success',
+    }[tone] || 'bg-success/10 text-success';
+  return (
+    <div
+      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${cls}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function FieldError({ children }) {
+  if (!children) return null;
+  return <div className='mt-1 text-xs text-danger'>{children}</div>;
+}
 
 // Example endpoint template for quick fill
 const ENDPOINT_TEMPLATE = {
@@ -52,32 +94,129 @@ const ENDPOINT_TEMPLATE = {
   'image-generation': { path: '/v1/images/generations', method: 'POST' },
 };
 
-const nameRuleOptions = [
+const NAME_RULE_OPTIONS = [
   { label: '精确名称匹配', value: 0 },
   { label: '前缀名称匹配', value: 1 },
   { label: '包含名称匹配', value: 2 },
   { label: '后缀名称匹配', value: 3 },
 ];
 
+const buildInitValues = (editingModel) => ({
+  model_name: editingModel?.model_name || '',
+  description: '',
+  icon: '',
+  tags: [],
+  vendor_id: undefined,
+  vendor: '',
+  vendor_icon: '',
+  endpoints: '',
+  // 通过未配置模型过来的固定为精确匹配
+  name_rule: editingModel?.model_name ? 0 : undefined,
+  status: true,
+  sync_official: true,
+});
+
+// Replaces Semi `<Form.TagInput>` with a controlled tag input that
+// commits on Enter / `,` / blur.
+function TagInput({ value = [], onChange, placeholder }) {
+  const [draft, setDraft] = useState('');
+  const tags = Array.isArray(value) ? value : [];
+
+  const commit = (raw) => {
+    const next = raw
+      .split(',')
+      .map((s) => s.trim())
+      .filter(Boolean);
+    if (next.length === 0) return;
+    const merged = [...new Set([...tags, ...next])];
+    onChange?.(merged);
+    setDraft('');
+  };
+
+  const removeAt = (index) => {
+    const next = tags.filter((_, i) => i !== index);
+    onChange?.(next);
+  };
+
+  return (
+    <div className='flex min-h-[40px] flex-wrap items-center gap-1.5 rounded-xl border border-border bg-background px-2 py-1.5 text-sm focus-within:border-primary'>
+      {tags.map((tag, idx) => (
+        <span
+          key={`${tag}-${idx}`}
+          className='inline-flex items-center gap-1 rounded-full bg-surface-secondary px-2 py-0.5 text-xs'
+        >
+          <span>{tag}</span>
+          <button
+            type='button'
+            onClick={() => removeAt(idx)}
+            aria-label='remove'
+            className='text-muted hover:text-foreground'
+          >
+            <X size={12} />
+          </button>
+        </span>
+      ))}
+      <input
+        type='text'
+        value={draft}
+        onChange={(event) => {
+          const v = event.target.value;
+          if (v.endsWith(',')) {
+            commit(v.slice(0, -1));
+          } else {
+            setDraft(v);
+          }
+        }}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            commit(draft);
+          } else if (
+            event.key === 'Backspace' &&
+            draft === '' &&
+            tags.length > 0
+          ) {
+            removeAt(tags.length - 1);
+          }
+        }}
+        onBlur={() => {
+          if (draft.trim()) commit(draft);
+        }}
+        placeholder={tags.length === 0 ? placeholder : ''}
+        className='flex-1 min-w-[120px] bg-transparent text-foreground outline-none placeholder:text-muted'
+      />
+    </div>
+  );
+}
+
 const EditModelModal = (props) => {
   const { t } = useTranslation();
-  const [loading, setLoading] = useState(false);
   const isMobile = useIsMobile();
-  const formApiRef = useRef(null);
   const isEdit = props.editingModel && props.editingModel.id !== undefined;
   const placement = useMemo(() => (isEdit ? 'right' : 'left'), [isEdit]);
+  const [loading, setLoading] = useState(false);
+  const [values, setValues] = useState(buildInitValues(props.editingModel));
+  const [errors, setErrors] = useState({});
 
   // 供应商列表
   const [vendors, setVendors] = useState([]);
-
   // 预填组（标签、端点）
   const [tagGroups, setTagGroups] = useState([]);
   const [endpointGroups, setEndpointGroups] = useState([]);
 
-  // 获取供应商列表
+  const setField = (key) => (value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
+
+  const reset = () => {
+    setValues(buildInitValues(props.editingModel));
+    setErrors({});
+  };
+
   const fetchVendors = async () => {
     try {
-      const res = await API.get('/api/vendors/?page_size=1000'); // 获取全部供应商
+      const res = await API.get('/api/vendors/?page_size=1000');
       if (res.data.success) {
         const items = res.data.data.items || res.data.data || [];
         setVendors(Array.isArray(items) ? items : []);
@@ -87,7 +226,6 @@ const EditModelModal = (props) => {
     }
   };
 
-  // 获取预填组（标签、端点）
   const fetchPrefillGroups = async () => {
     try {
       const [tagRes, endpointRes] = await Promise.all([
@@ -112,48 +250,29 @@ const EditModelModal = (props) => {
     }
   }, [props.visiable]);
 
-  const getInitValues = () => ({
-    model_name: props.editingModel?.model_name || '',
-    description: '',
-    icon: '',
-    tags: [],
-    vendor_id: undefined,
-    vendor: '',
-    vendor_icon: '',
-    endpoints: '',
-    name_rule: props.editingModel?.model_name ? 0 : undefined, // 通过未配置模型过来的固定为精确匹配
-    status: true,
-    sync_official: true,
-  });
-
-  const handleCancel = () => {
-    props.handleClose();
-  };
-
   const loadModel = async () => {
     if (!isEdit || !props.editingModel.id) return;
 
     setLoading(true);
     try {
       const res = await API.get(`/api/models/${props.editingModel.id}`);
-      const { success, message, data } = res.data;
-      if (success) {
-        // 处理tags
-        if (data.tags) {
-          data.tags = data.tags.split(',').filter(Boolean);
-        } else {
-          data.tags = [];
-        }
-        // endpoints 保持原始 JSON 字符串，若为空设为空串
-        if (!data.endpoints) {
-          data.endpoints = '';
-        }
-        // 处理status/sync_official，将数字转为布尔值
-        data.status = data.status === 1;
-        data.sync_official = (data.sync_official ?? 1) === 1;
-        if (formApiRef.current) {
-          formApiRef.current.setValues({ ...getInitValues(), ...data });
-        }
+      const { success, message, data } = res.data || {};
+      if (success && data) {
+        const tags =
+          typeof data.tags === 'string' && data.tags
+            ? data.tags.split(',').filter(Boolean)
+            : Array.isArray(data.tags)
+              ? data.tags
+              : [];
+        setValues({
+          ...buildInitValues(props.editingModel),
+          ...data,
+          tags,
+          endpoints: data.endpoints || '',
+          status: data.status === 1,
+          sync_official: (data.sync_official ?? 1) === 1,
+        });
+        setErrors({});
       } else {
         showError(message);
       }
@@ -163,33 +282,41 @@ const EditModelModal = (props) => {
     setLoading(false);
   };
 
-  useEffect(() => {
-    if (formApiRef.current) {
-      if (!isEdit) {
-        formApiRef.current.setValues({
-          ...getInitValues(),
-          model_name: props.editingModel?.model_name || '',
-        });
-      }
-    }
-  }, [props.editingModel?.id, props.editingModel?.model_name]);
-
   useEffect(() => {
     if (props.visiable) {
       if (isEdit) {
         loadModel();
       } else {
-        formApiRef.current?.setValues({
-          ...getInitValues(),
-          model_name: props.editingModel?.model_name || '',
-        });
+        reset();
       }
     } else {
-      formApiRef.current?.reset();
+      reset();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.visiable, props.editingModel?.id, props.editingModel?.model_name]);
 
-  const submit = async (values) => {
+  // ESC-to-close
+  useEffect(() => {
+    if (!props.visiable) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') props.handleClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [props.visiable, props.handleClose]);
+
+  const validate = () => {
+    const next = {};
+    if (!values.model_name?.trim()) {
+      next.model_name = t('请输入模型名称');
+    }
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const submit = async () => {
+    if (!validate()) return;
+
     setLoading(true);
     try {
       const submitData = {
@@ -203,7 +330,7 @@ const EditModelModal = (props) => {
       if (isEdit) {
         submitData.id = props.editingModel.id;
         const res = await API.put('/api/models/', submitData);
-        const { success, message } = res.data;
+        const { success, message } = res.data || {};
         if (success) {
           showSuccess(t('模型更新成功！'));
           props.refresh();
@@ -213,7 +340,7 @@ const EditModelModal = (props) => {
         }
       } else {
         const res = await API.post('/api/models/', submitData);
-        const { success, message } = res.data;
+        const { success, message } = res.data || {};
         if (success) {
           showSuccess(t('模型创建成功！'));
           props.refresh();
@@ -226,328 +353,342 @@ const EditModelModal = (props) => {
       showError(error.response?.data?.message || t('操作失败'));
     }
     setLoading(false);
-    formApiRef.current?.setValues(getInitValues());
+    reset();
   };
 
+  const slideClose =
+    placement === 'right' ? 'translate-x-full' : '-translate-x-full';
+  const positionClass =
+    placement === 'right'
+      ? 'fixed bottom-0 right-0 top-0'
+      : 'fixed bottom-0 left-0 top-0';
+
   return (
-    <SideSheet
-      placement={placement}
-      title={
-        <Space>
-          {isEdit ? (
-            <Tag color='blue' shape='circle'>
-              {t('更新')}
-            </Tag>
-          ) : (
-            <Tag color='green' shape='circle'>
-              {t('新建')}
-            </Tag>
+    <>
+      <div
+        aria-hidden={!props.visiable}
+        onClick={props.handleClose}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          props.visiable ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!props.visiable}
+        style={{ width: isMobile ? '100%' : 600 }}
+        className={`${positionClass} z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          props.visiable ? 'translate-x-0' : slideClose
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-border px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <StatusChip tone={isEdit ? 'blue' : 'green'}>
+              {isEdit ? t('更新') : t('新建')}
+            </StatusChip>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
+              {isEdit ? t('更新模型信息') : t('创建新的模型')}
+            </h4>
+          </div>
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={props.handleClose}
+          >
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='relative flex-1 overflow-y-auto p-3'>
+          {loading && (
+            <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+              <Spinner color='primary' />
+            </div>
           )}
-          <Title heading={4} className='m-0'>
-            {isEdit ? t('更新模型信息') : t('创建新的模型')}
-          </Title>
-        </Space>
-      }
-      bodyStyle={{ padding: '0' }}
-      visible={props.visiable}
-      width={isMobile ? '100%' : 600}
-      footer={
-        <div className='flex justify-end bg-white'>
-          <Space>
-            <Button
-              theme='solid'
-              className='!rounded-lg'
-              onClick={() => formApiRef.current?.submitForm()}
-              icon={<Save size={16} />}
-              loading={loading}
-            >
-              {t('提交')}
-            </Button>
-            <Button
-              theme='light'
-              className='!rounded-lg'
-              type='primary'
-              onClick={handleCancel}
-              icon={<X size={16} />}
-            >
-              {t('取消')}
-            </Button>
-          </Space>
-        </div>
-      }
-      closeIcon={null}
-      onCancel={() => handleCancel()}
-    >
-      <Spin spinning={loading}>
-        <Form
-          key={isEdit ? 'edit' : 'new'}
-          initValues={getInitValues()}
-          getFormApi={(api) => (formApiRef.current = api)}
-          onSubmit={submit}
-        >
-          {({ values }) => (
-            <div className='p-2'>
-              {/* 基本信息 */}
-              <Card className='!rounded-2xl shadow-sm border-0'>
-                <div className='flex items-center mb-2'>
-                  <Avatar size='small' color='green' className='mr-2 shadow-md'>
-                    <FileText size={16} />
-                  </Avatar>
-                  <div>
-                    <Text className='text-lg font-medium'>{t('基本信息')}</Text>
-                    <div className='text-xs text-gray-600'>
-                      {t('设置模型的基本信息')}
-                    </div>
+
+          <Card className='!rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <IconTile tone='green'>
+                  <FileText size={16} />
+                </IconTile>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('基本信息')}
+                  </div>
+                  <div className='text-xs text-muted'>
+                    {t('设置模型的基本信息')}
                   </div>
                 </div>
-                <Row gutter={12}>
-                  <Col span={24}>
-                    <Form.Input
-                      field='model_name'
-                      label={t('模型名称')}
-                      placeholder={t('请输入模型名称，如：gpt-4')}
-                      rules={[{ required: true, message: t('请输入模型名称') }]}
-                      showClear
-                    />
-                  </Col>
-
-                  <Col span={24}>
-                    <Form.Select
-                      field='name_rule'
-                      label={t('名称匹配类型')}
-                      placeholder={t('请选择名称匹配类型')}
-                      optionList={nameRuleOptions.map((o) => ({
-                        label: t(o.label),
-                        value: o.value,
-                      }))}
-                      rules={[
-                        { required: true, message: t('请选择名称匹配类型') },
-                      ]}
-                      extraText={t(
-                        '根据模型名称和匹配规则查找模型元数据，优先级：精确 > 前缀 > 后缀 > 包含',
-                      )}
-                      style={{ width: '100%' }}
-                    />
-                  </Col>
-
-                  <Col span={24}>
-                    <Form.Input
-                      field='icon'
-                      label={t('模型图标')}
-                      placeholder={t('请输入图标名称')}
-                      extraText={
-                        <span>
-                          {t(
-                            "图标使用@lobehub/icons库，如：OpenAI、Claude.Color，支持链式参数：OpenAI.Avatar.type={'platform'}、OpenRouter.Avatar.shape={'square'}，查询所有可用图标请 ",
-                          )}
-                          <Typography.Text
-                            link={{
-                              href: 'https://icons.lobehub.com/components/lobe-hub',
-                              target: '_blank',
+              </div>
+
+              <div className='space-y-3'>
+                <div className='space-y-2'>
+                  <FieldLabel required>{t('模型名称')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={values.model_name || ''}
+                    onChange={(event) =>
+                      setField('model_name')(event.target.value)
+                    }
+                    placeholder={t('请输入模型名称，如：gpt-4')}
+                    className={inputClass}
+                  />
+                  <FieldError>{errors.model_name}</FieldError>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('名称匹配类型')}</FieldLabel>
+                  <select
+                    value={
+                      values.name_rule === undefined
+                        ? ''
+                        : String(values.name_rule)
+                    }
+                    onChange={(event) => {
+                      const v = event.target.value;
+                      setField('name_rule')(v === '' ? undefined : Number(v));
+                    }}
+                    className={inputClass}
+                  >
+                    <option value=''>{t('请选择名称匹配类型')}</option>
+                    {NAME_RULE_OPTIONS.map((o) => (
+                      <option key={o.value} value={o.value}>
+                        {t(o.label)}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('模型图标')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={values.icon || ''}
+                    onChange={(event) => setField('icon')(event.target.value)}
+                    placeholder={t('请输入图标名称')}
+                    className={inputClass}
+                  />
+                  <div className='mt-1.5 text-xs text-muted'>
+                    {t(
+                      "图标使用@lobehub/icons库，如：OpenAI、Claude.Color，支持链式参数：OpenAI.Avatar.type={'platform'}、OpenRouter.Avatar.shape={'square'}，查询所有可用图标请 ",
+                    )}
+                    <a
+                      href='https://icons.lobehub.com/components/lobe-hub'
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='inline-flex items-center gap-1 font-medium text-primary underline-offset-2 hover:underline'
+                    >
+                      {t('请点击我')}
+                      <ExternalLink size={12} />
+                    </a>
+                  </div>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('描述')}</FieldLabel>
+                  <textarea
+                    value={values.description || ''}
+                    onChange={(event) =>
+                      setField('description')(event.target.value)
+                    }
+                    placeholder={t('请输入模型描述')}
+                    rows={3}
+                    className={textareaClass}
+                  />
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('标签')}</FieldLabel>
+                  <TagInput
+                    value={values.tags}
+                    onChange={setField('tags')}
+                    placeholder={t('输入标签或使用","分隔多个标签')}
+                  />
+                  {tagGroups.length > 0 && (
+                    <div className='flex flex-wrap gap-1.5 pt-1'>
+                      {tagGroups.map((group) => (
+                        <Button
+                          key={group.id}
+                          size='sm'
+                          variant='flat'
+                          color='primary'
+                          onPress={() => {
+                            const merged = [
+                              ...new Set([
+                                ...(values.tags || []),
+                                ...(group.items || []),
+                              ]),
+                            ];
+                            setField('tags')(merged);
+                          }}
+                        >
+                          {group.name}
+                        </Button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('供应商')}</FieldLabel>
+                  <select
+                    value={values.vendor_id ?? ''}
+                    onChange={(event) => {
+                      const raw = event.target.value;
+                      const id = raw === '' ? undefined : Number(raw);
+                      const vendorInfo = vendors.find((v) => v.id === id);
+                      setValues((prev) => ({
+                        ...prev,
+                        vendor_id: id,
+                        vendor: vendorInfo?.name ?? '',
+                      }));
+                    }}
+                    className={inputClass}
+                  >
+                    <option value=''>{t('选择模型供应商')}</option>
+                    {vendors.map((v) => (
+                      <option key={v.id} value={v.id}>
+                        {v.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                {/* Endpoints showcase warning */}
+                <div className='flex items-start gap-2 rounded-xl border border-warning/30 bg-warning/5 px-3 py-2 text-xs text-foreground'>
+                  <AlertTriangle
+                    size={16}
+                    className='mt-0.5 shrink-0 text-warning'
+                  />
+                  <span>
+                    {t(
+                      '提示：此处配置仅用于控制「模型广场」对用户的展示效果，不会影响模型的实际调用与路由。若需配置真实调用行为，请前往「渠道管理」进行设置。',
+                    )}
+                  </span>
+                </div>
+
+                <JSONEditor
+                  field='endpoints'
+                  label={t('在模型广场向用户展示的端点')}
+                  placeholder={
+                    '{\n  "openai": {"path": "/v1/chat/completions", "method": "POST"}\n}'
+                  }
+                  value={values.endpoints}
+                  onChange={(val) => setField('endpoints')(val)}
+                  editorType='object'
+                  template={ENDPOINT_TEMPLATE}
+                  templateLabel={t('填入模板')}
+                  extraText={t('留空则使用默认端点；支持 {path, method}')}
+                  extraFooter={
+                    endpointGroups.length > 0 && (
+                      <div className='flex flex-wrap gap-1.5'>
+                        {endpointGroups.map((group) => (
+                          <Button
+                            key={group.id}
+                            size='sm'
+                            variant='flat'
+                            color='primary'
+                            onPress={() => {
+                              try {
+                                const current = values.endpoints || '';
+                                let base = {};
+                                if (current && current.trim()) {
+                                  base = JSON.parse(current);
+                                }
+                                const groupObj =
+                                  typeof group.items === 'string'
+                                    ? JSON.parse(group.items || '{}')
+                                    : group.items || {};
+                                const merged = { ...base, ...groupObj };
+                                setField('endpoints')(
+                                  JSON.stringify(merged, null, 2),
+                                );
+                              } catch (e) {
+                                try {
+                                  const groupObj =
+                                    typeof group.items === 'string'
+                                      ? JSON.parse(group.items || '{}')
+                                      : group.items || {};
+                                  setField('endpoints')(
+                                    JSON.stringify(groupObj, null, 2),
+                                  );
+                                } catch {}
+                              }
                             }}
-                            icon={<IconLink />}
-                            underline
                           >
-                            {t('请点击我')}
-                          </Typography.Text>
-                        </span>
-                      }
-                      showClear
-                    />
-                  </Col>
-
-                  <Col span={24}>
-                    <Form.TextArea
-                      field='description'
-                      label={t('描述')}
-                      placeholder={t('请输入模型描述')}
-                      rows={3}
-                      showClear
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Form.TagInput
-                      field='tags'
-                      label={t('标签')}
-                      placeholder={t('输入标签或使用","分隔多个标签')}
-                      addOnBlur
-                      showClear
-                      onChange={(newTags) => {
-                        if (!formApiRef.current) return;
-                        const normalize = (tags) => {
-                          if (!Array.isArray(tags)) return [];
-                          return [
-                            ...new Set(
-                              tags.flatMap((tag) =>
-                                tag
-                                  .split(',')
-                                  .map((t) => t.trim())
-                                  .filter(Boolean),
-                              ),
-                            ),
-                          ];
-                        };
-                        const normalized = normalize(newTags);
-                        formApiRef.current.setValue('tags', normalized);
-                      }}
-                      style={{ width: '100%' }}
-                      {...(tagGroups.length > 0 && {
-                        extraText: (
-                          <Space wrap>
-                            {tagGroups.map((group) => (
-                              <Button
-                                key={group.id}
-                                size='small'
-                                type='primary'
-                                onClick={() => {
-                                  if (formApiRef.current) {
-                                    const currentTags =
-                                      formApiRef.current.getValue('tags') || [];
-                                    const newTags = [
-                                      ...currentTags,
-                                      ...(group.items || []),
-                                    ];
-                                    const uniqueTags = [...new Set(newTags)];
-                                    formApiRef.current.setValue(
-                                      'tags',
-                                      uniqueTags,
-                                    );
-                                  }
-                                }}
-                              >
-                                {group.name}
-                              </Button>
-                            ))}
-                          </Space>
-                        ),
-                      })}
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Form.Select
-                      field='vendor_id'
-                      label={t('供应商')}
-                      placeholder={t('选择模型供应商')}
-                      optionList={vendors.map((v) => ({
-                        label: v.name,
-                        value: v.id,
-                      }))}
-                      filter
-                      showClear
-                      onChange={(value) => {
-                        const vendorInfo = vendors.find((v) => v.id === value);
-                        if (vendorInfo && formApiRef.current) {
-                          formApiRef.current.setValue(
-                            'vendor',
-                            vendorInfo.name,
-                          );
-                        }
-                      }}
-                      style={{ width: '100%' }}
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Banner
-                      type='warning'
-                      closeIcon={null}
-                      icon={
-                        <IconAlertTriangle
-                          size='large'
-                          style={{ color: 'var(--semi-color-warning)' }}
-                        />
-                      }
-                      description={t(
-                        '提示：此处配置仅用于控制「模型广场」对用户的展示效果，不会影响模型的实际调用与路由。若需配置真实调用行为，请前往「渠道管理」进行设置。',
-                      )}
-                      style={{ marginBottom: 12 }}
-                    />
-                    <JSONEditor
-                      field='endpoints'
-                      label={t('在模型广场向用户展示的端点')}
-                      placeholder={
-                        '{\n  "openai": {"path": "/v1/chat/completions", "method": "POST"}\n}'
-                      }
-                      value={values.endpoints}
-                      onChange={(val) =>
-                        formApiRef.current?.setValue('endpoints', val)
-                      }
-                      formApi={formApiRef.current}
-                      editorType='object'
-                      template={ENDPOINT_TEMPLATE}
-                      templateLabel={t('填入模板')}
-                      extraText={t('留空则使用默认端点；支持 {path, method}')}
-                      extraFooter={
-                        endpointGroups.length > 0 && (
-                          <Space wrap>
-                            {endpointGroups.map((group) => (
-                              <Button
-                                key={group.id}
-                                size='small'
-                                type='primary'
-                                onClick={() => {
-                                  try {
-                                    const current =
-                                      formApiRef.current?.getValue(
-                                        'endpoints',
-                                      ) || '';
-                                    let base = {};
-                                    if (current && current.trim())
-                                      base = JSON.parse(current);
-                                    const groupObj =
-                                      typeof group.items === 'string'
-                                        ? JSON.parse(group.items || '{}')
-                                        : group.items || {};
-                                    const merged = { ...base, ...groupObj };
-                                    formApiRef.current?.setValue(
-                                      'endpoints',
-                                      JSON.stringify(merged, null, 2),
-                                    );
-                                  } catch (e) {
-                                    try {
-                                      const groupObj =
-                                        typeof group.items === 'string'
-                                          ? JSON.parse(group.items || '{}')
-                                          : group.items || {};
-                                      formApiRef.current?.setValue(
-                                        'endpoints',
-                                        JSON.stringify(groupObj, null, 2),
-                                      );
-                                    } catch {}
-                                  }
-                                }}
-                              >
-                                {group.name}
-                              </Button>
-                            ))}
-                          </Space>
-                        )
-                      }
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Form.Switch
-                      field='sync_official'
-                      label={t('参与官方同步')}
-                      extraText={t(
-                        '关闭后，此模型将不会被“同步官方”自动覆盖或创建',
+                            {group.name}
+                          </Button>
+                        ))}
+                      </div>
+                    )
+                  }
+                />
+
+                <label className='flex items-center justify-between gap-3'>
+                  <div>
+                    <div className='text-sm font-medium text-foreground'>
+                      {t('参与官方同步')}
+                    </div>
+                    <div className='text-xs text-muted'>
+                      {t(
+                        '关闭后，此模型将不会被"同步官方"自动覆盖或创建',
                       )}
-                      size='large'
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Form.Switch
-                      field='status'
-                      label={t('状态')}
-                      size='large'
-                    />
-                  </Col>
-                </Row>
-              </Card>
-            </div>
-          )}
-        </Form>
-      </Spin>
-    </SideSheet>
+                    </div>
+                  </div>
+                  <Switch
+                    isSelected={values.sync_official}
+                    onValueChange={setField('sync_official')}
+                    size='md'
+                    aria-label={t('参与官方同步')}
+                  >
+                    <Switch.Control>
+                      <Switch.Thumb />
+                    </Switch.Control>
+                  </Switch>
+                </label>
+
+                <label className='flex items-center justify-between gap-3'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('状态')}
+                  </div>
+                  <Switch
+                    isSelected={values.status}
+                    onValueChange={setField('status')}
+                    size='md'
+                    aria-label={t('状态')}
+                  >
+                    <Switch.Control>
+                      <Switch.Thumb />
+                    </Switch.Control>
+                  </Switch>
+                </label>
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+
+        <footer className='flex justify-end gap-2 border-t border-border bg-background px-5 py-3'>
+          <Button
+            variant='light'
+            startContent={<X size={14} />}
+            onPress={props.handleClose}
+          >
+            {t('取消')}
+          </Button>
+          <Button
+            color='primary'
+            isPending={loading}
+            startContent={<Save size={14} />}
+            onPress={submit}
+          >
+            {t('提交')}
+          </Button>
+        </footer>
+      </aside>
+    </>
   );
 };
 
diff --git a/web/src/components/table/models/modals/EditPrefillGroupModal.jsx b/web/src/components/table/models/modals/EditPrefillGroupModal.jsx
index bb7af45cdb8..ee0271f134c 100644
--- a/web/src/components/table/models/modals/EditPrefillGroupModal.jsx
+++ b/web/src/components/table/models/modals/EditPrefillGroupModal.jsx
@@ -17,29 +17,14 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Input } from '@heroui/react';
+import { Layers, Save, X } from 'lucide-react';
 import JSONEditor from '../../../common/ui/JSONEditor';
-import {
-  SideSheet,
-  Button,
-  Form,
-  Typography,
-  Space,
-  Tag,
-  Row,
-  Col,
-  Card,
-  Avatar,
-  Spin,
-} from '@douyinfe/semi-ui';
-import { IconLayers, IconSave, IconClose } from '@douyinfe/semi-icons';
 import { API, showError, showSuccess } from '../../../../helpers';
 import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 
-const { Text, Title } = Typography;
-
-// Example endpoint template for quick fill
 const ENDPOINT_TEMPLATE = {
   openai: { path: '/v1/chat/completions', method: 'POST' },
   'openai-response': { path: '/v1/responses', method: 'POST' },
@@ -50,6 +35,79 @@ const ENDPOINT_TEMPLATE = {
   'image-generation': { path: '/v1/images/generations', method: 'POST' },
 };
 
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
+const selectClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+function TagInput({ value = [], onChange, placeholder, ariaLabel }) {
+  const [draft, setDraft] = useState('');
+  const items = Array.isArray(value) ? value : [];
+
+  const commit = (raw) => {
+    const text = String(raw || '').trim();
+    if (!text) return;
+    if (items.includes(text)) {
+      setDraft('');
+      return;
+    }
+    onChange?.([...items, text]);
+    setDraft('');
+  };
+
+  const remove = (idx) => {
+    const next = items.slice();
+    next.splice(idx, 1);
+    onChange?.(next);
+  };
+
+  return (
+    <div
+      className='flex min-h-[2.5rem] flex-wrap items-center gap-1 rounded-lg border border-[color:var(--app-border)] bg-background px-2 py-1 text-sm transition focus-within:border-primary'
+      aria-label={ariaLabel}
+    >
+      {items.map((tag, idx) => (
+        <span
+          key={`${tag}-${idx}`}
+          className='inline-flex items-center gap-1 rounded-full bg-sky-100 px-2 py-0.5 text-xs font-medium text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'
+        >
+          {tag}
+          <button
+            type='button'
+            onClick={() => remove(idx)}
+            aria-label={`remove ${tag}`}
+            className='inline-flex h-3 w-3 items-center justify-center text-sky-500 hover:text-sky-700'
+          >
+            <X size={11} />
+          </button>
+        </span>
+      ))}
+      <input
+        type='text'
+        value={draft}
+        placeholder={items.length === 0 ? placeholder : ''}
+        onChange={(event) => setDraft(event.target.value)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter' || event.key === ',') {
+            event.preventDefault();
+            commit(draft);
+          } else if (
+            event.key === 'Backspace' &&
+            !draft &&
+            items.length > 0
+          ) {
+            remove(items.length - 1);
+          }
+        }}
+        onBlur={() => commit(draft)}
+        className='min-w-[8rem] flex-1 bg-transparent py-1 text-sm text-foreground outline-none'
+      />
+    </div>
+  );
+}
+
 const EditPrefillGroupModal = ({
   visible,
   onClose,
@@ -59,216 +117,274 @@ const EditPrefillGroupModal = ({
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const [loading, setLoading] = useState(false);
-  const formRef = useRef(null);
+
   const isEdit = editingGroup && editingGroup.id !== undefined;
 
-  const [selectedType, setSelectedType] = useState(editingGroup?.type || 'tag');
+  const buildInitial = () => ({
+    name: editingGroup?.name || '',
+    type: editingGroup?.type || 'tag',
+    description: editingGroup?.description || '',
+    items: (() => {
+      try {
+        if (editingGroup?.type === 'endpoint') {
+          return typeof editingGroup?.items === 'string'
+            ? editingGroup.items
+            : JSON.stringify(editingGroup.items || {}, null, 2);
+        }
+        return Array.isArray(editingGroup?.items) ? editingGroup.items : [];
+      } catch {
+        return editingGroup?.type === 'endpoint' ? '' : [];
+      }
+    })(),
+  });
+
+  const [values, setValues] = useState(buildInitial);
+  const [errors, setErrors] = useState({});
 
-  // 当外部传入的编辑组类型变化时同步 selectedType
   useEffect(() => {
-    setSelectedType(editingGroup?.type || 'tag');
-  }, [editingGroup?.type]);
+    setValues(buildInitial());
+    setErrors({});
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, editingGroup?.id, editingGroup?.type]);
 
-  const typeOptions = [
-    { label: t('模型组'), value: 'model' },
-    { label: t('标签组'), value: 'tag' },
-    { label: t('端点组'), value: 'endpoint' },
-  ];
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') onClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [visible, onClose]);
+
+  const setField = (key) => (value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
 
-  // 提交表单
-  const handleSubmit = async (values) => {
+  const handleTypeChange = (next) => {
+    // Reset items when switching item shape (string vs array).
+    setValues((prev) => ({
+      ...prev,
+      type: next,
+      items: next === 'endpoint' ? '' : [],
+    }));
+  };
+
+  const validate = () => {
+    const next = {};
+    if (!values.name?.trim()) next.name = t('请输入组名');
+    if (!values.type) next.type = t('请选择组类型');
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const handleSubmit = async () => {
+    if (!validate()) return;
     setLoading(true);
     try {
-      const submitData = {
-        ...values,
-      };
+      const submitData = { ...values };
       if (values.type === 'endpoint') {
         submitData.items = values.items || '';
       } else {
         submitData.items = Array.isArray(values.items) ? values.items : [];
       }
 
-      if (editingGroup.id) {
+      if (editingGroup?.id) {
         submitData.id = editingGroup.id;
         const res = await API.put('/api/prefill_group', submitData);
-        if (res.data.success) {
+        if (res.data?.success) {
           showSuccess(t('更新成功'));
-          onSuccess();
+          onSuccess?.();
         } else {
-          showError(res.data.message || t('更新失败'));
+          showError(res.data?.message || t('更新失败'));
         }
       } else {
         const res = await API.post('/api/prefill_group', submitData);
-        if (res.data.success) {
+        if (res.data?.success) {
           showSuccess(t('创建成功'));
-          onSuccess();
+          onSuccess?.();
         } else {
-          showError(res.data.message || t('创建失败'));
+          showError(res.data?.message || t('创建失败'));
         }
       }
     } catch (error) {
       showError(t('操作失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (
-    <SideSheet
-      placement='left'
-      title={
-        <Space>
-          {isEdit ? (
-            <Tag color='blue' shape='circle'>
-              {t('更新')}
-            </Tag>
-          ) : (
-            <Tag color='green' shape='circle'>
-              {t('新建')}
-            </Tag>
-          )}
-          <Title heading={4} className='m-0'>
-            {isEdit ? t('更新预填组') : t('创建新的预填组')}
-          </Title>
-        </Space>
-      }
-      visible={visible}
-      onCancel={onClose}
-      width={isMobile ? '100%' : 600}
-      bodyStyle={{ padding: '0' }}
-      footer={
-        <div className='flex justify-end bg-white'>
-          <Space>
-            <Button
-              theme='solid'
-              className='!rounded-lg'
-              onClick={() => formRef.current?.submitForm()}
-              icon={<IconSave />}
-              loading={loading}
-            >
-              {t('提交')}
-            </Button>
-            <Button
-              theme='light'
-              className='!rounded-lg'
-              type='primary'
-              onClick={onClose}
-              icon={<IconClose />}
+    <>
+      <div
+        aria-hidden={!visible}
+        onClick={onClose}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!visible}
+        style={{ width: isMobile ? '100%' : 600 }}
+        className={`fixed bottom-0 left-0 top-0 z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          visible ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-[color:var(--app-border)] px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <span
+              className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold ${
+                isEdit
+                  ? 'bg-sky-100 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'
+                  : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
+              }`}
             >
-              {t('取消')}
-            </Button>
-          </Space>
-        </div>
-      }
-      closeIcon={null}
-    >
-      <Spin spinning={loading}>
-        <Form
-          getFormApi={(api) => (formRef.current = api)}
-          initValues={{
-            name: editingGroup?.name || '',
-            type: editingGroup?.type || 'tag',
-            description: editingGroup?.description || '',
-            items: (() => {
-              try {
-                if (editingGroup?.type === 'endpoint') {
-                  // 保持原始字符串
-                  return typeof editingGroup?.items === 'string'
-                    ? editingGroup.items
-                    : JSON.stringify(editingGroup.items || {}, null, 2);
-                }
-                return Array.isArray(editingGroup?.items)
-                  ? editingGroup.items
-                  : [];
-              } catch {
-                return editingGroup?.type === 'endpoint' ? '' : [];
-              }
-            })(),
-          }}
-          onSubmit={handleSubmit}
-        >
-          <div className='p-2'>
-            {/* 基本信息 */}
-            <Card className='!rounded-2xl shadow-sm border-0'>
-              <div className='flex items-center mb-2'>
-                <Avatar size='small' color='green' className='mr-2 shadow-md'>
-                  <IconLayers size={16} />
-                </Avatar>
+              {isEdit ? t('更新') : t('新建')}
+            </span>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
+              {isEdit ? t('更新预填组') : t('创建新的预填组')}
+            </h4>
+          </div>
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={onClose}
+          >
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='flex-1 overflow-y-auto p-3'>
+          <Card className='!rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-950/40 dark:text-emerald-300'>
+                  <Layers size={16} />
+                </div>
                 <div>
-                  <Text className='text-lg font-medium'>{t('基本信息')}</Text>
-                  <div className='text-xs text-gray-600'>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('基本信息')}
+                  </div>
+                  <div className='text-xs text-muted'>
                     {t('设置预填组的基本信息')}
                   </div>
                 </div>
               </div>
-              <Row gutter={12}>
-                <Col span={24}>
-                  <Form.Input
-                    field='name'
-                    label={t('组名')}
-                    placeholder={t('请输入组名')}
-                    rules={[{ required: true, message: t('请输入组名') }]}
-                    showClear
-                  />
-                </Col>
-                <Col span={24}>
-                  <Form.Select
-                    field='type'
-                    label={t('类型')}
-                    placeholder={t('选择组类型')}
-                    optionList={typeOptions}
-                    rules={[{ required: true, message: t('请选择组类型') }]}
-                    style={{ width: '100%' }}
-                    onChange={(val) => setSelectedType(val)}
-                  />
-                </Col>
-                <Col span={24}>
-                  <Form.TextArea
-                    field='description'
-                    label={t('描述')}
-                    placeholder={t('请输入组描述')}
-                    rows={3}
-                    showClear
+
+              <div className='space-y-2'>
+                <div className='text-sm font-medium text-foreground'>
+                  {t('组名')}
+                  <span className='ml-1 text-red-500'>*</span>
+                </div>
+                <Input
+                  type='text'
+                  value={values.name}
+                  onChange={(event) => setField('name')(event.target.value)}
+                  placeholder={t('请输入组名')}
+                  aria-label={t('组名')}
+                  className={inputClass}
+                />
+                {errors.name ? (
+                  <div className='text-xs text-red-600'>{errors.name}</div>
+                ) : null}
+              </div>
+
+              <div className='space-y-2'>
+                <div className='text-sm font-medium text-foreground'>
+                  {t('类型')}
+                  <span className='ml-1 text-red-500'>*</span>
+                </div>
+                <select
+                  value={values.type}
+                  onChange={(event) => handleTypeChange(event.target.value)}
+                  aria-label={t('类型')}
+                  className={selectClass}
+                >
+                  <option value='model'>{t('模型组')}</option>
+                  <option value='tag'>{t('标签组')}</option>
+                  <option value='endpoint'>{t('端点组')}</option>
+                </select>
+                {errors.type ? (
+                  <div className='text-xs text-red-600'>{errors.type}</div>
+                ) : null}
+              </div>
+
+              <div className='space-y-2'>
+                <div className='text-sm font-medium text-foreground'>
+                  {t('描述')}
+                </div>
+                <textarea
+                  value={values.description}
+                  onChange={(event) =>
+                    setField('description')(event.target.value)
+                  }
+                  placeholder={t('请输入组描述')}
+                  rows={3}
+                  aria-label={t('描述')}
+                  className={textareaClass}
+                />
+              </div>
+
+              <div className='space-y-2'>
+                {values.type === 'endpoint' ? (
+                  <JSONEditor
+                    field='items'
+                    label={t('端点映射')}
+                    value={
+                      typeof values.items === 'string'
+                        ? values.items
+                        : JSON.stringify(values.items || {}, null, 2)
+                    }
+                    onChange={(val) => setField('items')(val)}
+                    editorType='object'
+                    placeholder={
+                      '{\n  "openai": {"path": "/v1/chat/completions", "method": "POST"}\n}'
+                    }
+                    template={ENDPOINT_TEMPLATE}
+                    templateLabel={t('填入模板')}
+                    extraText={t('键为端点类型，值为路径和方法对象')}
                   />
-                </Col>
-                <Col span={24}>
-                  {selectedType === 'endpoint' ? (
-                    <JSONEditor
-                      field='items'
-                      label={t('端点映射')}
-                      value={
-                        formRef.current?.getValue('items') ??
-                        (typeof editingGroup?.items === 'string'
-                          ? editingGroup.items
-                          : JSON.stringify(editingGroup.items || {}, null, 2))
-                      }
-                      onChange={(val) =>
-                        formRef.current?.setValue('items', val)
-                      }
-                      editorType='object'
-                      placeholder={
-                        '{\n  "openai": {"path": "/v1/chat/completions", "method": "POST"}\n}'
-                      }
-                      template={ENDPOINT_TEMPLATE}
-                      templateLabel={t('填入模板')}
-                      extraText={t('键为端点类型，值为路径和方法对象')}
-                    />
-                  ) : (
-                    <Form.TagInput
-                      field='items'
-                      label={t('项目')}
+                ) : (
+                  <>
+                    <div className='text-sm font-medium text-foreground'>
+                      {t('项目')}
+                    </div>
+                    <TagInput
+                      value={Array.isArray(values.items) ? values.items : []}
+                      onChange={(next) => setField('items')(next)}
                       placeholder={t('输入项目名称，按回车添加')}
-                      addOnBlur
-                      showClear
-                      style={{ width: '100%' }}
+                      ariaLabel={t('项目')}
                     />
-                  )}
-                </Col>
-              </Row>
-            </Card>
-          </div>
-        </Form>
-      </Spin>
-    </SideSheet>
+                  </>
+                )}
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+
+        <footer className='flex justify-end gap-2 border-t border-[color:var(--app-border)] bg-[color:var(--app-background)] px-5 py-3'>
+          <Button
+            variant='light'
+            onPress={onClose}
+            startContent={<X size={14} />}
+          >
+            {t('取消')}
+          </Button>
+          <Button
+            color='primary'
+            onPress={handleSubmit}
+            isPending={loading}
+            startContent={<Save size={14} />}
+          >
+            {t('提交')}
+          </Button>
+        </footer>
+      </aside>
+    </>
   );
 };
 
diff --git a/web/src/components/table/models/modals/EditVendorModal.jsx b/web/src/components/table/models/modals/EditVendorModal.jsx
index 977f7d9fc2e..6de9b51ba22 100644
--- a/web/src/components/table/models/modals/EditVendorModal.jsx
+++ b/web/src/components/table/models/modals/EditVendorModal.jsx
@@ -17,54 +17,79 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useRef, useEffect } from 'react';
-import { Modal, Form, Col, Row } from '@douyinfe/semi-ui';
+import React, { useState, useEffect } from 'react';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Switch,
+  useOverlayState,
+} from '@heroui/react';
+import { ExternalLink } from 'lucide-react';
 import { API, showError, showSuccess } from '../../../../helpers';
-import { Typography } from '@douyinfe/semi-ui';
-import { IconLink } from '@douyinfe/semi-icons';
 import { useTranslation } from 'react-i18next';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
 
 const EditVendorModal = ({ visible, handleClose, refresh, editingVendor }) => {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const formApiRef = useRef(null);
-
-  const isMobile = useIsMobile();
-  const isEdit = editingVendor && editingVendor.id !== undefined;
-
-  const getInitValues = () => ({
+  const [values, setValues] = useState({
     name: '',
     description: '',
     icon: '',
     status: true,
   });
+  const [errors, setErrors] = useState({});
+
+  const isEdit = editingVendor && editingVendor.id !== undefined;
+
+  const setField = (key) => (value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
+
+  const reset = () => {
+    setValues({ name: '', description: '', icon: '', status: true });
+    setErrors({});
+  };
 
   const handleCancel = () => {
-    handleClose();
-    formApiRef.current?.reset();
+    handleClose?.();
+    reset();
   };
 
   const loadVendor = async () => {
     if (!isEdit || !editingVendor.id) return;
-
     setLoading(true);
     try {
       const res = await API.get(`/api/vendors/${editingVendor.id}`);
-      const { success, message, data } = res.data;
-      if (success) {
-        // 将数字状态转为布尔值
-        data.status = data.status === 1;
-        if (formApiRef.current) {
-          formApiRef.current.setValues({ ...getInitValues(), ...data });
-        }
+      const { success, message, data } = res.data || {};
+      if (success && data) {
+        setValues({
+          name: data.name || '',
+          description: data.description || '',
+          icon: data.icon || '',
+          status: data.status === 1 || data.status === true,
+        });
       } else {
         showError(message);
       }
     } catch (error) {
       showError(t('加载供应商信息失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   useEffect(() => {
@@ -72,113 +97,154 @@ const EditVendorModal = ({ visible, handleClose, refresh, editingVendor }) => {
       if (isEdit) {
         loadVendor();
       } else {
-        formApiRef.current?.setValues(getInitValues());
+        reset();
       }
     } else {
-      formApiRef.current?.reset();
+      reset();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible, editingVendor?.id]);
 
-  const submit = async (values) => {
+  const submit = async () => {
+    if (!values.name?.trim()) {
+      setErrors({ name: t('请输入供应商名称') });
+      return;
+    }
     setLoading(true);
     try {
-      // 转换 status 为数字
-      const submitData = {
-        ...values,
-        status: values.status ? 1 : 0,
-      };
-
+      const submitData = { ...values, status: values.status ? 1 : 0 };
       if (isEdit) {
         submitData.id = editingVendor.id;
         const res = await API.put('/api/vendors/', submitData);
-        const { success, message } = res.data;
+        const { success, message } = res.data || {};
         if (success) {
           showSuccess(t('供应商更新成功！'));
-          refresh();
-          handleClose();
+          refresh?.();
+          handleClose?.();
         } else {
           showError(t(message));
         }
       } else {
         const res = await API.post('/api/vendors/', submitData);
-        const { success, message } = res.data;
+        const { success, message } = res.data || {};
         if (success) {
           showSuccess(t('供应商创建成功！'));
-          refresh();
-          handleClose();
+          refresh?.();
+          handleClose?.();
         } else {
           showError(t(message));
         }
       }
     } catch (error) {
       showError(error.response?.data?.message || t('操作失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleCancel();
+    },
+  });
+
   return (
-    <Modal
-      title={isEdit ? t('编辑供应商') : t('新增供应商')}
-      visible={visible}
-      onOk={() => formApiRef.current?.submitForm()}
-      onCancel={handleCancel}
-      confirmLoading={loading}
-      size={isMobile ? 'full-width' : 'small'}
-    >
-      <Form
-        initValues={getInitValues()}
-        getFormApi={(api) => (formApiRef.current = api)}
-        onSubmit={submit}
-      >
-        <Row gutter={12}>
-          <Col span={24}>
-            <Form.Input
-              field='name'
-              label={t('供应商名称')}
-              placeholder={t('请输入供应商名称，如：OpenAI')}
-              rules={[{ required: true, message: t('请输入供应商名称') }]}
-              showClear
-            />
-          </Col>
-          <Col span={24}>
-            <Form.TextArea
-              field='description'
-              label={t('描述')}
-              placeholder={t('请输入供应商描述')}
-              rows={3}
-              showClear
-            />
-          </Col>
-          <Col span={24}>
-            <Form.Input
-              field='icon'
-              label={t('供应商图标')}
-              placeholder={t('请输入图标名称')}
-              extraText={
-                <span>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='md' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {isEdit ? t('编辑供应商') : t('新增供应商')}
+            </ModalHeader>
+            <ModalBody className='space-y-4 px-6 py-5'>
+              <div className='space-y-2'>
+                <div className='text-sm font-medium text-foreground'>
+                  {t('供应商名称')}
+                  <span className='ml-1 text-red-500'>*</span>
+                </div>
+                <Input
+                  type='text'
+                  value={values.name}
+                  onChange={(event) => setField('name')(event.target.value)}
+                  placeholder={t('请输入供应商名称，如：OpenAI')}
+                  aria-label={t('供应商名称')}
+                  className={inputClass}
+                />
+                {errors.name ? (
+                  <div className='text-xs text-red-600'>{errors.name}</div>
+                ) : null}
+              </div>
+
+              <div className='space-y-2'>
+                <div className='text-sm font-medium text-foreground'>
+                  {t('描述')}
+                </div>
+                <textarea
+                  value={values.description}
+                  onChange={(event) => setField('description')(event.target.value)}
+                  placeholder={t('请输入供应商描述')}
+                  rows={3}
+                  aria-label={t('描述')}
+                  className={textareaClass}
+                />
+              </div>
+
+              <div className='space-y-2'>
+                <div className='text-sm font-medium text-foreground'>
+                  {t('供应商图标')}
+                </div>
+                <Input
+                  type='text'
+                  value={values.icon}
+                  onChange={(event) => setField('icon')(event.target.value)}
+                  placeholder={t('请输入图标名称')}
+                  aria-label={t('供应商图标')}
+                  className={inputClass}
+                />
+                <div className='text-xs leading-snug text-muted'>
                   {t(
                     "图标使用@lobehub/icons库，如：OpenAI、Claude.Color，支持链式参数：OpenAI.Avatar.type={'platform'}、OpenRouter.Avatar.shape={'square'}，查询所有可用图标请 ",
                   )}
-                  <Typography.Text
-                    link={{
-                      href: 'https://icons.lobehub.com/components/lobe-hub',
-                      target: '_blank',
-                    }}
-                    icon={<IconLink />}
-                    underline
+                  <a
+                    href='https://icons.lobehub.com/components/lobe-hub'
+                    target='_blank'
+                    rel='noreferrer'
+                    className='inline-flex items-center gap-1 text-primary underline'
                   >
                     {t('请点击我')}
-                  </Typography.Text>
-                </span>
-              }
-              showClear
-            />
-          </Col>
-          <Col span={24}>
-            <Form.Switch field='status' label={t('状态')} initValue={true} />
-          </Col>
-        </Row>
-      </Form>
+                    <ExternalLink size={12} />
+                  </a>
+                </div>
+              </div>
+
+              <label className='flex items-center justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+                <div className='text-sm font-medium text-foreground'>
+                  {t('状态')}
+                </div>
+                <Switch
+                  isSelected={!!values.status}
+                  onChange={setField('status')}
+                  aria-label={t('状态')}
+                  size='sm'
+                >
+                  <Switch.Control>
+                    <Switch.Thumb />
+                  </Switch.Control>
+                </Switch>
+              </label>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={handleCancel}>
+                {t('取消')}
+              </Button>
+              <Button color='primary' onPress={submit} isPending={loading}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/models/modals/MissingModelsModal.jsx b/web/src/components/table/models/modals/MissingModelsModal.jsx
index f8fa78fdd6c..46a4c49e45b 100644
--- a/web/src/components/table/models/modals/MissingModelsModal.jsx
+++ b/web/src/components/table/models/modals/MissingModelsModal.jsx
@@ -19,43 +19,83 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useEffect, useState } from 'react';
 import {
-  Modal,
-  Table,
-  Spin,
   Button,
-  Typography,
-  Empty,
   Input,
-} from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { IconSearch } from '@douyinfe/semi-icons';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
+import { Inbox, Search } from 'lucide-react';
 import { API, showError } from '../../../../helpers';
 import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+
+function EmptyState({ description }) {
+  return (
+    <div className='flex flex-col items-center gap-3 py-10 text-center text-sm text-muted'>
+      <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+        <Inbox size={28} />
+      </div>
+      <div>{description}</div>
+    </div>
+  );
+}
+
+function Pager({ current, pageSize, total, onChange, t }) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  if (totalPages <= 1) return null;
+  return (
+    <div className='mt-3 flex items-center justify-end gap-2 text-sm text-muted'>
+      <span>
+        {t('共 {{total}} 条', { total })}
+      </span>
+      <Button
+        size='sm'
+        variant='light'
+        isDisabled={current <= 1}
+        onPress={() => onChange(current - 1)}
+      >
+        {t('上一页')}
+      </Button>
+      <span>
+        {current} / {totalPages}
+      </span>
+      <Button
+        size='sm'
+        variant='light'
+        isDisabled={current >= totalPages}
+        onPress={() => onChange(current + 1)}
+      >
+        {t('下一页')}
+      </Button>
+    </div>
+  );
+}
 
 const MissingModelsModal = ({ visible, onClose, onConfigureModel, t }) => {
   const [loading, setLoading] = useState(false);
   const [missingModels, setMissingModels] = useState([]);
   const [searchKeyword, setSearchKeyword] = useState('');
   const [currentPage, setCurrentPage] = useState(1);
-  const isMobile = useIsMobile();
 
   const fetchMissing = async () => {
     setLoading(true);
     try {
       const res = await API.get('/api/models/missing');
-      if (res.data.success) {
+      if (res.data?.success) {
         setMissingModels(res.data.data || []);
       } else {
-        showError(res.data.message);
+        showError(res.data?.message);
       }
     } catch (_) {
       showError(t('获取未配置模型失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   useEffect(() => {
@@ -66,131 +106,120 @@ const MissingModelsModal = ({ visible, onClose, onConfigureModel, t }) => {
     } else {
       setMissingModels([]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
-  // 过滤和分页逻辑
   const filteredModels = missingModels.filter((model) =>
     model.toLowerCase().includes(searchKeyword.toLowerCase()),
   );
+  const start = (currentPage - 1) * MODEL_TABLE_PAGE_SIZE;
+  const pageItems = filteredModels.slice(start, start + MODEL_TABLE_PAGE_SIZE);
 
-  const dataSource = (() => {
-    const start = (currentPage - 1) * MODEL_TABLE_PAGE_SIZE;
-    const end = start + MODEL_TABLE_PAGE_SIZE;
-    return filteredModels.slice(start, end).map((model) => ({
-      model,
-      key: model,
-    }));
-  })();
-
-  const columns = [
-    {
-      title: t('模型名称'),
-      dataIndex: 'model',
-      render: (text) => (
-        <div className='flex items-center'>
-          <Typography.Text strong>{text}</Typography.Text>
-        </div>
-      ),
-    },
-    {
-      title: '',
-      dataIndex: 'operate',
-      fixed: 'right',
-      width: 120,
-      render: (text, record) => (
-        <Button
-          type='primary'
-          size='small'
-          onClick={() => onConfigureModel(record.model)}
-        >
-          {t('配置')}
-        </Button>
-      ),
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onClose?.();
     },
-  ];
+  });
 
   return (
-    <Modal
-      title={
-        <div className='flex flex-col gap-2 w-full'>
-          <div className='flex items-center gap-2'>
-            <Typography.Text
-              strong
-              className='!text-[var(--semi-color-text-0)] !text-base'
-            >
-              {t('未配置的模型列表')}
-            </Typography.Text>
-            <Typography.Text type='tertiary' size='small'>
-              {t('共')} {missingModels.length} {t('个未配置模型')}
-            </Typography.Text>
-          </div>
-        </div>
-      }
-      visible={visible}
-      onCancel={onClose}
-      footer={null}
-      size={isMobile ? 'full-width' : 'medium'}
-      className='!rounded-lg'
-    >
-      <Spin spinning={loading}>
-        {missingModels.length === 0 && !loading ? (
-          <Empty
-            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-            darkModeImage={
-              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('暂无缺失模型')}
-            style={{ padding: 30 }}
-          />
-        ) : (
-          <div className='missing-models-content'>
-            {/* 搜索框 */}
-            <div className='flex items-center justify-end gap-2 w-full mb-4'>
-              <Input
-                placeholder={t('搜索模型...')}
-                value={searchKeyword}
-                onChange={(v) => {
-                  setSearchKeyword(v);
-                  setCurrentPage(1);
-                }}
-                className='!w-full'
-                prefix={<IconSearch />}
-                showClear
-              />
-            </div>
-
-            {/* 表格 */}
-            {filteredModels.length > 0 ? (
-              <Table
-                columns={columns}
-                dataSource={dataSource}
-                pagination={{
-                  currentPage: currentPage,
-                  pageSize: MODEL_TABLE_PAGE_SIZE,
-                  total: filteredModels.length,
-                  showSizeChanger: false,
-                  onPageChange: (page) => setCurrentPage(page),
-                }}
-              />
-            ) : (
-              <Empty
-                image={
-                  <IllustrationNoResult style={{ width: 100, height: 100 }} />
-                }
-                darkModeImage={
-                  <IllustrationNoResultDark
-                    style={{ width: 100, height: 100 }}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='md' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex flex-wrap items-center gap-2'>
+                <span className='text-base font-semibold text-foreground'>
+                  {t('未配置的模型列表')}
+                </span>
+                <span className='text-xs text-muted'>
+                  {t('共')} {missingModels.length} {t('个未配置模型')}
+                </span>
+              </div>
+            </ModalHeader>
+            <ModalBody className='space-y-4 px-6 py-5'>
+              {loading ? (
+                <div className='flex items-center justify-center py-10'>
+                  <Spinner />
+                </div>
+              ) : missingModels.length === 0 ? (
+                <EmptyState description={t('暂无缺失模型')} />
+              ) : (
+                <>
+                  <div className='relative'>
+                    <Search
+                      size={14}
+                      className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+                    />
+                    <Input
+                      type='text'
+                      placeholder={t('搜索模型...')}
+                      value={searchKeyword}
+                      onChange={(event) => {
+                        setSearchKeyword(event.target.value);
+                        setCurrentPage(1);
+                      }}
+                      aria-label={t('搜索模型')}
+                      className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background pl-9 pr-3 text-sm text-foreground outline-none transition focus:border-primary'
+                    />
+                  </div>
+
+                  {filteredModels.length > 0 ? (
+                    <div className='overflow-hidden rounded-xl border border-[color:var(--app-border)]'>
+                      <table className='w-full text-sm'>
+                        <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+                          <tr>
+                            <th className='px-4 py-2 text-left font-semibold'>
+                              {t('模型名称')}
+                            </th>
+                            <th className='w-32 px-4 py-2 text-right font-semibold'>
+                              &nbsp;
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className='divide-y divide-[color:var(--app-border)]'>
+                          {pageItems.map((model) => (
+                            <tr key={model}>
+                              <td className='px-4 py-2 font-medium text-foreground'>
+                                {model}
+                              </td>
+                              <td className='px-4 py-2 text-right'>
+                                <Button
+                                  color='primary'
+                                  size='sm'
+                                  onPress={() => onConfigureModel?.(model)}
+                                >
+                                  {t('配置')}
+                                </Button>
+                              </td>
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  ) : (
+                    <EmptyState
+                      description={
+                        searchKeyword
+                          ? t('未找到匹配的模型')
+                          : t('暂无缺失模型')
+                      }
+                    />
+                  )}
+
+                  <Pager
+                    current={currentPage}
+                    pageSize={MODEL_TABLE_PAGE_SIZE}
+                    total={filteredModels.length}
+                    onChange={(p) => setCurrentPage(p)}
+                    t={t}
                   />
-                }
-                description={
-                  searchKeyword ? t('未找到匹配的模型') : t('暂无缺失模型')
-                }
-                style={{ padding: 20 }}
-              />
-            )}
-          </div>
-        )}
-      </Spin>
+                </>
+              )}
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/models/modals/PrefillGroupManagement.jsx b/web/src/components/table/models/modals/PrefillGroupManagement.jsx
index 59ba1c787a5..555a6268324 100644
--- a/web/src/components/table/models/modals/PrefillGroupManagement.jsx
+++ b/web/src/components/table/models/modals/PrefillGroupManagement.jsx
@@ -17,24 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useEffect } from 'react';
-import {
-  SideSheet,
-  Button,
-  Typography,
-  Space,
-  Tag,
-  Popconfirm,
-  Card,
-  Avatar,
-  Spin,
-  Empty,
-} from '@douyinfe/semi-ui';
-import { IconPlus, IconLayers } from '@douyinfe/semi-icons';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Spinner } from '@heroui/react';
+import { Inbox, Layers, Plus, X } from 'lucide-react';
 import {
   API,
   showError,
@@ -45,13 +30,12 @@ import { useTranslation } from 'react-i18next';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import CardTable from '../../../common/ui/CardTable';
 import EditPrefillGroupModal from './EditPrefillGroupModal';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 import {
   renderLimitedItems,
   renderDescription,
 } from '../../../common/ui/RenderUtils';
 
-const { Text, Title } = Typography;
-
 const PrefillGroupManagement = ({ visible, onClose }) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
@@ -59,6 +43,7 @@ const PrefillGroupManagement = ({ visible, onClose }) => {
   const [groups, setGroups] = useState([]);
   const [showEdit, setShowEdit] = useState(false);
   const [editingGroup, setEditingGroup] = useState({ id: undefined });
+  const [pendingDelete, setPendingDelete] = useState(null);
 
   const typeOptions = [
     { label: t('模型组'), value: 'model' },
@@ -66,71 +51,86 @@ const PrefillGroupManagement = ({ visible, onClose }) => {
     { label: t('端点组'), value: 'endpoint' },
   ];
 
-  // 加载组列表
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') onClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [visible, onClose]);
+
   const loadGroups = async () => {
     setLoading(true);
     try {
       const res = await API.get('/api/prefill_group');
-      if (res.data.success) {
+      if (res.data?.success) {
         setGroups(res.data.data || []);
       } else {
-        showError(res.data.message || t('获取组列表失败'));
+        showError(res.data?.message || t('获取组列表失败'));
       }
     } catch (error) {
       showError(t('获取组列表失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
-  // 删除组
   const deleteGroup = async (id) => {
     try {
       const res = await API.delete(`/api/prefill_group/${id}`);
-      if (res.data.success) {
+      if (res.data?.success) {
         showSuccess(t('删除成功'));
         loadGroups();
       } else {
-        showError(res.data.message || t('删除失败'));
+        showError(res.data?.message || t('删除失败'));
       }
     } catch (error) {
       showError(t('删除失败'));
     }
   };
 
-  // 编辑组
   const handleEdit = (group = {}) => {
     setEditingGroup(group);
     setShowEdit(true);
   };
 
-  // 关闭编辑
   const closeEdit = () => {
     setShowEdit(false);
-    setTimeout(() => {
-      setEditingGroup({ id: undefined });
-    }, 300);
+    setTimeout(() => setEditingGroup({ id: undefined }), 300);
   };
 
-  // 编辑成功回调
   const handleEditSuccess = () => {
     closeEdit();
     loadGroups();
   };
 
-  // 表格列定义
+  const renderItemTag = (text, key) => (
+    <span
+      key={key}
+      className='inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium'
+      style={{
+        backgroundColor: `${stringToColor(text)}1A`,
+        color: stringToColor(text),
+      }}
+    >
+      {text}
+    </span>
+  );
+
   const columns = [
     {
       title: t('组名'),
       dataIndex: 'name',
       key: 'name',
       render: (text, record) => (
-        <Space>
-          <Text strong>{text}</Text>
-          <Tag color='white' shape='circle' size='small'>
+        <div className='flex flex-wrap items-center gap-2'>
+          <span className='text-sm font-semibold text-foreground'>{text}</span>
+          <span className='inline-flex items-center rounded-full border border-[color:var(--app-border)] px-2 py-0.5 text-[11px] font-medium text-muted'>
             {typeOptions.find((opt) => opt.value === record.type)?.label ||
               record.type}
-          </Tag>
-        </Space>
+          </span>
+        </div>
       ),
     },
     {
@@ -151,44 +151,27 @@ const PrefillGroupManagement = ({ visible, onClose }) => {
                 ? JSON.parse(items || '{}')
                 : items || {};
             const keys = Object.keys(obj);
-            if (keys.length === 0)
-              return <Text type='tertiary'>{t('暂无项目')}</Text>;
+            if (keys.length === 0) {
+              return <span className='text-sm text-muted'>{t('暂无项目')}</span>;
+            }
             return renderLimitedItems({
               items: keys,
-              renderItem: (key, idx) => (
-                <Tag
-                  key={idx}
-                  size='small'
-                  shape='circle'
-                  color={stringToColor(key)}
-                >
-                  {key}
-                </Tag>
-              ),
+              renderItem: (key, idx) => renderItemTag(key, idx),
               maxDisplay: 3,
             });
           }
           const itemsArray =
             typeof items === 'string' ? JSON.parse(items) : items;
           if (!Array.isArray(itemsArray) || itemsArray.length === 0) {
-            return <Text type='tertiary'>{t('暂无项目')}</Text>;
+            return <span className='text-sm text-muted'>{t('暂无项目')}</span>;
           }
           return renderLimitedItems({
             items: itemsArray,
-            renderItem: (item, idx) => (
-              <Tag
-                key={idx}
-                size='small'
-                shape='circle'
-                color={stringToColor(item)}
-              >
-                {item}
-              </Tag>
-            ),
+            renderItem: (item, idx) => renderItemTag(item, idx),
             maxDisplay: 3,
           });
         } catch {
-          return <Text type='tertiary'>{t('数据格式错误')}</Text>;
+          return <span className='text-sm text-muted'>{t('数据格式错误')}</span>;
         }
       },
     },
@@ -198,75 +181,94 @@ const PrefillGroupManagement = ({ visible, onClose }) => {
       fixed: 'right',
       width: 140,
       render: (_, record) => (
-        <Space>
-          <Button size='small' onClick={() => handleEdit(record)}>
+        <div className='flex items-center gap-2'>
+          <Button size='sm' variant='flat' onPress={() => handleEdit(record)}>
             {t('编辑')}
           </Button>
-          <Popconfirm
-            title={t('确定删除此组？')}
-            onConfirm={() => deleteGroup(record.id)}
+          <Button
+            size='sm'
+            color='danger'
+            variant='flat'
+            onPress={() => setPendingDelete(record)}
           >
-            <Button size='small' type='danger'>
-              {t('删除')}
-            </Button>
-          </Popconfirm>
-        </Space>
+            {t('删除')}
+          </Button>
+        </div>
       ),
     },
   ];
 
-  useEffect(() => {
-    if (visible) {
-      loadGroups();
-    }
-  }, [visible]);
-
   return (
     <>
-      <SideSheet
-        placement='left'
-        title={
-          <Space>
-            <Tag color='blue' shape='circle'>
+      <div
+        aria-hidden={!visible}
+        onClick={onClose}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!visible}
+        style={{ width: isMobile ? '100%' : 800 }}
+        className={`fixed bottom-0 left-0 top-0 z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          visible ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-[color:var(--app-border)] px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <span className='inline-flex items-center rounded-full bg-sky-100 px-2 py-0.5 text-[11px] font-semibold text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'>
               {t('管理')}
-            </Tag>
-            <Title heading={4} className='m-0'>
+            </span>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
               {t('预填组管理')}
-            </Title>
-          </Space>
-        }
-        visible={visible}
-        onCancel={onClose}
-        width={isMobile ? '100%' : 800}
-        bodyStyle={{ padding: '0' }}
-        closeIcon={null}
-      >
-        <Spin spinning={loading}>
-          <div className='p-2'>
-            <Card className='!rounded-2xl shadow-sm border-0'>
-              <div className='flex items-center mb-2'>
-                <Avatar size='small' color='blue' className='mr-2 shadow-md'>
-                  <IconLayers size={16} />
-                </Avatar>
+            </h4>
+          </div>
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={onClose}
+          >
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='flex-1 overflow-y-auto p-3'>
+          <Card className='!rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-600 dark:bg-sky-950/40 dark:text-sky-300'>
+                  <Layers size={16} />
+                </div>
                 <div>
-                  <Text className='text-lg font-medium'>{t('组列表')}</Text>
-                  <div className='text-xs text-gray-600'>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('组列表')}
+                  </div>
+                  <div className='text-xs text-muted'>
                     {t('管理模型、标签、端点等预填组')}
                   </div>
                 </div>
               </div>
-              <div className='flex justify-end mb-4'>
+
+              <div className='flex justify-end'>
                 <Button
-                  type='primary'
-                  theme='solid'
-                  size='small'
-                  icon={<IconPlus />}
-                  onClick={() => handleEdit()}
+                  color='primary'
+                  size='sm'
+                  startContent={<Plus size={14} />}
+                  onPress={() => handleEdit()}
                 >
                   {t('新建组')}
                 </Button>
               </div>
-              {groups.length > 0 ? (
+
+              {loading ? (
+                <div className='flex items-center justify-center py-10'>
+                  <Spinner />
+                </div>
+              ) : groups.length > 0 ? (
                 <CardTable
                   columns={columns}
                   dataSource={groups}
@@ -276,31 +278,40 @@ const PrefillGroupManagement = ({ visible, onClose }) => {
                   scroll={{ x: 'max-content' }}
                 />
               ) : (
-                <Empty
-                  image={
-                    <IllustrationNoResult style={{ width: 150, height: 150 }} />
-                  }
-                  darkModeImage={
-                    <IllustrationNoResultDark
-                      style={{ width: 150, height: 150 }}
-                    />
-                  }
-                  description={t('暂无预填组')}
-                  style={{ padding: 30 }}
-                />
+                <div className='flex flex-col items-center gap-3 py-10 text-center text-sm text-muted'>
+                  <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                    <Inbox size={28} />
+                  </div>
+                  <div>{t('暂无预填组')}</div>
+                </div>
               )}
-            </Card>
-          </div>
-        </Spin>
-      </SideSheet>
+            </Card.Content>
+          </Card>
+        </div>
+      </aside>
 
-      {/* 编辑组件 */}
       <EditPrefillGroupModal
         visible={showEdit}
         onClose={closeEdit}
         editingGroup={editingGroup}
         onSuccess={handleEditSuccess}
       />
+
+      <ConfirmDialog
+        visible={!!pendingDelete}
+        title={t('确认删除')}
+        cancelText={t('取消')}
+        confirmText={t('删除')}
+        danger
+        onCancel={() => setPendingDelete(null)}
+        onConfirm={() => {
+          const target = pendingDelete;
+          setPendingDelete(null);
+          if (target?.id) deleteGroup(target.id);
+        }}
+      >
+        {t('确定删除此组？')}
+      </ConfirmDialog>
     </>
   );
 };
diff --git a/web/src/components/table/models/modals/SyncWizardModal.jsx b/web/src/components/table/models/modals/SyncWizardModal.jsx
index 5b80952c99e..aa69cb71849 100644
--- a/web/src/components/table/models/modals/SyncWizardModal.jsx
+++ b/web/src/components/table/models/modals/SyncWizardModal.jsx
@@ -18,14 +18,94 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Modal, RadioGroup, Radio, Steps, Button } from '@douyinfe/semi-ui';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+import {
+  Button,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+
+const STEPS = (t) => [
+  { title: t('选择方式'), description: t('选择同步来源') },
+  { title: t('选择语言'), description: t('选择同步语言') },
+];
+
+function StepsBar({ current, t }) {
+  const items = STEPS(t);
+  return (
+    <div className='flex items-center'>
+      {items.map((item, idx) => {
+        const active = idx <= current;
+        const isCurrent = idx === current;
+        return (
+          <React.Fragment key={item.title}>
+            <div className='flex flex-1 items-center gap-2 sm:flex-none'>
+              <div
+                className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full border text-sm font-semibold ${
+                  active
+                    ? 'border-primary bg-primary text-white'
+                    : 'border-[color:var(--app-border)] text-muted'
+                }`}
+              >
+                {idx + 1}
+              </div>
+              <div className='min-w-0'>
+                <div
+                  className={`text-sm font-medium ${
+                    isCurrent ? 'text-foreground' : 'text-muted'
+                  }`}
+                >
+                  {item.title}
+                </div>
+                <div className='text-xs leading-tight text-muted'>
+                  {item.description}
+                </div>
+              </div>
+            </div>
+            {idx < items.length - 1 ? (
+              <div
+                className={`mx-3 h-px flex-1 ${
+                  idx < current ? 'bg-primary' : 'bg-[color:var(--app-border)]'
+                }`}
+              />
+            ) : null}
+          </React.Fragment>
+        );
+      })}
+    </div>
+  );
+}
+
+function RadioCard({ value, current, onChange, label, extra, disabled }) {
+  const selected = current === value;
+  return (
+    <button
+      type='button'
+      role='radio'
+      aria-checked={selected}
+      disabled={disabled}
+      onClick={() => onChange(value)}
+      className={`group flex min-w-[7rem] flex-1 flex-col items-center gap-1 rounded-xl border px-4 py-3 text-sm transition disabled:cursor-not-allowed disabled:opacity-50 ${
+        selected
+          ? 'border-primary bg-primary/5 text-foreground shadow-sm'
+          : 'border-[color:var(--app-border)] bg-[color:var(--app-background)] text-foreground hover:border-primary/40'
+      }`}
+    >
+      <span className='font-medium'>{label}</span>
+      {extra ? <span className='text-xs text-muted'>{extra}</span> : null}
+    </button>
+  );
+}
 
 const SyncWizardModal = ({ visible, onClose, onConfirm, loading, t }) => {
   const [step, setStep] = useState(0);
   const [option, setOption] = useState('official');
   const [locale, setLocale] = useState('zh-CN');
-  const isMobile = useIsMobile();
 
   useEffect(() => {
     if (visible) {
@@ -35,99 +115,123 @@ const SyncWizardModal = ({ visible, onClose, onConfirm, loading, t }) => {
     }
   }, [visible]);
 
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onClose?.();
+    },
+  });
+
   return (
-    <Modal
-      title={t('同步向导')}
-      visible={visible}
-      onCancel={onClose}
-      footer={
-        <div className='flex justify-end'>
-          {step === 1 && (
-            <Button onClick={() => setStep(0)}>{t('上一步')}</Button>
-          )}
-          <Button onClick={onClose}>{t('取消')}</Button>
-          {step === 0 && (
-            <Button
-              type='primary'
-              onClick={() => setStep(1)}
-              disabled={option !== 'official'}
-            >
-              {t('下一步')}
-            </Button>
-          )}
-          {step === 1 && (
-            <Button
-              type='primary'
-              theme='solid'
-              loading={loading}
-              onClick={async () => {
-                await onConfirm?.({ option, locale });
-              }}
-            >
-              {t('开始同步')}
-            </Button>
-          )}
-        </div>
-      }
-      width={isMobile ? '100%' : 'small'}
-    >
-      <div className='mb-3'>
-        <Steps type='basic' current={step} size='small'>
-          <Steps.Step title={t('选择方式')} description={t('选择同步来源')} />
-          <Steps.Step title={t('选择语言')} description={t('选择同步语言')} />
-        </Steps>
-      </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='md' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('同步向导')}
+            </ModalHeader>
+            <ModalBody className='space-y-5 px-6 py-5'>
+              <StepsBar current={step} t={t} />
 
-      {step === 0 && (
-        <div className='mt-2 flex justify-center'>
-          <RadioGroup
-            value={option}
-            onChange={(e) => setOption(e?.target?.value ?? e)}
-            type='card'
-            direction='horizontal'
-            aria-label='同步方式选择'
-            name='sync-mode-selection'
-          >
-            <Radio value='official' extra={t('从官方模型库同步')}>
-              {t('官方模型同步')}
-            </Radio>
-            <Radio value='config' extra={t('从配置文件同步')} disabled>
-              {t('配置文件同步')}
-            </Radio>
-          </RadioGroup>
-        </div>
-      )}
+              {step === 0 && (
+                <div
+                  role='radiogroup'
+                  aria-label={t('同步方式选择')}
+                  className='flex flex-wrap justify-center gap-3'
+                >
+                  <RadioCard
+                    value='official'
+                    current={option}
+                    onChange={setOption}
+                    label={t('官方模型同步')}
+                    extra={t('从官方模型库同步')}
+                  />
+                  <RadioCard
+                    value='config'
+                    current={option}
+                    onChange={setOption}
+                    label={t('配置文件同步')}
+                    extra={t('从配置文件同步')}
+                    disabled
+                  />
+                </div>
+              )}
 
-      {step === 1 && (
-        <div className='mt-2'>
-          <div className='mb-2 text-[var(--semi-color-text-2)]'>
-            {t('请选择同步语言')}
-          </div>
-          <div className='flex justify-center'>
-            <RadioGroup
-              value={locale}
-              onChange={(e) => setLocale(e?.target?.value ?? e)}
-              type='card'
-              direction='horizontal'
-              aria-label='语言选择'
-              name='sync-locale-selection'
-            >
-              <Radio value='en' extra='English'>
-                en
-              </Radio>
-              <Radio value='zh-CN' extra='简体中文'>
-                zh-CN
-              </Radio>
-              <Radio value='zh-TW' extra='繁體中文'>
-                zh-TW
-              </Radio>
-              <Radio value='ja' extra='日本語'>
-                ja
-              </Radio>
-            </RadioGroup>
-          </div>
-        </div>
-      )}
+              {step === 1 && (
+                <div className='space-y-3'>
+                  <div className='text-sm text-muted'>
+                    {t('请选择同步语言')}
+                  </div>
+                  <div
+                    role='radiogroup'
+                    aria-label={t('语言选择')}
+                    className='flex flex-wrap justify-center gap-3'
+                  >
+                    <RadioCard
+                      value='en'
+                      current={locale}
+                      onChange={setLocale}
+                      label='en'
+                      extra='English'
+                    />
+                    <RadioCard
+                      value='zh-CN'
+                      current={locale}
+                      onChange={setLocale}
+                      label='zh-CN'
+                      extra='简体中文'
+                    />
+                    <RadioCard
+                      value='zh-TW'
+                      current={locale}
+                      onChange={setLocale}
+                      label='zh-TW'
+                      extra='繁體中文'
+                    />
+                    <RadioCard
+                      value='ja'
+                      current={locale}
+                      onChange={setLocale}
+                      label='ja'
+                      extra='日本語'
+                    />
+                  </div>
+                </div>
+              )}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              {step === 1 && (
+                <Button variant='light' onPress={() => setStep(0)}>
+                  {t('上一步')}
+                </Button>
+              )}
+              <Button variant='light' onPress={onClose}>
+                {t('取消')}
+              </Button>
+              {step === 0 && (
+                <Button
+                  color='primary'
+                  onPress={() => setStep(1)}
+                  isDisabled={option !== 'official'}
+                >
+                  {t('下一步')}
+                </Button>
+              )}
+              {step === 1 && (
+                <Button
+                  color='primary'
+                  isPending={loading}
+                  onPress={async () => {
+                    await onConfirm?.({ option, locale });
+                  }}
+                >
+                  {t('开始同步')}
+                </Button>
+              )}
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/models/modals/UpstreamConflictModal.jsx b/web/src/components/table/models/modals/UpstreamConflictModal.jsx
index 3993f6dc7a8..c1b843da105 100644
--- a/web/src/components/table/models/modals/UpstreamConflictModal.jsx
+++ b/web/src/components/table/models/modals/UpstreamConflictModal.jsx
@@ -17,23 +17,28 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useMemo, useState, useCallback } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useState,
+  useCallback,
+  useRef,
+} from 'react';
 import {
-  Modal,
-  Table,
-  Checkbox,
-  Typography,
-  Empty,
-  Tag,
-  Popover,
+  Button,
   Input,
-} from '@douyinfe/semi-ui';
-import { MousePointerClick } from 'lucide-react';
-import { useIsMobile } from '../../../../hooks/common/useIsMobile';
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Inbox, MousePointerClick, Search } from 'lucide-react';
+import HoverPanel from '@/components/common/ui/HoverPanel';
 import { MODEL_TABLE_PAGE_SIZE } from '../../../../constants';
-import { IconSearch } from '@douyinfe/semi-icons';
-
-const { Text } = Typography;
 
 const FIELD_LABELS = {
   description: '描述',
@@ -45,6 +50,52 @@ const FIELD_LABELS = {
 };
 const FIELD_KEYS = Object.keys(FIELD_LABELS);
 
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
+
+function Pager({ current, pageSize, total, onChange, t }) {
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  if (totalPages <= 1) return null;
+  return (
+    <div className='mt-2 flex items-center justify-end gap-2 text-sm text-muted'>
+      <span>{t('共 {{total}} 条', { total })}</span>
+      <Button
+        size='sm'
+        variant='light'
+        isDisabled={current <= 1}
+        onPress={() => onChange(current - 1)}
+      >
+        {t('上一页')}
+      </Button>
+      <span>
+        {current} / {totalPages}
+      </span>
+      <Button
+        size='sm'
+        variant='light'
+        isDisabled={current >= totalPages}
+        onPress={() => onChange(current + 1)}
+      >
+        {t('下一页')}
+      </Button>
+    </div>
+  );
+}
+
 const UpstreamConflictModal = ({
   visible,
   onClose,
@@ -54,7 +105,6 @@ const UpstreamConflictModal = ({
   loading = false,
 }) => {
   const [selections, setSelections] = useState({});
-  const isMobile = useIsMobile();
   const [currentPage, setCurrentPage] = useState(1);
   const [searchKeyword, setSearchKeyword] = useState('');
 
@@ -93,7 +143,6 @@ const UpstreamConflictModal = ({
     });
   }, []);
 
-  // 构造数据源与过滤后的数据源
   const dataSource = useMemo(
     () =>
       (conflicts || []).map((c) => ({
@@ -112,7 +161,6 @@ const UpstreamConflictModal = ({
     );
   }, [dataSource, searchKeyword]);
 
-  // 列头工具：当前过滤范围内可操作的行集合/勾选状态/批量设置
   const getPresentRowsForField = useCallback(
     (fieldKey) =>
       (filteredDataSource || []).filter((row) =>
@@ -153,96 +201,7 @@ const UpstreamConflictModal = ({
     [getPresentRowsForField],
   );
 
-  const columns = useMemo(() => {
-    const base = [
-      {
-        title: t('模型'),
-        dataIndex: 'model_name',
-        fixed: 'left',
-        render: (text) => <Text strong>{text}</Text>,
-      },
-    ];
-
-    const cols = FIELD_KEYS.map((fieldKey) => {
-      const rawLabel = FIELD_LABELS[fieldKey] || fieldKey;
-      const label = t(rawLabel);
-
-      const { headerChecked, headerIndeterminate, hasAny } =
-        getHeaderState(fieldKey);
-      if (!hasAny) return null;
-      const onHeaderChange = (e) =>
-        applyHeaderChange(fieldKey, e?.target?.checked);
-
-      return {
-        title: (
-          <div className='flex items-center gap-2'>
-            <Checkbox
-              checked={headerChecked}
-              indeterminate={headerIndeterminate}
-              onChange={onHeaderChange}
-            />
-            <Text>{label}</Text>
-          </div>
-        ),
-        dataIndex: fieldKey,
-        render: (_, record) => {
-          const f = (record.fields || []).find((x) => x.field === fieldKey);
-          if (!f) return <Text type='tertiary'>-</Text>;
-          const checked = selections[record.model_name]?.has(fieldKey) || false;
-          return (
-            <Checkbox
-              checked={checked}
-              onChange={(e) =>
-                toggleField(record.model_name, fieldKey, e?.target?.checked)
-              }
-            >
-              <Popover
-                trigger='hover'
-                position='top'
-                content={
-                  <div className='p-2 max-w-[520px]'>
-                    <div className='mb-2'>
-                      <Text type='tertiary' size='small'>
-                        {t('本地')}
-                      </Text>
-                      <pre className='whitespace-pre-wrap m-0'>
-                        {formatValue(f.local)}
-                      </pre>
-                    </div>
-                    <div>
-                      <Text type='tertiary' size='small'>
-                        {t('官方')}
-                      </Text>
-                      <pre className='whitespace-pre-wrap m-0'>
-                        {formatValue(f.upstream)}
-                      </pre>
-                    </div>
-                  </div>
-                }
-              >
-                <Tag
-                  color='white'
-                  size='small'
-                  prefixIcon={<MousePointerClick size={14} />}
-                >
-                  {t('点击查看差异')}
-                </Tag>
-              </Popover>
-            </Checkbox>
-          );
-        },
-      };
-    });
-
-    return [...base, ...cols.filter(Boolean)];
-  }, [
-    t,
-    selections,
-    filteredDataSource,
-    getHeaderState,
-    applyHeaderChange,
-    toggleField,
-  ]);
+  const visibleFields = FIELD_KEYS.filter((key) => getHeaderState(key).hasAny);
 
   const pagedDataSource = useMemo(() => {
     const start = (currentPage - 1) * MODEL_TABLE_PAGE_SIZE;
@@ -257,66 +216,200 @@ const UpstreamConflictModal = ({
         fields: Array.from(set || []),
       }))
       .filter((x) => x.fields.length > 0);
-
     const ok = await onSubmit?.(payload);
     if (ok) onClose?.();
   };
 
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onClose?.();
+    },
+  });
+
   return (
-    <Modal
-      title={t('选择要覆盖的冲突项')}
-      visible={visible}
-      onCancel={onClose}
-      onOk={handleOk}
-      confirmLoading={loading}
-      okText={t('应用覆盖')}
-      cancelText={t('取消')}
-      width={isMobile ? '100%' : 1000}
-    >
-      {dataSource.length === 0 ? (
-        <Empty description={t('无冲突项')} className='p-6' />
-      ) : (
-        <>
-          <div className='mb-3 text-[var(--semi-color-text-2)]'>
-            {t('仅会覆盖你勾选的字段，未勾选的字段保持本地不变。')}
-          </div>
-          {/* 搜索框 */}
-          <div className='flex items-center justify-end gap-2 w-full mb-4'>
-            <Input
-              placeholder={t('搜索模型...')}
-              value={searchKeyword}
-              onChange={(v) => {
-                setSearchKeyword(v);
-                setCurrentPage(1);
-              }}
-              className='!w-full'
-              prefix={<IconSearch />}
-              showClear
-            />
-          </div>
-          {filteredDataSource.length > 0 ? (
-            <Table
-              columns={columns}
-              dataSource={pagedDataSource}
-              pagination={{
-                currentPage: currentPage,
-                pageSize: MODEL_TABLE_PAGE_SIZE,
-                total: filteredDataSource.length,
-                showSizeChanger: false,
-                onPageChange: (page) => setCurrentPage(page),
-              }}
-              scroll={{ x: 'max-content' }}
-            />
-          ) : (
-            <Empty
-              description={
-                searchKeyword ? t('未找到匹配的模型') : t('无冲突项')
-              }
-              className='p-6'
-            />
-          )}
-        </>
-      )}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='xl' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('选择要覆盖的冲突项')}
+            </ModalHeader>
+            <ModalBody className='space-y-3 px-6 py-5'>
+              {dataSource.length === 0 ? (
+                <div className='flex flex-col items-center gap-3 py-10 text-center text-sm text-muted'>
+                  <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                    <Inbox size={28} />
+                  </div>
+                  <div>{t('无冲突项')}</div>
+                </div>
+              ) : (
+                <>
+                  <div className='text-xs text-muted'>
+                    {t('仅会覆盖你勾选的字段，未勾选的字段保持本地不变。')}
+                  </div>
+
+                  <div className='relative'>
+                    <Search
+                      size={14}
+                      className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+                    />
+                    <Input
+                      type='text'
+                      placeholder={t('搜索模型...')}
+                      value={searchKeyword}
+                      onChange={(event) => {
+                        setSearchKeyword(event.target.value);
+                        setCurrentPage(1);
+                      }}
+                      aria-label={t('搜索模型')}
+                      className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background pl-9 pr-3 text-sm text-foreground outline-none transition focus:border-primary'
+                    />
+                  </div>
+
+                  {filteredDataSource.length === 0 ? (
+                    <div className='flex flex-col items-center gap-3 py-10 text-center text-sm text-muted'>
+                      <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                        <Inbox size={28} />
+                      </div>
+                      <div>{t('未找到匹配的模型')}</div>
+                    </div>
+                  ) : (
+                    <div className='overflow-x-auto rounded-xl border border-[color:var(--app-border)]'>
+                      <table className='w-full text-sm'>
+                        <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+                          <tr>
+                            <th className='sticky left-0 z-10 bg-[color:var(--app-background)] px-3 py-2 text-left font-semibold'>
+                              {t('模型')}
+                            </th>
+                            {visibleFields.map((fieldKey) => {
+                              const { headerChecked, headerIndeterminate } =
+                                getHeaderState(fieldKey);
+                              return (
+                                <th
+                                  key={fieldKey}
+                                  className='whitespace-nowrap px-3 py-2 text-left font-semibold'
+                                >
+                                  <span className='inline-flex items-center gap-2'>
+                                    <HeaderCheckbox
+                                      checked={headerChecked}
+                                      indeterminate={headerIndeterminate}
+                                      onChange={(checked) =>
+                                        applyHeaderChange(fieldKey, checked)
+                                      }
+                                      ariaLabel={t(FIELD_LABELS[fieldKey])}
+                                    />
+                                    <span>{t(FIELD_LABELS[fieldKey])}</span>
+                                  </span>
+                                </th>
+                              );
+                            })}
+                          </tr>
+                        </thead>
+                        <tbody className='divide-y divide-[color:var(--app-border)]'>
+                          {pagedDataSource.map((record) => (
+                            <tr key={record.key}>
+                              <td className='sticky left-0 z-10 bg-background px-3 py-2 font-semibold text-foreground'>
+                                {record.model_name}
+                              </td>
+                              {visibleFields.map((fieldKey) => {
+                                const f = (record.fields || []).find(
+                                  (x) => x.field === fieldKey,
+                                );
+                                if (!f) {
+                                  return (
+                                    <td
+                                      key={fieldKey}
+                                      className='px-3 py-2 text-muted'
+                                    >
+                                      -
+                                    </td>
+                                  );
+                                }
+                                const checked =
+                                  selections[record.model_name]?.has(
+                                    fieldKey,
+                                  ) || false;
+                                return (
+                                  <td key={fieldKey} className='px-3 py-2'>
+                                    <label className='inline-flex cursor-pointer items-center gap-2'>
+                                      <input
+                                        type='checkbox'
+                                        checked={checked}
+                                        onChange={(event) =>
+                                          toggleField(
+                                            record.model_name,
+                                            fieldKey,
+                                            event.target.checked,
+                                          )
+                                        }
+                                        className='h-3.5 w-3.5 accent-primary'
+                                      />
+                                      <HoverPanel
+                                        placement='top'
+                                        panelClassName='max-w-[480px]'
+                                        content={
+                                          <div className='space-y-2'>
+                                            <div>
+                                              <div className='text-[11px] uppercase text-muted'>
+                                                {t('本地')}
+                                              </div>
+                                              <pre className='m-0 whitespace-pre-wrap text-xs text-foreground'>
+                                                {formatValue(f.local)}
+                                              </pre>
+                                            </div>
+                                            <div>
+                                              <div className='text-[11px] uppercase text-muted'>
+                                                {t('官方')}
+                                              </div>
+                                              <pre className='m-0 whitespace-pre-wrap text-xs text-foreground'>
+                                                {formatValue(f.upstream)}
+                                              </pre>
+                                            </div>
+                                          </div>
+                                        }
+                                      >
+                                        <span className='inline-flex items-center gap-1 rounded-full border border-[color:var(--app-border)] bg-background px-2 py-0.5 text-xs text-foreground'>
+                                          <MousePointerClick size={11} />
+                                          {t('点击查看差异')}
+                                        </span>
+                                      </HoverPanel>
+                                    </label>
+                                  </td>
+                                );
+                              })}
+                            </tr>
+                          ))}
+                        </tbody>
+                      </table>
+                    </div>
+                  )}
+
+                  <Pager
+                    current={currentPage}
+                    pageSize={MODEL_TABLE_PAGE_SIZE}
+                    total={filteredDataSource.length}
+                    onChange={setCurrentPage}
+                    t={t}
+                  />
+                </>
+              )}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={onClose}>
+                {t('取消')}
+              </Button>
+              <Button
+                color='primary'
+                onPress={handleOk}
+                isPending={loading}
+              >
+                {t('应用覆盖')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/redemptions/RedemptionsActions.jsx b/web/src/components/table/redemptions/RedemptionsActions.jsx
index f8133b0d52c..de4a0a53444 100644
--- a/web/src/components/table/redemptions/RedemptionsActions.jsx
+++ b/web/src/components/table/redemptions/RedemptionsActions.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 
 const RedemptionsActions = ({
   selectedKeys,
@@ -39,28 +39,28 @@ const RedemptionsActions = ({
   return (
     <div className='flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1'>
       <Button
-        type='primary'
+        variant='primary'
         className='flex-1 md:flex-initial'
-        onClick={handleAddRedemption}
-        size='small'
+        onPress={handleAddRedemption}
+        size='sm'
       >
         {t('添加兑换码')}
       </Button>
 
       <Button
-        type='tertiary'
+        variant='outline'
         className='flex-1 md:flex-initial'
-        onClick={batchCopyRedemptions}
-        size='small'
+        onPress={batchCopyRedemptions}
+        size='sm'
       >
         {t('复制所选兑换码到剪贴板')}
       </Button>
 
       <Button
-        type='danger'
+        variant='danger-soft'
         className='w-full md:w-auto'
-        onClick={batchDeleteRedemptions}
-        size='small'
+        onPress={batchDeleteRedemptions}
+        size='sm'
       >
         {t('清除失效兑换码')}
       </Button>
diff --git a/web/src/components/table/redemptions/RedemptionsColumnDefs.jsx b/web/src/components/table/redemptions/RedemptionsColumnDefs.jsx
index efe1114c528..e77aa0c2e6a 100644
--- a/web/src/components/table/redemptions/RedemptionsColumnDefs.jsx
+++ b/web/src/components/table/redemptions/RedemptionsColumnDefs.jsx
@@ -18,8 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Tag, Button, Space, Popover, Dropdown } from '@douyinfe/semi-ui';
-import { IconMore } from '@douyinfe/semi-icons';
+import { Button, Chip, Tooltip } from '@heroui/react';
 import { renderQuota, timestamp2string } from '../../../helpers';
 import {
   REDEMPTION_STATUS,
@@ -51,28 +50,41 @@ const renderTimestamp = (timestamp) => {
 const renderStatus = (status, record, t) => {
   if (isExpired(record)) {
     return (
-      <Tag color='orange' shape='circle'>
+      <Chip color='warning' size='sm' variant='flat'>
         {t('已过期')}
-      </Tag>
+      </Chip>
     );
   }
 
   const statusConfig = REDEMPTION_STATUS_MAP[status];
   if (statusConfig) {
     return (
-      <Tag color={statusConfig.color} shape='circle'>
+      <Chip color={toChipColor(statusConfig.color)} size='sm' variant='flat'>
         {t(statusConfig.text)}
-      </Tag>
+      </Chip>
     );
   }
 
   return (
-    <Tag color='black' shape='circle'>
+    <Chip size='sm' variant='flat'>
       {t('未知状态')}
-    </Tag>
+    </Chip>
   );
 };
 
+const toChipColor = (color) => {
+  const map = {
+    green: 'success',
+    red: 'danger',
+    orange: 'warning',
+    yellow: 'warning',
+    blue: 'primary',
+    grey: 'default',
+    black: 'default',
+  };
+  return map[color] || 'default';
+};
+
 /**
  * Get redemption code table column definitions
  */
@@ -110,9 +122,9 @@ export const getRedemptionsColumns = ({
       render: (text) => {
         return (
           <div>
-            <Tag color='grey' shape='circle'>
+            <Chip size='sm' variant='flat'>
               {renderQuota(parseInt(text))}
-            </Tag>
+            </Chip>
           </div>
         );
       },
@@ -144,77 +156,67 @@ export const getRedemptionsColumns = ({
       fixed: 'right',
       width: 205,
       render: (text, record) => {
-        // Create dropdown menu items for more operations
-        const moreMenuItems = [
-          {
-            node: 'item',
-            name: t('删除'),
-            type: 'danger',
-            onClick: () => {
-              showDeleteRedemptionModal(record);
-            },
-          },
-        ];
-
-        if (record.status === REDEMPTION_STATUS.UNUSED && !isExpired(record)) {
-          moreMenuItems.push({
-            node: 'item',
-            name: t('禁用'),
-            type: 'warning',
-            onClick: () => {
-              manageRedemption(record.id, REDEMPTION_ACTIONS.DISABLE, record);
-            },
-          });
-        } else if (!isExpired(record)) {
-          moreMenuItems.push({
-            node: 'item',
-            name: t('启用'),
-            type: 'secondary',
-            onClick: () => {
-              manageRedemption(record.id, REDEMPTION_ACTIONS.ENABLE, record);
-            },
-            disabled: record.status === REDEMPTION_STATUS.USED,
-          });
-        }
+        const canToggle = !isExpired(record);
+        const isUnused = record.status === REDEMPTION_STATUS.UNUSED;
 
         return (
-          <Space>
-            <Popover
+          <div className='flex flex-wrap items-center gap-1.5'>
+            <Tooltip
               content={record.key}
-              style={{ padding: 20 }}
-              position='top'
+              placement='top'
             >
-              <Button type='tertiary' size='small'>
+              <Button variant='flat' size='sm'>
                 {t('查看')}
               </Button>
-            </Popover>
+            </Tooltip>
             <Button
-              size='small'
-              onClick={async () => {
+              size='sm'
+              variant='flat'
+              onPress={async () => {
                 await copyText(record.key);
               }}
             >
               {t('复制')}
             </Button>
             <Button
-              type='tertiary'
-              size='small'
-              onClick={() => {
+              variant='flat'
+              size='sm'
+              onPress={() => {
                 setEditingRedemption(record);
                 setShowEdit(true);
               }}
-              disabled={record.status !== REDEMPTION_STATUS.UNUSED}
+              isDisabled={record.status !== REDEMPTION_STATUS.UNUSED}
             >
               {t('编辑')}
             </Button>
-            <Dropdown
-              trigger='click'
-              position='bottomRight'
-              menu={moreMenuItems}
+            {canToggle ? (
+              <Button
+                size='sm'
+                variant='flat'
+                color={isUnused ? 'warning' : 'primary'}
+                onPress={() =>
+                  manageRedemption(
+                    record.id,
+                    isUnused
+                      ? REDEMPTION_ACTIONS.DISABLE
+                      : REDEMPTION_ACTIONS.ENABLE,
+                    record,
+                  )
+                }
+                isDisabled={!isUnused && record.status === REDEMPTION_STATUS.USED}
+              >
+                {isUnused ? t('禁用') : t('启用')}
+              </Button>
+            ) : null}
+            <Button
+              size='sm'
+              variant='flat'
+              color='danger'
+              onPress={() => showDeleteRedemptionModal(record)}
             >
-              <Button type='tertiary' size='small' icon={<IconMore />} />
-            </Dropdown>
-          </Space>
+              {t('删除')}
+            </Button>
+          </div>
         );
       },
     },
diff --git a/web/src/components/table/redemptions/RedemptionsDescription.jsx b/web/src/components/table/redemptions/RedemptionsDescription.jsx
index bf5af70708e..31e8d643f7e 100644
--- a/web/src/components/table/redemptions/RedemptionsDescription.jsx
+++ b/web/src/components/table/redemptions/RedemptionsDescription.jsx
@@ -18,19 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
-import { Ticket } from 'lucide-react';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 
-const { Text } = Typography;
-
 const RedemptionsDescription = ({ compactMode, setCompactMode, t }) => {
   return (
     <div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full'>
-      <div className='flex items-center text-orange-500'>
-        <Ticket size={16} className='mr-2' />
-        <Text>{t('兑换码管理')}</Text>
-      </div>
+      <span className='text-sm font-medium text-foreground'>
+        {t('兑换码管理')}
+      </span>
 
       <CompactModeToggle
         compactMode={compactMode}
diff --git a/web/src/components/table/redemptions/RedemptionsFilters.jsx b/web/src/components/table/redemptions/RedemptionsFilters.jsx
index 80e5512696f..9adf33dffe3 100644
--- a/web/src/components/table/redemptions/RedemptionsFilters.jsx
+++ b/web/src/components/table/redemptions/RedemptionsFilters.jsx
@@ -17,9 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef } from 'react';
-import { Form, Button } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+import React from 'react';
+import { Button } from '@heroui/react';
+import {
+  FilterInput,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const RedemptionsFilters = ({
   formInitValues,
@@ -29,64 +32,55 @@ const RedemptionsFilters = ({
   searching,
   t,
 }) => {
-  // Handle form reset and immediate search
-  const formApiRef = useRef(null);
+  const { values, setFieldValue, handleSubmit, api } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: searchRedemptions,
+  });
 
   const handleReset = () => {
-    if (!formApiRef.current) return;
-    formApiRef.current.reset();
+    api.reset();
     setTimeout(() => {
       searchRedemptions();
     }, 100);
   };
 
   return (
-    <Form
-      initValues={formInitValues}
-      getFormApi={(api) => {
-        setFormApi(api);
-        formApiRef.current = api;
-      }}
-      onSubmit={searchRedemptions}
-      allowEmpty={true}
+    <form
+      onSubmit={handleSubmit}
       autoComplete='off'
-      layout='horizontal'
-      trigger='change'
-      stopValidateWithError={false}
       className='w-full md:w-auto order-1 md:order-2'
     >
       <div className='flex flex-col md:flex-row items-center gap-2 w-full md:w-auto'>
         <div className='relative w-full md:w-64'>
-          <Form.Input
-            field='searchKeyword'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.searchKeyword}
+            onChange={(value) => setFieldValue('searchKeyword', value)}
             placeholder={t('关键字(id或者名称)')}
-            showClear
-            pure
-            size='small'
           />
         </div>
         <div className='flex gap-2 w-full md:w-auto'>
           <Button
-            type='tertiary'
-            htmlType='submit'
-            loading={loading || searching}
+            type='submit'
+            variant='outline'
+            isPending={loading || searching}
             className='flex-1 md:flex-initial md:w-auto'
-            size='small'
+            size='sm'
           >
             {t('查询')}
           </Button>
           <Button
-            type='tertiary'
-            onClick={handleReset}
+            type='button'
+            variant='outline'
+            onPress={handleReset}
             className='flex-1 md:flex-initial md:w-auto'
-            size='small'
+            size='sm'
           >
             {t('重置')}
           </Button>
         </div>
       </div>
-    </Form>
+    </form>
   );
 };
 
diff --git a/web/src/components/table/redemptions/RedemptionsTable.jsx b/web/src/components/table/redemptions/RedemptionsTable.jsx
index f106b1fcd30..5c1eac316d7 100644
--- a/web/src/components/table/redemptions/RedemptionsTable.jsx
+++ b/web/src/components/table/redemptions/RedemptionsTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo, useState } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getRedemptionsColumns, isExpired } from './RedemptionsColumnDefs';
 import DeleteRedemptionModal from './modals/DeleteRedemptionModal';
 
@@ -114,14 +110,7 @@ const RedemptionsTable = (redemptionsData) => {
         rowSelection={rowSelection}
         onRow={handleRow}
         empty={
-          <Empty
-            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-            darkModeImage={
-              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('搜索无结果')}
-            style={{ padding: 30 }}
-          />
+          <TableEmptyState description={t('搜索无结果')} />
         }
         className='rounded-xl overflow-hidden'
         size='middle'
diff --git a/web/src/components/table/redemptions/modals/DeleteRedemptionModal.jsx b/web/src/components/table/redemptions/modals/DeleteRedemptionModal.jsx
index 9c08413f7e1..20e0f498ff4 100644
--- a/web/src/components/table/redemptions/modals/DeleteRedemptionModal.jsx
+++ b/web/src/components/table/redemptions/modals/DeleteRedemptionModal.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
 import { REDEMPTION_ACTIONS } from '../../../../constants/redemption.constants';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const DeleteRedemptionModal = ({
   visible,
@@ -43,15 +43,16 @@ const DeleteRedemptionModal = ({
   };
 
   return (
-    <Modal
+    <ConfirmDialog
       title={t('确定是否要删除此兑换码？')}
       visible={visible}
       onCancel={onCancel}
-      onOk={handleConfirm}
-      type='warning'
+      onConfirm={handleConfirm}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
     >
       {t('此修改将不可逆')}
-    </Modal>
+    </ConfirmDialog>
   );
 };
 
diff --git a/web/src/components/table/redemptions/modals/EditRedemptionModal.jsx b/web/src/components/table/redemptions/modals/EditRedemptionModal.jsx
index e8352a630bd..5742a7f9e19 100644
--- a/web/src/components/table/redemptions/modals/EditRedemptionModal.jsx
+++ b/web/src/components/table/redemptions/modals/EditRedemptionModal.jsx
@@ -17,7 +17,7 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
   API,
@@ -32,93 +32,179 @@ import {
   displayAmountToQuota,
 } from '../../../../helpers/quota';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
-import {
-  Button,
-  Modal,
-  SideSheet,
-  Space,
-  Spin,
-  Typography,
-  Card,
-  Tag,
-  Form,
-  Avatar,
-  Row,
-  Col,
-  InputNumber,
-} from '@douyinfe/semi-ui';
-import {
-  IconCreditCard,
-  IconSave,
-  IconClose,
-  IconGift,
-} from '@douyinfe/semi-icons';
+import { Button, Card, Input, Spinner } from '@heroui/react';
+import { CreditCard, Gift, Save, X } from 'lucide-react';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
 
-const { Text, Title } = Typography;
+function NumberField({ label, value, onChange, min, step, prefix, helper, error, placeholder }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <div className='flex h-10 items-center overflow-hidden rounded-lg border border-[color:var(--app-border)] bg-background text-sm transition focus-within:border-primary'>
+        {prefix ? (
+          <span className='whitespace-nowrap pl-3 text-muted'>{prefix}</span>
+        ) : null}
+        <input
+          type='number'
+          value={value === '' || value == null ? '' : String(value)}
+          onChange={(event) => {
+            const v = event.target.value;
+            onChange(v === '' ? '' : Number(v));
+          }}
+          min={min}
+          step={step}
+          placeholder={placeholder}
+          aria-label={label}
+          className='h-full min-w-0 flex-1 bg-transparent px-3 text-foreground outline-none'
+        />
+      </div>
+      {error ? (
+        <div className='text-xs text-red-600 dark:text-red-400'>{error}</div>
+      ) : helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function toLocalDateTimeInputValue(date) {
+  if (!date) return '';
+  const pad = (n) => String(n).padStart(2, '0');
+  const y = date.getFullYear();
+  const m = pad(date.getMonth() + 1);
+  const d = pad(date.getDate());
+  const hh = pad(date.getHours());
+  const mm = pad(date.getMinutes());
+  return `${y}-${m}-${d}T${hh}:${mm}`;
+}
 
 const EditRedemptionModal = (props) => {
   const { t } = useTranslation();
   const isEdit = props.editingRedemption.id !== undefined;
-  const [loading, setLoading] = useState(isEdit);
   const isMobile = useIsMobile();
-  const formApiRef = useRef(null);
+
+  const [loading, setLoading] = useState(isEdit);
+  const [submitting, setSubmitting] = useState(false);
   const [showQuotaInput, setShowQuotaInput] = useState(false);
+  const [postCreateConfirm, setPostCreateConfirm] = useState(null);
+  const [errors, setErrors] = useState({});
 
-  const getInitValues = () => ({
+  const [values, setValues] = useState(() => ({
     name: '',
     quota: 100000,
     amount: Number(quotaToDisplayAmount(100000).toFixed(6)),
     count: 1,
     expired_time: null,
-  });
+  }));
+
+  const setField = (key, value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
+
+  const reset = () => {
+    setValues({
+      name: '',
+      quota: 100000,
+      amount: Number(quotaToDisplayAmount(100000).toFixed(6)),
+      count: 1,
+      expired_time: null,
+    });
+    setErrors({});
+  };
 
   const handleCancel = () => {
-    props.handleClose();
+    props.handleClose?.();
   };
 
+  useEffect(() => {
+    if (!props.visiable) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') handleCancel();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.visiable]);
+
   const loadRedemption = async () => {
     setLoading(true);
-    let res = await API.get(`/api/redemption/${props.editingRedemption.id}`);
-    const { success, message, data } = res.data;
-    if (success) {
-      if (data.expired_time === 0) {
-        data.expired_time = null;
+    try {
+      const res = await API.get(
+        `/api/redemption/${props.editingRedemption.id}`,
+      );
+      const { success, message, data } = res.data;
+      if (success) {
+        const expired =
+          data.expired_time === 0 ? null : new Date(data.expired_time * 1000);
+        setValues({
+          name: data.name || '',
+          quota: data.quota || 0,
+          amount: Number(quotaToDisplayAmount(data.quota || 0).toFixed(6)),
+          count: 1,
+          expired_time: expired,
+        });
       } else {
-        data.expired_time = new Date(data.expired_time * 1000);
+        showError(message);
       }
-      data.amount = Number(quotaToDisplayAmount(data.quota || 0).toFixed(6));
-      formApiRef.current?.setValues({ ...getInitValues(), ...data });
-    } else {
-      showError(message);
+    } catch (error) {
+      showError(t('加载兑换码信息失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   useEffect(() => {
-    if (formApiRef.current) {
-      if (isEdit) {
-        loadRedemption();
-      } else {
-        formApiRef.current.setValues(getInitValues());
-      }
+    if (!props.visiable) {
+      reset();
+      return;
     }
-  }, [props.editingRedemption.id]);
+    if (isEdit) {
+      loadRedemption();
+    } else {
+      reset();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.visiable, props.editingRedemption?.id]);
 
-  const submit = async (values) => {
+  const validate = () => {
+    const next = {};
+    if (isEdit && !values.name?.trim()) {
+      next.name = t('请输入名称');
+    }
+    const amount = Number(values.amount);
+    if (!Number.isFinite(amount) || amount < 0) {
+      next.amount = t('请输入金额');
+    }
+    if (!isEdit) {
+      const c = parseInt(values.count, 10);
+      if (!Number.isFinite(c) || c <= 0) next.count = t('生成数量必须大于0');
+    }
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const submit = async () => {
+    if (!validate()) return;
     let name = values.name;
     if (!isEdit && (!name || name === '')) {
       name = renderQuota(values.quota);
     }
-    setLoading(true);
-    let localInputs = { ...values };
-    localInputs.count = parseInt(localInputs.count) || 0;
-    localInputs.quota = displayAmountToQuota(localInputs.amount);
+    setSubmitting(true);
+    const localInputs = {
+      ...values,
+      count: parseInt(values.count, 10) || 0,
+      quota: displayAmountToQuota(values.amount),
+      name,
+    };
     if (localInputs.quota <= 0) {
       showError(t('请输入金额'));
-      setLoading(false);
+      setSubmitting(false);
       return;
     }
-    localInputs.name = name;
     if (!localInputs.expired_time) {
       localInputs.expired_time = 0;
     } else {
@@ -126,265 +212,280 @@ const EditRedemptionModal = (props) => {
         localInputs.expired_time.getTime() / 1000,
       );
     }
-    let res;
-    if (isEdit) {
-      res = await API.put(`/api/redemption/`, {
-        ...localInputs,
-        id: parseInt(props.editingRedemption.id),
-      });
-    } else {
-      res = await API.post(`/api/redemption/`, {
-        ...localInputs,
-      });
-    }
-    const { success, message, data } = res.data;
-    if (success) {
-      if (isEdit) {
-        showSuccess(t('兑换码更新成功！'));
-        props.refresh();
-        props.handleClose();
+    try {
+      const res = isEdit
+        ? await API.put(`/api/redemption/`, {
+            ...localInputs,
+            id: parseInt(props.editingRedemption.id),
+          })
+        : await API.post(`/api/redemption/`, { ...localInputs });
+      const { success, message, data } = res.data;
+      if (success) {
+        if (isEdit) {
+          showSuccess(t('兑换码更新成功！'));
+        } else {
+          showSuccess(t('兑换码创建成功！'));
+        }
+        props.refresh?.();
+        props.handleClose?.();
       } else {
-        showSuccess(t('兑换码创建成功！'));
-        props.refresh();
-        formApiRef.current?.setValues(getInitValues());
-        props.handleClose();
+        showError(message);
       }
-    } else {
-      showError(message);
-    }
-    if (!isEdit && data) {
-      let text = '';
-      for (let i = 0; i < data.length; i++) {
-        text += data[i] + '\n';
+      if (!isEdit && data) {
+        let text = '';
+        for (let i = 0; i < data.length; i++) {
+          text += data[i] + '\n';
+        }
+        setPostCreateConfirm({
+          text,
+          name: localInputs.name,
+        });
       }
-      Modal.confirm({
-        title: t('兑换码创建成功'),
-        content: (
-          <div>
-            <p>{t('兑换码创建成功，是否下载兑换码？')}</p>
-            <p>{t('兑换码将以文本文件的形式下载，文件名为兑换码的名称。')}</p>
-          </div>
-        ),
-        onOk: () => {
-          downloadTextAsFile(text, `${localInputs.name}.txt`);
-        },
-      });
+    } catch (error) {
+      showError(t('提交失败'));
+    } finally {
+      setSubmitting(false);
     }
-    setLoading(false);
   };
 
+  const placement = isEdit ? 'right' : 'left';
+
   return (
     <>
-      <SideSheet
-        placement={isEdit ? 'right' : 'left'}
-        title={
-          <Space>
-            {isEdit ? (
-              <Tag color='blue' shape='circle'>
-                {t('更新')}
-              </Tag>
-            ) : (
-              <Tag color='green' shape='circle'>
-                {t('新建')}
-              </Tag>
-            )}
-            <Title heading={4} className='m-0'>
+      <div
+        aria-hidden={!props.visiable}
+        onClick={handleCancel}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          props.visiable ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!props.visiable}
+        style={{ width: isMobile ? '100%' : 600 }}
+        className={`fixed bottom-0 top-0 z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          placement === 'right' ? 'right-0' : 'left-0'
+        } ${
+          props.visiable
+            ? 'translate-x-0'
+            : placement === 'right'
+              ? 'translate-x-full'
+              : '-translate-x-full'
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-[color:var(--app-border)] px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <span
+              className={`inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-semibold ${
+                isEdit
+                  ? 'bg-sky-100 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'
+                  : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
+              }`}
+            >
+              {isEdit ? t('更新') : t('新建')}
+            </span>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
               {isEdit ? t('更新兑换码信息') : t('创建新的兑换码')}
-            </Title>
-          </Space>
-        }
-        bodyStyle={{ padding: '0' }}
-        visible={props.visiable}
-        width={isMobile ? '100%' : 600}
-        footer={
-          <div className='flex justify-end bg-white'>
-            <Space>
-              <Button
-                theme='solid'
-                onClick={() => formApiRef.current?.submitForm()}
-                icon={<IconSave />}
-                loading={loading}
-              >
-                {t('提交')}
-              </Button>
-              <Button
-                theme='light'
-                type='primary'
-                onClick={handleCancel}
-                icon={<IconClose />}
-              >
-                {t('取消')}
-              </Button>
-            </Space>
+            </h4>
           </div>
-        }
-        closeIcon={null}
-        onCancel={() => handleCancel()}
-      >
-        <Spin spinning={loading}>
-          <Form
-            initValues={getInitValues()}
-            getFormApi={(api) => (formApiRef.current = api)}
-            onSubmit={submit}
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={handleCancel}
           >
-            {({ values }) => (
-              <div className='p-2'>
-                <Card className='!rounded-2xl shadow-sm border-0 mb-6'>
-                  {/* Header: Basic Info */}
-                  <div className='flex items-center mb-2'>
-                    <Avatar
-                      size='small'
-                      color='blue'
-                      className='mr-2 shadow-md'
-                    >
-                      <IconGift size={16} />
-                    </Avatar>
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='flex-1 overflow-y-auto p-3'>
+          {loading ? (
+            <div className='flex items-center justify-center py-10'>
+              <Spinner />
+            </div>
+          ) : (
+            <>
+              <Card className='!rounded-2xl mb-6 border-0 shadow-sm'>
+                <Card.Content className='space-y-4 p-5'>
+                  <div className='flex items-center gap-2'>
+                    <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-700 shadow-md dark:bg-sky-950/40 dark:text-sky-300'>
+                      <Gift size={16} />
+                    </div>
                     <div>
-                      <Text className='text-lg font-medium'>
+                      <div className='text-base font-semibold text-foreground'>
                         {t('基本信息')}
-                      </Text>
-                      <div className='text-xs text-gray-600'>
+                      </div>
+                      <div className='text-xs text-muted'>
                         {t('设置兑换码的基本信息')}
                       </div>
                     </div>
                   </div>
 
-                  <Row gutter={12}>
-                    <Col span={24}>
-                      <Form.Input
-                        field='name'
-                        label={t('名称')}
-                        placeholder={t('请输入名称')}
-                        style={{ width: '100%' }}
-                        rules={
-                          !isEdit
-                            ? []
-                            : [{ required: true, message: t('请输入名称') }]
-                        }
-                        showClear
-                      />
-                    </Col>
-                    <Col span={24}>
-                      <Form.DatePicker
-                        field='expired_time'
-                        label={t('过期时间')}
-                        type='dateTime'
-                        placeholder={t('选择过期时间（可选，留空为永久）')}
-                        style={{ width: '100%' }}
-                        showClear
-                      />
-                    </Col>
-                  </Row>
-                </Card>
-
-                <Card className='!rounded-2xl shadow-sm border-0'>
-                  {/* Header: Quota Settings */}
-                  <div className='flex items-center mb-2'>
-                    <Avatar
-                      size='small'
-                      color='green'
-                      className='mr-2 shadow-md'
-                    >
-                      <IconCreditCard size={16} />
-                    </Avatar>
+                  <div className='space-y-2'>
+                    <div className='text-sm font-medium text-foreground'>
+                      {t('名称')}
+                      {isEdit ? (
+                        <span className='ml-1 text-red-500'>*</span>
+                      ) : null}
+                    </div>
+                    <Input
+                      type='text'
+                      value={values.name}
+                      onChange={(event) => setField('name', event.target.value)}
+                      placeholder={t('请输入名称')}
+                      aria-label={t('名称')}
+                      className={inputClass}
+                    />
+                    {errors.name ? (
+                      <div className='text-xs text-red-600'>{errors.name}</div>
+                    ) : null}
+                  </div>
+
+                  <div className='space-y-2'>
+                    <div className='text-sm font-medium text-foreground'>
+                      {t('过期时间')}
+                    </div>
+                    <input
+                      type='datetime-local'
+                      value={toLocalDateTimeInputValue(values.expired_time)}
+                      onChange={(event) => {
+                        const v = event.target.value;
+                        setField(
+                          'expired_time',
+                          v ? new Date(v) : null,
+                        );
+                      }}
+                      aria-label={t('过期时间')}
+                      className={inputClass}
+                    />
+                    <div className='text-xs leading-snug text-muted'>
+                      {t('选择过期时间（可选，留空为永久）')}
+                    </div>
+                  </div>
+                </Card.Content>
+              </Card>
+
+              <Card className='!rounded-2xl border-0 shadow-sm'>
+                <Card.Content className='space-y-4 p-5'>
+                  <div className='flex items-center gap-2'>
+                    <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-700 shadow-md dark:bg-emerald-950/40 dark:text-emerald-300'>
+                      <CreditCard size={16} />
+                    </div>
                     <div>
-                      <Text className='text-lg font-medium'>
+                      <div className='text-base font-semibold text-foreground'>
                         {t('额度设置')}
-                      </Text>
-                      <div className='text-xs text-gray-600'>
+                      </div>
+                      <div className='text-xs text-muted'>
                         {t('设置兑换码的额度和数量')}
                       </div>
                     </div>
                   </div>
 
-                  <Row gutter={12}>
-                    <Col span={24}>
-                      <Form.InputNumber
-                        field='amount'
-                        label={t('金额')}
-                        prefix={getCurrencyConfig().symbol}
-                        placeholder={t('输入金额')}
-                        precision={6}
-                        min={0}
-                        step={0.000001}
-                        style={{ width: '100%' }}
-                        onChange={(val) => {
-                          const amount = val === '' || val == null ? 0 : val;
-                          formApiRef.current?.setValue('amount', amount);
-                          formApiRef.current?.setValue(
-                            'quota',
-                            displayAmountToQuota(amount),
-                          );
-                        }}
-                        showClear
-                      />
-                      <div
-                        className='text-xs cursor-pointer mt-1'
-                        style={{ color: 'var(--semi-color-text-2)' }}
-                        onClick={() => setShowQuotaInput((v) => !v)}
-                      >
-                        {showQuotaInput
-                          ? `▾ ${t('收起原生额度输入')}`
-                          : `▸ ${t('使用原生额度输入')}`}
-                      </div>
-                      <div style={{ display: showQuotaInput ? 'block' : 'none' }} className='mt-2'>
-                        <Form.InputNumber
-                          field='quota'
-                          label={t('额度')}
-                          placeholder={t('输入额度')}
-                          rules={[
-                            { required: true, message: t('请输入额度') },
-                            {
-                              validator: (rule, v) => {
-                                const num = parseInt(v, 10);
-                                return num > 0
-                                  ? Promise.resolve()
-                                  : Promise.reject(t('额度必须大于0'));
-                              },
-                            },
-                          ]}
-                          onChange={(val) => {
-                            const quota = val === '' || val == null ? 0 : val;
-                            formApiRef.current?.setValue('quota', quota);
-                            formApiRef.current?.setValue(
-                              'amount',
-                              Number(quotaToDisplayAmount(quota).toFixed(6)),
-                            );
-                          }}
-                          style={{ width: '100%' }}
-                          showClear
-                        />
-                      </div>
-                    </Col>
-                    {!isEdit && (
-                      <Col span={12}>
-                        <Form.InputNumber
-                          field='count'
-                          label={t('生成数量')}
-                          min={1}
-                          rules={[
-                            { required: true, message: t('请输入生成数量') },
-                            {
-                              validator: (rule, v) => {
-                                const num = parseInt(v, 10);
-                                return num > 0
-                                  ? Promise.resolve()
-                                  : Promise.reject(t('生成数量必须大于0'));
-                              },
-                            },
-                          ]}
-                          style={{ width: '100%' }}
-                          showClear
-                        />
-                      </Col>
-                    )}
-                  </Row>
-                </Card>
-              </div>
-            )}
-          </Form>
-        </Spin>
-      </SideSheet>
+                  <NumberField
+                    label={t('金额')}
+                    value={values.amount}
+                    onChange={(val) => {
+                      const amount = val === '' || val == null ? 0 : val;
+                      setField('amount', amount);
+                      setValues((prev) => ({
+                        ...prev,
+                        quota: displayAmountToQuota(amount),
+                      }));
+                    }}
+                    min={0}
+                    step={0.000001}
+                    prefix={getCurrencyConfig().symbol}
+                    placeholder={t('输入金额')}
+                    error={errors.amount}
+                  />
+
+                  <div
+                    className='cursor-pointer text-xs text-muted'
+                    onClick={() => setShowQuotaInput((v) => !v)}
+                  >
+                    {showQuotaInput
+                      ? `▾ ${t('收起原生额度输入')}`
+                      : `▸ ${t('使用原生额度输入')}`}
+                  </div>
+
+                  {showQuotaInput ? (
+                    <NumberField
+                      label={t('额度')}
+                      value={values.quota}
+                      onChange={(val) => {
+                        const quota = val === '' || val == null ? 0 : val;
+                        setField('quota', quota);
+                        setValues((prev) => ({
+                          ...prev,
+                          amount: Number(
+                            quotaToDisplayAmount(quota).toFixed(6),
+                          ),
+                        }));
+                      }}
+                      min={0}
+                      step={1}
+                      placeholder={t('输入额度')}
+                    />
+                  ) : null}
+
+                  {!isEdit ? (
+                    <NumberField
+                      label={t('生成数量')}
+                      value={values.count}
+                      onChange={(val) =>
+                        setField('count', val === '' || val == null ? 1 : val)
+                      }
+                      min={1}
+                      step={1}
+                      error={errors.count}
+                    />
+                  ) : null}
+                </Card.Content>
+              </Card>
+            </>
+          )}
+        </div>
+
+        <footer className='flex justify-end gap-2 border-t border-[color:var(--app-border)] bg-[color:var(--app-background)] px-5 py-3'>
+          <Button
+            variant='light'
+            onPress={handleCancel}
+            startContent={<X size={14} />}
+          >
+            {t('取消')}
+          </Button>
+          <Button
+            color='primary'
+            onPress={submit}
+            isPending={submitting || loading}
+            startContent={<Save size={14} />}
+          >
+            {t('提交')}
+          </Button>
+        </footer>
+      </aside>
+
+      <ConfirmDialog
+        visible={!!postCreateConfirm}
+        title={t('兑换码创建成功')}
+        cancelText={t('取消')}
+        confirmText={t('下载')}
+        onCancel={() => setPostCreateConfirm(null)}
+        onConfirm={() => {
+          const target = postCreateConfirm;
+          setPostCreateConfirm(null);
+          if (target) downloadTextAsFile(target.text, `${target.name}.txt`);
+        }}
+      >
+        <div className='space-y-1 text-sm text-foreground'>
+          <p>{t('兑换码创建成功，是否下载兑换码？')}</p>
+          <p className='text-muted'>
+            {t('兑换码将以文本文件的形式下载，文件名为兑换码的名称。')}
+          </p>
+        </div>
+      </ConfirmDialog>
     </>
   );
 };
diff --git a/web/src/components/table/subscriptions/SubscriptionsActions.jsx b/web/src/components/table/subscriptions/SubscriptionsActions.jsx
index 3d3296250e1..ffda5ff4e91 100644
--- a/web/src/components/table/subscriptions/SubscriptionsActions.jsx
+++ b/web/src/components/table/subscriptions/SubscriptionsActions.jsx
@@ -18,16 +18,16 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 
 const SubscriptionsActions = ({ openCreate, t }) => {
   return (
     <div className='flex gap-2 w-full md:w-auto'>
       <Button
-        type='primary'
+        variant='primary'
         className='w-full md:w-auto'
-        onClick={openCreate}
-        size='small'
+        onPress={openCreate}
+        size='sm'
       >
         {t('新建套餐')}
       </Button>
diff --git a/web/src/components/table/subscriptions/SubscriptionsColumnDefs.jsx b/web/src/components/table/subscriptions/SubscriptionsColumnDefs.jsx
index 222b05126ca..f822807bbbc 100644
--- a/web/src/components/table/subscriptions/SubscriptionsColumnDefs.jsx
+++ b/web/src/components/table/subscriptions/SubscriptionsColumnDefs.jsx
@@ -17,22 +17,102 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import {
-  Button,
-  Modal,
-  Space,
-  Tag,
-  Typography,
-  Popover,
-  Divider,
-  Badge,
-  Tooltip,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Tooltip } from '@heroui/react';
 import { renderQuota } from '../../../helpers';
 import { convertUSDToCurrency } from '../../../helpers/render';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 
-const { Text } = Typography;
+const TONE_CLASSES = {
+  white: 'border border-border bg-background text-foreground',
+  violet:
+    'bg-violet-100 text-violet-700 dark:bg-violet-950/40 dark:text-violet-300',
+  cyan: 'bg-cyan-100 text-cyan-700 dark:bg-cyan-950/40 dark:text-cyan-300',
+  green:
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
+};
+
+function Chip({ tone = 'white', children, prefix }) {
+  const cls = TONE_CLASSES[tone] || TONE_CLASSES.white;
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}
+    >
+      {prefix}
+      {children}
+    </span>
+  );
+}
+
+function Dot({ tone = 'green' }) {
+  const color =
+    tone === 'green'
+      ? 'bg-emerald-500'
+      : tone === 'red'
+        ? 'bg-red-500'
+        : 'bg-muted';
+  return <span className={`h-1.5 w-1.5 rounded-full ${color}`} />;
+}
+
+function Muted({ children, className = '' }) {
+  return (
+    <span className={`text-xs text-muted ${className}`}>{children}</span>
+  );
+}
+
+function Strong({ children, className = '', style }) {
+  return (
+    <span
+      className={`text-sm font-semibold text-foreground ${className}`}
+      style={style}
+    >
+      {children}
+    </span>
+  );
+}
+
+function HoverPanel({ children, content, position = 'right' }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const timer = useRef(null);
+
+  const show = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setOpen(true);
+  };
+  const hide = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(false), 100);
+  };
+
+  useEffect(() => () => timer.current && clearTimeout(timer.current), []);
+
+  const placeClasses =
+    position === 'right'
+      ? 'left-full top-0 ml-2'
+      : position === 'top'
+        ? 'bottom-full left-1/2 -translate-x-1/2 mb-2'
+        : 'top-full left-0 mt-2';
+
+  return (
+    <span
+      ref={ref}
+      className='relative inline-flex'
+      onMouseEnter={show}
+      onMouseLeave={hide}
+    >
+      {children}
+      {open ? (
+        <div
+          role='tooltip'
+          className={`absolute ${placeClasses} z-30 rounded-lg border border-border bg-background p-3 text-xs shadow-lg`}
+        >
+          {content}
+        </div>
+      ) : null}
+    </span>
+  );
+}
 
 function formatDuration(plan, t) {
   if (!plan) return '';
@@ -67,128 +147,116 @@ function formatResetPeriod(plan, t) {
 const renderPlanTitle = (text, record, t) => {
   const subtitle = record?.plan?.subtitle;
   const plan = record?.plan;
+
   const popoverContent = (
     <div style={{ width: 260 }}>
-      <Text strong>{text}</Text>
+      <Strong>{text}</Strong>
       {subtitle && (
-        <Text type='tertiary' style={{ display: 'block', marginTop: 4 }}>
-          {subtitle}
-        </Text>
+        <div className='mt-1 text-xs text-muted'>{subtitle}</div>
       )}
-      <Divider margin={12} />
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
-        <Text type='tertiary'>{t('价格')}</Text>
-        <Text strong style={{ color: 'var(--semi-color-success)' }}>
+      <div className='my-3 h-px bg-border' />
+      <div className='grid grid-cols-2 gap-2 text-xs'>
+        <Muted>{t('价格')}</Muted>
+        <Strong className='text-emerald-600 dark:text-emerald-300'>
           {convertUSDToCurrency(Number(plan?.price_amount || 0), 2)}
-        </Text>
-        <Text type='tertiary'>{t('总额度')}</Text>
+        </Strong>
+        <Muted>{t('总额度')}</Muted>
         {plan?.total_amount > 0 ? (
-          <Tooltip content={`${t('原生额度')}：${plan.total_amount}`}>
-            <Text>{renderQuota(plan.total_amount)}</Text>
+          <Tooltip
+            content={`${t('原生额度')}：${plan.total_amount}`}
+            placement='top'
+          >
+            <Strong>{renderQuota(plan.total_amount)}</Strong>
           </Tooltip>
         ) : (
-          <Text>{t('不限')}</Text>
+          <Strong>{t('不限')}</Strong>
         )}
-        <Text type='tertiary'>{t('升级分组')}</Text>
-        <Text>{plan?.upgrade_group ? plan.upgrade_group : t('不升级')}</Text>
-        <Text type='tertiary'>{t('购买上限')}</Text>
-        <Text>
+        <Muted>{t('升级分组')}</Muted>
+        <Strong>
+          {plan?.upgrade_group ? plan.upgrade_group : t('不升级')}
+        </Strong>
+        <Muted>{t('购买上限')}</Muted>
+        <Strong>
           {plan?.max_purchase_per_user > 0
             ? plan.max_purchase_per_user
             : t('不限')}
-        </Text>
-        <Text type='tertiary'>{t('有效期')}</Text>
-        <Text>{formatDuration(plan, t)}</Text>
-        <Text type='tertiary'>{t('重置')}</Text>
-        <Text>{formatResetPeriod(plan, t)}</Text>
+        </Strong>
+        <Muted>{t('有效期')}</Muted>
+        <Strong>{formatDuration(plan, t)}</Strong>
+        <Muted>{t('重置')}</Muted>
+        <Strong>{formatResetPeriod(plan, t)}</Strong>
       </div>
     </div>
   );
 
   return (
-    <Popover content={popoverContent} position='rightTop' showArrow>
-      <div style={{ cursor: 'pointer', maxWidth: 180 }}>
-        <Text strong ellipsis={{ showTooltip: false }}>
-          {text}
-        </Text>
+    <HoverPanel content={popoverContent} position='right'>
+      <div className='cursor-pointer max-w-[180px]'>
+        <Strong className='block truncate'>{text}</Strong>
         {subtitle && (
-          <Text
-            type='tertiary'
-            ellipsis={{ showTooltip: false }}
-            style={{ display: 'block' }}
-          >
-            {subtitle}
-          </Text>
+          <span className='block truncate text-xs text-muted'>{subtitle}</span>
         )}
       </div>
-    </Popover>
+    </HoverPanel>
   );
 };
 
-const renderPrice = (text) => {
-  return (
-    <Text strong style={{ color: 'var(--semi-color-success)' }}>
-      {convertUSDToCurrency(Number(text || 0), 2)}
-    </Text>
-  );
-};
+const renderPrice = (text) => (
+  <Strong className='text-emerald-600 dark:text-emerald-300'>
+    {convertUSDToCurrency(Number(text || 0), 2)}
+  </Strong>
+);
 
 const renderPurchaseLimit = (text, record, t) => {
   const limit = Number(record?.plan?.max_purchase_per_user || 0);
   return (
-    <Text type={limit > 0 ? 'secondary' : 'tertiary'}>
+    <span className={limit > 0 ? 'text-sm text-foreground' : 'text-xs text-muted'}>
       {limit > 0 ? limit : t('不限')}
-    </Text>
+    </span>
   );
 };
 
-const renderDuration = (text, record, t) => {
-  return <Text type='secondary'>{formatDuration(record?.plan, t)}</Text>;
-};
+const renderDuration = (text, record, t) => (
+  <span className='text-sm text-foreground'>
+    {formatDuration(record?.plan, t)}
+  </span>
+);
 
-const renderEnabled = (text, record, t) => {
-  return text ? (
-    <Tag
-      color='white'
-      shape='circle'
-      type='light'
-      prefixIcon={<Badge dot type='success' />}
-    >
+const renderEnabled = (text, record, t) =>
+  text ? (
+    <Chip tone='white' prefix={<Dot tone='green' />}>
       {t('启用')}
-    </Tag>
+    </Chip>
   ) : (
-    <Tag
-      color='white'
-      shape='circle'
-      type='light'
-      prefixIcon={<Badge dot type='danger' />}
-    >
+    <Chip tone='white' prefix={<Dot tone='red' />}>
       {t('禁用')}
-    </Tag>
+    </Chip>
   );
-};
 
 const renderTotalAmount = (text, record, t) => {
   const total = Number(record?.plan?.total_amount || 0);
   return (
-    <Text type={total > 0 ? 'secondary' : 'tertiary'}>
+    <span className={total > 0 ? 'text-sm text-foreground' : 'text-xs text-muted'}>
       {total > 0 ? (
-        <Tooltip content={`${t('原生额度')}：${total}`}>
+        <Tooltip
+          content={`${t('原生额度')}：${total}`}
+          placement='top'
+        >
           <span>{renderQuota(total)}</span>
         </Tooltip>
       ) : (
         t('不限')
       )}
-    </Text>
+    </span>
   );
 };
 
 const renderUpgradeGroup = (text, record, t) => {
   const group = record?.plan?.upgrade_group || '';
   return (
-    <Text type={group ? 'secondary' : 'tertiary'}>
+    <span className={group ? 'text-sm text-foreground' : 'text-xs text-muted'}>
       {group ? group : t('不升级')}
-    </Text>
+    </span>
   );
 };
 
@@ -196,9 +264,9 @@ const renderResetPeriod = (text, record, t) => {
   const period = record?.plan?.quota_reset_period || 'never';
   const isNever = period === 'never';
   return (
-    <Text type={isNever ? 'tertiary' : 'secondary'}>
+    <span className={isNever ? 'text-xs text-muted' : 'text-sm text-foreground'}>
       {formatResetPeriod(record?.plan, t)}
-    </Text>
+    </span>
   );
 };
 
@@ -208,74 +276,92 @@ const renderPaymentConfig = (text, record, t, enableEpay) => {
   const hasEpay = !!enableEpay;
 
   return (
-    <Space spacing={4}>
-      {hasStripe && (
-        <Tag color='violet' shape='circle'>
-          Stripe
-        </Tag>
-      )}
-      {hasCreem && (
-        <Tag color='cyan' shape='circle'>
-          Creem
-        </Tag>
-      )}
-      {hasEpay && (
-        <Tag color='light-green' shape='circle'>
-          {t('易支付')}
-        </Tag>
-      )}
-    </Space>
+    <div className='flex flex-wrap items-center gap-1'>
+      {hasStripe && <Chip tone='violet'>Stripe</Chip>}
+      {hasCreem && <Chip tone='cyan'>Creem</Chip>}
+      {hasEpay && <Chip tone='green'>{t('易支付')}</Chip>}
+    </div>
   );
 };
 
-const renderOperations = (text, record, { openEdit, setPlanEnabled, t }) => {
+function OperationsCell({ record, openEdit, setPlanEnabled, t }) {
+  const [confirm, setConfirm] = useState(null);
   const isEnabled = record?.plan?.enabled;
 
   const handleToggle = () => {
     if (isEnabled) {
-      Modal.confirm({
+      setConfirm({
         title: t('确认禁用'),
         content: t('禁用后用户端不再展示，但历史订单不受影响。是否继续？'),
-        centered: true,
-        onOk: () => setPlanEnabled(record, false),
+        action: () => setPlanEnabled(record, false),
+        danger: true,
       });
     } else {
-      Modal.confirm({
+      setConfirm({
         title: t('确认启用'),
         content: t('启用后套餐将在用户端展示。是否继续？'),
-        centered: true,
-        onOk: () => setPlanEnabled(record, true),
+        action: () => setPlanEnabled(record, true),
+        danger: false,
       });
     }
   };
 
   return (
-    <Space spacing={8}>
+    <div className='flex items-center gap-1.5'>
       <Button
-        theme='light'
-        type='tertiary'
-        size='small'
-        onClick={() => openEdit(record)}
+        variant='light'
+        size='sm'
+        onPress={() => openEdit(record)}
       >
         {t('编辑')}
       </Button>
       {isEnabled ? (
-        <Button theme='light' type='danger' size='small' onClick={handleToggle}>
+        <Button
+          variant='flat'
+          color='danger'
+          size='sm'
+          onPress={handleToggle}
+        >
           {t('禁用')}
         </Button>
       ) : (
         <Button
-          theme='light'
-          type='primary'
-          size='small'
-          onClick={handleToggle}
+          variant='flat'
+          color='primary'
+          size='sm'
+          onPress={handleToggle}
         >
           {t('启用')}
         </Button>
       )}
-    </Space>
+
+      <ConfirmDialog
+        visible={!!confirm}
+        title={confirm?.title || ''}
+        cancelText={t('取消')}
+        confirmText={t('确定')}
+        danger={!!confirm?.danger}
+        onCancel={() => setConfirm(null)}
+        onConfirm={() => {
+          const action = confirm?.action;
+          setConfirm(null);
+          action?.();
+        }}
+      >
+        {confirm?.content}
+      </ConfirmDialog>
+    </div>
   );
-};
+}
+
+const renderOperations = (text, record, { openEdit, setPlanEnabled, t }) => (
+  <OperationsCell
+    record={record}
+    openEdit={openEdit}
+    setPlanEnabled={setPlanEnabled}
+    t={t}
+  />
+);
 
 export const getSubscriptionsColumns = ({
   t,
@@ -288,7 +374,7 @@ export const getSubscriptionsColumns = ({
       title: 'ID',
       dataIndex: ['plan', 'id'],
       width: 60,
-      render: (text) => <Text type='tertiary'>#{text}</Text>,
+      render: (text) => <Muted>#{text}</Muted>,
     },
     {
       title: t('套餐'),
@@ -311,7 +397,7 @@ export const getSubscriptionsColumns = ({
       title: t('优先级'),
       dataIndex: ['plan', 'sort_order'],
       width: 80,
-      render: (text) => <Text type='tertiary'>{Number(text || 0)}</Text>,
+      render: (text) => <Muted>{Number(text || 0)}</Muted>,
     },
     {
       title: t('有效期'),
diff --git a/web/src/components/table/subscriptions/SubscriptionsDescription.jsx b/web/src/components/table/subscriptions/SubscriptionsDescription.jsx
index a2d2c73b857..78d5c661c8d 100644
--- a/web/src/components/table/subscriptions/SubscriptionsDescription.jsx
+++ b/web/src/components/table/subscriptions/SubscriptionsDescription.jsx
@@ -18,19 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
-import { CalendarClock } from 'lucide-react';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 
-const { Text } = Typography;
-
 const SubscriptionsDescription = ({ compactMode, setCompactMode, t }) => {
   return (
     <div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full'>
-      <div className='flex items-center text-blue-500'>
-        <CalendarClock size={16} className='mr-2' />
-        <Text>{t('订阅管理')}</Text>
-      </div>
+      <span className='text-sm font-medium text-foreground'>
+        {t('订阅管理')}
+      </span>
 
       <CompactModeToggle
         compactMode={compactMode}
diff --git a/web/src/components/table/subscriptions/SubscriptionsTable.jsx b/web/src/components/table/subscriptions/SubscriptionsTable.jsx
index 4892f66caae..df0fd9a8673 100644
--- a/web/src/components/table/subscriptions/SubscriptionsTable.jsx
+++ b/web/src/components/table/subscriptions/SubscriptionsTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getSubscriptionsColumns } from './SubscriptionsColumnDefs';
 
 const SubscriptionsTable = (subscriptionsData) => {
@@ -68,14 +64,7 @@ const SubscriptionsTable = (subscriptionsData) => {
       loading={loading}
       rowKey={(row) => row?.plan?.id}
       empty={
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={t('暂无订阅套餐')}
-          style={{ padding: 30 }}
-        />
+        <TableEmptyState description={t('暂无订阅套餐')} />
       }
       className='overflow-hidden'
       size='middle'
diff --git a/web/src/components/table/subscriptions/index.jsx b/web/src/components/table/subscriptions/index.jsx
index 865044826fa..8258b8255c7 100644
--- a/web/src/components/table/subscriptions/index.jsx
+++ b/web/src/components/table/subscriptions/index.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useContext } from 'react';
-import { Banner } from '@douyinfe/semi-ui';
+import { Info } from 'lucide-react';
 import CardPro from '../../common/ui/CardPro';
 import SubscriptionsTable from './SubscriptionsTable';
 import SubscriptionsActions from './SubscriptionsActions';
@@ -73,14 +73,14 @@ const SubscriptionsPage = () => {
             <div className='order-1 md:order-0 w-full md:w-auto'>
               <SubscriptionsActions openCreate={openCreate} t={t} />
             </div>
-            <Banner
-              type='info'
-              description={t('Stripe/Creem 需在第三方平台创建商品并填入 ID')}
-              closeIcon={null}
-              // Mobile: banner below; Desktop: banner right
-              className='!rounded-lg order-2 md:order-1'
-              style={{ maxWidth: '100%' }}
-            />
+            <div
+              className='order-2 flex w-full items-start gap-2 rounded-lg border border-sky-200 bg-sky-50 px-3 py-2 text-sm text-sky-700 md:order-1 md:w-auto dark:border-sky-900/60 dark:bg-sky-950/40 dark:text-sky-200'
+            >
+              <Info size={16} className='mt-0.5 shrink-0' />
+              <span>
+                {t('Stripe/Creem 需在第三方平台创建商品并填入 ID')}
+              </span>
+            </div>
           </div>
         }
         paginationArea={createCardProPagination({
diff --git a/web/src/components/table/subscriptions/modals/AddEditSubscriptionModal.jsx b/web/src/components/table/subscriptions/modals/AddEditSubscriptionModal.jsx
index 73aef7317ad..b3c519a8292 100644
--- a/web/src/components/table/subscriptions/modals/AddEditSubscriptionModal.jsx
+++ b/web/src/components/table/subscriptions/modals/AddEditSubscriptionModal.jsx
@@ -6,39 +6,22 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  Avatar,
-  Button,
-  Card,
-  Col,
-  Form,
-  Row,
-  Select,
-  SideSheet,
-  Space,
-  Spin,
-  Tag,
-  Typography,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Spinner, Switch } from '@heroui/react';
 import {
-  IconCalendarClock,
-  IconClose,
-  IconCreditCard,
-  IconSave,
-} from '@douyinfe/semi-icons';
-import { Clock, RefreshCw } from 'lucide-react';
+  CalendarClock,
+  Clock,
+  CreditCard,
+  RefreshCw,
+  Save,
+  X,
+} from 'lucide-react';
 import { API, showError, showSuccess } from '../../../../helpers';
 import {
   quotaToDisplayAmount,
@@ -46,7 +29,62 @@ import {
 } from '../../../../helpers/quota';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 
-const { Text, Title } = Typography;
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+};
+
+function StatusChip({ tone, children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.blue
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function IconTile({ tone, children }) {
+  const cls =
+    {
+      blue: 'bg-primary/10 text-primary',
+      green: 'bg-success/10 text-success',
+      orange: 'bg-warning/10 text-warning',
+      purple:
+        'bg-[color-mix(in_oklab,var(--app-primary)_8%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_82%,var(--app-foreground))]',
+    }[tone] || 'bg-primary/10 text-primary';
+  return (
+    <div
+      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${cls}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function FieldError({ children }) {
+  if (!children) return null;
+  return <div className='mt-1 text-xs text-danger'>{children}</div>;
+}
 
 const durationUnitOptions = [
   { value: 'year', label: '年' },
@@ -64,6 +102,25 @@ const resetPeriodOptions = [
   { value: 'custom', label: '自定义(秒)' },
 ];
 
+const INIT_VALUES = {
+  title: '',
+  subtitle: '',
+  price_amount: 0,
+  currency: 'USD',
+  duration_unit: 'month',
+  duration_value: 1,
+  custom_seconds: 0,
+  quota_reset_period: 'never',
+  quota_reset_custom_seconds: 0,
+  enabled: true,
+  sort_order: 0,
+  max_purchase_per_user: 0,
+  total_amount: 0,
+  upgrade_group: '',
+  stripe_price_id: '',
+  creem_product_id: '',
+};
+
 const AddEditSubscriptionModal = ({
   visible,
   handleClose,
@@ -76,35 +133,15 @@ const AddEditSubscriptionModal = ({
   const [groupOptions, setGroupOptions] = useState([]);
   const [groupLoading, setGroupLoading] = useState(false);
   const isMobile = useIsMobile();
-  const formApiRef = useRef(null);
   const isEdit = editingPlan?.plan?.id !== undefined;
-  const formKey = isEdit ? `edit-${editingPlan?.plan?.id}` : 'create';
-
-  const getInitValues = () => ({
-    title: '',
-    subtitle: '',
-    price_amount: 0,
-    currency: 'USD',
-    duration_unit: 'month',
-    duration_value: 1,
-    custom_seconds: 0,
-    quota_reset_period: 'never',
-    quota_reset_custom_seconds: 0,
-    enabled: true,
-    sort_order: 0,
-    max_purchase_per_user: 0,
-    total_amount: 0,
-    upgrade_group: '',
-    stripe_price_id: '',
-    creem_product_id: '',
-  });
+  const [values, setValues] = useState(INIT_VALUES);
+  const [errors, setErrors] = useState({});
 
   const buildFormValues = () => {
-    const base = getInitValues();
-    if (editingPlan?.plan?.id === undefined) return base;
+    if (editingPlan?.plan?.id === undefined) return INIT_VALUES;
     const p = editingPlan.plan || {};
     return {
-      ...base,
+      ...INIT_VALUES,
       title: p.title || '',
       subtitle: p.subtitle || '',
       price_amount: Number(p.price_amount || 0),
@@ -128,6 +165,8 @@ const AddEditSubscriptionModal = ({
 
   useEffect(() => {
     if (!visible) return;
+    setValues(buildFormValues());
+    setErrors({});
     setGroupLoading(true);
     API.get('/api/group')
       .then((res) => {
@@ -139,11 +178,75 @@ const AddEditSubscriptionModal = ({
       })
       .catch(() => setGroupOptions([]))
       .finally(() => setGroupLoading(false));
-  }, [visible]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [visible, editingPlan?.plan?.id]);
 
-  const submit = async (values) => {
+  // ESC-to-close
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') handleClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [visible, handleClose]);
+
+  const setField = (key) => (value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
+
+  const setNumberField = (key) => (raw) => {
+    const value = raw === '' ? '' : Number(raw);
+    setField(key)(value);
+  };
+
+  const validate = () => {
+    const next = {};
     if (!values.title || values.title.trim() === '') {
-      showError(t('套餐标题不能为空'));
+      next.title = t('请输入套餐标题');
+    }
+    if (
+      values.price_amount === '' ||
+      values.price_amount === null ||
+      Number(values.price_amount) < 0
+    ) {
+      next.price_amount = t('请输入金额');
+    }
+    if (
+      values.total_amount === '' ||
+      values.total_amount === null ||
+      Number(values.total_amount) < 0
+    ) {
+      next.total_amount = t('请输入总额度');
+    }
+    if (!values.duration_unit) {
+      next.duration_unit = t('请选择有效期单位');
+    }
+    if (values.duration_unit === 'custom') {
+      if (!values.custom_seconds || Number(values.custom_seconds) < 1) {
+        next.custom_seconds = t('请输入秒数');
+      }
+    } else if (
+      !values.duration_value ||
+      Number(values.duration_value) < 1
+    ) {
+      next.duration_value = t('请输入数值');
+    }
+    if (
+      values.quota_reset_period === 'custom' &&
+      (!values.quota_reset_custom_seconds ||
+        Number(values.quota_reset_custom_seconds) < 60)
+    ) {
+      next.quota_reset_custom_seconds = t('请输入秒数');
+    }
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const submit = async () => {
+    if (!validate()) {
+      showError(t('请检查表单填写'));
       return;
     }
     setLoading(true);
@@ -195,357 +298,417 @@ const AddEditSubscriptionModal = ({
     }
   };
 
+  const slideClose =
+    placement === 'right' ? 'translate-x-full' : '-translate-x-full';
+  const positionClass =
+    placement === 'right'
+      ? 'fixed bottom-0 right-0 top-0'
+      : 'fixed bottom-0 left-0 top-0';
+
   return (
     <>
-      <SideSheet
-        placement={placement}
-        title={
-          <Space>
-            {isEdit ? (
-              <Tag color='blue' shape='circle'>
-                {t('更新')}
-              </Tag>
-            ) : (
-              <Tag color='green' shape='circle'>
-                {t('新建')}
-              </Tag>
-            )}
-            <Title heading={4} className='m-0'>
+      <div
+        aria-hidden={!visible}
+        onClick={handleClose}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!visible}
+        style={{ width: isMobile ? '100%' : 600 }}
+        className={`${positionClass} z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          visible ? 'translate-x-0' : slideClose
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-border px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <StatusChip tone={isEdit ? 'blue' : 'green'}>
+              {isEdit ? t('更新') : t('新建')}
+            </StatusChip>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
               {isEdit ? t('更新套餐信息') : t('创建新的订阅套餐')}
-            </Title>
-          </Space>
-        }
-        bodyStyle={{ padding: '0' }}
-        visible={visible}
-        width={isMobile ? '100%' : 600}
-        footer={
-          <div className='flex justify-end bg-white'>
-            <Space>
-              <Button
-                theme='solid'
-                onClick={() => formApiRef.current?.submitForm()}
-                icon={<IconSave />}
-                loading={loading}
-              >
-                {t('提交')}
-              </Button>
-              <Button
-                theme='light'
-                type='primary'
-                onClick={handleClose}
-                icon={<IconClose />}
-              >
-                {t('取消')}
-              </Button>
-            </Space>
+            </h4>
           </div>
-        }
-        closeIcon={null}
-        onCancel={handleClose}
-      >
-        <Spin spinning={loading}>
-          <Form
-            key={formKey}
-            initValues={buildFormValues()}
-            getFormApi={(api) => (formApiRef.current = api)}
-            onSubmit={submit}
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={handleClose}
           >
-            {({ values }) => (
-              <div className='p-2'>
-                {/* 基本信息 */}
-                <Card className='!rounded-2xl shadow-sm border-0 mb-4'>
-                  <div className='flex items-center mb-2'>
-                    <Avatar
-                      size='small'
-                      color='blue'
-                      className='mr-2 shadow-md'
-                    >
-                      <IconCalendarClock size={16} />
-                    </Avatar>
-                    <div>
-                      <Text className='text-lg font-medium'>
-                        {t('基本信息')}
-                      </Text>
-                      <div className='text-xs text-gray-600'>
-                        {t('套餐的基本信息和定价')}
-                      </div>
-                    </div>
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='relative flex-1 overflow-y-auto p-3'>
+          {loading && (
+            <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+              <Spinner color='primary' />
+            </div>
+          )}
+
+          {/* 基本信息 */}
+          <Card className='mb-3 !rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <IconTile tone='blue'>
+                  <CalendarClock size={16} />
+                </IconTile>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('基本信息')}
                   </div>
-
-                  <Row gutter={12}>
-                    <Col span={24}>
-                      <Form.Input
-                        field='title'
-                        label={t('套餐标题')}
-                        placeholder={t('例如：基础套餐')}
-                        required
-                        rules={[
-                          { required: true, message: t('请输入套餐标题') },
-                        ]}
-                        showClear
-                      />
-                    </Col>
-
-                    <Col span={24}>
-                      <Form.Input
-                        field='subtitle'
-                        label={t('套餐副标题')}
-                        placeholder={t('例如：适合轻度使用')}
-                        showClear
-                      />
-                    </Col>
-
-                    <Col span={12}>
-                      <Form.InputNumber
-                        field='price_amount'
-                        label={t('实付金额')}
-                        required
-                        min={0}
-                        precision={2}
-                        rules={[{ required: true, message: t('请输入金额') }]}
-                        style={{ width: '100%' }}
-                      />
-                    </Col>
-
-                    <Col span={12}>
-                      <Form.InputNumber
-                        field='total_amount'
-                        label={t('总额度')}
-                        required
-                        min={0}
-                        precision={2}
-                        rules={[{ required: true, message: t('请输入总额度') }]}
-                        extraText={`${t('0 表示不限')} · ${t('原生额度')}：${displayAmountToQuota(
-                          values.total_amount,
-                        )}`}
-                        style={{ width: '100%' }}
-                      />
-                    </Col>
-
-                    <Col span={12}>
-                      <Form.Select
-                        field='upgrade_group'
-                        label={t('升级分组')}
-                        showClear
-                        loading={groupLoading}
-                        placeholder={t('不升级')}
-                        extraText={t(
-                          '购买或手动新增订阅会升级到该分组；当套餐失效/过期或手动作废/删除后，将回退到升级前分组。回退不会立即生效，通常会有几分钟延迟。',
-                        )}
-                      >
-                        <Select.Option value=''>{t('不升级')}</Select.Option>
-                        {(groupOptions || []).map((g) => (
-                          <Select.Option key={g} value={g}>
-                            {g}
-                          </Select.Option>
-                        ))}
-                      </Form.Select>
-                    </Col>
-
-                    <Col span={12}>
-                      <Form.Input
-                        field='currency'
-                        label={t('币种')}
-                        disabled
-                        extraText={t('由全站货币展示设置统一控制')}
-                      />
-                    </Col>
-
-                    <Col span={12}>
-                      <Form.InputNumber
-                        field='sort_order'
-                        label={t('排序')}
-                        precision={0}
-                        style={{ width: '100%' }}
-                      />
-                    </Col>
-
-                    <Col span={12}>
-                      <Form.InputNumber
-                        field='max_purchase_per_user'
-                        label={t('购买上限')}
-                        min={0}
-                        precision={0}
-                        extraText={t('0 表示不限')}
-                        style={{ width: '100%' }}
-                      />
-                    </Col>
-
-                    <Col span={12}>
-                      <Form.Switch
-                        field='enabled'
-                        label={t('启用状态')}
-                        size='large'
-                      />
-                    </Col>
-                  </Row>
-                </Card>
-
-                {/* 有效期设置 */}
-                <Card className='!rounded-2xl shadow-sm border-0 mb-4'>
-                  <div className='flex items-center mb-2'>
-                    <Avatar
-                      size='small'
-                      color='green'
-                      className='mr-2 shadow-md'
-                    >
-                      <Clock size={16} />
-                    </Avatar>
-                    <div>
-                      <Text className='text-lg font-medium'>
-                        {t('有效期设置')}
-                      </Text>
-                      <div className='text-xs text-gray-600'>
-                        {t('配置套餐的有效时长')}
-                      </div>
-                    </div>
+                  <div className='text-xs text-muted'>
+                    {t('套餐的基本信息和定价')}
                   </div>
+                </div>
+              </div>
 
-                  <Row gutter={12}>
-                    <Col span={12}>
-                      <Form.Select
-                        field='duration_unit'
-                        label={t('有效期单位')}
-                        required
-                        rules={[{ required: true }]}
-                      >
-                        {durationUnitOptions.map((o) => (
-                          <Select.Option key={o.value} value={o.value}>
-                            {o.label}
-                          </Select.Option>
-                        ))}
-                      </Form.Select>
-                    </Col>
-
-                    <Col span={12}>
-                      {values.duration_unit === 'custom' ? (
-                        <Form.InputNumber
-                          field='custom_seconds'
-                          label={t('自定义秒数')}
-                          required
-                          min={1}
-                          precision={0}
-                          rules={[{ required: true, message: t('请输入秒数') }]}
-                          style={{ width: '100%' }}
-                        />
-                      ) : (
-                        <Form.InputNumber
-                          field='duration_value'
-                          label={t('有效期数值')}
-                          required
-                          min={1}
-                          precision={0}
-                          rules={[{ required: true, message: t('请输入数值') }]}
-                          style={{ width: '100%' }}
-                        />
-                      )}
-                    </Col>
-                  </Row>
-                </Card>
-
-                {/* 额度重置 */}
-                <Card className='!rounded-2xl shadow-sm border-0 mb-4'>
-                  <div className='flex items-center mb-2'>
-                    <Avatar
-                      size='small'
-                      color='orange'
-                      className='mr-2 shadow-md'
+              <div className='space-y-3'>
+                <div className='space-y-2'>
+                  <FieldLabel required>{t('套餐标题')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={values.title}
+                    onChange={(event) => setField('title')(event.target.value)}
+                    placeholder={t('例如：基础套餐')}
+                    className={inputClass}
+                  />
+                  <FieldError>{errors.title}</FieldError>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('套餐副标题')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={values.subtitle}
+                    onChange={(event) =>
+                      setField('subtitle')(event.target.value)
+                    }
+                    placeholder={t('例如：适合轻度使用')}
+                    className={inputClass}
+                  />
+                </div>
+
+                <div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel required>{t('实付金额')}</FieldLabel>
+                    <input
+                      type='number'
+                      min={0}
+                      step={0.01}
+                      value={values.price_amount}
+                      onChange={(event) =>
+                        setNumberField('price_amount')(event.target.value)
+                      }
+                      className={inputClass}
+                    />
+                    <FieldError>{errors.price_amount}</FieldError>
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel required>{t('总额度')}</FieldLabel>
+                    <input
+                      type='number'
+                      min={0}
+                      step={0.01}
+                      value={values.total_amount}
+                      onChange={(event) =>
+                        setNumberField('total_amount')(event.target.value)
+                      }
+                      className={inputClass}
+                    />
+                    <FieldHint>
+                      {`${t('0 表示不限')} · ${t('原生额度')}：${displayAmountToQuota(
+                        values.total_amount,
+                      )}`}
+                    </FieldHint>
+                    <FieldError>{errors.total_amount}</FieldError>
+                  </div>
+                </div>
+
+                <div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('升级分组')}</FieldLabel>
+                    <select
+                      value={values.upgrade_group || ''}
+                      onChange={(event) =>
+                        setField('upgrade_group')(event.target.value)
+                      }
+                      disabled={groupLoading}
+                      className={inputClass}
                     >
-                      <RefreshCw size={16} />
-                    </Avatar>
-                    <div>
-                      <Text className='text-lg font-medium'>
-                        {t('额度重置')}
-                      </Text>
-                      <div className='text-xs text-gray-600'>
-                        {t('支持周期性重置套餐权益额度')}
-                      </div>
-                    </div>
+                      <option value=''>{t('不升级')}</option>
+                      {(groupOptions || []).map((g) => (
+                        <option key={g} value={g}>
+                          {g}
+                        </option>
+                      ))}
+                    </select>
+                    <FieldHint>
+                      {t(
+                        '购买或手动新增订阅会升级到该分组；当套餐失效/过期或手动作废/删除后，将回退到升级前分组。回退不会立即生效，通常会有几分钟延迟。',
+                      )}
+                    </FieldHint>
                   </div>
-
-                  <Row gutter={12}>
-                    <Col span={12}>
-                      <Form.Select
-                        field='quota_reset_period'
-                        label={t('重置周期')}
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('币种')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={values.currency}
+                      disabled
+                      className={inputClass}
+                    />
+                    <FieldHint>{t('由全站货币展示设置统一控制')}</FieldHint>
+                  </div>
+                </div>
+
+                <div className='grid grid-cols-1 gap-3 sm:grid-cols-3'>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('排序')}</FieldLabel>
+                    <input
+                      type='number'
+                      step={1}
+                      value={values.sort_order}
+                      onChange={(event) =>
+                        setNumberField('sort_order')(event.target.value)
+                      }
+                      className={inputClass}
+                    />
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('购买上限')}</FieldLabel>
+                    <input
+                      type='number'
+                      min={0}
+                      step={1}
+                      value={values.max_purchase_per_user}
+                      onChange={(event) =>
+                        setNumberField('max_purchase_per_user')(
+                          event.target.value,
+                        )
+                      }
+                      className={inputClass}
+                    />
+                    <FieldHint>{t('0 表示不限')}</FieldHint>
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('启用状态')}</FieldLabel>
+                    <div className='flex h-10 items-center'>
+                      <Switch
+                        isSelected={values.enabled}
+                        onValueChange={setField('enabled')}
+                        size='md'
+                        aria-label={t('启用状态')}
                       >
-                        {resetPeriodOptions.map((o) => (
-                          <Select.Option key={o.value} value={o.value}>
-                            {o.label}
-                          </Select.Option>
-                        ))}
-                      </Form.Select>
-                    </Col>
-                    <Col span={12}>
-                      {values.quota_reset_period === 'custom' ? (
-                        <Form.InputNumber
-                          field='quota_reset_custom_seconds'
-                          label={t('自定义秒数')}
-                          required
-                          min={60}
-                          precision={0}
-                          rules={[{ required: true, message: t('请输入秒数') }]}
-                          style={{ width: '100%' }}
-                        />
-                      ) : (
-                        <Form.InputNumber
-                          field='quota_reset_custom_seconds'
-                          label={t('自定义秒数')}
-                          min={0}
-                          precision={0}
-                          style={{ width: '100%' }}
-                          disabled
-                        />
-                      )}
-                    </Col>
-                  </Row>
-                </Card>
-
-                {/* 第三方支付配置 */}
-                <Card className='!rounded-2xl shadow-sm border-0 mb-4'>
-                  <div className='flex items-center mb-2'>
-                    <Avatar
-                      size='small'
-                      color='purple'
-                      className='mr-2 shadow-md'
-                    >
-                      <IconCreditCard size={16} />
-                    </Avatar>
-                    <div>
-                      <Text className='text-lg font-medium'>
-                        {t('第三方支付配置')}
-                      </Text>
-                      <div className='text-xs text-gray-600'>
-                        {t('Stripe/Creem 商品ID（可选）')}
-                      </div>
+                        <Switch.Control>
+                          <Switch.Thumb />
+                        </Switch.Control>
+                      </Switch>
                     </div>
                   </div>
+                </div>
+              </div>
+            </Card.Content>
+          </Card>
+
+          {/* 有效期设置 */}
+          <Card className='mb-3 !rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <IconTile tone='green'>
+                  <Clock size={16} />
+                </IconTile>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('有效期设置')}
+                  </div>
+                  <div className='text-xs text-muted'>
+                    {t('配置套餐的有效时长')}
+                  </div>
+                </div>
+              </div>
 
-                  <Row gutter={12}>
-                    <Col span={24}>
-                      <Form.Input
-                        field='stripe_price_id'
-                        label='Stripe PriceId'
-                        placeholder='price_...'
-                        showClear
+              <div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
+                <div className='space-y-2'>
+                  <FieldLabel required>{t('有效期单位')}</FieldLabel>
+                  <select
+                    value={values.duration_unit}
+                    onChange={(event) =>
+                      setField('duration_unit')(event.target.value)
+                    }
+                    className={inputClass}
+                  >
+                    {durationUnitOptions.map((o) => (
+                      <option key={o.value} value={o.value}>
+                        {o.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className='space-y-2'>
+                  {values.duration_unit === 'custom' ? (
+                    <>
+                      <FieldLabel required>{t('自定义秒数')}</FieldLabel>
+                      <input
+                        type='number'
+                        min={1}
+                        step={1}
+                        value={values.custom_seconds}
+                        onChange={(event) =>
+                          setNumberField('custom_seconds')(event.target.value)
+                        }
+                        className={inputClass}
                       />
-                    </Col>
-
-                    <Col span={24}>
-                      <Form.Input
-                        field='creem_product_id'
-                        label='Creem ProductId'
-                        placeholder='prod_...'
-                        showClear
+                      <FieldError>{errors.custom_seconds}</FieldError>
+                    </>
+                  ) : (
+                    <>
+                      <FieldLabel required>{t('有效期数值')}</FieldLabel>
+                      <input
+                        type='number'
+                        min={1}
+                        step={1}
+                        value={values.duration_value}
+                        onChange={(event) =>
+                          setNumberField('duration_value')(event.target.value)
+                        }
+                        className={inputClass}
                       />
-                    </Col>
-                  </Row>
-                </Card>
+                      <FieldError>{errors.duration_value}</FieldError>
+                    </>
+                  )}
+                </div>
+              </div>
+            </Card.Content>
+          </Card>
+
+          {/* 额度重置 */}
+          <Card className='mb-3 !rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <IconTile tone='orange'>
+                  <RefreshCw size={16} />
+                </IconTile>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('额度重置')}
+                  </div>
+                  <div className='text-xs text-muted'>
+                    {t('支持周期性重置套餐权益额度')}
+                  </div>
+                </div>
+              </div>
+
+              <div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
+                <div className='space-y-2'>
+                  <FieldLabel>{t('重置周期')}</FieldLabel>
+                  <select
+                    value={values.quota_reset_period}
+                    onChange={(event) =>
+                      setField('quota_reset_period')(event.target.value)
+                    }
+                    className={inputClass}
+                  >
+                    {resetPeriodOptions.map((o) => (
+                      <option key={o.value} value={o.value}>
+                        {o.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className='space-y-2'>
+                  <FieldLabel
+                    required={values.quota_reset_period === 'custom'}
+                  >
+                    {t('自定义秒数')}
+                  </FieldLabel>
+                  <input
+                    type='number'
+                    min={values.quota_reset_period === 'custom' ? 60 : 0}
+                    step={1}
+                    value={values.quota_reset_custom_seconds}
+                    onChange={(event) =>
+                      setNumberField('quota_reset_custom_seconds')(
+                        event.target.value,
+                      )
+                    }
+                    disabled={values.quota_reset_period !== 'custom'}
+                    className={inputClass}
+                  />
+                  <FieldError>{errors.quota_reset_custom_seconds}</FieldError>
+                </div>
+              </div>
+            </Card.Content>
+          </Card>
+
+          {/* 第三方支付配置 */}
+          <Card className='!rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <IconTile tone='purple'>
+                  <CreditCard size={16} />
+                </IconTile>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('第三方支付配置')}
+                  </div>
+                  <div className='text-xs text-muted'>
+                    {t('Stripe/Creem 商品ID（可选）')}
+                  </div>
+                </div>
+              </div>
+
+              <div className='space-y-3'>
+                <div className='space-y-2'>
+                  <FieldLabel>Stripe PriceId</FieldLabel>
+                  <input
+                    type='text'
+                    value={values.stripe_price_id}
+                    onChange={(event) =>
+                      setField('stripe_price_id')(event.target.value)
+                    }
+                    placeholder='price_...'
+                    className={inputClass}
+                  />
+                </div>
+                <div className='space-y-2'>
+                  <FieldLabel>Creem ProductId</FieldLabel>
+                  <input
+                    type='text'
+                    value={values.creem_product_id}
+                    onChange={(event) =>
+                      setField('creem_product_id')(event.target.value)
+                    }
+                    placeholder='prod_...'
+                    className={inputClass}
+                  />
+                </div>
               </div>
-            )}
-          </Form>
-        </Spin>
-      </SideSheet>
+            </Card.Content>
+          </Card>
+        </div>
+
+        <footer className='flex justify-end gap-2 border-t border-border bg-background px-5 py-3'>
+          <Button
+            variant='light'
+            startContent={<X size={14} />}
+            onPress={handleClose}
+          >
+            {t('取消')}
+          </Button>
+          <Button
+            color='primary'
+            isPending={loading}
+            startContent={<Save size={14} />}
+            onPress={submit}
+          >
+            {t('提交')}
+          </Button>
+        </footer>
+      </aside>
     </>
   );
 };
diff --git a/web/src/components/table/task-logs/TaskLogsActions.jsx b/web/src/components/table/task-logs/TaskLogsActions.jsx
index fd1d2b3ff03..01c203ce03b 100644
--- a/web/src/components/table/task-logs/TaskLogsActions.jsx
+++ b/web/src/components/table/task-logs/TaskLogsActions.jsx
@@ -18,19 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
-import { IconEyeOpened } from '@douyinfe/semi-icons';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 
-const { Text } = Typography;
-
 const TaskLogsActions = ({ compactMode, setCompactMode, t }) => {
   return (
     <div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full'>
-      <div className='flex items-center text-orange-500 mb-2 md:mb-0'>
-        <IconEyeOpened className='mr-2' />
-        <Text>{t('任务记录')}</Text>
-      </div>
+      <span className='text-sm font-medium text-foreground'>
+        {t('任务记录')}
+      </span>
       <CompactModeToggle
         compactMode={compactMode}
         setCompactMode={setCompactMode}
diff --git a/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx b/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
index 4097545e5e6..242c9a0210b 100644
--- a/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
+++ b/web/src/components/table/task-logs/TaskLogsColumnDefs.jsx
@@ -18,21 +18,21 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Progress, Tag, Tooltip, Typography } from '@douyinfe/semi-ui';
+import { Tooltip } from '@heroui/react';
 import {
-  Music,
+  CheckCircle,
+  Clock,
   FileText,
+  Hash,
   HelpCircle,
-  CheckCircle,
+  List,
+  Loader,
+  Music,
   Pause,
-  Clock,
   Play,
-  XCircle,
-  Loader,
-  List,
-  Hash,
-  Video,
   Sparkles,
+  Video,
+  XCircle,
 } from 'lucide-react';
 import {
   TASK_ACTION_FIRST_TAIL_GENERATE,
@@ -43,9 +43,27 @@ import {
 } from '../../../constants/common.constant';
 import { CHANNEL_OPTIONS } from '../../../constants/channel.constants';
 import { stringToColor } from '../../../helpers/render';
-import { Avatar, Space } from '@douyinfe/semi-ui';
 
-const colors = [
+const TONE_TO_HEX = {
+  amber: '#f59e0b',
+  blue: '#3b82f6',
+  cyan: '#06b6d4',
+  green: '#22c55e',
+  grey: '#94a3b8',
+  indigo: '#6366f1',
+  'light-blue': '#0ea5e9',
+  lime: '#84cc16',
+  orange: '#f97316',
+  pink: '#ec4899',
+  purple: '#a855f7',
+  red: '#ef4444',
+  teal: '#14b8a6',
+  violet: '#8b5cf6',
+  yellow: '#eab308',
+  white: '#ffffff',
+};
+
+const TAG_PALETTE_KEYS = [
   'amber',
   'blue',
   'cyan',
@@ -63,110 +81,177 @@ const colors = [
   'yellow',
 ];
 
-// Render functions
-const renderTimestamp = (timestampInSeconds) => {
-  const date = new Date(timestampInSeconds * 1000); // 从秒转换为毫秒
+function ColorTag({ color, prefixIcon, children, onClick }) {
+  const hex = TONE_TO_HEX[color] || TONE_TO_HEX.grey;
+  if (color === 'white') {
+    return (
+      <span
+        onClick={onClick}
+        className={`inline-flex items-center gap-1 rounded-full border border-[color:var(--app-border)] bg-background px-2 py-0.5 text-xs font-medium text-foreground ${
+          onClick ? 'cursor-pointer' : ''
+        }`}
+      >
+        {prefixIcon}
+        {children}
+      </span>
+    );
+  }
+  return (
+    <span
+      onClick={onClick}
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${
+        onClick ? 'cursor-pointer' : ''
+      }`}
+      style={{
+        backgroundColor: `${hex}1A`,
+        color: hex,
+      }}
+    >
+      {prefixIcon}
+      {children}
+    </span>
+  );
+}
 
-  const year = date.getFullYear(); // 获取年份
-  const month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份，从0开始需要+1，并保证两位数
-  const day = ('0' + date.getDate()).slice(-2); // 获取日期，并保证两位数
-  const hours = ('0' + date.getHours()).slice(-2); // 获取小时，并保证两位数
-  const minutes = ('0' + date.getMinutes()).slice(-2); // 获取分钟，并保证两位数
-  const seconds = ('0' + date.getSeconds()).slice(-2); // 获取秒钟，并保证两位数
+function ProgressBar({ percent, errored }) {
+  const clamped = Math.max(0, Math.min(100, Number(percent) || 0));
+  return (
+    <div className='inline-flex min-w-[160px] items-center gap-2'>
+      <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-surface-secondary'>
+        <div
+          className={`h-full rounded-full transition-all ${
+            errored
+              ? 'bg-amber-500'
+              : clamped >= 100
+                ? 'bg-emerald-500'
+                : 'bg-primary'
+          }`}
+          style={{ width: `${clamped}%` }}
+        />
+      </div>
+      <span className='shrink-0 text-xs text-muted'>{clamped}%</span>
+    </div>
+  );
+}
+
+function EllipsisText({ children, width = 100, onClick }) {
+  return (
+    <Tooltip content={children} placement='top'>
+      <span
+        onClick={onClick}
+        className={`inline-block truncate align-middle text-sm text-foreground ${
+          onClick ? 'cursor-pointer' : ''
+        }`}
+        style={{ maxWidth: width }}
+      >
+        {children}
+      </span>
+    </Tooltip>
+  );
+}
+
+function UserChip({ name }) {
+  const tone = stringToColor(name) || 'grey';
+  const hex = TONE_TO_HEX[tone] || TONE_TO_HEX.grey;
+  return (
+    <span className='inline-flex items-center gap-2'>
+      <span
+        className='flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-semibold'
+        style={{
+          background: `${hex}26`,
+          color: hex,
+        }}
+      >
+        {name.slice(0, 1).toUpperCase()}
+      </span>
+      <span className='text-sm text-foreground'>{name}</span>
+    </span>
+  );
+}
 
-  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`; // 格式化输出
+const renderTimestamp = (timestampInSeconds) => {
+  const date = new Date(timestampInSeconds * 1000);
+  const year = date.getFullYear();
+  const month = ('0' + (date.getMonth() + 1)).slice(-2);
+  const day = ('0' + date.getDate()).slice(-2);
+  const hours = ('0' + date.getHours()).slice(-2);
+  const minutes = ('0' + date.getMinutes()).slice(-2);
+  const seconds = ('0' + date.getSeconds()).slice(-2);
+  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
 };
 
 function renderDuration(submit_time, finishTime) {
   if (!submit_time || !finishTime) return 'N/A';
   const durationSec = finishTime - submit_time;
   const color = durationSec > 60 ? 'red' : 'green';
-
-  // 返回带有样式的颜色标签
-  return (
-    <Tag color={color} shape='circle'>
-      {durationSec} s
-    </Tag>
-  );
+  return <ColorTag color={color}>{durationSec} s</ColorTag>;
 }
 
 const renderType = (type, t) => {
   switch (type) {
     case 'MUSIC':
       return (
-        <Tag color='grey' shape='circle' prefixIcon={<Music size={14} />}>
+        <ColorTag color='grey' prefixIcon={<Music size={12} />}>
           {t('生成音乐')}
-        </Tag>
+        </ColorTag>
       );
     case 'LYRICS':
       return (
-        <Tag color='pink' shape='circle' prefixIcon={<FileText size={14} />}>
+        <ColorTag color='pink' prefixIcon={<FileText size={12} />}>
           {t('生成歌词')}
-        </Tag>
+        </ColorTag>
       );
     case TASK_ACTION_GENERATE:
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Sparkles size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Sparkles size={12} />}>
           {t('图生视频')}
-        </Tag>
+        </ColorTag>
       );
     case TASK_ACTION_TEXT_GENERATE:
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Sparkles size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Sparkles size={12} />}>
           {t('文生视频')}
-        </Tag>
+        </ColorTag>
       );
     case TASK_ACTION_FIRST_TAIL_GENERATE:
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Sparkles size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Sparkles size={12} />}>
           {t('首尾生视频')}
-        </Tag>
+        </ColorTag>
       );
     case TASK_ACTION_REFERENCE_GENERATE:
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Sparkles size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Sparkles size={12} />}>
           {t('参照生视频')}
-        </Tag>
+        </ColorTag>
       );
     case TASK_ACTION_REMIX_GENERATE:
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Sparkles size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Sparkles size={12} />}>
           {t('视频Remix')}
-        </Tag>
+        </ColorTag>
       );
     default:
       return (
-        <Tag color='white' shape='circle' prefixIcon={<HelpCircle size={14} />}>
+        <ColorTag color='white' prefixIcon={<HelpCircle size={12} />}>
           {t('未知')}
-        </Tag>
+        </ColorTag>
       );
   }
 };
 
 const renderPlatform = (platform, t) => {
-  let option = CHANNEL_OPTIONS.find(
+  const option = CHANNEL_OPTIONS.find(
     (opt) => String(opt.value) === String(platform),
   );
   if (option) {
-    return (
-      <Tag color={option.color} shape='circle'>
-        {option.label}
-      </Tag>
-    );
+    return <ColorTag color={option.color}>{option.label}</ColorTag>;
   }
   switch (platform) {
     case 'suno':
-      return (
-        <Tag color='green' shape='circle'>
-          Suno
-        </Tag>
-      );
+      return <ColorTag color='green'>Suno</ColorTag>;
     default:
-      return (
-        <Tag color='white' shape='circle'>
-          {t('未知')}
-        </Tag>
-      );
+      return <ColorTag color='white'>{t('未知')}</ColorTag>;
   }
 };
 
@@ -174,61 +259,57 @@ const renderStatus = (type, t) => {
   switch (type) {
     case 'SUCCESS':
       return (
-        <Tag
-          color='green'
-          shape='circle'
-          prefixIcon={<CheckCircle size={14} />}
-        >
+        <ColorTag color='green' prefixIcon={<CheckCircle size={12} />}>
           {t('成功')}
-        </Tag>
+        </ColorTag>
       );
     case 'NOT_START':
       return (
-        <Tag color='grey' shape='circle' prefixIcon={<Pause size={14} />}>
+        <ColorTag color='grey' prefixIcon={<Pause size={12} />}>
           {t('未启动')}
-        </Tag>
+        </ColorTag>
       );
     case 'SUBMITTED':
       return (
-        <Tag color='yellow' shape='circle' prefixIcon={<Clock size={14} />}>
+        <ColorTag color='yellow' prefixIcon={<Clock size={12} />}>
           {t('队列中')}
-        </Tag>
+        </ColorTag>
       );
     case 'IN_PROGRESS':
       return (
-        <Tag color='blue' shape='circle' prefixIcon={<Play size={14} />}>
+        <ColorTag color='blue' prefixIcon={<Play size={12} />}>
           {t('执行中')}
-        </Tag>
+        </ColorTag>
       );
     case 'FAILURE':
       return (
-        <Tag color='red' shape='circle' prefixIcon={<XCircle size={14} />}>
+        <ColorTag color='red' prefixIcon={<XCircle size={12} />}>
           {t('失败')}
-        </Tag>
+        </ColorTag>
       );
     case 'QUEUED':
       return (
-        <Tag color='orange' shape='circle' prefixIcon={<List size={14} />}>
+        <ColorTag color='orange' prefixIcon={<List size={12} />}>
           {t('排队中')}
-        </Tag>
+        </ColorTag>
       );
     case 'UNKNOWN':
       return (
-        <Tag color='white' shape='circle' prefixIcon={<HelpCircle size={14} />}>
+        <ColorTag color='white' prefixIcon={<HelpCircle size={12} />}>
           {t('未知')}
-        </Tag>
+        </ColorTag>
       );
     case '':
       return (
-        <Tag color='grey' shape='circle' prefixIcon={<Loader size={14} />}>
+        <ColorTag color='grey' prefixIcon={<Loader size={12} />}>
           {t('正在提交')}
-        </Tag>
+        </ColorTag>
       );
     default:
       return (
-        <Tag color='white' shape='circle' prefixIcon={<HelpCircle size={14} />}>
+        <ColorTag color='white' prefixIcon={<HelpCircle size={12} />}>
           {t('未知')}
-        </Tag>
+        </ColorTag>
       );
   }
 };
@@ -247,46 +328,34 @@ export const getTaskLogsColumns = ({
       key: COLUMN_KEYS.SUBMIT_TIME,
       title: t('提交时间'),
       dataIndex: 'submit_time',
-      render: (text, record, index) => {
-        return <div>{text ? renderTimestamp(text) : '-'}</div>;
-      },
+      render: (text) => <div>{text ? renderTimestamp(text) : '-'}</div>,
     },
     {
       key: COLUMN_KEYS.FINISH_TIME,
       title: t('结束时间'),
       dataIndex: 'finish_time',
-      render: (text, record, index) => {
-        return <div>{text ? renderTimestamp(text) : '-'}</div>;
-      },
+      render: (text) => <div>{text ? renderTimestamp(text) : '-'}</div>,
     },
     {
       key: COLUMN_KEYS.DURATION,
       title: t('花费时间'),
       dataIndex: 'finish_time',
-      render: (finish, record) => {
-        return <>{finish ? renderDuration(record.submit_time, finish) : '-'}</>;
-      },
+      render: (finish, record) => (
+        <>{finish ? renderDuration(record.submit_time, finish) : '-'}</>
+      ),
     },
     {
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel_id',
-      render: (text, record, index) => {
-        return isAdminUser ? (
-          <div>
-            <Tag
-              color={colors[parseInt(text) % colors.length]}
-              size='large'
-              shape='circle'
-              onClick={() => {
-                copyText(text);
-              }}
-            >
-              {text}
-            </Tag>
-          </div>
-        ) : (
-          <></>
+      render: (text) => {
+        if (!isAdminUser) return null;
+        const tone =
+          TAG_PALETTE_KEYS[parseInt(text) % TAG_PALETTE_KEYS.length] || 'grey';
+        return (
+          <ColorTag color={tone} onClick={() => copyText(text)}>
+            {text}
+          </ColorTag>
         );
       },
     },
@@ -294,90 +363,60 @@ export const getTaskLogsColumns = ({
       key: COLUMN_KEYS.USERNAME,
       title: t('用户'),
       dataIndex: 'username',
-      render: (userId, record, index) => {
-        if (!isAdminUser) {
-          return <></>;
-        }
+      render: (userId, record) => {
+        if (!isAdminUser) return null;
         const displayText = String(record.username || userId || '?');
-        return (
-          <Space>
-            <Avatar
-              size='extra-small'
-              color={stringToColor(displayText)}
-            >
-              {displayText.slice(0, 1)}
-            </Avatar>
-            <Typography.Text>
-              {displayText}
-            </Typography.Text>
-          </Space>
-        );
+        return <UserChip name={displayText} />;
       },
     },
     {
       key: COLUMN_KEYS.PLATFORM,
       title: t('平台'),
       dataIndex: 'platform',
-      render: (text, record, index) => {
-        return <div>{renderPlatform(text, t)}</div>;
-      },
+      render: (text) => <div>{renderPlatform(text, t)}</div>,
     },
     {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'action',
-      render: (text, record, index) => {
-        return <div>{renderType(text, t)}</div>;
-      },
+      render: (text) => <div>{renderType(text, t)}</div>,
     },
     {
       key: COLUMN_KEYS.TASK_ID,
       title: t('任务ID'),
       dataIndex: 'task_id',
-      render: (text, record, index) => {
-        return (
-          <Typography.Text
-            ellipsis={{ showTooltip: true }}
-            onClick={() => {
-              openContentModal(JSON.stringify(record, null, 2));
-            }}
-          >
-            <div>{text}</div>
-          </Typography.Text>
-        );
-      },
+      render: (text, record) => (
+        <EllipsisText
+          width={120}
+          onClick={() => openContentModal(JSON.stringify(record, null, 2))}
+        >
+          {text}
+        </EllipsisText>
+      ),
     },
     {
       key: COLUMN_KEYS.TASK_STATUS,
       title: t('任务状态'),
       dataIndex: 'status',
-      render: (text, record, index) => {
-        return <div>{renderStatus(text, t)}</div>;
-      },
+      render: (text) => <div>{renderStatus(text, t)}</div>,
     },
     {
       key: COLUMN_KEYS.PROGRESS,
       title: t('进度'),
       dataIndex: 'progress',
-      render: (text, record, index) => {
+      render: (text, record) => {
+        if (text == null || text === '') {
+          return text || '-';
+        }
+        const numeric = isNaN(text?.replace?.('%', ''))
+          ? null
+          : parseInt(text.replace('%', ''));
+        if (numeric == null) return text || '-';
         return (
-          <div>
-            {isNaN(text?.replace('%', '')) ? (
-              text || '-'
-            ) : (
-              <Progress
-                stroke={
-                  record.status === 'FAILURE'
-                    ? 'var(--semi-color-warning)'
-                    : null
-                }
-                percent={text ? parseInt(text.replace('%', '')) : 0}
-                showInfo={true}
-                aria-label='task progress'
-                style={{ minWidth: '160px' }}
-              />
-            )}
-          </div>
+          <ProgressBar
+            percent={numeric}
+            errored={record.status === 'FAILURE'}
+          />
         );
       },
     },
@@ -386,8 +425,7 @@ export const getTaskLogsColumns = ({
       title: t('详情'),
       dataIndex: 'fail_reason',
       fixed: 'right',
-      render: (text, record, index) => {
-        // Suno audio preview
+      render: (text, record) => {
         const isSunoSuccess =
           record.platform === 'suno' &&
           record.status === 'SUCCESS' &&
@@ -397,6 +435,7 @@ export const getTaskLogsColumns = ({
           return (
             <a
               href='#'
+              className='text-primary underline'
               onClick={(e) => {
                 e.preventDefault();
                 openAudioModal(record.data);
@@ -407,7 +446,6 @@ export const getTaskLogsColumns = ({
           );
         }
 
-        // 视频预览：优先使用 result_url，兼容旧数据 fail_reason 中的 URL
         const isVideoTask =
           record.action === TASK_ACTION_GENERATE ||
           record.action === TASK_ACTION_TEXT_GENERATE ||
@@ -416,11 +454,13 @@ export const getTaskLogsColumns = ({
           record.action === TASK_ACTION_REMIX_GENERATE;
         const isSuccess = record.status === 'SUCCESS';
         const resultUrl = record.result_url;
-        const hasResultUrl = typeof resultUrl === 'string' && /^https?:\/\//.test(resultUrl);
+        const hasResultUrl =
+          typeof resultUrl === 'string' && /^https?:\/\//.test(resultUrl);
         if (isSuccess && isVideoTask && hasResultUrl) {
           return (
             <a
               href='#'
+              className='text-primary underline'
               onClick={(e) => {
                 e.preventDefault();
                 openVideoModal(resultUrl);
@@ -430,19 +470,11 @@ export const getTaskLogsColumns = ({
             </a>
           );
         }
-        if (!text) {
-          return t('无');
-        }
+        if (!text) return t('无');
         return (
-          <Typography.Text
-            ellipsis={{ showTooltip: true }}
-            style={{ width: 100 }}
-            onClick={() => {
-              openContentModal(text);
-            }}
-          >
+          <EllipsisText width={100} onClick={() => openContentModal(text)}>
             {text}
-          </Typography.Text>
+          </EllipsisText>
         );
       },
     },
diff --git a/web/src/components/table/task-logs/TaskLogsFilters.jsx b/web/src/components/table/task-logs/TaskLogsFilters.jsx
index 3bfae77a4a4..a17f06e6288 100644
--- a/web/src/components/table/task-logs/TaskLogsFilters.jsx
+++ b/web/src/components/table/task-logs/TaskLogsFilters.jsx
@@ -18,10 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Form } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+import { Button } from '@heroui/react';
 
 import { DATE_RANGE_PRESETS } from '../../../constants/console.constants';
+import {
+  FilterDateRange,
+  FilterInput,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const TaskLogsFilters = ({
   formInitValues,
@@ -33,56 +37,45 @@ const TaskLogsFilters = ({
   isAdminUser,
   t,
 }) => {
+  const { values, setFieldValue, handleSubmit } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: refresh,
+  });
+  const presets = DATE_RANGE_PRESETS.map((preset) => ({
+    text: t(preset.text),
+    start: preset.start(),
+    end: preset.end(),
+  }));
+
   return (
-    <Form
-      initValues={formInitValues}
-      getFormApi={(api) => setFormApi(api)}
-      onSubmit={refresh}
-      allowEmpty={true}
-      autoComplete='off'
-      layout='vertical'
-      trigger='change'
-      stopValidateWithError={false}
-    >
+    <form onSubmit={handleSubmit} autoComplete='off'>
       <div className='flex flex-col gap-2'>
         <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2'>
           {/* 时间选择器 */}
           <div className='col-span-1 lg:col-span-2'>
-            <Form.DatePicker
-              field='dateRange'
-              className='w-full'
-              type='dateTimeRange'
-              placeholder={[t('开始时间'), t('结束时间')]}
-              showClear
-              pure
-              size='small'
-              presets={DATE_RANGE_PRESETS.map((preset) => ({
-                text: t(preset.text),
-                start: preset.start(),
-                end: preset.end(),
-              }))}
+            <FilterDateRange
+              value={values.dateRange}
+              onChange={(nextValue) => setFieldValue('dateRange', nextValue)}
+              startPlaceholder={t('开始时间')}
+              endPlaceholder={t('结束时间')}
+              presets={presets}
             />
           </div>
 
           {/* 任务 ID */}
-          <Form.Input
-            field='task_id'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.task_id}
+            onChange={(nextValue) => setFieldValue('task_id', nextValue)}
             placeholder={t('任务 ID')}
-            showClear
-            pure
-            size='small'
           />
 
           {/* 渠道 ID - 仅管理员可见 */}
           {isAdminUser && (
-            <Form.Input
-              field='channel_id'
-              prefix={<IconSearch />}
+            <FilterInput
+              value={values.channel_id}
+              onChange={(nextValue) => setFieldValue('channel_id', nextValue)}
               placeholder={t('渠道 ID')}
-              showClear
-              pure
-              size='small'
             />
           )}
         </div>
@@ -92,15 +85,15 @@ const TaskLogsFilters = ({
           <div></div>
           <div className='flex gap-2'>
             <Button
-              type='tertiary'
-              htmlType='submit'
+              type='submit'
+              variant='flat'
               loading={loading}
-              size='small'
+              size='sm'
             >
               {t('查询')}
             </Button>
             <Button
-              type='tertiary'
+              variant='flat'
               onClick={() => {
                 if (formApi) {
                   formApi.reset();
@@ -110,21 +103,21 @@ const TaskLogsFilters = ({
                   }, 100);
                 }
               }}
-              size='small'
+              size='sm'
             >
               {t('重置')}
             </Button>
             <Button
-              type='tertiary'
+              variant='flat'
               onClick={() => setShowColumnSelector(true)}
-              size='small'
+              size='sm'
             >
               {t('列设置')}
             </Button>
           </div>
         </div>
       </div>
-    </Form>
+    </form>
   );
 };
 
diff --git a/web/src/components/table/task-logs/TaskLogsTable.jsx b/web/src/components/table/task-logs/TaskLogsTable.jsx
index b3cec8ccc02..5a95c584774 100644
--- a/web/src/components/table/task-logs/TaskLogsTable.jsx
+++ b/web/src/components/table/task-logs/TaskLogsTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getTaskLogsColumns } from './TaskLogsColumnDefs';
 
 const TaskLogsTable = (taskLogsData) => {
@@ -86,14 +82,7 @@ const TaskLogsTable = (taskLogsData) => {
       className='rounded-xl overflow-hidden'
       size='middle'
       empty={
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={t('搜索无结果')}
-          style={{ padding: 30 }}
-        />
+        <TableEmptyState description={t('搜索无结果')} />
       }
       pagination={{
         currentPage: activePage,
diff --git a/web/src/components/table/task-logs/index.jsx b/web/src/components/table/task-logs/index.jsx
index 07c387123a9..a5de2b1a519 100644
--- a/web/src/components/table/task-logs/index.jsx
+++ b/web/src/components/table/task-logs/index.jsx
@@ -18,7 +18,6 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Layout } from '@douyinfe/semi-ui';
 import CardPro from '../../common/ui/CardPro';
 import TaskLogsTable from './TaskLogsTable';
 import TaskLogsActions from './TaskLogsActions';
@@ -52,25 +51,24 @@ const TaskLogsPage = () => {
         audioClips={taskLogsData.audioClips}
       />
 
-      <Layout>
-        <CardPro
-          type='type2'
-          statsArea={<TaskLogsActions {...taskLogsData} />}
-          searchArea={<TaskLogsFilters {...taskLogsData} />}
-          paginationArea={createCardProPagination({
-            currentPage: taskLogsData.activePage,
-            pageSize: taskLogsData.pageSize,
-            total: taskLogsData.logCount,
-            onPageChange: taskLogsData.handlePageChange,
-            onPageSizeChange: taskLogsData.handlePageSizeChange,
-            isMobile: isMobile,
-            t: taskLogsData.t,
-          })}
-          t={taskLogsData.t}
-        >
-          <TaskLogsTable {...taskLogsData} />
-        </CardPro>
-      </Layout>
+      <CardPro
+        type='type2'
+        className='w-full'
+        statsArea={<TaskLogsActions {...taskLogsData} />}
+        searchArea={<TaskLogsFilters {...taskLogsData} />}
+        paginationArea={createCardProPagination({
+          currentPage: taskLogsData.activePage,
+          pageSize: taskLogsData.pageSize,
+          total: taskLogsData.logCount,
+          onPageChange: taskLogsData.handlePageChange,
+          onPageSizeChange: taskLogsData.handlePageSizeChange,
+          isMobile: isMobile,
+          t: taskLogsData.t,
+        })}
+        t={taskLogsData.t}
+      >
+        <TaskLogsTable {...taskLogsData} />
+      </CardPro>
     </>
   );
 };
diff --git a/web/src/components/table/task-logs/modals/AudioPreviewModal.jsx b/web/src/components/table/task-logs/modals/AudioPreviewModal.jsx
index 0b2cada1988..5c167a3f8e5 100644
--- a/web/src/components/table/task-logs/modals/AudioPreviewModal.jsx
+++ b/web/src/components/table/task-logs/modals/AudioPreviewModal.jsx
@@ -18,12 +18,20 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useRef, useEffect } from 'react';
-import { Modal, Typography, Tag, Button } from '@douyinfe/semi-ui';
-import { IconExternalOpen, IconCopy } from '@douyinfe/semi-icons';
+import {
+  Button,
+  Chip,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Copy, ExternalLink } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-const { Text, Title } = Typography;
-
 const formatDuration = (seconds) => {
   if (!seconds || seconds <= 0) return '--:--';
   const m = Math.floor(seconds / 60);
@@ -47,86 +55,53 @@ const AudioClipCard = ({ clip }) => {
   const audioUrl = clip.audio_url;
 
   return (
-    <div
-      style={{
-        display: 'flex',
-        gap: '16px',
-        padding: '16px',
-        borderRadius: '8px',
-        border: '1px solid var(--semi-color-border)',
-        background: 'var(--semi-color-bg-1)',
-      }}
-    >
+    <div className='flex gap-4 rounded-2xl border border-border bg-background p-4'>
       {imageUrl && (
         <img
           src={imageUrl}
           alt={title}
-          style={{
-            width: 80,
-            height: 80,
-            borderRadius: '8px',
-            objectFit: 'cover',
-            flexShrink: 0,
-          }}
+          className='h-20 w-20 shrink-0 rounded-xl object-cover'
           onError={(e) => {
             e.target.style.display = 'none';
           }}
         />
       )}
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            marginBottom: '4px',
-          }}
-        >
-          <Text strong ellipsis={{ showTooltip: true }} style={{ fontSize: 15 }}>
+      <div className='min-w-0 flex-1'>
+        <div className='mb-1 flex items-center gap-2'>
+          <span className='truncate text-[15px] font-semibold text-foreground'>
             {title}
-          </Text>
+          </span>
           {duration > 0 && (
-            <Tag size='small' color='grey' shape='circle'>
+            <Chip size='sm' variant='flat'>
               {formatDuration(duration)}
-            </Tag>
+            </Chip>
           )}
         </div>
 
         {tags && (
-          <div style={{ marginBottom: '8px' }}>
-            <Text
-              type='tertiary'
-              size='small'
-              ellipsis={{ showTooltip: true, rows: 1 }}
-            >
-              {tags}
-            </Text>
+          <div className='mb-2 truncate text-xs text-muted'>
+            {tags}
           </div>
         )}
 
         {hasError ? (
-          <div
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '8px',
-              flexWrap: 'wrap',
-            }}
-          >
-            <Text type='warning' size='small'>
+          <div className='flex flex-wrap items-center gap-2'>
+            <span className='text-sm text-warning'>
               {t('音频无法播放')}
-            </Text>
+            </span>
             <Button
-              size='small'
-              icon={<IconExternalOpen />}
-              onClick={() => window.open(audioUrl, '_blank')}
+              size='sm'
+              startContent={<ExternalLink size={16} />}
+              onPress={() => window.open(audioUrl, '_blank')}
+              variant='flat'
             >
               {t('在新标签页中打开')}
             </Button>
             <Button
-              size='small'
-              icon={<IconCopy />}
-              onClick={() => navigator.clipboard.writeText(audioUrl)}
+              size='sm'
+              startContent={<Copy size={16} />}
+              onPress={() => navigator.clipboard.writeText(audioUrl)}
+              variant='flat'
             >
               {t('复制链接')}
             </Button>
@@ -138,7 +113,7 @@ const AudioClipCard = ({ clip }) => {
             controls
             preload='none'
             onError={() => setHasError(true)}
-            style={{ width: '100%', height: 36 }}
+            className='h-9 w-full'
           />
         )}
       </div>
@@ -149,31 +124,37 @@ const AudioClipCard = ({ clip }) => {
 const AudioPreviewModal = ({ isModalOpen, setIsModalOpen, audioClips }) => {
   const { t } = useTranslation();
   const clips = Array.isArray(audioClips) ? audioClips : [];
+  const modalState = useOverlayState({
+    isOpen: isModalOpen,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setIsModalOpen(false);
+    },
+  });
 
   return (
-    <Modal
-      title={t('音乐预览')}
-      visible={isModalOpen}
-      onOk={() => setIsModalOpen(false)}
-      onCancel={() => setIsModalOpen(false)}
-      closable={null}
-      footer={null}
-      bodyStyle={{
-        maxHeight: '70vh',
-        overflow: 'auto',
-        padding: '16px',
-      }}
-      width={560}
-    >
-      {clips.length === 0 ? (
-        <Text type='tertiary'>{t('无')}</Text>
-      ) : (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
-          {clips.map((clip, idx) => (
-            <AudioClipCard key={clip.clip_id || clip.id || idx} clip={clip} />
-          ))}
-        </div>
-      )}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='2xl' scroll='inside'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('音乐预览')}
+            </ModalHeader>
+            <ModalBody className='max-h-[70vh] p-4'>
+              {clips.length === 0 ? (
+                <span className='text-sm text-muted'>
+                  {t('无')}
+                </span>
+              ) : (
+                <div className='flex flex-col gap-3'>
+                  {clips.map((clip, idx) => (
+                    <AudioClipCard key={clip.clip_id || clip.id || idx} clip={clip} />
+                  ))}
+                </div>
+              )}
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/task-logs/modals/ColumnSelectorModal.jsx b/web/src/components/table/task-logs/modals/ColumnSelectorModal.jsx
index 4f2af110045..8f41de42b7d 100644
--- a/web/src/components/table/task-logs/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/task-logs/modals/ColumnSelectorModal.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Button, Checkbox } from '@douyinfe/semi-ui';
 import { getTaskLogsColumns } from '../TaskLogsColumnDefs';
+import ColumnSelectorDialog from '../../../common/ui/ColumnSelectorDialog';
 
 const ColumnSelectorModal = ({
   showColumnSelector,
@@ -41,62 +41,23 @@ const ColumnSelectorModal = ({
     copyText,
     openContentModal,
     isAdminUser,
-  });
+  }).filter((column) => isAdminUser || column.key !== COLUMN_KEYS.CHANNEL);
 
   return (
-    <Modal
+    <ColumnSelectorDialog
       title={t('列设置')}
       visible={showColumnSelector}
-      onCancel={() => setShowColumnSelector(false)}
-      footer={
-        <div className='flex justify-end'>
-          <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
-          <Button onClick={() => setShowColumnSelector(false)}>
-            {t('取消')}
-          </Button>
-          <Button onClick={() => setShowColumnSelector(false)}>
-            {t('确定')}
-          </Button>
-        </div>
-      }
-    >
-      <div style={{ marginBottom: 20 }}>
-        <Checkbox
-          checked={Object.values(visibleColumns).every((v) => v === true)}
-          indeterminate={
-            Object.values(visibleColumns).some((v) => v === true) &&
-            !Object.values(visibleColumns).every((v) => v === true)
-          }
-          onChange={(e) => handleSelectAll(e.target.checked)}
-        >
-          {t('全选')}
-        </Checkbox>
-      </div>
-      <div
-        className='flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4'
-        style={{ border: '1px solid var(--semi-color-border)' }}
-      >
-        {allColumns.map((column) => {
-          // Skip admin-only columns for non-admin users
-          if (!isAdminUser && column.key === COLUMN_KEYS.CHANNEL) {
-            return null;
-          }
-
-          return (
-            <div key={column.key} className='w-1/2 mb-4 pr-2'>
-              <Checkbox
-                checked={!!visibleColumns[column.key]}
-                onChange={(e) =>
-                  handleColumnVisibilityChange(column.key, e.target.checked)
-                }
-              >
-                {column.title}
-              </Checkbox>
-            </div>
-          );
-        })}
-      </div>
-    </Modal>
+      onClose={() => setShowColumnSelector(false)}
+      resetText={t('重置')}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
+      allText={t('全选')}
+      visibleColumns={visibleColumns}
+      columns={allColumns}
+      onColumnChange={handleColumnVisibilityChange}
+      onSelectAll={handleSelectAll}
+      onReset={initDefaultColumns}
+    />
   );
 };
 
diff --git a/web/src/components/table/task-logs/modals/ContentModal.jsx b/web/src/components/table/task-logs/modals/ContentModal.jsx
index 3527fd96d61..6d46eb41b3a 100644
--- a/web/src/components/table/task-logs/modals/ContentModal.jsx
+++ b/web/src/components/table/task-logs/modals/ContentModal.jsx
@@ -18,12 +18,21 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState, useEffect } from 'react';
-import { Modal, Button, Typography, Spin } from '@douyinfe/semi-ui';
-import { IconExternalOpen, IconCopy } from '@douyinfe/semi-icons';
+import {
+  Button,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
+import { Copy, ExternalLink } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-const { Text } = Typography;
-
 const ContentModal = ({
   isModalOpen,
   setIsModalOpen,
@@ -33,6 +42,12 @@ const ContentModal = ({
   const { t } = useTranslation();
   const [videoError, setVideoError] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const modalState = useOverlayState({
+    isOpen: isModalOpen,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setIsModalOpen(false);
+    },
+  });
 
   useEffect(() => {
     if (isModalOpen && isVideo) {
@@ -61,89 +76,57 @@ const ContentModal = ({
   const renderVideoContent = () => {
     if (videoError) {
       return (
-        <div style={{ textAlign: 'center', padding: '40px' }}>
-          <Text
-            type='tertiary'
-            style={{ display: 'block', marginBottom: '16px' }}
-          >
+        <div className='flex flex-col items-center px-4 py-10 text-center'>
+          <p className='mb-4 text-sm text-muted'>
             {t('视频无法在当前浏览器中播放，这可能是由于：')}
-          </Text>
-          <Text
-            type='tertiary'
-            style={{ display: 'block', marginBottom: '8px', fontSize: '12px' }}
-          >
+          </p>
+          <p className='mb-2 text-xs text-muted'>
             {t('• 视频服务商的跨域限制')}
-          </Text>
-          <Text
-            type='tertiary'
-            style={{ display: 'block', marginBottom: '8px', fontSize: '12px' }}
-          >
+          </p>
+          <p className='mb-2 text-xs text-muted'>
             {t('• 需要特定的请求头或认证')}
-          </Text>
-          <Text
-            type='tertiary'
-            style={{ display: 'block', marginBottom: '16px', fontSize: '12px' }}
-          >
+          </p>
+          <p className='mb-4 text-xs text-muted'>
             {t('• 防盗链保护机制')}
-          </Text>
+          </p>
 
-          <div style={{ marginTop: '20px' }}>
+          <div className='mt-3 flex flex-wrap justify-center gap-2'>
             <Button
-              icon={<IconExternalOpen />}
-              onClick={handleOpenInNewTab}
-              style={{ marginRight: '8px' }}
+              startContent={<ExternalLink size={16} />}
+              onPress={handleOpenInNewTab}
+              size='sm'
+              variant='flat'
             >
               {t('在新标签页中打开')}
             </Button>
-            <Button icon={<IconCopy />} onClick={handleCopyUrl}>
+            <Button
+              startContent={<Copy size={16} />}
+              onPress={handleCopyUrl}
+              size='sm'
+              variant='flat'
+            >
               {t('复制链接')}
             </Button>
           </div>
 
-          <div
-            style={{
-              marginTop: '16px',
-              padding: '8px',
-              backgroundColor: '#f8f9fa',
-              borderRadius: '4px',
-            }}
-          >
-            <Text
-              type='tertiary'
-              style={{ fontSize: '10px', wordBreak: 'break-all' }}
-            >
-              {modalContent}
-            </Text>
+          <div className='mt-4 max-w-full break-all rounded-xl bg-surface-secondary p-2 text-[10px] text-muted'>
+            {modalContent}
           </div>
         </div>
       );
     }
 
     return (
-      <div style={{ position: 'relative', height: '100%' }}>
+      <div className='relative h-full'>
         {isLoading && (
-          <div
-            style={{
-              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translate(-50%, -50%)',
-              zIndex: 10,
-            }}
-          >
-            <Spin size='large' />
+          <div className='absolute left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2'>
+            <Spinner size='lg' />
           </div>
         )}
         <video
           src={modalContent}
           controls
-          style={{
-            width: '100%',
-            height: '100%',
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain',
-          }}
+          className='h-full max-h-full w-full max-w-full object-contain'
           onError={handleVideoError}
           onLoadedData={handleVideoLoaded}
           onLoadStart={() => setIsLoading(true)}
@@ -153,25 +136,30 @@ const ContentModal = ({
   };
 
   return (
-    <Modal
-      visible={isModalOpen}
-      onOk={() => setIsModalOpen(false)}
-      onCancel={() => setIsModalOpen(false)}
-      closable={null}
-      bodyStyle={{
-        height: isVideo ? '70vh' : '400px',
-        maxHeight: '80vh',
-        overflow: 'auto',
-        padding: isVideo && videoError ? '0' : '24px',
-      }}
-      width={isVideo ? '90vw' : 800}
-      style={isVideo ? { maxWidth: 960 } : undefined}
-    >
-      {isVideo ? (
-        renderVideoContent()
-      ) : (
-        <p style={{ whiteSpace: 'pre-line' }}>{modalContent}</p>
-      )}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size={isVideo ? '5xl' : '3xl'} scroll='inside'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {isVideo ? t('视频预览') : t('内容预览')}
+            </ModalHeader>
+            <ModalBody className={isVideo ? 'h-[70vh] p-4' : 'max-h-[70vh] p-6'}>
+              {isVideo ? (
+                renderVideoContent()
+              ) : (
+                <p className='whitespace-pre-line text-sm text-foreground'>
+                  {modalContent}
+                </p>
+              )}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button color='primary' onPress={() => setIsModalOpen(false)}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/tokens/TokensActions.jsx b/web/src/components/table/tokens/TokensActions.jsx
index 0d6ca9b7a16..5cc75c594c4 100644
--- a/web/src/components/table/tokens/TokensActions.jsx
+++ b/web/src/components/table/tokens/TokensActions.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState } from 'react';
-import { Button, Space } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import { showError } from '../../../helpers';
 import CopyTokensModal from './modals/CopyTokensModal';
 import DeleteTokensModal from './modals/DeleteTokensModal';
@@ -61,35 +61,35 @@ const TokensActions = ({
 
   return (
     <>
-      <div className='flex flex-wrap gap-2 w-full md:w-auto order-2 md:order-1'>
+      <div className='flex flex-wrap gap-2 w-full xl:w-auto order-2 xl:order-1'>
         <Button
-          type='primary'
-          className='flex-1 md:flex-initial'
-          onClick={() => {
+          variant='primary'
+          className='flex-1 xl:flex-initial'
+          onPress={() => {
             setEditingToken({
               id: undefined,
             });
             setShowEdit(true);
           }}
-          size='small'
+          size='sm'
         >
           {t('添加令牌')}
         </Button>
 
         <Button
-          type='tertiary'
-          className='flex-1 md:flex-initial'
-          onClick={handleCopySelectedTokens}
-          size='small'
+          variant='outline'
+          className='flex-1 xl:flex-initial'
+          onPress={handleCopySelectedTokens}
+          size='sm'
         >
           {t('复制所选令牌')}
         </Button>
 
         <Button
-          type='danger'
-          className='w-full md:w-auto'
-          onClick={handleDeleteSelectedTokens}
-          size='small'
+          variant='danger-soft'
+          className='w-full xl:w-auto'
+          onPress={handleDeleteSelectedTokens}
+          size='sm'
         >
           {t('删除所选令牌')}
         </Button>
diff --git a/web/src/components/table/tokens/TokensColumnDefs.jsx b/web/src/components/table/tokens/TokensColumnDefs.jsx
index 86b33dd1584..0725672e4e2 100644
--- a/web/src/components/table/tokens/TokensColumnDefs.jsx
+++ b/web/src/components/table/tokens/TokensColumnDefs.jsx
@@ -17,77 +17,125 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
+import React, { useState } from 'react';
+import { Button, Tooltip } from '@heroui/react';
+import { ChevronDown, Copy as CopyIcon, Eye, EyeOff } from 'lucide-react';
+import HoverPanel from '@/components/common/ui/HoverPanel';
+import ClickMenu from '@/components/common/ui/ClickMenu';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 import {
-  Button,
-  Dropdown,
-  Space,
-  SplitButtonGroup,
-  Tag,
-  AvatarGroup,
-  Avatar,
-  Tooltip,
-  Progress,
-  Popover,
-  Typography,
-  Input,
-  Modal,
-} from '@douyinfe/semi-ui';
-import {
-  timestamp2string,
+  copy,
+  getModelCategories,
   renderGroup,
   renderQuota,
-  getModelCategories,
   showError,
+  showSuccess,
+  timestamp2string,
 } from '../../../helpers';
-import {
-  IconTreeTriangleDown,
-  IconCopy,
-  IconEyeOpened,
-  IconEyeClosed,
-} from '@douyinfe/semi-icons';
-
-// progress color helper
-const getProgressColor = (pct) => {
-  if (pct === 100) return 'var(--semi-color-success)';
-  if (pct <= 10) return 'var(--semi-color-danger)';
-  if (pct <= 30) return 'var(--semi-color-warning)';
-  return undefined;
+
+// ---------- Tailwind primitives ----------
+const TONE_CLASSES = {
+  blue: 'bg-sky-100 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300',
+  green:
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
+  red: 'bg-red-100 text-red-700 dark:bg-red-950/40 dark:text-red-300',
+  yellow:
+    'bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
+  grey: 'bg-surface-secondary text-muted',
+  black: 'bg-foreground text-background',
+  white:
+    'border border-border bg-background text-foreground',
 };
 
+function Chip({ tone = 'white', className = '', children }) {
+  const cls = TONE_CLASSES[tone] || TONE_CLASSES.white;
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls} ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function CopyableLine({ value, children }) {
+  const handleCopy = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (await copy(value)) {
+      showSuccess('已复制');
+    }
+  };
+  return (
+    <div className='group flex items-center gap-1.5'>
+      <span className='min-w-0 truncate'>{children}</span>
+      <button
+        type='button'
+        onClick={handleCopy}
+        aria-label='copy'
+        className='inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted opacity-0 transition group-hover:opacity-100 hover:bg-surface-secondary hover:text-foreground'
+      >
+        <CopyIcon size={11} />
+      </button>
+    </div>
+  );
+}
+
+function ProgressBar({ percent }) {
+  const clamped = Math.max(0, Math.min(100, Number(percent) || 0));
+  let barClass = 'bg-emerald-500';
+  if (clamped === 100) barClass = 'bg-emerald-500';
+  else if (clamped <= 10) barClass = 'bg-red-500';
+  else if (clamped <= 30) barClass = 'bg-amber-500';
+  return (
+    <div className='h-1 w-full overflow-hidden rounded-full bg-surface-secondary'>
+      <div
+        className={`h-full rounded-full ${barClass} transition-all`}
+        style={{ width: `${clamped}%` }}
+      />
+    </div>
+  );
+}
+
+// Vendor avatar pill — replaces HeroCompat Avatar size='extra-extra-small'
+function VendorAvatar({ children, label }) {
+  return (
+    <span
+      aria-label={label}
+      className='inline-flex h-[18px] w-[18px] items-center justify-center rounded-full border border-border bg-background text-[10px] font-semibold text-foreground'
+    >
+      {children}
+    </span>
+  );
+}
+
 // Render functions
 function renderTimestamp(timestamp) {
   return <>{timestamp2string(timestamp)}</>;
 }
 
-// Render status column only (no usage)
 const renderStatus = (text, record, t) => {
   const enabled = text === 1;
 
-  let tagColor = 'black';
-  let tagText = t('未知状态');
+  let tone = 'black';
+  let label = t('未知状态');
   if (enabled) {
-    tagColor = 'green';
-    tagText = t('已启用');
+    tone = 'green';
+    label = t('已启用');
   } else if (text === 2) {
-    tagColor = 'red';
-    tagText = t('已禁用');
+    tone = 'red';
+    label = t('已禁用');
   } else if (text === 3) {
-    tagColor = 'yellow';
-    tagText = t('已过期');
+    tone = 'yellow';
+    label = t('已过期');
   } else if (text === 4) {
-    tagColor = 'grey';
-    tagText = t('已耗尽');
+    tone = 'grey';
+    label = t('已耗尽');
   }
 
-  return (
-    <Tag color={tagColor} shape='circle' size='small'>
-      {tagText}
-    </Tag>
-  );
+  return <Chip tone={tone}>{label}</Chip>;
 };
 
-// Render group column
 const renderGroupColumn = (text, record, t, groupRatios = {}) => {
   if (text === 'auto') {
     return (
@@ -95,12 +143,14 @@ const renderGroupColumn = (text, record, t, groupRatios = {}) => {
         content={t(
           '当前分组为 auto，会自动选择最优分组，当一个组不可用时自动降级到下一个组（熔断机制）',
         )}
-        position='top'
+        placement='top'
       >
-        <Tag color='white' shape='circle'>
-          {t('智能熔断')}
-          {record && record.cross_group_retry ? `(${t('跨分组')})` : ''}
-        </Tag>
+        <span>
+          <Chip tone='white'>
+            {t('智能熔断')}
+            {record && record.cross_group_retry ? `(${t('跨分组')})` : ''}
+          </Chip>
+        </span>
       </Tooltip>
     );
   }
@@ -108,18 +158,13 @@ const renderGroupColumn = (text, record, t, groupRatios = {}) => {
   return (
     <span className='flex items-center gap-1'>
       {renderGroup(text)}
-      {ratio !== undefined && (
-        <Tag size='small' color='green' shape='circle'>
-          {ratio}x
-        </Tag>
-      )}
+      {ratio !== undefined && <Chip tone='green'>{ratio}x</Chip>}
     </span>
   );
 };
 
-// Render token key column with show/hide and copy functionality
-const renderTokenKey = (
-  text,
+// ---------- Token key cell with show/hide + copy menu ----------
+function TokenKeyCell({
   record,
   showKeys,
   resolvedTokenKeys,
@@ -128,7 +173,7 @@ const renderTokenKey = (
   copyTokenKey,
   copyTokenConnectionString,
   t,
-) => {
+}) {
   const revealed = !!showKeys[record.id];
   const loading = !!loadingTokenKeys[record.id];
   const keyValue =
@@ -139,61 +184,54 @@ const renderTokenKey = (
 
   return (
     <div className='w-[200px]'>
-      <Input
-        readOnly
-        value={displayedKey}
-        size='small'
-        suffix={
-          <div className='flex items-center'>
+      <div className='flex h-8 items-center gap-1 overflow-hidden rounded-lg border border-[color:var(--app-border)] bg-background pl-2 text-xs'>
+        <input
+          readOnly
+          value={displayedKey}
+          aria-label={t('密钥')}
+          className='h-full min-w-0 flex-1 bg-transparent text-foreground outline-none'
+        />
+        <Button
+          isIconOnly
+          variant='light'
+          size='sm'
+          aria-label='toggle token visibility'
+          isPending={loading}
+          onPress={async () => {
+            await toggleTokenVisibility(record);
+          }}
+        >
+          {revealed ? <EyeOff size={14} /> : <Eye size={14} />}
+        </Button>
+        <ClickMenu
+          placement='bottomRight'
+          items={[
+            {
+              label: t('复制密钥'),
+              onClick: () => copyTokenKey(record),
+            },
+            {
+              label: t('复制连接信息'),
+              onClick: () => copyTokenConnectionString(record),
+            },
+          ]}
+          trigger={
             <Button
-              theme='borderless'
-              size='small'
-              type='tertiary'
-              icon={revealed ? <IconEyeClosed /> : <IconEyeOpened />}
-              loading={loading}
-              aria-label='toggle token visibility'
-              onClick={async (e) => {
-                e.stopPropagation();
-                await toggleTokenVisibility(record);
-              }}
-            />
-            <Dropdown
-              trigger='click'
-              position='bottomRight'
-              clickToHide
-              menu={[
-                {
-                  node: 'item',
-                  name: t('复制密钥'),
-                  onClick: () => copyTokenKey(record),
-                },
-                {
-                  node: 'item',
-                  name: t('复制连接信息'),
-                  onClick: () => copyTokenConnectionString(record),
-                },
-              ]}
+              isIconOnly
+              variant='light'
+              size='sm'
+              aria-label='copy token key'
+              isPending={loading}
             >
-              <Button
-                theme='borderless'
-                size='small'
-                type='tertiary'
-                icon={<IconCopy />}
-                loading={loading}
-                aria-label='copy token key'
-                onClick={async (e) => {
-                  e.stopPropagation();
-                }}
-              />
-            </Dropdown>
-          </div>
-        }
-      />
+              <CopyIcon size={14} />
+            </Button>
+          }
+        />
+      </div>
     </div>
   );
-};
+}
 
-// Render model limits column
 const renderModelLimits = (text, record, t) => {
   if (record.model_limits_enabled && text) {
     const models = text.split(',').filter(Boolean);
@@ -212,16 +250,14 @@ const renderModelLimits = (text, record, t) => {
           <Tooltip
             key={key}
             content={vendorModels.join(', ')}
-            position='top'
+            placement='top'
             showArrow
           >
-            <Avatar
-              size='extra-extra-small'
-              alt={category.label}
-              color='transparent'
-            >
-              {category.icon}
-            </Avatar>
+            <span>
+              <VendorAvatar label={category.label}>
+                {category.icon}
+              </VendorAvatar>
+            </span>
           </Tooltip>,
         );
         vendorModels.forEach((m) => matchedModels.add(m));
@@ -234,34 +270,26 @@ const renderModelLimits = (text, record, t) => {
         <Tooltip
           key='unknown'
           content={unmatchedModels.join(', ')}
-          position='top'
+          placement='top'
           showArrow
         >
-          <Avatar size='extra-extra-small' alt='unknown'>
-            {t('其他')}
-          </Avatar>
+          <span>
+            <VendorAvatar label='unknown'>{t('其他')}</VendorAvatar>
+          </span>
         </Tooltip>,
       );
     }
 
-    return <AvatarGroup size='extra-extra-small'>{vendorAvatars}</AvatarGroup>;
-  } else {
     return (
-      <Tag color='white' shape='circle'>
-        {t('无限制')}
-      </Tag>
+      <div className='flex flex-wrap items-center gap-1'>{vendorAvatars}</div>
     );
   }
+  return <Chip tone='white'>{t('无限制')}</Chip>;
 };
 
-// Render IP restrictions column
 const renderAllowIps = (text, t) => {
   if (!text || text.trim() === '') {
-    return (
-      <Tag color='white' shape='circle'>
-        {t('无限制')}
-      </Tag>
-    );
+    return <Chip tone='white'>{t('无限制')}</Chip>;
   }
 
   const ips = text
@@ -272,85 +300,75 @@ const renderAllowIps = (text, t) => {
   const displayIps = ips.slice(0, 1);
   const extraCount = ips.length - displayIps.length;
 
-  const ipTags = displayIps.map((ip, idx) => (
-    <Tag key={idx} shape='circle'>
-      {ip}
-    </Tag>
-  ));
-
-  if (extraCount > 0) {
-    ipTags.push(
-      <Tooltip
-        key='extra'
-        content={ips.slice(1).join(', ')}
-        position='top'
-        showArrow
-      >
-        <Tag shape='circle'>{'+' + extraCount}</Tag>
-      </Tooltip>,
-    );
-  }
-
-  return <Space wrap>{ipTags}</Space>;
+  return (
+    <div className='flex flex-wrap items-center gap-1'>
+      {displayIps.map((ip, idx) => (
+        <Chip key={idx} tone='white'>
+          {ip}
+        </Chip>
+      ))}
+      {extraCount > 0 ? (
+        <Tooltip
+          content={ips.slice(1).join(', ')}
+          placement='top'
+          showArrow
+        >
+          <span>
+            <Chip tone='white'>+{extraCount}</Chip>
+          </span>
+        </Tooltip>
+      ) : null}
+    </div>
+  );
 };
 
-// Render separate quota usage column
 const renderQuotaUsage = (text, record, t) => {
-  const { Paragraph } = Typography;
   const used = parseInt(record.used_quota) || 0;
   const remain = parseInt(record.remain_quota) || 0;
   const total = used + remain;
+
   if (record.unlimited_quota) {
     const popoverContent = (
-      <div className='text-xs p-2'>
-        <Paragraph copyable={{ content: renderQuota(used) }}>
+      <div className='space-y-1'>
+        <CopyableLine value={renderQuota(used)}>
           {t('已用额度')}: {renderQuota(used)}
-        </Paragraph>
+        </CopyableLine>
       </div>
     );
     return (
-      <Popover content={popoverContent} position='top'>
-        <Tag color='white' shape='circle'>
-          {t('无限额度')}
-        </Tag>
-      </Popover>
+      <HoverPanel content={popoverContent} placement='top'>
+        <Chip tone='white'>{t('无限额度')}</Chip>
+      </HoverPanel>
     );
   }
+
   const percent = total > 0 ? (remain / total) * 100 : 0;
   const popoverContent = (
-    <div className='text-xs p-2'>
-      <Paragraph copyable={{ content: renderQuota(used) }}>
+    <div className='space-y-1'>
+      <CopyableLine value={renderQuota(used)}>
         {t('已用额度')}: {renderQuota(used)}
-      </Paragraph>
-      <Paragraph copyable={{ content: renderQuota(remain) }}>
+      </CopyableLine>
+      <CopyableLine value={renderQuota(remain)}>
         {t('剩余额度')}: {renderQuota(remain)} ({percent.toFixed(0)}%)
-      </Paragraph>
-      <Paragraph copyable={{ content: renderQuota(total) }}>
+      </CopyableLine>
+      <CopyableLine value={renderQuota(total)}>
         {t('总额度')}: {renderQuota(total)}
-      </Paragraph>
+      </CopyableLine>
     </div>
   );
+
   return (
-    <Popover content={popoverContent} position='top'>
-      <Tag color='white' shape='circle'>
-        <div className='flex flex-col items-end'>
-          <span className='text-xs leading-none'>{`${renderQuota(remain)} / ${renderQuota(total)}`}</span>
-          <Progress
-            percent={percent}
-            stroke={getProgressColor(percent)}
-            aria-label='quota usage'
-            format={() => `${percent.toFixed(0)}%`}
-            style={{ width: '100%', marginTop: '1px', marginBottom: 0 }}
-          />
-        </div>
-      </Tag>
-    </Popover>
+    <HoverPanel content={popoverContent} placement='top'>
+      <span className='inline-flex flex-col items-stretch gap-1 rounded-full border border-border bg-background px-2 py-1 text-xs text-foreground'>
+        <span className='leading-none'>{`${renderQuota(remain)} / ${renderQuota(total)}`}</span>
+        <ProgressBar percent={percent} />
+      </span>
+    </HoverPanel>
   );
 };
 
-// Render operations column
-const renderOperations = (
-  text,
+// ---------- Operations cell (split chat menu + enable/disable + edit + delete) ----------
+function OperationsCell({
   record,
   onOpenLink,
   setEditingToken,
@@ -358,7 +376,9 @@ const renderOperations = (
   manageToken,
   refresh,
   t,
-) => {
+}) {
+  const [confirmDelete, setConfirmDelete] = useState(false);
+
   let chatsArray = [];
   try {
     const raw = localStorage.getItem('chats');
@@ -369,11 +389,8 @@ const renderOperations = (
         const name = Object.keys(item)[0];
         if (!name) continue;
         chatsArray.push({
-          node: 'item',
-          key: i,
           name,
           value: item[name],
-          onClick: () => onOpenLink(name, item[name], record),
         });
       }
     }
@@ -381,15 +398,17 @@ const renderOperations = (
     showError(t('聊天链接配置错误，请联系管理员'));
   }
 
+  const chatMenuItems = chatsArray.map((entry) => ({
+    label: entry.name,
+    onClick: () => onOpenLink(entry.name, entry.value, record),
+  }));
+
   return (
-    <Space wrap>
-      <SplitButtonGroup
-        className='overflow-hidden'
-        aria-label={t('项目操作按钮组')}
-      >
-        <Button
-          size='small'
-          type='tertiary'
+    <div className='flex flex-wrap items-center gap-1.5'>
+      <div className='inline-flex items-stretch overflow-hidden rounded-md border border-[color:var(--app-border)]'>
+        <button
+          type='button'
+          className='px-2.5 py-1 text-xs font-medium text-foreground transition hover:bg-[color:var(--app-background)]'
           onClick={() => {
             if (chatsArray.length === 0) {
               showError(t('请联系管理员配置聊天链接'));
@@ -400,21 +419,28 @@ const renderOperations = (
           }}
         >
           {t('聊天')}
-        </Button>
-        <Dropdown trigger='click' position='bottomRight' menu={chatsArray}>
-          <Button
-            type='tertiary'
-            icon={<IconTreeTriangleDown />}
-            size='small'
-          ></Button>
-        </Dropdown>
-      </SplitButtonGroup>
+        </button>
+        <ClickMenu
+          placement='bottomRight'
+          items={chatMenuItems}
+          trigger={
+            <button
+              type='button'
+              aria-label={t('选择聊天链接')}
+              className='flex items-center justify-center border-l border-[color:var(--app-border)] px-1.5 text-xs text-foreground transition hover:bg-[color:var(--app-background)]'
+            >
+              <ChevronDown size={12} />
+            </button>
+          }
+        />
+      </div>
 
       {record.status === 1 ? (
         <Button
-          type='danger'
-          size='small'
-          onClick={async () => {
+          color='danger'
+          variant='flat'
+          size='sm'
+          onPress={async () => {
             await manageToken(record.id, 'disable', record);
             await refresh();
           }}
@@ -423,8 +449,9 @@ const renderOperations = (
         </Button>
       ) : (
         <Button
-          size='small'
-          onClick={async () => {
+          variant='flat'
+          size='sm'
+          onPress={async () => {
             await manageToken(record.id, 'enable', record);
             await refresh();
           }}
@@ -434,9 +461,9 @@ const renderOperations = (
       )}
 
       <Button
-        type='tertiary'
-        size='small'
-        onClick={() => {
+        variant='light'
+        size='sm'
+        onPress={() => {
           setEditingToken(record);
           setShowEdit(true);
         }}
@@ -445,26 +472,32 @@ const renderOperations = (
       </Button>
 
       <Button
-        type='danger'
-        size='small'
-        onClick={() => {
-          Modal.confirm({
-            title: t('确定是否要删除此令牌？'),
-            content: t('此修改将不可逆'),
-            onOk: () => {
-              (async () => {
-                await manageToken(record.id, 'delete', record);
-                await refresh();
-              })();
-            },
-          });
-        }}
+        color='danger'
+        variant='flat'
+        size='sm'
+        onPress={() => setConfirmDelete(true)}
       >
         {t('删除')}
       </Button>
-    </Space>
+
+      <ConfirmDialog
+        visible={confirmDelete}
+        title={t('确定是否要删除此令牌？')}
+        cancelText={t('取消')}
+        confirmText={t('确定')}
+        danger
+        onCancel={() => setConfirmDelete(false)}
+        onConfirm={async () => {
+          setConfirmDelete(false);
+          await manageToken(record.id, 'delete', record);
+          await refresh();
+        }}
+      >
+        {t('此修改将不可逆')}
+      </ConfirmDialog>
+    </div>
   );
-};
+}
 
 export const getTokensColumns = ({
   t,
@@ -506,18 +539,18 @@ export const getTokensColumns = ({
     {
       title: t('密钥'),
       key: 'token_key',
-      render: (text, record) =>
-        renderTokenKey(
-          text,
-          record,
-          showKeys,
-          resolvedTokenKeys,
-          loadingTokenKeys,
-          toggleTokenVisibility,
-          copyTokenKey,
-          copyTokenConnectionString,
-          t,
-        ),
+      render: (text, record) => (
+        <TokenKeyCell
+          record={record}
+          showKeys={showKeys}
+          resolvedTokenKeys={resolvedTokenKeys}
+          loadingTokenKeys={loadingTokenKeys}
+          toggleTokenVisibility={toggleTokenVisibility}
+          copyTokenKey={copyTokenKey}
+          copyTokenConnectionString={copyTokenConnectionString}
+          t={t}
+        />
+      ),
     },
     {
       title: t('可用模型'),
@@ -532,36 +565,32 @@ export const getTokensColumns = ({
     {
       title: t('创建时间'),
       dataIndex: 'created_time',
-      render: (text, record, index) => {
-        return <div>{renderTimestamp(text)}</div>;
-      },
+      render: (text) => <div>{renderTimestamp(text)}</div>,
     },
     {
       title: t('过期时间'),
       dataIndex: 'expired_time',
-      render: (text, record, index) => {
-        return (
-          <div>
-            {record.expired_time === -1 ? t('永不过期') : renderTimestamp(text)}
-          </div>
-        );
-      },
+      render: (text, record) => (
+        <div>
+          {record.expired_time === -1 ? t('永不过期') : renderTimestamp(text)}
+        </div>
+      ),
     },
     {
       title: '',
       dataIndex: 'operate',
       fixed: 'right',
-      render: (text, record, index) =>
-        renderOperations(
-          text,
-          record,
-          onOpenLink,
-          setEditingToken,
-          setShowEdit,
-          manageToken,
-          refresh,
-          t,
-        ),
+      render: (text, record) => (
+        <OperationsCell
+          record={record}
+          onOpenLink={onOpenLink}
+          setEditingToken={setEditingToken}
+          setShowEdit={setShowEdit}
+          manageToken={manageToken}
+          refresh={refresh}
+          t={t}
+        />
+      ),
     },
   ];
 };
diff --git a/web/src/components/table/tokens/TokensDescription.jsx b/web/src/components/table/tokens/TokensDescription.jsx
index 14baaa80828..a10d4367f30 100644
--- a/web/src/components/table/tokens/TokensDescription.jsx
+++ b/web/src/components/table/tokens/TokensDescription.jsx
@@ -18,19 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
-import { Key } from 'lucide-react';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 
-const { Text } = Typography;
-
 const TokensDescription = ({ compactMode, setCompactMode, t }) => {
   return (
     <div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full'>
-      <div className='flex items-center text-blue-500'>
-        <Key size={16} className='mr-2' />
-        <Text>{t('令牌管理')}</Text>
-      </div>
+      <span className='text-sm font-medium text-foreground'>
+        {t('令牌管理')}
+      </span>
 
       <CompactModeToggle
         compactMode={compactMode}
diff --git a/web/src/components/table/tokens/TokensFilters.jsx b/web/src/components/table/tokens/TokensFilters.jsx
index c6841554b4a..07ab68f915d 100644
--- a/web/src/components/table/tokens/TokensFilters.jsx
+++ b/web/src/components/table/tokens/TokensFilters.jsx
@@ -17,9 +17,12 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef } from 'react';
-import { Form, Button } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+import React from 'react';
+import { Button } from '@heroui/react';
+import {
+  FilterInput,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const TokensFilters = ({
   formInitValues,
@@ -29,77 +32,65 @@ const TokensFilters = ({
   searching,
   t,
 }) => {
-  // Handle form reset and immediate search
-  const formApiRef = useRef(null);
+  const { values, setFieldValue, handleSubmit, api } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: () => searchTokens(1),
+  });
 
   const handleReset = () => {
-    if (!formApiRef.current) return;
-    formApiRef.current.reset();
+    api.reset();
     setTimeout(() => {
       searchTokens();
     }, 100);
   };
 
   return (
-    <Form
-      initValues={formInitValues}
-      getFormApi={(api) => {
-        setFormApi(api);
-        formApiRef.current = api;
-      }}
-      onSubmit={() => searchTokens(1)}
-      allowEmpty={true}
+    <form
+      onSubmit={handleSubmit}
       autoComplete='off'
-      layout='horizontal'
-      trigger='change'
-      stopValidateWithError={false}
-      className='w-full md:w-auto order-1 md:order-2'
+      className='w-full xl:w-auto order-1 xl:order-2'
     >
-      <div className='flex flex-col md:flex-row items-center gap-2 w-full md:w-auto'>
-        <div className='relative w-full md:w-56'>
-          <Form.Input
-            field='searchKeyword'
-            prefix={<IconSearch />}
+      <div className='flex flex-col sm:flex-row sm:flex-wrap xl:flex-nowrap items-stretch sm:items-center gap-2 w-full xl:w-auto'>
+        <div className='relative w-full sm:flex-1 xl:flex-initial xl:w-56'>
+          <FilterInput
+            value={values.searchKeyword}
+            onChange={(value) => setFieldValue('searchKeyword', value)}
             placeholder={t('搜索关键字')}
-            showClear
-            pure
-            size='small'
           />
         </div>
 
-        <div className='relative w-full md:w-56'>
-          <Form.Input
-            field='searchToken'
-            prefix={<IconSearch />}
+        <div className='relative w-full sm:flex-1 xl:flex-initial xl:w-56'>
+          <FilterInput
+            value={values.searchToken}
+            onChange={(value) => setFieldValue('searchToken', value)}
             placeholder={t('密钥')}
-            showClear
-            pure
-            size='small'
           />
         </div>
 
-        <div className='flex gap-2 w-full md:w-auto'>
+        <div className='flex gap-2 w-full sm:w-auto'>
           <Button
-            type='tertiary'
-            htmlType='submit'
-            loading={loading || searching}
-            className='flex-1 md:flex-initial md:w-auto'
-            size='small'
+            type='submit'
+            variant='outline'
+            isPending={loading || searching}
+            className='flex-1 sm:flex-initial sm:w-auto'
+            size='sm'
           >
             {t('查询')}
           </Button>
 
           <Button
-            type='tertiary'
-            onClick={handleReset}
-            className='flex-1 md:flex-initial md:w-auto'
-            size='small'
+            type='button'
+            variant='outline'
+            onPress={handleReset}
+            className='flex-1 sm:flex-initial sm:w-auto'
+            size='sm'
           >
             {t('重置')}
           </Button>
         </div>
       </div>
-    </Form>
+    </form>
   );
 };
 
diff --git a/web/src/components/table/tokens/TokensTable.jsx b/web/src/components/table/tokens/TokensTable.jsx
index a50c1938193..362d5176f82 100644
--- a/web/src/components/table/tokens/TokensTable.jsx
+++ b/web/src/components/table/tokens/TokensTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getTokensColumns } from './TokensColumnDefs';
 
 const TokensTable = (tokensData) => {
@@ -118,14 +114,7 @@ const TokensTable = (tokensData) => {
       rowSelection={rowSelection}
       onRow={handleRow}
       empty={
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={t('搜索无结果')}
-          style={{ padding: 30 }}
-        />
+        <TableEmptyState description={t('搜索无结果')} />
       }
       className='rounded-xl overflow-hidden'
       size='middle'
diff --git a/web/src/components/table/tokens/index.jsx b/web/src/components/table/tokens/index.jsx
index 1711ecde7ab..a0b503fcbc0 100644
--- a/web/src/components/table/tokens/index.jsx
+++ b/web/src/components/table/tokens/index.jsx
@@ -18,19 +18,15 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useRef, useState } from 'react';
-import {
-  Notification,
-  Button,
-  Space,
-  Toast,
-  Typography,
-  Select,
-} from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
+import { X } from 'lucide-react';
 import {
   API,
-  showError,
   getModelCategories,
-  selectFilter,
+  showError,
+  showInfo,
+  showSuccess,
+  showWarning,
 } from '../../../helpers';
 import CardPro from '../../common/ui/CardPro';
 import TokensTable from './TokensTable';
@@ -119,78 +115,35 @@ function TokensPage() {
     }
   };
 
+  const SUPPRESS_KEY = 'fluent_notify_suppressed';
+
   function openFluentNotification(key) {
     const { t } = latestRef.current;
-    const SUPPRESS_KEY = 'fluent_notify_suppressed';
     if (modelOptions.length === 0) {
-      // fire-and-forget; a later effect will refresh the notice content
+      // fire-and-forget; the panel will re-render once options resolve
       loadModels();
     }
     if (!key && localStorage.getItem(SUPPRESS_KEY) === '1') return;
     const container = document.getElementById('fluent-new-api-container');
     if (!container) {
-      Toast.warning(t('未检测到 FluentRead（流畅阅读），请确认扩展已启用'));
+      showWarning(t('未检测到 FluentRead（流畅阅读），请确认扩展已启用'));
       return;
     }
     setPrefillKey(key || '');
     setFluentNoticeOpen(true);
-    Notification.info({
-      id: 'fluent-detected',
-      title: t('检测到 FluentRead（流畅阅读）'),
-      content: (
-        <div>
-          <div style={{ marginBottom: 8 }}>
-            {key
-              ? t('请选择模型。')
-              : t('选择模型后可一键填充当前选中令牌（或本页第一个令牌）。')}
-          </div>
-          <div style={{ marginBottom: 8 }}>
-            <Select
-              placeholder={t('请选择模型')}
-              optionList={modelOptions}
-              onChange={setSelectedModel}
-              filter={selectFilter}
-              style={{ width: 320 }}
-              showClear
-              searchable
-              emptyContent={t('暂无数据')}
-            />
-          </div>
-          <Space>
-            <Button
-              theme='solid'
-              type='primary'
-              onClick={handlePrefillToFluent}
-            >
-              {t('一键填充到 FluentRead')}
-            </Button>
-            {!key && (
-              <Button
-                type='warning'
-                onClick={() => {
-                  localStorage.setItem(SUPPRESS_KEY, '1');
-                  Notification.close('fluent-detected');
-                  Toast.info(t('已关闭后续提醒'));
-                }}
-              >
-                {t('不再提醒')}
-              </Button>
-            )}
-            <Button
-              type='tertiary'
-              onClick={() => Notification.close('fluent-detected')}
-            >
-              {t('关闭')}
-            </Button>
-          </Space>
-        </div>
-      ),
-      duration: 0,
-    });
   }
   // assign after definition so hook callback can call it safely
   openFluentNotificationRef.current = openFluentNotification;
 
+  const closeFluentNotification = () => setFluentNoticeOpen(false);
+
+  const suppressFluentNotification = () => {
+    const { t } = latestRef.current;
+    localStorage.setItem(SUPPRESS_KEY, '1');
+    closeFluentNotification();
+    showInfo(t('已关闭后续提醒'));
+  };
+
   function openCCSwitchModal(key) {
     if (modelOptions.length === 0) {
       loadModels();
@@ -212,12 +165,12 @@ function TokensPage() {
     } = latestRef.current;
     const container = document.getElementById('fluent-new-api-container');
     if (!container) {
-      Toast.error(t('未检测到 Fluent 容器'));
+      showError(t('未检测到 Fluent 容器'));
       return;
     }
 
     if (!chosenModel) {
-      Toast.warning(t('请选择模型'));
+      showWarning(t('请选择模型'));
       return;
     }
 
@@ -242,7 +195,7 @@ function TokensPage() {
             ? tokens[0]
             : null;
       if (!token) {
-        Toast.warning(t('没有可用令牌用于填充'));
+        showWarning(t('没有可用令牌用于填充'));
         return;
       }
       try {
@@ -262,18 +215,17 @@ function TokensPage() {
     container.dispatchEvent(
       new CustomEvent('fluent:prefill', { detail: payload }),
     );
-    Toast.success(t('已发送到 Fluent'));
-    Notification.close('fluent-detected');
+    showSuccess(t('已发送到 Fluent'));
+    setFluentNoticeOpen(false);
   };
 
-  // Show notification when Fluent container is available
+  // Show notice panel when Fluent container is available
   useEffect(() => {
     const onAppeared = () => {
       openFluentNotification();
     };
     const onRemoved = () => {
       setFluentNoticeOpen(false);
-      Notification.close('fluent-detected');
     };
 
     window.addEventListener('fluent-container:appeared', onAppeared);
@@ -284,14 +236,6 @@ function TokensPage() {
     };
   }, []);
 
-  // When modelOptions or language changes while the notice is open, refresh the content
-  useEffect(() => {
-    if (fluentNoticeOpen) {
-      openFluentNotification();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [modelOptions, selectedModel, tokensData.t, fluentNoticeOpen]);
-
   useEffect(() => {
     const selector = '#fluent-new-api-container';
     const root = document.body || document.documentElement;
@@ -377,6 +321,18 @@ function TokensPage() {
 
   return (
     <>
+      <FluentNoticePanel
+        open={fluentNoticeOpen}
+        prefillKey={prefillKey}
+        modelOptions={modelOptions}
+        selectedModel={selectedModel}
+        onSelectModel={setSelectedModel}
+        onConfirm={handlePrefillToFluent}
+        onSuppress={suppressFluentNotification}
+        onClose={closeFluentNotification}
+        t={t}
+      />
+
       <EditTokenModal
         refresh={refresh}
         editingToken={editingToken}
@@ -401,7 +357,7 @@ function TokensPage() {
           />
         }
         actionsArea={
-          <div className='flex flex-col md:flex-row justify-between items-center gap-2 w-full'>
+          <div className='flex flex-col xl:flex-row xl:justify-between xl:items-center gap-2 w-full'>
             <TokensActions
               selectedKeys={selectedKeys}
               setEditingToken={setEditingToken}
@@ -411,7 +367,7 @@ function TokensPage() {
               t={t}
             />
 
-            <div className='w-full md:w-full lg:w-auto order-1 md:order-2'>
+            <div className='w-full xl:w-auto order-1 xl:order-2'>
               <TokensFilters
                 formInitValues={formInitValues}
                 setFormApi={setFormApi}
@@ -440,4 +396,89 @@ function TokensPage() {
   );
 }
 
+// Top-right anchored notice that replaces the legacy Semi `Notification.info`
+// surface. Mirrors the layout the previous Notification rendered: title bar,
+// short intro, model picker (native select for parity with CCSwitchModal),
+// then the action row.
+function FluentNoticePanel({
+  open,
+  prefillKey,
+  modelOptions,
+  selectedModel,
+  onSelectModel,
+  onConfirm,
+  onSuppress,
+  onClose,
+  t,
+}) {
+  if (!open) return null;
+
+  const intro = prefillKey
+    ? t('请选择模型。')
+    : t('选择模型后可一键填充当前选中令牌（或本页第一个令牌）。');
+
+  return (
+    <div
+      role='region'
+      aria-label={t('检测到 FluentRead（流畅阅读）')}
+      className='pointer-events-none fixed right-4 top-20 z-40 flex w-full max-w-sm justify-end px-2'
+    >
+      <div className='pointer-events-auto w-full overflow-hidden rounded-2xl border border-border bg-background/95 shadow-xl backdrop-blur'>
+        <div className='flex items-start justify-between gap-3 border-b border-[color:var(--app-border)] px-4 py-3'>
+          <div className='text-sm font-semibold text-foreground'>
+            {t('检测到 FluentRead（流畅阅读）')}
+          </div>
+          <button
+            type='button'
+            aria-label={t('关闭')}
+            onClick={onClose}
+            className='-mr-1 -mt-1 rounded-md p-1 text-muted transition hover:bg-surface-secondary hover:text-foreground'
+          >
+            <X className='h-4 w-4' />
+          </button>
+        </div>
+
+        <div className='flex flex-col gap-3 px-4 py-3'>
+          <p className='text-xs text-muted'>{intro}</p>
+
+          <select
+            value={selectedModel || ''}
+            onChange={(event) => onSelectModel(event.target.value)}
+            className='h-9 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary'
+          >
+            <option value=''>{t('请选择模型')}</option>
+            {(modelOptions || []).map((option) => (
+              <option key={option.value} value={option.value}>
+                {typeof option.label === 'string' ? option.label : option.value}
+              </option>
+            ))}
+          </select>
+          {(modelOptions || []).length === 0 ? (
+            <div className='-mt-2 text-xs text-muted'>{t('暂无数据')}</div>
+          ) : null}
+        </div>
+
+        <div className='flex flex-wrap items-center justify-end gap-2 border-t border-[color:var(--app-border)] bg-surface-secondary/40 px-4 py-3'>
+          {!prefillKey && (
+            <Button
+              size='sm'
+              variant='flat'
+              color='warning'
+              onPress={onSuppress}
+            >
+              {t('不再提醒')}
+            </Button>
+          )}
+          <Button size='sm' variant='light' onPress={onClose}>
+            {t('关闭')}
+          </Button>
+          <Button size='sm' color='primary' onPress={onConfirm}>
+            {t('一键填充到 FluentRead')}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default TokensPage;
diff --git a/web/src/components/table/tokens/modals/CCSwitchModal.jsx b/web/src/components/table/tokens/modals/CCSwitchModal.jsx
index 6cf817330a5..96a4b8f57b8 100644
--- a/web/src/components/table/tokens/modals/CCSwitchModal.jsx
+++ b/web/src/components/table/tokens/modals/CCSwitchModal.jsx
@@ -19,15 +19,18 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useState, useEffect, useMemo } from 'react';
 import {
   Modal,
-  RadioGroup,
-  Radio,
-  Select,
+  Button,
   Input,
-  Toast,
-  Typography,
-} from '@douyinfe/semi-ui';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import { useTranslation } from 'react-i18next';
-import { selectFilter } from '../../../../helpers';
+import { showWarning } from '../../../../helpers';
 
 const APP_CONFIGS = {
   claude: {
@@ -90,6 +93,12 @@ export default function CCSwitchModal({
   const [app, setApp] = useState('claude');
   const [name, setName] = useState(APP_CONFIGS.claude.defaultName);
   const [models, setModels] = useState({});
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onClose();
+    },
+  });
 
   const currentConfig = APP_CONFIGS[app];
 
@@ -113,7 +122,7 @@ export default function CCSwitchModal({
 
   const handleSubmit = () => {
     if (!models.model) {
-      Toast.warning(t('请选择主模型'));
+      showWarning(t('请选择主模型'));
       return;
     }
     const url = buildCCSwitchURL(app, name, models, 'sk-' + tokenKey);
@@ -122,73 +131,94 @@ export default function CCSwitchModal({
   };
 
   const fieldLabelStyle = useMemo(
-    () => ({
-      marginBottom: 4,
-      fontSize: 13,
-      color: 'var(--semi-color-text-1)',
-    }),
+    () => 'mb-1 text-[13px] font-medium text-foreground',
     [],
   );
 
   return (
-    <Modal
-      title={t('填入 CC Switch')}
-      visible={visible}
-      onCancel={onClose}
-      onOk={handleSubmit}
-      okText={t('打开 CC Switch')}
-      cancelText={t('取消')}
-      maskClosable={false}
-      width={480}
-    >
-      <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-        <div>
-          <div style={fieldLabelStyle}>{t('应用')}</div>
-          <RadioGroup
-            type='button'
-            value={app}
-            onChange={(e) => handleAppChange(e.target.value)}
-            style={{ width: '100%' }}
-          >
-            {Object.entries(APP_CONFIGS).map(([key, cfg]) => (
-              <Radio key={key} value={key}>
-                {cfg.label}
-              </Radio>
-            ))}
-          </RadioGroup>
-        </div>
-
-        <div>
-          <div style={fieldLabelStyle}>{t('名称')}</div>
-          <Input
-            value={name}
-            onChange={setName}
-            placeholder={currentConfig.defaultName}
-          />
-        </div>
-
-        {currentConfig.modelFields.map((field) => (
-          <div key={field.key}>
-            <div style={fieldLabelStyle}>
-              {t(field.label)}
-              {field.key === 'model' && (
-                <Typography.Text type='danger'> *</Typography.Text>
-              )}
-            </div>
-            <Select
-              placeholder={t('请选择模型')}
-              optionList={modelOptions}
-              value={models[field.key] || undefined}
-              onChange={(val) => handleModelChange(field.key, val)}
-              filter={selectFilter}
-              style={{ width: '100%' }}
-              showClear
-              searchable
-              emptyContent={t('暂无数据')}
-            />
-          </div>
-        ))}
-      </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='lg' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('填入 CC Switch')}
+            </ModalHeader>
+            <ModalBody className='px-6 py-5'>
+              <div className='flex flex-col gap-4'>
+                <div>
+                  <div className={fieldLabelStyle}>{t('应用')}</div>
+                  <div className='grid grid-cols-3 gap-2'>
+                    {Object.entries(APP_CONFIGS).map(([key, cfg]) => (
+                      <button
+                        key={key}
+                        type='button'
+                        onClick={() => handleAppChange(key)}
+                        className={`rounded-xl border px-3 py-2 text-sm font-medium transition ${
+                          app === key
+                            ? 'border-sky-400 bg-sky-50 text-sky-700 dark:border-sky-500 dark:bg-sky-500/10 dark:text-sky-200'
+                            : 'border-border bg-background text-muted hover:border-primary'
+                        }`}
+                      >
+                        {cfg.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <div className={fieldLabelStyle}>{t('名称')}</div>
+                  <Input
+                    value={name}
+                    onValueChange={setName}
+                    placeholder={currentConfig.defaultName}
+                    size='sm'
+                  />
+                </div>
+
+                {currentConfig.modelFields.map((field) => (
+                  <div key={field.key}>
+                    <div className={fieldLabelStyle}>
+                      {t(field.label)}
+                      {field.key === 'model' && (
+                        <span className='text-danger'> *</span>
+                      )}
+                    </div>
+                    <select
+                      value={models[field.key] || ''}
+                      onChange={(event) =>
+                        handleModelChange(field.key, event.target.value)
+                      }
+                      className='h-9 w-full rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary'
+                    >
+                      <option value=''>{t('请选择模型')}</option>
+                      {(modelOptions || []).map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {typeof option.label === 'string'
+                            ? option.label
+                            : option.value}
+                        </option>
+                      ))}
+                    </select>
+                    {(modelOptions || []).length === 0 ? (
+                      <div className='mt-1 text-xs text-muted'>
+                        {t('暂无数据')}
+                      </div>
+                    ) : null}
+                  </div>
+                ))}
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={onClose}>
+                {t('取消')}
+              </Button>
+              <Button color='primary' onPress={handleSubmit}>
+                {t('打开 CC Switch')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 }
diff --git a/web/src/components/table/tokens/modals/CopyTokensModal.jsx b/web/src/components/table/tokens/modals/CopyTokensModal.jsx
index bb8ae9657e4..4262e7aba94 100644
--- a/web/src/components/table/tokens/modals/CopyTokensModal.jsx
+++ b/web/src/components/table/tokens/modals/CopyTokensModal.jsx
@@ -18,7 +18,17 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Button, Space } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 
 const CopyTokensModal = ({
   visible,
@@ -26,6 +36,13 @@ const CopyTokensModal = ({
   batchCopyTokens,
   t,
 }) => {
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel();
+    },
+  });
+
   // Handle copy with name and key format
   const handleCopyWithName = async () => {
     await batchCopyTokens('name+key');
@@ -39,21 +56,27 @@ const CopyTokensModal = ({
   };
 
   return (
-    <Modal
-      title={t('复制令牌')}
-      icon={null}
-      visible={visible}
-      onCancel={onCancel}
-      footer={
-        <Space>
-          <Button type='tertiary' onClick={handleCopyWithName}>
-            {t('名称+密钥')}
-          </Button>
-          <Button onClick={handleCopyKeyOnly}>{t('仅密钥')}</Button>
-        </Space>
-      }
-    >
-      {t('请选择你的复制方式')}
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='md' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('复制令牌')}
+            </ModalHeader>
+            <ModalBody className='px-6 py-5 text-sm text-muted'>
+              {t('请选择你的复制方式')}
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='flat' onPress={handleCopyWithName}>
+                {t('名称+密钥')}
+              </Button>
+              <Button color='primary' onPress={handleCopyKeyOnly}>
+                {t('仅密钥')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/tokens/modals/DeleteTokensModal.jsx b/web/src/components/table/tokens/modals/DeleteTokensModal.jsx
index 21b04223f47..ccdb00f5f05 100644
--- a/web/src/components/table/tokens/modals/DeleteTokensModal.jsx
+++ b/web/src/components/table/tokens/modals/DeleteTokensModal.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const DeleteTokensModal = ({
   visible,
@@ -28,19 +28,20 @@ const DeleteTokensModal = ({
   t,
 }) => {
   return (
-    <Modal
+    <ConfirmDialog
       title={t('批量删除令牌')}
       visible={visible}
       onCancel={onCancel}
-      onOk={onConfirm}
-      type='warning'
+      onConfirm={onConfirm}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
     >
       <div>
         {t('确定要删除所选的 {{count}} 个令牌吗？', {
           count: selectedKeys.length,
         })}
       </div>
-    </Modal>
+    </ConfirmDialog>
   );
 };
 
diff --git a/web/src/components/table/tokens/modals/EditTokenModal.jsx b/web/src/components/table/tokens/modals/EditTokenModal.jsx
index 9112658bd54..f6297bf8992 100644
--- a/web/src/components/table/tokens/modals/EditTokenModal.jsx
+++ b/web/src/components/table/tokens/modals/EditTokenModal.jsx
@@ -6,202 +6,298 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useContext, useRef } from 'react';
+import React, { useEffect, useState, useContext } from 'react';
+import { Button, Card, Spinner, Switch } from '@heroui/react';
+import {
+  CreditCard,
+  KeyRound,
+  Link as LinkIcon,
+  Save,
+  X,
+} from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import {
   API,
   showError,
   showSuccess,
   timestamp2string,
-  renderGroupOption,
   getCurrencyConfig,
   getModelCategories,
-  selectFilter,
 } from '../../../../helpers';
 import {
   quotaToDisplayAmount,
   displayAmountToQuota,
 } from '../../../../helpers/quota';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
-import {
-  Button,
-  SideSheet,
-  Space,
-  Spin,
-  Typography,
-  Card,
-  Tag,
-  Avatar,
-  Form,
-  Col,
-  Row,
-  InputNumber,
-} from '@douyinfe/semi-ui';
-import {
-  IconCreditCard,
-  IconLink,
-  IconSave,
-  IconClose,
-  IconKey,
-} from '@douyinfe/semi-icons';
-import { useTranslation } from 'react-i18next';
 import { StatusContext } from '../../../../context/Status';
 
-const { Text, Title } = Typography;
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+};
+
+function StatusChip({ tone, children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.blue
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function FieldError({ children }) {
+  if (!children) return null;
+  return <div className='mt-1 text-xs text-danger'>{children}</div>;
+}
+
+// Replaces Semi `<Avatar>` icon-tile with a flat round container that
+// follows the rest of /console.
+function IconTile({ tone, children }) {
+  const cls =
+    {
+      blue: 'bg-primary/10 text-primary',
+      green: 'bg-success/10 text-success',
+      purple:
+        'bg-[color-mix(in_oklab,var(--app-primary)_8%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_82%,var(--app-foreground))]',
+    }[tone] || 'bg-primary/10 text-primary';
+  return (
+    <div
+      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${cls}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+const INIT_VALUES = {
+  name: '',
+  remain_quota: 0,
+  remain_amount: 0,
+  expired_time: -1,
+  unlimited_quota: true,
+  model_limits_enabled: false,
+  model_limits: [],
+  allow_ips: '',
+  group: '',
+  cross_group_retry: false,
+  tokenCount: 1,
+};
+
+// Convert a server timestamp/string `expired_time` into the format
+// expected by `<input type='datetime-local'>`. The original Semi
+// `Form.DatePicker` accepted both -1 and a `YYYY-MM-DD HH:mm:ss` string.
+const toDateTimeInputValue = (value) => {
+  if (value === -1 || value === null || value === undefined || value === '') {
+    return '';
+  }
+  if (typeof value === 'number') {
+    const date = new Date(value * 1000);
+    if (Number.isNaN(date.getTime())) return '';
+    return date.toISOString().slice(0, 16);
+  }
+  // Server already gave us "YYYY-MM-DD HH:mm:ss"; convert to the
+  // `<input>` format "YYYY-MM-DDTHH:mm".
+  const time = Date.parse(value);
+  if (Number.isNaN(time)) return '';
+  const d = new Date(time);
+  const pad = (n) => n.toString().padStart(2, '0');
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
 
 const EditTokenModal = (props) => {
   const { t } = useTranslation();
-  const [statusState, statusDispatch] = useContext(StatusContext);
+  const [statusState] = useContext(StatusContext);
   const [loading, setLoading] = useState(false);
   const isMobile = useIsMobile();
-  const formApiRef = useRef(null);
   const [models, setModels] = useState([]);
   const [groups, setGroups] = useState([]);
   const [showQuotaInput, setShowQuotaInput] = useState(false);
-  const isEdit = props.editingToken.id !== undefined;
-
-  const getInitValues = () => ({
-    name: '',
-    remain_quota: 0,
-    remain_amount: 0,
-    expired_time: -1,
-    unlimited_quota: true,
-    model_limits_enabled: false,
-    model_limits: [],
-    allow_ips: '',
-    group: '',
-    cross_group_retry: false,
-    tokenCount: 1,
-  });
-
-  const handleCancel = () => {
-    props.handleClose();
+  const [values, setValues] = useState(INIT_VALUES);
+  const [errors, setErrors] = useState({});
+  const isEdit = props.editingToken?.id !== undefined;
+
+  const setField = (key) => (value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
   };
 
+  const reset = () => {
+    setValues(INIT_VALUES);
+    setErrors({});
+    setShowQuotaInput(false);
+  };
+
+  // Sets `expired_time` to a timestamp (in seconds) `month`+`day`+`hour`
+  // +`minute` from now. Passing all zeroes resets to "永不过期" (-1).
   const setExpiredTime = (month, day, hour, minute) => {
-    let now = new Date();
+    const now = new Date();
     let timestamp = now.getTime() / 1000;
-    let seconds = month * 30 * 24 * 60 * 60;
-    seconds += day * 24 * 60 * 60;
-    seconds += hour * 60 * 60;
-    seconds += minute * 60;
-    if (!formApiRef.current) return;
+    let seconds =
+      month * 30 * 24 * 60 * 60 +
+      day * 24 * 60 * 60 +
+      hour * 60 * 60 +
+      minute * 60;
     if (seconds !== 0) {
       timestamp += seconds;
-      formApiRef.current.setValue('expired_time', timestamp2string(timestamp));
+      setField('expired_time')(timestamp2string(timestamp));
     } else {
-      formApiRef.current.setValue('expired_time', -1);
+      setField('expired_time')(-1);
     }
   };
 
   const loadModels = async () => {
-    let res = await API.get(`/api/user/models`);
-    const { success, message, data } = res.data;
-    if (success) {
-      const categories = getModelCategories(t);
-      let localModelOptions = data.map((model) => {
-        let icon = null;
-        for (const [key, category] of Object.entries(categories)) {
-          if (key !== 'all' && category.filter({ model_name: model })) {
-            icon = category.icon;
-            break;
+    try {
+      const res = await API.get(`/api/user/models`);
+      const { success, message, data } = res.data || {};
+      if (success && Array.isArray(data)) {
+        const categories = getModelCategories(t);
+        const modelOptions = data.map((model) => {
+          let icon = null;
+          for (const [key, category] of Object.entries(categories)) {
+            if (key !== 'all' && category.filter({ model_name: model })) {
+              icon = category.icon;
+              break;
+            }
           }
-        }
-        return {
-          label: (
-            <span className='flex items-center gap-1'>
-              {icon}
-              {model}
-            </span>
-          ),
-          value: model,
-        };
-      });
-      setModels(localModelOptions);
-    } else {
-      showError(t(message));
+          return {
+            label: (
+              <span className='flex items-center gap-1'>
+                {icon}
+                {model}
+              </span>
+            ),
+            value: model,
+          };
+        });
+        setModels(modelOptions);
+      } else {
+        showError(t(message || '获取模型列表失败'));
+      }
+    } catch (error) {
+      showError(error?.response?.data?.message || error.message);
     }
   };
 
   const loadGroups = async () => {
-    let res = await API.get(`/api/user/self/groups`);
-    const { success, message, data } = res.data;
-    if (success) {
-      let localGroupOptions = Object.entries(data).map(([group, info]) => ({
-        label: info.desc,
-        value: group,
-        ratio: info.ratio,
-      }));
-      if (statusState?.status?.default_use_auto_group) {
-        if (localGroupOptions.some((group) => group.value === 'auto')) {
-          localGroupOptions.sort((a, b) => (a.value === 'auto' ? -1 : 1));
+    try {
+      const res = await API.get(`/api/user/self/groups`);
+      const { success, message, data } = res.data || {};
+      if (success && data && typeof data === 'object') {
+        let localGroupOptions = Object.entries(data).map(([group, info]) => ({
+          label: info.desc,
+          value: group,
+          ratio: info.ratio,
+        }));
+        if (statusState?.status?.default_use_auto_group) {
+          if (localGroupOptions.some((group) => group.value === 'auto')) {
+            localGroupOptions.sort((a, b) => (a.value === 'auto' ? -1 : 1));
+          }
         }
+        setGroups(localGroupOptions);
+      } else {
+        showError(t(message || '获取分组列表失败'));
       }
-      setGroups(localGroupOptions);
-      // if (statusState?.status?.default_use_auto_group && formApiRef.current) {
-      //   formApiRef.current.setValue('group', 'auto');
-      // }
-    } else {
-      showError(t(message));
+    } catch (error) {
+      showError(error?.response?.data?.message || error.message);
     }
   };
 
   const loadToken = async () => {
     setLoading(true);
-    let res = await API.get(`/api/token/${props.editingToken.id}`);
-    const { success, message, data } = res.data;
-    if (success) {
-      if (data.expired_time !== -1) {
-        data.expired_time = timestamp2string(data.expired_time);
-      }
-      if (data.model_limits !== '') {
-        data.model_limits = data.model_limits.split(',');
+    try {
+      const res = await API.get(`/api/token/${props.editingToken.id}`);
+      const { success, message, data } = res.data || {};
+      if (success && data) {
+        // Defensive null-handling — server occasionally sends `null` for
+        // empty model_limits, which used to throw `Cannot read properties of
+        // null (reading 'map')` when consumers later did
+        // `model_limits.split(',')`.
+        const modelLimits =
+          typeof data.model_limits === 'string' && data.model_limits !== ''
+            ? data.model_limits.split(',')
+            : [];
+        const expired =
+          data.expired_time && data.expired_time !== -1
+            ? timestamp2string(data.expired_time)
+            : -1;
+        setValues({
+          ...INIT_VALUES,
+          ...data,
+          expired_time: expired,
+          model_limits: modelLimits,
+          remain_amount: Number(
+            quotaToDisplayAmount(data.remain_quota || 0).toFixed(6),
+          ),
+        });
       } else {
-        data.model_limits = [];
-      }
-      data.remain_amount = Number(
-        quotaToDisplayAmount(data.remain_quota || 0).toFixed(6),
-      );
-      if (formApiRef.current) {
-        formApiRef.current.setValues({ ...getInitValues(), ...data });
+        showError(message);
       }
-    } else {
-      showError(message);
+    } catch (error) {
+      showError(error?.response?.data?.message || error.message);
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
+  // Initial load: models + groups regardless of edit/create
   useEffect(() => {
-    if (formApiRef.current) {
-      if (!isEdit) {
-        formApiRef.current.setValues(getInitValues());
-      }
-    }
     loadModels();
     loadGroups();
-  }, [props.editingToken.id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.editingToken?.id]);
 
+  // Open: load existing token (edit) or reset (create)
   useEffect(() => {
     if (props.visiable) {
       if (isEdit) {
         loadToken();
       } else {
-        formApiRef.current?.setValues(getInitValues());
+        reset();
       }
     } else {
-      formApiRef.current?.reset();
+      reset();
     }
-  }, [props.visiable, props.editingToken.id]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.visiable, props.editingToken?.id]);
+
+  // ESC-to-close
+  useEffect(() => {
+    if (!props.visiable) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') props.handleClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [props.visiable, props.handleClose]);
 
   const generateRandomSuffix = () => {
     const characters =
@@ -215,438 +311,567 @@ const EditTokenModal = (props) => {
     return result;
   };
 
-  const submit = async (values) => {
-    setLoading(true);
-    if (isEdit) {
-      let { tokenCount: _tc, ...localInputs } = values;
-      localInputs.remain_quota = localInputs.unlimited_quota
-        ? 0
-        : displayAmountToQuota(localInputs.remain_amount);
-      if (!localInputs.unlimited_quota && localInputs.remain_quota <= 0) {
-        showError(t('请输入金额'));
-        setLoading(false);
-        return;
+  const validate = () => {
+    const next = {};
+    if (!values.name?.trim()) {
+      next.name = t('请输入名称');
+    }
+    if (values.expired_time !== -1) {
+      const time = Date.parse(values.expired_time);
+      if (Number.isNaN(time)) {
+        next.expired_time = t('过期时间格式错误！');
+      } else if (time <= Date.now()) {
+        next.expired_time = t('过期时间不能早于当前时间！');
       }
-      if (localInputs.expired_time !== -1) {
-        let time = Date.parse(localInputs.expired_time);
-        if (isNaN(time)) {
-          showError(t('过期时间格式错误！'));
-          setLoading(false);
-          return;
-        }
-        localInputs.expired_time = Math.ceil(time / 1000);
+    } else if (values.expired_time === '' || values.expired_time === null) {
+      next.expired_time = t('请选择过期时间');
+    }
+    if (!values.unlimited_quota) {
+      const amt = Number(values.remain_amount);
+      if (!Number.isFinite(amt) || amt <= 0) {
+        next.remain_amount = t('请输入金额');
       }
-      localInputs.model_limits = localInputs.model_limits.join(',');
-      localInputs.model_limits_enabled = localInputs.model_limits.length > 0;
-      let res = await API.put(`/api/token/`, {
-        ...localInputs,
-        id: parseInt(props.editingToken.id),
-      });
-      const { success, message } = res.data;
-      if (success) {
-        showSuccess(t('令牌更新成功！'));
-        props.refresh();
-        props.handleClose();
-      } else {
-        showError(t(message));
+    }
+    if (!isEdit) {
+      const count = parseInt(values.tokenCount, 10);
+      if (!Number.isFinite(count) || count < 1) {
+        next.tokenCount = t('请输入新建数量');
       }
-    } else {
-      const count = parseInt(values.tokenCount, 10) || 1;
-      let successCount = 0;
-      for (let i = 0; i < count; i++) {
-        let { tokenCount: _tc, ...localInputs } = values;
-        const baseName =
-          values.name.trim() === '' ? 'default' : values.name.trim();
-        if (i !== 0 || values.name.trim() === '') {
-          localInputs.name = `${baseName}-${generateRandomSuffix()}`;
-        } else {
-          localInputs.name = baseName;
-        }
+    }
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
+  const handleDateTimeChange = (raw) => {
+    if (!raw) {
+      setField('expired_time')(-1);
+      return;
+    }
+    setField('expired_time')(raw.replace('T', ' ') + ':00');
+  };
+
+  const submit = async () => {
+    if (!validate()) return;
+
+    setLoading(true);
+    try {
+      if (isEdit) {
+        const { tokenCount: _tc, ...localInputs } = values;
         localInputs.remain_quota = localInputs.unlimited_quota
           ? 0
           : displayAmountToQuota(localInputs.remain_amount);
-        if (!localInputs.unlimited_quota && localInputs.remain_quota <= 0) {
-          showError(t('请输入金额'));
-          setLoading(false);
-          break;
-        }
-
         if (localInputs.expired_time !== -1) {
-          let time = Date.parse(localInputs.expired_time);
-          if (isNaN(time)) {
-            showError(t('过期时间格式错误！'));
-            setLoading(false);
-            break;
-          }
+          const time = Date.parse(localInputs.expired_time);
           localInputs.expired_time = Math.ceil(time / 1000);
         }
-        localInputs.model_limits = localInputs.model_limits.join(',');
-        localInputs.model_limits_enabled = localInputs.model_limits.length > 0;
-        let res = await API.post(`/api/token/`, localInputs);
-        const { success, message } = res.data;
+        const limits = Array.isArray(localInputs.model_limits)
+          ? localInputs.model_limits
+          : [];
+        localInputs.model_limits = limits.join(',');
+        localInputs.model_limits_enabled = limits.length > 0;
+        const res = await API.put(`/api/token/`, {
+          ...localInputs,
+          id: parseInt(props.editingToken.id),
+        });
+        const { success, message } = res.data || {};
         if (success) {
-          successCount++;
+          showSuccess(t('令牌更新成功！'));
+          props.refresh();
+          props.handleClose();
         } else {
           showError(t(message));
-          break;
+        }
+      } else {
+        const count = parseInt(values.tokenCount, 10) || 1;
+        let successCount = 0;
+        for (let i = 0; i < count; i++) {
+          const { tokenCount: _tc, ...localInputs } = values;
+          const baseName =
+            values.name.trim() === '' ? 'default' : values.name.trim();
+          if (i !== 0 || values.name.trim() === '') {
+            localInputs.name = `${baseName}-${generateRandomSuffix()}`;
+          } else {
+            localInputs.name = baseName;
+          }
+          localInputs.remain_quota = localInputs.unlimited_quota
+            ? 0
+            : displayAmountToQuota(localInputs.remain_amount);
+          if (localInputs.expired_time !== -1) {
+            const time = Date.parse(localInputs.expired_time);
+            localInputs.expired_time = Math.ceil(time / 1000);
+          }
+          const limits = Array.isArray(localInputs.model_limits)
+            ? localInputs.model_limits
+            : [];
+          localInputs.model_limits = limits.join(',');
+          localInputs.model_limits_enabled = limits.length > 0;
+          const res = await API.post(`/api/token/`, localInputs);
+          const { success, message } = res.data || {};
+          if (success) {
+            successCount++;
+          } else {
+            showError(t(message));
+            break;
+          }
+        }
+        if (successCount > 0) {
+          showSuccess(t('令牌创建成功，请在列表页面点击复制获取令牌！'));
+          props.refresh();
+          props.handleClose();
         }
       }
-      if (successCount > 0) {
-        showSuccess(t('令牌创建成功，请在列表页面点击复制获取令牌！'));
-        props.refresh();
-        props.handleClose();
-      }
+    } finally {
+      setLoading(false);
+      reset();
     }
-    setLoading(false);
-    formApiRef.current?.setValues(getInitValues());
   };
 
+  // Multi-select toggle for model limits
+  const toggleModelLimit = (modelValue) => {
+    setField('model_limits')(
+      values.model_limits.includes(modelValue)
+        ? values.model_limits.filter((m) => m !== modelValue)
+        : [...values.model_limits, modelValue],
+    );
+  };
+
+  const sidePlacement = isEdit ? 'right' : 'left';
+  const slideOpen =
+    sidePlacement === 'right' ? 'translate-x-0' : 'translate-x-0';
+  const slideClose =
+    sidePlacement === 'right' ? 'translate-x-full' : '-translate-x-full';
+  const positionClass =
+    sidePlacement === 'right'
+      ? 'fixed bottom-0 right-0 top-0'
+      : 'fixed bottom-0 left-0 top-0';
+
   return (
-    <SideSheet
-      placement={isEdit ? 'right' : 'left'}
-      title={
-        <Space>
-          {isEdit ? (
-            <Tag color='blue' shape='circle'>
-              {t('更新')}
-            </Tag>
-          ) : (
-            <Tag color='green' shape='circle'>
-              {t('新建')}
-            </Tag>
+    <>
+      <div
+        aria-hidden={!props.visiable}
+        onClick={props.handleClose}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          props.visiable ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!props.visiable}
+        style={{ width: isMobile ? '100%' : 600 }}
+        className={`${positionClass} z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          props.visiable ? slideOpen : slideClose
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-border px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <StatusChip tone={isEdit ? 'blue' : 'green'}>
+              {isEdit ? t('更新') : t('新建')}
+            </StatusChip>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
+              {isEdit ? t('更新令牌信息') : t('创建新的令牌')}
+            </h4>
+          </div>
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={props.handleClose}
+          >
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='relative flex-1 overflow-y-auto p-3'>
+          {loading && (
+            <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+              <Spinner color='primary' />
+            </div>
           )}
-          <Title heading={4} className='m-0'>
-            {isEdit ? t('更新令牌信息') : t('创建新的令牌')}
-          </Title>
-        </Space>
-      }
-      bodyStyle={{ padding: '0' }}
-      visible={props.visiable}
-      width={isMobile ? '100%' : 600}
-      footer={
-        <div className='flex justify-end bg-white'>
-          <Space>
-            <Button
-              theme='solid'
-              className='!rounded-lg'
-              onClick={() => formApiRef.current?.submitForm()}
-              icon={<IconSave />}
-              loading={loading}
-            >
-              {t('提交')}
-            </Button>
-            <Button
-              theme='light'
-              className='!rounded-lg'
-              type='primary'
-              onClick={handleCancel}
-              icon={<IconClose />}
-            >
-              {t('取消')}
-            </Button>
-          </Space>
-        </div>
-      }
-      closeIcon={null}
-      onCancel={() => handleCancel()}
-    >
-      <Spin spinning={loading}>
-        <Form
-          key={isEdit ? 'edit' : 'new'}
-          initValues={getInitValues()}
-          getFormApi={(api) => (formApiRef.current = api)}
-          onSubmit={submit}
-        >
-          {({ values }) => (
-            <div className='p-2'>
-              {/* 基本信息 */}
-              <Card className='!rounded-2xl shadow-sm border-0'>
-                <div className='flex items-center mb-2'>
-                  <Avatar size='small' color='blue' className='mr-2 shadow-md'>
-                    <IconKey size={16} />
-                  </Avatar>
-                  <div>
-                    <Text className='text-lg font-medium'>{t('基本信息')}</Text>
-                    <div className='text-xs text-gray-600'>
-                      {t('设置令牌的基本信息')}
-                    </div>
+
+          {/* 基本信息 */}
+          <Card className='mb-3 !rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <IconTile tone='blue'>
+                  <KeyRound size={16} />
+                </IconTile>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('基本信息')}
+                  </div>
+                  <div className='text-xs text-muted'>
+                    {t('设置令牌的基本信息')}
                   </div>
                 </div>
-                <Row gutter={12}>
-                  <Col span={24}>
-                    <Form.Input
-                      field='name'
-                      label={t('名称')}
-                      placeholder={t('请输入名称')}
-                      rules={[{ required: true, message: t('请输入名称') }]}
-                      showClear
+              </div>
+
+              <div className='space-y-3'>
+                <div className='space-y-2'>
+                  <FieldLabel required>{t('名称')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={values.name}
+                    onChange={(event) =>
+                      setField('name')(event.target.value)
+                    }
+                    placeholder={t('请输入名称')}
+                    className={inputClass}
+                  />
+                  <FieldError>{errors.name}</FieldError>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('令牌分组')}</FieldLabel>
+                  {groups.length > 0 ? (
+                    <select
+                      value={values.group || ''}
+                      onChange={(event) =>
+                        setField('group')(event.target.value)
+                      }
+                      className={inputClass}
+                    >
+                      <option value=''>
+                        {t('令牌分组，默认为用户的分组')}
+                      </option>
+                      {groups.map((g) => (
+                        <option key={g.value} value={g.value}>
+                          {g.label}
+                          {g.ratio !== undefined ? ` (${g.ratio}x)` : ''}
+                        </option>
+                      ))}
+                    </select>
+                  ) : (
+                    <select disabled className={inputClass}>
+                      <option>{t('管理员未设置用户可选分组')}</option>
+                    </select>
+                  )}
+                </div>
+
+                {values.group === 'auto' && (
+                  <label className='flex items-center justify-between gap-3'>
+                    <div>
+                      <div className='text-sm font-medium text-foreground'>
+                        {t('跨分组重试')}
+                      </div>
+                      <div className='text-xs text-muted'>
+                        {t(
+                          '开启后，当前分组渠道失败时会按顺序尝试下一个分组的渠道',
+                        )}
+                      </div>
+                    </div>
+                    <Switch
+                      isSelected={values.cross_group_retry}
+                      onValueChange={setField('cross_group_retry')}
+                      size='sm'
+                      aria-label={t('跨分组重试')}
+                    >
+                      <Switch.Control>
+                        <Switch.Thumb />
+                      </Switch.Control>
+                    </Switch>
+                  </label>
+                )}
+
+                <div className='grid grid-cols-1 gap-3 lg:grid-cols-12'>
+                  <div className='space-y-2 lg:col-span-5'>
+                    <FieldLabel required>{t('过期时间')}</FieldLabel>
+                    <input
+                      type='datetime-local'
+                      value={
+                        values.expired_time === -1
+                          ? ''
+                          : toDateTimeInputValue(values.expired_time)
+                      }
+                      onChange={(event) =>
+                        handleDateTimeChange(event.target.value)
+                      }
+                      className={inputClass}
                     />
-                  </Col>
-                  <Col span={24}>
-                    {groups.length > 0 ? (
-                      <Form.Select
-                        field='group'
-                        label={t('令牌分组')}
-                        placeholder={t('令牌分组，默认为用户的分组')}
-                        optionList={groups}
-                        renderOptionItem={renderGroupOption}
-                        filter={(input, option) => {
-                          const q = input.toLowerCase();
-                          return (
-                            option.value?.toLowerCase().includes(q) ||
-                            (typeof option.label === 'string' &&
-                              option.label.toLowerCase().includes(q))
-                          );
-                        }}
-                        showClear
-                        style={{ width: '100%' }}
-                      />
-                    ) : (
-                      <Form.Select
-                        placeholder={t('管理员未设置用户可选分组')}
-                        disabled
-                        label={t('令牌分组')}
-                        style={{ width: '100%' }}
-                      />
+                    {values.expired_time === -1 && (
+                      <FieldHint>{t('当前：永不过期')}</FieldHint>
                     )}
-                  </Col>
-                  <Col
-                    span={24}
-                    style={{
-                      display: values.group === 'auto' ? 'block' : 'none',
-                    }}
-                  >
-                    <Form.Switch
-                      field='cross_group_retry'
-                      label={t('跨分组重试')}
-                      size='default'
-                      extraText={t(
-                        '开启后，当前分组渠道失败时会按顺序尝试下一个分组的渠道',
-                      )}
-                    />
-                  </Col>
-                  <Col xs={24} sm={24} md={24} lg={10} xl={10}>
-                    <Form.DatePicker
-                      field='expired_time'
-                      label={t('过期时间')}
-                      type='dateTime'
-                      placeholder={t('请选择过期时间')}
-                      rules={[
-                        { required: true, message: t('请选择过期时间') },
-                        {
-                          validator: (rule, value) => {
-                            // 允许 -1 表示永不过期，也允许空值在必填校验时被拦截
-                            if (value === -1 || !value)
-                              return Promise.resolve();
-                            const time = Date.parse(value);
-                            if (isNaN(time)) {
-                              return Promise.reject(t('过期时间格式错误！'));
-                            }
-                            if (time <= Date.now()) {
-                              return Promise.reject(
-                                t('过期时间不能早于当前时间！'),
-                              );
-                            }
-                            return Promise.resolve();
-                          },
-                        },
-                      ]}
-                      showClear
-                      style={{ width: '100%' }}
-                    />
-                  </Col>
-                  <Col xs={24} sm={24} md={24} lg={14} xl={14}>
-                    <Form.Slot label={t('过期时间快捷设置')}>
-                      <Space wrap>
-                        <Button
-                          theme='light'
-                          type='primary'
-                          onClick={() => setExpiredTime(0, 0, 0, 0)}
-                        >
-                          {t('永不过期')}
-                        </Button>
-                        <Button
-                          theme='light'
-                          type='tertiary'
-                          onClick={() => setExpiredTime(1, 0, 0, 0)}
-                        >
-                          {t('一个月')}
-                        </Button>
-                        <Button
-                          theme='light'
-                          type='tertiary'
-                          onClick={() => setExpiredTime(0, 1, 0, 0)}
-                        >
-                          {t('一天')}
-                        </Button>
-                        <Button
-                          theme='light'
-                          type='tertiary'
-                          onClick={() => setExpiredTime(0, 0, 1, 0)}
-                        >
-                          {t('一小时')}
-                        </Button>
-                      </Space>
-                    </Form.Slot>
-                  </Col>
-                  {!isEdit && (
-                    <Col span={24}>
-                      <Form.InputNumber
-                        field='tokenCount'
-                        label={t('新建数量')}
-                        min={1}
-                        extraText={t('批量创建时会在名称后自动添加随机后缀')}
-                        rules={[
-                          { required: true, message: t('请输入新建数量') },
-                        ]}
-                        style={{ width: '100%' }}
-                      />
-                    </Col>
-                  )}
-                </Row>
-              </Card>
-
-              {/* 额度设置 */}
-              <Card className='!rounded-2xl shadow-sm border-0'>
-                <div className='flex items-center mb-2'>
-                  <Avatar size='small' color='green' className='mr-2 shadow-md'>
-                    <IconCreditCard size={16} />
-                  </Avatar>
-                  <div>
-                    <Text className='text-lg font-medium'>{t('额度设置')}</Text>
-                    <div className='text-xs text-gray-600'>
-                      {t('设置令牌可用额度和数量')}
+                    <FieldError>{errors.expired_time}</FieldError>
+                  </div>
+                  <div className='space-y-2 lg:col-span-7'>
+                    <FieldLabel>{t('过期时间快捷设置')}</FieldLabel>
+                    <div className='flex flex-wrap gap-2'>
+                      <Button
+                        size='sm'
+                        variant='flat'
+                        color='primary'
+                        onPress={() => setExpiredTime(0, 0, 0, 0)}
+                      >
+                        {t('永不过期')}
+                      </Button>
+                      <Button
+                        size='sm'
+                        variant='flat'
+                        onPress={() => setExpiredTime(1, 0, 0, 0)}
+                      >
+                        {t('一个月')}
+                      </Button>
+                      <Button
+                        size='sm'
+                        variant='flat'
+                        onPress={() => setExpiredTime(0, 1, 0, 0)}
+                      >
+                        {t('一天')}
+                      </Button>
+                      <Button
+                        size='sm'
+                        variant='flat'
+                        onPress={() => setExpiredTime(0, 0, 1, 0)}
+                      >
+                        {t('一小时')}
+                      </Button>
                     </div>
                   </div>
                 </div>
-                <Row gutter={12}>
-                  <Col span={24}>
-                    <Form.InputNumber
-                      field='remain_amount'
-                      label={t('金额')}
-                      prefix={getCurrencyConfig().symbol}
-                      placeholder={t('输入金额')}
-                      precision={6}
-                      disabled={values.unlimited_quota}
+
+                {!isEdit && (
+                  <div className='space-y-2'>
+                    <FieldLabel required>{t('新建数量')}</FieldLabel>
+                    <input
+                      type='number'
+                      min={1}
+                      value={values.tokenCount}
+                      onChange={(event) =>
+                        setField('tokenCount')(
+                          event.target.value === ''
+                            ? ''
+                            : Number(event.target.value),
+                        )
+                      }
+                      className={inputClass}
+                    />
+                    <FieldHint>
+                      {t('批量创建时会在名称后自动添加随机后缀')}
+                    </FieldHint>
+                    <FieldError>{errors.tokenCount}</FieldError>
+                  </div>
+                )}
+              </div>
+            </Card.Content>
+          </Card>
+
+          {/* 额度设置 */}
+          <Card className='mb-3 !rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <IconTile tone='green'>
+                  <CreditCard size={16} />
+                </IconTile>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('额度设置')}
+                  </div>
+                  <div className='text-xs text-muted'>
+                    {t('设置令牌可用额度和数量')}
+                  </div>
+                </div>
+              </div>
+
+              <div className='space-y-3'>
+                <div className='space-y-2'>
+                  <FieldLabel>{t('金额')}</FieldLabel>
+                  <div className='relative'>
+                    <span className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted'>
+                      {getCurrencyConfig().symbol}
+                    </span>
+                    <input
+                      type='number'
                       min={0}
                       step={0.000001}
-                      onChange={(val) => {
-                        const amount = val === '' || val == null ? 0 : val;
-                        formApiRef.current?.setValue('remain_amount', amount);
-                        formApiRef.current?.setValue(
-                          'remain_quota',
-                          displayAmountToQuota(amount),
-                        );
+                      value={
+                        values.unlimited_quota
+                          ? ''
+                          : (values.remain_amount ?? 0)
+                      }
+                      disabled={values.unlimited_quota}
+                      onChange={(event) => {
+                        const raw = event.target.value;
+                        const amount = raw === '' ? 0 : Number(raw);
+                        setValues((prev) => ({
+                          ...prev,
+                          remain_amount: amount,
+                          remain_quota: displayAmountToQuota(amount),
+                        }));
                       }}
-                      style={{ width: '100%' }}
-                      showClear
+                      placeholder={t('输入金额')}
+                      className={`${inputClass} pl-8 ${
+                        values.unlimited_quota ? 'opacity-50' : ''
+                      }`}
                     />
-                  </Col>
-                  <Col span={24}>
-                    <div
-                      className='text-xs cursor-pointer mt-1'
-                      style={{ color: 'var(--semi-color-text-2)' }}
-                      onClick={() => setShowQuotaInput((v) => !v)}
-                    >
-                      {showQuotaInput
-                        ? `▾ ${t('收起原生额度输入')}`
-                        : `▸ ${t('使用原生额度输入')}`}
-                    </div>
-                    <div style={{ display: showQuotaInput ? 'block' : 'none' }} className='mt-2'>
-                      <Form.InputNumber
-                        field='remain_quota'
-                        label={t('额度')}
-                        placeholder={t('输入额度')}
-                        disabled={values.unlimited_quota}
+                  </div>
+                  <FieldError>{errors.remain_amount}</FieldError>
+                </div>
+
+                <div>
+                  <button
+                    type='button'
+                    className='cursor-pointer text-xs text-muted hover:text-foreground'
+                    onClick={() => setShowQuotaInput((v) => !v)}
+                  >
+                    {showQuotaInput
+                      ? `▾ ${t('收起原生额度输入')}`
+                      : `▸ ${t('使用原生额度输入')}`}
+                  </button>
+                  {showQuotaInput && (
+                    <div className='mt-2 space-y-2'>
+                      <FieldLabel>{t('额度')}</FieldLabel>
+                      <input
+                        type='number'
                         min={0}
                         step={500000}
-                        rules={
+                        value={
                           values.unlimited_quota
-                            ? []
-                            : [{ required: true, message: t('请输入额度') }]
+                            ? ''
+                            : (values.remain_quota ?? 0)
                         }
-                        onChange={(val) => {
-                          const quota = val === '' || val == null ? 0 : val;
-                          formApiRef.current?.setValue('remain_quota', quota);
-                          formApiRef.current?.setValue(
-                            'remain_amount',
-                            Number(quotaToDisplayAmount(quota).toFixed(6)),
-                          );
+                        disabled={values.unlimited_quota}
+                        onChange={(event) => {
+                          const raw = event.target.value;
+                          const quota = raw === '' ? 0 : Number(raw);
+                          setValues((prev) => ({
+                            ...prev,
+                            remain_quota: quota,
+                            remain_amount: Number(
+                              quotaToDisplayAmount(quota).toFixed(6),
+                            ),
+                          }));
                         }}
-                        style={{ width: '100%' }}
-                        showClear
+                        placeholder={t('输入额度')}
+                        className={`${inputClass} ${
+                          values.unlimited_quota ? 'opacity-50' : ''
+                        }`}
                       />
                     </div>
-                  </Col>
-                  <Col span={24}>
-                    <Form.Switch
-                      field='unlimited_quota'
-                      label={t('无限额度')}
-                      size='default'
-                      extraText={t(
+                  )}
+                </div>
+
+                <label className='flex items-center justify-between gap-3'>
+                  <div>
+                    <div className='text-sm font-medium text-foreground'>
+                      {t('无限额度')}
+                    </div>
+                    <div className='text-xs text-muted'>
+                      {t(
                         '令牌的额度仅用于限制令牌本身的最大额度使用量，实际的使用受到账户的剩余额度限制',
                       )}
-                    />
-                  </Col>
-                </Row>
-              </Card>
-
-              {/* 访问限制 */}
-              <Card className='!rounded-2xl shadow-sm border-0'>
-                <div className='flex items-center mb-2'>
-                  <Avatar
-                    size='small'
-                    color='purple'
-                    className='mr-2 shadow-md'
-                  >
-                    <IconLink size={16} />
-                  </Avatar>
-                  <div>
-                    <Text className='text-lg font-medium'>{t('访问限制')}</Text>
-                    <div className='text-xs text-gray-600'>
-                      {t('设置令牌的访问限制')}
                     </div>
                   </div>
+                  <Switch
+                    isSelected={values.unlimited_quota}
+                    onValueChange={setField('unlimited_quota')}
+                    size='sm'
+                    aria-label={t('无限额度')}
+                  >
+                    <Switch.Control>
+                      <Switch.Thumb />
+                    </Switch.Control>
+                  </Switch>
+                </label>
+              </div>
+            </Card.Content>
+          </Card>
+
+          {/* 访问限制 */}
+          <Card className='!rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <IconTile tone='purple'>
+                  <LinkIcon size={16} />
+                </IconTile>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('访问限制')}
+                  </div>
+                  <div className='text-xs text-muted'>
+                    {t('设置令牌的访问限制')}
+                  </div>
                 </div>
-                <Row gutter={12}>
-                  <Col span={24}>
-                    <Form.Select
-                      field='model_limits'
-                      label={t('模型限制列表')}
-                      placeholder={t(
-                        '请选择该令牌支持的模型，留空支持所有模型',
-                      )}
-                      multiple
-                      optionList={models}
-                      extraText={t('非必要，不建议启用模型限制')}
-                      filter={selectFilter}
-                      autoClearSearchValue={false}
-                      searchPosition='dropdown'
-                      showClear
-                      style={{ width: '100%' }}
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Form.TextArea
-                      field='allow_ips'
-                      label={t('IP白名单（支持CIDR表达式）')}
-                      placeholder={t('允许的IP，一行一个，不填写则不限制')}
-                      autosize
-                      rows={1}
-                      extraText={t(
-                        '请勿过度信任此功能，IP可能被伪造，请配合nginx和cdn等网关使用',
-                      )}
-                      showClear
-                      style={{ width: '100%' }}
-                    />
-                  </Col>
-                </Row>
-              </Card>
-            </div>
-          )}
-        </Form>
-      </Spin>
-    </SideSheet>
+              </div>
+
+              <div className='space-y-3'>
+                <div className='space-y-2'>
+                  <FieldLabel>{t('模型限制列表')}</FieldLabel>
+                  <div className='max-h-48 overflow-y-auto rounded-xl border border-border bg-background p-2'>
+                    {models.length === 0 ? (
+                      <div className='py-2 text-center text-xs text-muted'>
+                        {t('暂无可选模型')}
+                      </div>
+                    ) : (
+                      <div className='grid grid-cols-1 gap-1 sm:grid-cols-2'>
+                        {models.map((model) => {
+                          const checked = values.model_limits.includes(
+                            model.value,
+                          );
+                          return (
+                            <label
+                              key={model.value}
+                              className='flex cursor-pointer items-center gap-2 rounded px-1.5 py-1 text-sm text-foreground hover:bg-surface-secondary'
+                            >
+                              <input
+                                type='checkbox'
+                                checked={checked}
+                                onChange={() => toggleModelLimit(model.value)}
+                                className='h-4 w-4 accent-primary'
+                              />
+                              <span className='min-w-0 truncate'>
+                                {model.label}
+                              </span>
+                            </label>
+                          );
+                        })}
+                      </div>
+                    )}
+                  </div>
+                  <FieldHint>{t('非必要，不建议启用模型限制')}</FieldHint>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('IP白名单（支持CIDR表达式）')}</FieldLabel>
+                  <textarea
+                    value={values.allow_ips}
+                    onChange={(event) =>
+                      setField('allow_ips')(event.target.value)
+                    }
+                    placeholder={t('允许的IP，一行一个，不填写则不限制')}
+                    rows={3}
+                    className={textareaClass}
+                  />
+                  <FieldHint>
+                    {t(
+                      '请勿过度信任此功能，IP可能被伪造，请配合nginx和cdn等网关使用',
+                    )}
+                  </FieldHint>
+                </div>
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+
+        <footer className='flex justify-end gap-2 border-t border-border bg-background px-5 py-3'>
+          <Button
+            variant='light'
+            startContent={<X size={14} />}
+            onPress={props.handleClose}
+          >
+            {t('取消')}
+          </Button>
+          <Button
+            color='primary'
+            isPending={loading}
+            startContent={<Save size={14} />}
+            onPress={submit}
+          >
+            {t('提交')}
+          </Button>
+        </footer>
+      </aside>
+    </>
   );
 };
 
diff --git a/web/src/components/table/usage-logs/UsageLogsActions.jsx b/web/src/components/table/usage-logs/UsageLogsActions.jsx
index d921483ed28..a6e1b59d18e 100644
--- a/web/src/components/table/usage-logs/UsageLogsActions.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsActions.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Tag, Space, Skeleton } from '@douyinfe/semi-ui';
+import { Chip, Skeleton } from '@heroui/react';
 import { renderQuota } from '../../../helpers';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 import { useMinimumLoadingTime } from '../../../hooks/common/useMinimumLoadingTime';
@@ -34,54 +34,27 @@ const LogsActions = ({
   const showSkeleton = useMinimumLoadingTime(loadingStat);
   const needSkeleton = !showStat || showSkeleton;
 
-  const placeholder = (
-    <Space>
-      <Skeleton.Title style={{ width: 108, height: 21, borderRadius: 6 }} />
-      <Skeleton.Title style={{ width: 65, height: 21, borderRadius: 6 }} />
-      <Skeleton.Title style={{ width: 64, height: 21, borderRadius: 6 }} />
-    </Space>
-  );
-
   return (
     <div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full'>
-      <Skeleton loading={needSkeleton} active placeholder={placeholder}>
-        <Space>
-          <Tag
-            color='blue'
-            style={{
-              fontWeight: 500,
-              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-              padding: 13,
-            }}
-            className='!rounded-lg'
-          >
+      {needSkeleton ? (
+        <div className='flex flex-wrap gap-2'>
+          <Skeleton className='h-8 w-28 rounded-lg' />
+          <Skeleton className='h-8 w-16 rounded-lg' />
+          <Skeleton className='h-8 w-16 rounded-lg' />
+        </div>
+      ) : (
+        <div className='flex flex-wrap gap-2'>
+          <Chip color='primary' variant='flat' className='rounded-lg px-3 py-4 font-medium shadow-sm'>
             {t('消耗额度')}: {renderQuota(stat.quota)}
-          </Tag>
-          <Tag
-            color='pink'
-            style={{
-              fontWeight: 500,
-              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-              padding: 13,
-            }}
-            className='!rounded-lg'
-          >
+          </Chip>
+          <Chip color='secondary' variant='flat' className='rounded-lg px-3 py-4 font-medium shadow-sm'>
             RPM: {stat.rpm}
-          </Tag>
-          <Tag
-            color='white'
-            style={{
-              border: 'none',
-              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-              fontWeight: 500,
-              padding: 13,
-            }}
-            className='!rounded-lg'
-          >
+          </Chip>
+          <Chip variant='flat' className='rounded-lg px-3 py-4 font-medium shadow-sm'>
             TPM: {stat.tpm}
-          </Tag>
-        </Space>
-      </Skeleton>
+          </Chip>
+        </div>
+      )}
 
       <CompactModeToggle
         compactMode={compactMode}
diff --git a/web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx b/web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx
index e71fcb5e97b..1d954e0863f 100644
--- a/web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsColumnDefs.jsx
@@ -18,26 +18,39 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
+import { Tooltip } from '@heroui/react';
+import { CircleAlert, HelpCircle, Route, Sparkles } from 'lucide-react';
+import HoverPanel from '@/components/common/ui/HoverPanel';
 import {
-  Avatar,
-  Space,
-  Tag,
-  Tooltip,
-  Popover,
-  Typography,
-} from '@douyinfe/semi-ui';
-import {
+  getLogOther,
   renderGroup,
+  renderModelPriceSimple,
+  renderModelTag,
   renderQuota,
   stringToColor,
-  getLogOther,
-  renderModelTag,
-  renderModelPriceSimple,
 } from '../../../helpers';
-import { IconHelpCircle } from '@douyinfe/semi-icons';
-import { CircleAlert, Route, Sparkles } from 'lucide-react';
 
-const colors = [
+// ---------- Tailwind primitives (mirrors TaskLogs/MjLogs to keep tone parity) ----------
+const TONE_TO_HEX = {
+  amber: '#f59e0b',
+  blue: '#3b82f6',
+  cyan: '#06b6d4',
+  green: '#22c55e',
+  grey: '#94a3b8',
+  indigo: '#6366f1',
+  'light-blue': '#0ea5e9',
+  lime: '#84cc16',
+  orange: '#f97316',
+  pink: '#ec4899',
+  purple: '#a855f7',
+  red: '#ef4444',
+  teal: '#14b8a6',
+  violet: '#8b5cf6',
+  yellow: '#eab308',
+  white: '#ffffff',
+};
+
+const TAG_PALETTE_KEYS = [
   'amber',
   'blue',
   'cyan',
@@ -55,6 +68,89 @@ const colors = [
   'yellow',
 ];
 
+function ColorTag({ color = 'grey', prefixIcon, children, onClick, title }) {
+  const hex = TONE_TO_HEX[color] || TONE_TO_HEX.grey;
+  if (color === 'white') {
+    return (
+      <span
+        title={title}
+        onClick={onClick}
+        className={`inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-xs font-medium text-foreground ${
+          onClick ? 'cursor-pointer' : ''
+        }`}
+      >
+        {prefixIcon}
+        {children}
+      </span>
+    );
+  }
+  return (
+    <span
+      title={title}
+      onClick={onClick}
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium ${
+        onClick ? 'cursor-pointer' : ''
+      }`}
+      style={{
+        backgroundColor: `${hex}1A`,
+        color: hex,
+      }}
+    >
+      {prefixIcon}
+      {children}
+    </span>
+  );
+}
+
+function UserChip({ name, onClick }) {
+  const safeName = typeof name === 'string' ? name : '';
+  const tone = stringToColor(safeName) || 'grey';
+  const hex = TONE_TO_HEX[tone] || TONE_TO_HEX.grey;
+  return (
+    <span
+      onClick={onClick}
+      className={`inline-flex items-center gap-2 ${onClick ? 'cursor-pointer' : ''}`}
+    >
+      <span
+        className='flex h-6 w-6 items-center justify-center rounded-full text-[11px] font-semibold'
+        style={{
+          background: `${hex}26`,
+          color: hex,
+        }}
+      >
+        {safeName.slice(0, 1).toUpperCase()}
+      </span>
+      <span className='text-sm text-foreground'>{safeName}</span>
+    </span>
+  );
+}
+
+function EllipsisText({ children, width = 200, rows = 2 }) {
+  // Best-effort substitute for Semi's `Typography.Paragraph ellipsis`:
+  // line-clamp the text and surface the full string in a hover tooltip.
+  const stringValue =
+    typeof children === 'string' ? children : String(children ?? '');
+  return (
+    <Tooltip content={stringValue} placement='top'>
+      <span
+        className='inline-block align-top text-xs text-foreground'
+        style={{
+          maxWidth: width,
+          display: '-webkit-box',
+          WebkitLineClamp: rows,
+          WebkitBoxOrient: 'vertical',
+          overflow: 'hidden',
+          whiteSpace: 'normal',
+          wordBreak: 'break-word',
+        }}
+      >
+        {stringValue}
+      </span>
+    </Tooltip>
+  );
+}
+
+// ---------- Utility helpers ported from the original implementation ----------
 function formatRatio(ratio) {
   if (ratio === undefined || ratio === null) {
     return '-';
@@ -66,10 +162,7 @@ function formatRatio(ratio) {
 }
 
 function buildChannelAffinityTooltip(affinity, t) {
-  if (!affinity) {
-    return null;
-  }
-
+  if (!affinity) return null;
   const keySource = affinity.key_source || '-';
   const keyPath = affinity.key_path || affinity.key_key || '-';
   const keyHint = affinity.key_hint || '';
@@ -85,7 +178,7 @@ function buildChannelAffinityTooltip(affinity, t) {
   ];
 
   return (
-    <div style={{ lineHeight: 1.6, display: 'flex', flexDirection: 'column' }}>
+    <div className='flex flex-col gap-1 text-xs leading-snug'>
       {lines.map((line, i) => (
         <div key={i}>{line}</div>
       ))}
@@ -93,59 +186,11 @@ function buildChannelAffinityTooltip(affinity, t) {
   );
 }
 
-// Render functions
-function renderType(type, t) {
-  switch (type) {
-    case 1:
-      return (
-        <Tag color='cyan' shape='circle'>
-          {t('充值')}
-        </Tag>
-      );
-    case 2:
-      return (
-        <Tag color='lime' shape='circle'>
-          {t('消费')}
-        </Tag>
-      );
-    case 3:
-      return (
-        <Tag color='orange' shape='circle'>
-          {t('管理')}
-        </Tag>
-      );
-    case 4:
-      return (
-        <Tag color='purple' shape='circle'>
-          {t('系统')}
-        </Tag>
-      );
-    case 5:
-      return (
-        <Tag color='red' shape='circle'>
-          {t('错误')}
-        </Tag>
-      );
-    case 6:
-      return (
-        <Tag color='teal' shape='circle'>
-          {t('退款')}
-        </Tag>
-      );
-    default:
-      return (
-        <Tag color='grey' shape='circle'>
-          {t('未知')}
-        </Tag>
-      );
-  }
-}
-
 function buildStreamStatusTooltip(ss, t) {
   if (!ss) return null;
   const lines = [
     t('流状态') + '：' + t('异常'),
-    (ss.end_reason || 'unknown'),
+    ss.end_reason || 'unknown',
   ];
   if (ss.error_count > 0) {
     lines.push(`${t('软错误')}: ${ss.error_count}`);
@@ -154,7 +199,7 @@ function buildStreamStatusTooltip(ss, t) {
     lines.push(ss.end_error);
   }
   return (
-    <div style={{ lineHeight: 1.6, display: 'flex', flexDirection: 'column' }}>
+    <div className='flex flex-col gap-1 text-xs leading-snug'>
       {lines.map((line, i) => (
         <div key={i}>{line}</div>
       ))}
@@ -162,180 +207,131 @@ function buildStreamStatusTooltip(ss, t) {
   );
 }
 
+// ---------- Primitive renderers ----------
+function renderType(type, t) {
+  switch (type) {
+    case 1:
+      return <ColorTag color='cyan'>{t('充值')}</ColorTag>;
+    case 2:
+      return <ColorTag color='lime'>{t('消费')}</ColorTag>;
+    case 3:
+      return <ColorTag color='orange'>{t('管理')}</ColorTag>;
+    case 4:
+      return <ColorTag color='purple'>{t('系统')}</ColorTag>;
+    case 5:
+      return <ColorTag color='red'>{t('错误')}</ColorTag>;
+    case 6:
+      return <ColorTag color='teal'>{t('退款')}</ColorTag>;
+    default:
+      return <ColorTag color='grey'>{t('未知')}</ColorTag>;
+  }
+}
+
 function renderIsStream(bool, t, streamStatus) {
   const isError = streamStatus && streamStatus.status !== 'ok';
-
   if (bool) {
     return (
-      <span style={{ position: 'relative', display: 'inline-block' }}>
-        <Tag color='blue' shape='circle'>
-          {t('流')}
-        </Tag>
-        {isError && (
+      <span className='relative inline-block'>
+        <ColorTag color='blue'>{t('流')}</ColorTag>
+        {isError ? (
           <Tooltip content={buildStreamStatusTooltip(streamStatus, t)}>
             <span
-              style={{
-                position: 'absolute',
-                right: -4,
-                top: -4,
-                lineHeight: 1,
-                color: '#ef4444',
-                cursor: 'pointer',
-                userSelect: 'none',
-              }}
+              className='absolute -right-1 -top-1 cursor-pointer select-none leading-none text-red-500'
+              aria-label='stream status error'
             >
-              <CircleAlert
-                size={14}
-                strokeWidth={2.5}
-                color='currentColor'
-              />
+              <CircleAlert size={14} strokeWidth={2.5} color='currentColor' />
             </span>
           </Tooltip>
-        )}
+        ) : null}
       </span>
     );
-  } else {
-    return (
-      <Tag color='purple' shape='circle'>
-        {t('非流')}
-      </Tag>
-    );
   }
+  return <ColorTag color='purple'>{t('非流')}</ColorTag>;
 }
 
-function renderUseTime(type, t) {
-  const time = parseInt(type);
-  if (time < 101) {
-    return (
-      <Tag color='green' shape='circle'>
-        {' '}
-        {time} s{' '}
-      </Tag>
-    );
-  } else if (time < 300) {
-    return (
-      <Tag color='orange' shape='circle'>
-        {' '}
-        {time} s{' '}
-      </Tag>
-    );
-  } else {
-    return (
-      <Tag color='red' shape='circle'>
-        {' '}
-        {time} s{' '}
-      </Tag>
-    );
-  }
+function renderUseTime(value) {
+  const time = parseInt(value);
+  let color = 'green';
+  if (time >= 300) color = 'red';
+  else if (time >= 101) color = 'orange';
+  return <ColorTag color={color}>{time} s</ColorTag>;
 }
 
-function renderFirstUseTime(type, t) {
-  let time = parseFloat(type) / 1000.0;
+function renderFirstUseTime(value) {
+  let time = parseFloat(value) / 1000.0;
   time = time.toFixed(1);
-  if (time < 3) {
-    return (
-      <Tag color='green' shape='circle'>
-        {' '}
-        {time} s{' '}
-      </Tag>
-    );
-  } else if (time < 10) {
-    return (
-      <Tag color='orange' shape='circle'>
-        {' '}
-        {time} s{' '}
-      </Tag>
-    );
-  } else {
-    return (
-      <Tag color='red' shape='circle'>
-        {' '}
-        {time} s{' '}
-      </Tag>
-    );
-  }
+  let color = 'green';
+  if (time >= 10) color = 'red';
+  else if (time >= 3) color = 'orange';
+  return <ColorTag color={color}>{time} s</ColorTag>;
 }
 
 function renderBillingTag(record, t) {
   const other = getLogOther(record.other);
   if (other?.billing_source === 'subscription') {
-    return (
-      <Tag color='green' shape='circle'>
-        {t('订阅抵扣')}
-      </Tag>
-    );
+    return <ColorTag color='green'>{t('订阅抵扣')}</ColorTag>;
   }
   return null;
 }
 
 function renderModelName(record, copyText, t) {
-  let other = getLogOther(record.other);
-  let modelMapped =
+  const other = getLogOther(record.other);
+  const modelMapped =
     other?.is_model_mapped &&
     other?.upstream_model_name &&
     other?.upstream_model_name !== '';
+
   if (!modelMapped) {
     return renderModelTag(record.model_name, {
       onClick: (event) => {
-        copyText(event, record.model_name).then((r) => {});
+        copyText(event, record.model_name).then(() => {});
       },
     });
-  } else {
-    return (
-      <>
-        <Space vertical align={'start'}>
-          <Popover
-            content={
-              <div style={{ padding: 10 }}>
-                <Space vertical align={'start'}>
-                  <div className='flex items-center'>
-                    <Typography.Text strong style={{ marginRight: 8 }}>
-                      {t('请求并计费模型')}:
-                    </Typography.Text>
-                    {renderModelTag(record.model_name, {
-                      onClick: (event) => {
-                        copyText(event, record.model_name).then((r) => {});
-                      },
-                    })}
-                  </div>
-                  <div className='flex items-center'>
-                    <Typography.Text strong style={{ marginRight: 8 }}>
-                      {t('实际模型')}:
-                    </Typography.Text>
-                    {renderModelTag(other.upstream_model_name, {
-                      onClick: (event) => {
-                        copyText(event, other.upstream_model_name).then(
-                          (r) => {},
-                        );
-                      },
-                    })}
-                  </div>
-                </Space>
-              </div>
-            }
-          >
-            {renderModelTag(record.model_name, {
-              onClick: (event) => {
-                copyText(event, record.model_name).then((r) => {});
-              },
-              suffixIcon: (
-                <Route
-                  style={{ width: '0.9em', height: '0.9em', opacity: 0.75 }}
-                />
-              ),
-            })}
-          </Popover>
-        </Space>
-      </>
-    );
   }
+
+  const popoverContent = (
+    <div className='flex flex-col gap-2 p-1 text-xs'>
+      <div className='flex items-center gap-2'>
+        <span className='font-semibold text-foreground'>
+          {t('请求并计费模型')}:
+        </span>
+        {renderModelTag(record.model_name, {
+          onClick: (event) => {
+            copyText(event, record.model_name).then(() => {});
+          },
+        })}
+      </div>
+      <div className='flex items-center gap-2'>
+        <span className='font-semibold text-foreground'>{t('实际模型')}:</span>
+        {renderModelTag(other.upstream_model_name, {
+          onClick: (event) => {
+            copyText(event, other.upstream_model_name).then(() => {});
+          },
+        })}
+      </div>
+    </div>
+  );
+
+  return (
+    <HoverPanel content={popoverContent} placement='top'>
+      <span className='inline-flex items-center'>
+        {renderModelTag(record.model_name, {
+          onClick: (event) => {
+            copyText(event, record.model_name).then(() => {});
+          },
+          suffixIcon: (
+            <Route style={{ width: '0.9em', height: '0.9em', opacity: 0.75 }} />
+          ),
+        })}
+      </span>
+    </HoverPanel>
+  );
 }
 
+// ---------- Token / cache helpers (unchanged behaviour) ----------
 function toTokenNumber(value) {
   const parsed = Number(value);
-  if (!Number.isFinite(parsed) || parsed <= 0) {
-    return 0;
-  }
+  if (!Number.isFinite(parsed) || parsed <= 0) return 0;
   return parsed;
 }
 
@@ -344,9 +340,7 @@ function formatTokenCount(value) {
 }
 
 function getPromptCacheSummary(other) {
-  if (!other || typeof other !== 'object') {
-    return null;
-  }
+  if (!other || typeof other !== 'object') return null;
 
   const cacheReadTokens = toTokenNumber(other.cache_tokens);
   const cacheCreationTokens = toTokenNumber(other.cache_creation_tokens);
@@ -363,16 +357,7 @@ function getPromptCacheSummary(other) {
     return null;
   }
 
-  return {
-    cacheReadTokens,
-    cacheWriteTokens,
-  };
-}
-
-function normalizeDetailText(detail) {
-  return String(detail || '')
-    .replace(/\n\r/g, '\n')
-    .replace(/\r\n/g, '\n');
+  return { cacheReadTokens, cacheWriteTokens };
 }
 
 function getUsageLogGroupSummary(groupRatio, userGroupRatio, t) {
@@ -380,9 +365,7 @@ function getUsageLogGroupSummary(groupRatio, userGroupRatio, t) {
   const useUserGroupRatio =
     Number.isFinite(parsedUserGroupRatio) && parsedUserGroupRatio !== -1;
   const ratio = useUserGroupRatio ? userGroupRatio : groupRatio;
-  if (ratio === undefined || ratio === null || ratio === '') {
-    return '';
-  }
+  if (ratio === undefined || ratio === null || ratio === '') return '';
   return `${useUserGroupRatio ? t('专属倍率') : t('分组')} ${formatRatio(ratio)}x`;
 }
 
@@ -390,35 +373,24 @@ function renderCompactDetailSummary(summarySegments) {
   const segments = Array.isArray(summarySegments)
     ? summarySegments.filter((segment) => segment?.text)
     : [];
-  if (!segments.length) {
-    return null;
-  }
+  if (!segments.length) return null;
 
   return (
     <div
-      style={{
-        maxWidth: 180,
-        lineHeight: 1.35,
-      }}
+      className='flex flex-col gap-0.5'
+      style={{ maxWidth: 180, lineHeight: 1.35 }}
     >
-      {segments.map((segment, index) => (
-        <Typography.Text
-          key={`${segment.text}-${index}`}
-          type={segment.tone === 'secondary' ? 'tertiary' : undefined}
-          size={segment.tone === 'secondary' ? 'small' : undefined}
-          style={{
-            display: 'block',
-            maxWidth: '100%',
-            fontSize: 12,
-            marginTop: index === 0 ? 0 : 2,
-            whiteSpace: 'nowrap',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-          }}
-        >
-          {segment.text}
-        </Typography.Text>
-      ))}
+      {segments.map((segment, index) => {
+        const muted = segment.tone === 'secondary';
+        return (
+          <span
+            key={`${segment.text}-${index}`}
+            className={`block max-w-full truncate ${muted ? 'text-[11px] text-muted' : 'text-xs text-foreground'}`}
+          >
+            {segment.text}
+          </span>
+        );
+      })}
     </div>
   );
 }
@@ -427,9 +399,7 @@ function getUsageLogDetailSummary(record, text, billingDisplayMode, t) {
   const other = getLogOther(record.other);
 
   if (record.type === 6) {
-    return {
-      segments: [{ text: t('异步任务退款'), tone: 'primary' }],
-    };
+    return { segments: [{ text: t('异步任务退款'), tone: 'primary' }] };
   }
 
   if (other == null || record.type !== 2) {
@@ -505,6 +475,7 @@ function getUsageLogDetailSummary(record, text, billingDisplayMode, t) {
   };
 }
 
+// ---------- Column factory ----------
 export const getLogsColumns = ({
   t,
   COLUMN_KEYS,
@@ -524,15 +495,15 @@ export const getLogsColumns = ({
       key: COLUMN_KEYS.CHANNEL,
       title: t('渠道'),
       dataIndex: 'channel',
-      render: (text, record, index) => {
+      render: (text, record) => {
         let isMultiKey = false;
         let multiKeyIndex = -1;
         let content = t('渠道') + `：${record.channel}`;
         let affinity = null;
         let showMarker = false;
-        let other = getLogOther(record.other);
+        const other = getLogOther(record.other);
         if (other?.admin_info) {
-          let adminInfo = other.admin_info;
+          const adminInfo = other.admin_info;
           if (adminInfo?.is_multi_key) {
             isMultiKey = true;
             multiKeyIndex = adminInfo.multi_key_index;
@@ -549,30 +520,36 @@ export const getLogsColumns = ({
           }
         }
 
-        return isAdminUser &&
-          (record.type === 0 ||
+        if (
+          !isAdminUser ||
+          !(
+            record.type === 0 ||
             record.type === 2 ||
             record.type === 5 ||
-            record.type === 6) ? (
-          <Space>
-            <span style={{ position: 'relative', display: 'inline-block' }}>
+            record.type === 6
+          )
+        ) {
+          return null;
+        }
+
+        const tagColor =
+          TAG_PALETTE_KEYS[parseInt(text) % TAG_PALETTE_KEYS.length];
+
+        return (
+          <div className='inline-flex items-center gap-1.5'>
+            <span className='relative inline-block'>
               <Tooltip content={record.channel_name || t('未知渠道')}>
                 <span>
-                  <Tag
-                    color={colors[parseInt(text) % colors.length]}
-                    shape='circle'
-                  >
-                    {text}
-                  </Tag>
+                  <ColorTag color={tagColor}>{text}</ColorTag>
                 </span>
               </Tooltip>
-              {showMarker && (
+              {showMarker ? (
                 <Tooltip
                   content={
-                    <div style={{ lineHeight: 1.6 }}>
+                    <div className='flex flex-col gap-1 text-xs leading-snug'>
                       <div>{content}</div>
                       {affinity ? (
-                        <div style={{ marginTop: 6 }}>
+                        <div className='mt-1'>
                           {buildChannelAffinityTooltip(affinity, t)}
                         </div>
                       ) : null}
@@ -580,16 +557,7 @@ export const getLogsColumns = ({
                   }
                 >
                   <span
-                    style={{
-                      position: 'absolute',
-                      right: -4,
-                      top: -4,
-                      lineHeight: 1,
-                      fontWeight: 600,
-                      color: '#f59e0b',
-                      cursor: 'pointer',
-                      userSelect: 'none',
-                    }}
+                    className='absolute -right-1 -top-1 cursor-pointer select-none leading-none font-semibold text-amber-500'
                     onClick={(e) => {
                       e.stopPropagation();
                       openChannelAffinityUsageCacheModal?.(affinity);
@@ -603,39 +571,29 @@ export const getLogsColumns = ({
                     />
                   </span>
                 </Tooltip>
-              )}
+              ) : null}
             </span>
-            {isMultiKey && (
-              <Tag color='white' shape='circle'>
-                {multiKeyIndex}
-              </Tag>
-            )}
-          </Space>
-        ) : null;
+            {isMultiKey ? (
+              <ColorTag color='white'>{multiKeyIndex}</ColorTag>
+            ) : null}
+          </div>
+        );
       },
     },
     {
       key: COLUMN_KEYS.USERNAME,
       title: t('用户'),
       dataIndex: 'username',
-      render: (text, record, index) => {
-        return isAdminUser ? (
-          <div>
-            <Avatar
-              size='extra-small'
-              color={stringToColor(text)}
-              style={{ marginRight: 4 }}
-              onClick={(event) => {
-                event.stopPropagation();
-                showUserInfoFunc(record.user_id);
-              }}
-            >
-              {typeof text === 'string' && text.slice(0, 1)}
-            </Avatar>
-            {text}
-          </div>
-        ) : (
-          <></>
+      render: (text, record) => {
+        if (!isAdminUser) return null;
+        return (
+          <UserChip
+            name={text}
+            onClick={(event) => {
+              event.stopPropagation();
+              showUserInfoFunc(record.user_id);
+            }}
+          />
         );
       },
     },
@@ -643,25 +601,24 @@ export const getLogsColumns = ({
       key: COLUMN_KEYS.TOKEN,
       title: t('令牌'),
       dataIndex: 'token_name',
-      render: (text, record, index) => {
-        return record.type === 0 ||
-          record.type === 2 ||
-          record.type === 5 ||
-          record.type === 6 ? (
-          <div>
-            <Tag
-              color='grey'
-              shape='circle'
-              onClick={(event) => {
-                copyText(event, text);
-              }}
-            >
-              {' '}
-              {t(text)}{' '}
-            </Tag>
-          </div>
-        ) : (
-          <></>
+      render: (text, record) => {
+        if (
+          !(
+            record.type === 0 ||
+            record.type === 2 ||
+            record.type === 5 ||
+            record.type === 6
+          )
+        ) {
+          return null;
+        }
+        return (
+          <ColorTag
+            color='grey'
+            onClick={(event) => copyText(event, text)}
+          >
+            {t(text)}
+          </ColorTag>
         );
       },
     },
@@ -669,91 +626,74 @@ export const getLogsColumns = ({
       key: COLUMN_KEYS.GROUP,
       title: t('分组'),
       dataIndex: 'group',
-      render: (text, record, index) => {
+      render: (text, record) => {
         if (
-          record.type === 0 ||
-          record.type === 2 ||
-          record.type === 5 ||
-          record.type === 6
+          !(
+            record.type === 0 ||
+            record.type === 2 ||
+            record.type === 5 ||
+            record.type === 6
+          )
         ) {
-          if (record.group) {
-            return <>{renderGroup(record.group)}</>;
-          } else {
-            let other = null;
-            try {
-              other = JSON.parse(record.other);
-            } catch (e) {
-              console.error(
-                `Failed to parse record.other: "${record.other}".`,
-                e,
-              );
-            }
-            if (other === null) {
-              return <></>;
-            }
-            if (other.group !== undefined) {
-              return <>{renderGroup(other.group)}</>;
-            } else {
-              return <></>;
-            }
-          }
-        } else {
-          return <></>;
+          return null;
+        }
+        if (record.group) {
+          return <>{renderGroup(record.group)}</>;
         }
+        let other = null;
+        try {
+          other = JSON.parse(record.other);
+        } catch (e) {
+          console.error(
+            `Failed to parse record.other: "${record.other}".`,
+            e,
+          );
+        }
+        if (other === null) return null;
+        if (other.group !== undefined) {
+          return <>{renderGroup(other.group)}</>;
+        }
+        return null;
       },
     },
     {
       key: COLUMN_KEYS.TYPE,
       title: t('类型'),
       dataIndex: 'type',
-      render: (text, record, index) => {
-        return <>{renderType(text, t)}</>;
-      },
+      render: (text) => renderType(text, t),
     },
     {
       key: COLUMN_KEYS.MODEL,
       title: t('模型'),
       dataIndex: 'model_name',
-      render: (text, record, index) => {
-        return record.type === 0 ||
-          record.type === 2 ||
-          record.type === 5 ||
-          record.type === 6 ? (
-          <>{renderModelName(record, copyText, t)}</>
-        ) : (
-          <></>
-        );
+      render: (text, record) => {
+        if (
+          !(
+            record.type === 0 ||
+            record.type === 2 ||
+            record.type === 5 ||
+            record.type === 6
+          )
+        ) {
+          return null;
+        }
+        return renderModelName(record, copyText, t);
       },
     },
     {
       key: COLUMN_KEYS.USE_TIME,
       title: t('用时/首字'),
       dataIndex: 'use_time',
-      render: (text, record, index) => {
-        if (!(record.type === 2 || record.type === 5)) {
-          return <></>;
-        }
-        if (record.is_stream) {
-          let other = getLogOther(record.other);
-          return (
-            <>
-              <Space>
-                {renderUseTime(text, t)}
-                {renderFirstUseTime(other?.frt, t)}
-                {renderIsStream(record.is_stream, t, other?.stream_status)}
-              </Space>
-            </>
-          );
-        } else {
-          return (
-            <>
-              <Space>
-                {renderUseTime(text, t)}
-                {renderIsStream(record.is_stream, t)}
-              </Space>
-            </>
-          );
-        }
+      render: (text, record) => {
+        if (!(record.type === 2 || record.type === 5)) return null;
+        const other = getLogOther(record.other);
+        return (
+          <div className='inline-flex items-center gap-1'>
+            {renderUseTime(text)}
+            {record.is_stream ? renderFirstUseTime(other?.frt) : null}
+            {renderIsStream(record.is_stream, t, other?.stream_status)}
+          </div>
+        );
       },
     },
     {
@@ -766,12 +706,22 @@ export const getLogsColumns = ({
               '根据 Anthropic 协定，/v1/messages 的输入 tokens 仅统计非缓存输入，不包含缓存读取与缓存写入 tokens。',
             )}
           >
-            <IconHelpCircle className='text-gray-400 cursor-help' />
+            <HelpCircle size={12} className='cursor-help text-muted' />
           </Tooltip>
         </div>
       ),
       dataIndex: 'prompt_tokens',
-      render: (text, record, index) => {
+      render: (text, record) => {
+        if (
+          !(
+            record.type === 0 ||
+            record.type === 2 ||
+            record.type === 5 ||
+            record.type === 6
+          )
+        ) {
+          return null;
+        }
         const other = getLogOther(record.other);
         const cacheSummary = getPromptCacheSummary(other);
         const hasCacheRead = (cacheSummary?.cacheReadTokens || 0) > 0;
@@ -785,34 +735,15 @@ export const getLogsColumns = ({
           cacheText = `${t('缓存写')} ${formatTokenCount(cacheSummary.cacheWriteTokens)}`;
         }
 
-        return record.type === 0 ||
-          record.type === 2 ||
-          record.type === 5 ||
-          record.type === 6 ? (
-          <div
-            style={{
-              display: 'inline-flex',
-              flexDirection: 'column',
-              alignItems: 'flex-start',
-              lineHeight: 1.2,
-            }}
-          >
-            <span>{text}</span>
+        return (
+          <div className='inline-flex flex-col items-start leading-tight'>
+            <span className='text-sm text-foreground'>{text}</span>
             {cacheText ? (
-              <span
-                style={{
-                  marginTop: 2,
-                  fontSize: 11,
-                  color: 'var(--semi-color-text-2)',
-                  whiteSpace: 'nowrap',
-                }}
-              >
+              <span className='mt-0.5 whitespace-nowrap text-[11px] text-muted'>
                 {cacheText}
               </span>
             ) : null}
           </div>
-        ) : (
-          <></>
         );
       },
     },
@@ -820,23 +751,26 @@ export const getLogsColumns = ({
       key: COLUMN_KEYS.COMPLETION,
       title: t('输出'),
       dataIndex: 'completion_tokens',
-      render: (text, record, index) => {
-        return parseInt(text) > 0 &&
-          (record.type === 0 ||
+      render: (text, record) => {
+        if (
+          !(parseInt(text) > 0) ||
+          !(
+            record.type === 0 ||
             record.type === 2 ||
             record.type === 5 ||
-            record.type === 6) ? (
-          <>{<span> {text} </span>}</>
-        ) : (
-          <></>
-        );
+            record.type === 6
+          )
+        ) {
+          return null;
+        }
+        return <span className='text-sm text-foreground'>{text}</span>;
       },
     },
     {
       key: COLUMN_KEYS.COST,
       title: t('花费'),
       dataIndex: 'quota',
-      render: (text, record, index) => {
+      render: (text, record) => {
         if (
           !(
             record.type === 0 ||
@@ -845,12 +779,11 @@ export const getLogsColumns = ({
             record.type === 6
           )
         ) {
-          return <></>;
+          return null;
         }
         const other = getLogOther(record.other);
         const isSubscription = other?.billing_source === 'subscription';
         if (isSubscription) {
-          // Subscription billed: show only tag (no $0), but keep tooltip for equivalent cost.
           return (
             <Tooltip content={`${t('由订阅抵扣')}：${renderQuota(text, 6)}`}>
               <span>{renderBillingTag(record, t)}</span>
@@ -870,33 +803,29 @@ export const getLogsColumns = ({
               '只有当用户设置开启IP记录时，才会进行请求和错误类型日志的IP记录',
             )}
           >
-            <IconHelpCircle className='text-gray-400 cursor-help' />
+            <HelpCircle size={12} className='cursor-help text-muted' />
           </Tooltip>
         </div>
       ),
       dataIndex: 'ip',
-      render: (text, record, index) => {
+      render: (text, record) => {
         const showIp =
           (record.type === 2 ||
             record.type === 5 ||
             (isAdminUser && record.type === 1)) &&
           text;
-        return showIp ? (
+        if (!showIp) return null;
+        return (
           <Tooltip content={text}>
             <span>
-              <Tag
+              <ColorTag
                 color='orange'
-                shape='circle'
-                onClick={(event) => {
-                  copyText(event, text);
-                }}
+                onClick={(event) => copyText(event, text)}
               >
                 {text}
-              </Tag>
+              </ColorTag>
             </span>
           </Tooltip>
-        ) : (
-          <></>
         );
       },
     },
@@ -904,29 +833,29 @@ export const getLogsColumns = ({
       key: COLUMN_KEYS.RETRY,
       title: t('重试'),
       dataIndex: 'retry',
-      render: (text, record, index) => {
-        if (!(record.type === 2 || record.type === 5)) {
-          return <></>;
-        }
+      render: (text, record) => {
+        if (!(record.type === 2 || record.type === 5)) return null;
         let content = t('渠道') + `：${record.channel}`;
         if (record.other !== '') {
-          let other = JSON.parse(record.other);
-          if (other === null) {
-            return <></>;
+          let other = null;
+          try {
+            other = JSON.parse(record.other);
+          } catch (_) {
+            return null;
           }
+          if (other === null) return null;
           if (other.admin_info !== undefined) {
+            const useChannel = other.admin_info.use_channel;
             if (
-              other.admin_info.use_channel !== null &&
-              other.admin_info.use_channel !== undefined &&
-              other.admin_info.use_channel !== ''
+              useChannel !== null &&
+              useChannel !== undefined &&
+              useChannel !== ''
             ) {
-              let useChannel = other.admin_info.use_channel;
-              let useChannelStr = useChannel.join('->');
-              content = t('渠道') + `：${useChannelStr}`;
+              content = t('渠道') + `：${useChannel.join('->')}`;
             }
           }
         }
-        return isAdminUser ? <div>{content}</div> : <></>;
+        return isAdminUser ? <div>{content}</div> : null;
       },
     },
     {
@@ -935,31 +864,16 @@ export const getLogsColumns = ({
       dataIndex: 'content',
       fixed: 'right',
       width: 200,
-      render: (text, record, index) => {
+      render: (text, record) => {
         const detailSummary = getUsageLogDetailSummary(
           record,
           text,
           billingDisplayMode,
           t,
         );
-
         if (!detailSummary) {
-          return (
-            <Typography.Paragraph
-              ellipsis={{
-                rows: 2,
-                showTooltip: {
-                  type: 'popover',
-                  opts: { style: { width: 240 } },
-                },
-              }}
-              style={{ maxWidth: 200, marginBottom: 0 }}
-            >
-              {text}
-            </Typography.Paragraph>
-          );
+          return <EllipsisText width={200} rows={2}>{text}</EllipsisText>;
         }
-
         return renderCompactDetailSummary(detailSummary.segments);
       },
     },
diff --git a/web/src/components/table/usage-logs/UsageLogsFilters.jsx b/web/src/components/table/usage-logs/UsageLogsFilters.jsx
index 8d0d837ca53..f5d7397d8e7 100644
--- a/web/src/components/table/usage-logs/UsageLogsFilters.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsFilters.jsx
@@ -18,10 +18,15 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button, Form } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+import { Button } from '@heroui/react';
 
 import { DATE_RANGE_PRESETS } from '../../../constants/console.constants';
+import {
+  FilterDateRange,
+  FilterInput,
+  FilterSelect,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const LogsFilters = ({
   formInitValues,
@@ -34,91 +39,77 @@ const LogsFilters = ({
   isAdminUser,
   t,
 }) => {
+  const { values, setFieldValue, handleSubmit } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: refresh,
+  });
+  const presets = DATE_RANGE_PRESETS.map((preset) => ({
+    text: t(preset.text),
+    start: preset.start(),
+    end: preset.end(),
+  }));
+  const logTypeOptions = [
+    { value: '0', label: t('全部') },
+    { value: '1', label: t('充值') },
+    { value: '2', label: t('消费') },
+    { value: '3', label: t('管理') },
+    { value: '4', label: t('系统') },
+    { value: '5', label: t('错误') },
+    { value: '6', label: t('退款') },
+  ];
+
   return (
-    <Form
-      initValues={formInitValues}
-      getFormApi={(api) => setFormApi(api)}
-      onSubmit={refresh}
-      allowEmpty={true}
-      autoComplete='off'
-      layout='vertical'
-      trigger='change'
-      stopValidateWithError={false}
-    >
+    <form onSubmit={handleSubmit} autoComplete='off'>
       <div className='flex flex-col gap-2'>
         <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-2'>
           {/* 时间选择器 */}
           <div className='col-span-1 lg:col-span-2'>
-            <Form.DatePicker
-              field='dateRange'
-              className='w-full'
-              type='dateTimeRange'
-              placeholder={[t('开始时间'), t('结束时间')]}
-              showClear
-              pure
-              size='small'
-              presets={DATE_RANGE_PRESETS.map((preset) => ({
-                text: t(preset.text),
-                start: preset.start(),
-                end: preset.end(),
-              }))}
+            <FilterDateRange
+              value={values.dateRange}
+              onChange={(nextValue) => setFieldValue('dateRange', nextValue)}
+              startPlaceholder={t('开始时间')}
+              endPlaceholder={t('结束时间')}
+              presets={presets}
             />
           </div>
 
           {/* 其他搜索字段 */}
-          <Form.Input
-            field='token_name'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.token_name}
+            onChange={(nextValue) => setFieldValue('token_name', nextValue)}
             placeholder={t('令牌名称')}
-            showClear
-            pure
-            size='small'
           />
 
-          <Form.Input
-            field='model_name'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.model_name}
+            onChange={(nextValue) => setFieldValue('model_name', nextValue)}
             placeholder={t('模型名称')}
-            showClear
-            pure
-            size='small'
           />
 
-          <Form.Input
-            field='group'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.group}
+            onChange={(nextValue) => setFieldValue('group', nextValue)}
             placeholder={t('分组')}
-            showClear
-            pure
-            size='small'
           />
 
-          <Form.Input
-            field='request_id'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.request_id}
+            onChange={(nextValue) => setFieldValue('request_id', nextValue)}
             placeholder={t('Request ID')}
-            showClear
-            pure
-            size='small'
           />
 
           {isAdminUser && (
             <>
-              <Form.Input
-                field='channel'
-                prefix={<IconSearch />}
+              <FilterInput
+                value={values.channel}
+                onChange={(nextValue) => setFieldValue('channel', nextValue)}
                 placeholder={t('渠道 ID')}
-                showClear
-                pure
-                size='small'
               />
-              <Form.Input
-                field='username'
-                prefix={<IconSearch />}
+              <FilterInput
+                value={values.username}
+                onChange={(nextValue) => setFieldValue('username', nextValue)}
                 placeholder={t('用户名称')}
-                showClear
-                pure
-                size='small'
               />
             </>
           )}
@@ -128,41 +119,31 @@ const LogsFilters = ({
         <div className='flex flex-col sm:flex-row justify-between items-start sm:items-center gap-3'>
           {/* 日志类型选择器 */}
           <div className='w-full sm:w-auto'>
-            <Form.Select
-              field='logType'
-              placeholder={t('日志类型')}
-              className='w-full sm:w-auto min-w-[120px]'
-              showClear
-              pure
-              onChange={() => {
-                // 延迟执行搜索，让表单值先更新
+            <FilterSelect
+              value={values.logType}
+              onChange={(nextValue) => {
+                setFieldValue('logType', nextValue);
                 setTimeout(() => {
                   refresh();
                 }, 0);
               }}
-              size='small'
-            >
-              <Form.Select.Option value='0'>{t('全部')}</Form.Select.Option>
-              <Form.Select.Option value='1'>{t('充值')}</Form.Select.Option>
-              <Form.Select.Option value='2'>{t('消费')}</Form.Select.Option>
-              <Form.Select.Option value='3'>{t('管理')}</Form.Select.Option>
-              <Form.Select.Option value='4'>{t('系统')}</Form.Select.Option>
-              <Form.Select.Option value='5'>{t('错误')}</Form.Select.Option>
-              <Form.Select.Option value='6'>{t('退款')}</Form.Select.Option>
-            </Form.Select>
+              placeholder={t('日志类型')}
+              className='w-full sm:w-auto min-w-[120px]'
+              options={logTypeOptions}
+            />
           </div>
 
           <div className='flex gap-2 w-full sm:w-auto justify-end'>
             <Button
-              type='tertiary'
-              htmlType='submit'
+              type='submit'
+              variant='flat'
               loading={loading}
-              size='small'
+              size='sm'
             >
               {t('查询')}
             </Button>
             <Button
-              type='tertiary'
+              variant='flat'
               onClick={() => {
                 if (formApi) {
                   formApi.reset();
@@ -172,21 +153,21 @@ const LogsFilters = ({
                   }, 100);
                 }
               }}
-              size='small'
+              size='sm'
             >
               {t('重置')}
             </Button>
             <Button
-              type='tertiary'
+              variant='flat'
               onClick={() => setShowColumnSelector(true)}
-              size='small'
+              size='sm'
             >
               {t('列设置')}
             </Button>
           </div>
         </div>
       </div>
-    </Form>
+    </form>
   );
 };
 
diff --git a/web/src/components/table/usage-logs/UsageLogsTable.jsx b/web/src/components/table/usage-logs/UsageLogsTable.jsx
index f99dbfcfe2e..22ff1d0029f 100644
--- a/web/src/components/table/usage-logs/UsageLogsTable.jsx
+++ b/web/src/components/table/usage-logs/UsageLogsTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo } from 'react';
-import { Empty, Descriptions } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getLogsColumns } from './UsageLogsColumnDefs';
 
 const LogsTable = (logsData) => {
@@ -85,7 +81,21 @@ const LogsTable = (logsData) => {
   }, [compactMode, visibleColumnsList]);
 
   const expandRowRender = (record, index) => {
-    return <Descriptions data={expandData[record.key]} />;
+    const items = expandData[record.key] || [];
+    return (
+      <div className='grid gap-2 rounded-2xl bg-surface-secondary/70 p-4 text-sm md:grid-cols-2'>
+        {items.map((item, itemIndex) => (
+          <div key={`${record.key}-${itemIndex}`} className='min-w-0'>
+            <div className='text-xs text-muted'>
+              {item.key || item.label}
+            </div>
+            <div className='mt-1 break-all text-foreground'>
+              {item.value ?? item.children ?? '-'}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
   };
 
   return (
@@ -104,14 +114,7 @@ const LogsTable = (logsData) => {
       className='rounded-xl overflow-hidden'
       size='small'
       empty={
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={t('搜索无结果')}
-          style={{ padding: 30 }}
-        />
+        <TableEmptyState description={t('搜索无结果')} />
       }
       pagination={{
         currentPage: activePage,
diff --git a/web/src/components/table/usage-logs/components/ParamOverrideEntry.jsx b/web/src/components/table/usage-logs/components/ParamOverrideEntry.jsx
index aa7c74998cb..e3dc2ebb6e1 100644
--- a/web/src/components/table/usage-logs/components/ParamOverrideEntry.jsx
+++ b/web/src/components/table/usage-logs/components/ParamOverrideEntry.jsx
@@ -18,35 +18,20 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
-
-const { Text } = Typography;
 
 const ParamOverrideEntry = ({ count, onOpen, t }) => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: 10,
-        flexWrap: 'wrap',
-      }}
-    >
-      <Text
-        type='tertiary'
-        size='small'
-        style={{ fontVariantNumeric: 'tabular-nums' }}
-      >
+    <div className='flex flex-wrap items-center gap-2.5'>
+      <span className='text-xs tabular-nums text-muted'>
         {t('{{count}} 项操作', { count })}
-      </Text>
-      <Text
-        link
-        size='small'
-        style={{ fontWeight: 600 }}
+      </span>
+      <button
+        type='button'
+        className='text-xs font-semibold text-accent transition hover:text-accent/80'
         onClick={onOpen}
       >
         {t('查看详情')}
-      </Text>
+      </button>
     </div>
   );
 };
diff --git a/web/src/components/table/usage-logs/modals/ChannelAffinityUsageCacheModal.jsx b/web/src/components/table/usage-logs/modals/ChannelAffinityUsageCacheModal.jsx
index 383ebabc1cd..debc6a55023 100644
--- a/web/src/components/table/usage-logs/modals/ChannelAffinityUsageCacheModal.jsx
+++ b/web/src/components/table/usage-logs/modals/ChannelAffinityUsageCacheModal.jsx
@@ -18,11 +18,18 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Modal, Descriptions, Spin, Typography } from '@douyinfe/semi-ui';
+import {
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
 import { API, showError, timestamp2string } from '../../../../helpers';
 
-const { Text } = Typography;
-
 function formatRate(hit, total) {
   if (!total || total <= 0) return '-';
   const r = (Number(hit || 0) / Number(total || 0)) * 100;
@@ -63,6 +70,12 @@ const ChannelAffinityUsageCacheModal = ({
   const [loading, setLoading] = useState(false);
   const [stats, setStats] = useState(null);
   const requestSeqRef = useRef(0);
+  const modalState = useOverlayState({
+    isOpen: showChannelAffinityUsageCacheModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowChannelAffinityUsageCacheModal(false);
+    },
+  });
 
   const params = useMemo(() => {
     const x = channelAffinityUsageCacheTarget || {};
@@ -192,48 +205,58 @@ const ChannelAffinityUsageCacheModal = ({
   }, [stats, params, t]);
 
   return (
-    <Modal
-      title={t('渠道亲和性：上游缓存命中')}
-      visible={showChannelAffinityUsageCacheModal}
-      onCancel={() => setShowChannelAffinityUsageCacheModal(false)}
-      footer={null}
-      centered
-      closable
-      maskClosable
-      width={640}
-    >
-      <div style={{ padding: 16 }}>
-        <div style={{ marginBottom: 12 }}>
-          <Text type='tertiary' size='small'>
-            {t(
-              '命中判定：usage 中存在 cached tokens（例如 cached_tokens/prompt_cache_hit_tokens）即视为命中。',
-            )}
-            {' '}
-            {t(
-              'Cached tokens 占比口径由后端返回：Claude 语义按 cached/(prompt+cached)，其余按 cached/prompt。',
-            )}
-            {' '}
-            {t('当前仅 OpenAI / Claude 语义支持缓存 token 统计，其他通道将隐藏 token 相关字段。')}
-            {stats && !supportsTokenStats ? (
-              <>
-                {' '}
-                {t('该记录不包含可用的 token 统计口径。')}
-              </>
-            ) : null}
-          </Text>
-        </div>
-        <Spin spinning={loading} tip={t('加载中...')}>
-          {stats && rows.length > 0 ? (
-            <Descriptions data={rows} />
-          ) : (
-            <div style={{ padding: '24px 0' }}>
-              <Text type='tertiary' size='small'>
-                {loading ? t('加载中...') : t('暂无可展示数据')}
-              </Text>
-            </div>
-          )}
-        </Spin>
-      </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='2xl' placement='center' scroll='inside'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('渠道亲和性：上游缓存命中')}
+            </ModalHeader>
+            <ModalBody className='p-6'>
+              <p className='mb-4 text-xs leading-relaxed text-muted'>
+                {t(
+                  '命中判定：usage 中存在 cached tokens（例如 cached_tokens/prompt_cache_hit_tokens）即视为命中。',
+                )}{' '}
+                {t(
+                  'Cached tokens 占比口径由后端返回：Claude 语义按 cached/(prompt+cached)，其余按 cached/prompt。',
+                )}{' '}
+                {t(
+                  '当前仅 OpenAI / Claude 语义支持缓存 token 统计，其他通道将隐藏 token 相关字段。',
+                )}
+                {stats && !supportsTokenStats
+                  ? ` ${t('该记录不包含可用的 token 统计口径。')}`
+                  : ''}
+              </p>
+              {loading ? (
+                <div className='flex flex-col items-center justify-center gap-3 py-10 text-sm text-muted'>
+                  <Spinner />
+                  {t('加载中...')}
+                </div>
+              ) : stats && rows.length > 0 ? (
+                <div className='grid grid-cols-1 gap-3 sm:grid-cols-2'>
+                  {rows.map((row) => (
+                    <div
+                      key={row.key}
+                      className='rounded-2xl border border-border bg-surface-secondary/60 p-3'
+                    >
+                      <div className='mb-1 text-xs text-muted'>
+                        {row.key}
+                      </div>
+                      <div className='break-all text-sm font-semibold text-foreground'>
+                        {row.value}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              ) : (
+                <div className='py-8 text-center text-sm text-muted'>
+                  {t('暂无可展示数据')}
+                </div>
+              )}
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx b/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx
index 1c450666ca3..13bf44d22ad 100644
--- a/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx
+++ b/web/src/components/table/usage-logs/modals/ColumnSelectorModal.jsx
@@ -18,8 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Button, Checkbox, RadioGroup, Radio } from '@douyinfe/semi-ui';
 import { getLogsColumns } from '../UsageLogsColumnDefs';
+import ColumnSelectorDialog from '../../../common/ui/ColumnSelectorDialog';
 
 const ColumnSelectorModal = ({
   showColumnSelector,
@@ -36,10 +36,6 @@ const ColumnSelectorModal = ({
   showUserInfoFunc,
   t,
 }) => {
-  const handleBillingDisplayModeChange = (eventOrValue) => {
-    setBillingDisplayMode(eventOrValue?.target?.value ?? eventOrValue);
-  };
-
   const isTokensDisplay =
     typeof localStorage !== 'undefined' &&
     localStorage.getItem('quota_display_type') === 'TOKENS';
@@ -52,82 +48,60 @@ const ColumnSelectorModal = ({
     showUserInfoFunc,
     isAdminUser,
     billingDisplayMode,
-  });
+  }).filter(
+    (column) =>
+      isAdminUser ||
+      (column.key !== COLUMN_KEYS.CHANNEL &&
+        column.key !== COLUMN_KEYS.USERNAME &&
+        column.key !== COLUMN_KEYS.RETRY),
+  );
 
   return (
-    <Modal
+    <ColumnSelectorDialog
       title={t('列设置')}
       visible={showColumnSelector}
-      onCancel={() => setShowColumnSelector(false)}
-      footer={
-        <div className='flex justify-end'>
-          <Button onClick={() => initDefaultColumns()}>{t('重置')}</Button>
-          <Button onClick={() => setShowColumnSelector(false)}>
-            {t('取消')}
-          </Button>
-          <Button onClick={() => setShowColumnSelector(false)}>
-            {t('确定')}
-          </Button>
-        </div>
-      }
+      onClose={() => setShowColumnSelector(false)}
+      resetText={t('重置')}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
+      allText={t('全选')}
+      visibleColumns={visibleColumns}
+      columns={allColumns}
+      onColumnChange={handleColumnVisibilityChange}
+      onSelectAll={handleSelectAll}
+      onReset={initDefaultColumns}
     >
-      <div style={{ marginBottom: 20 }}>
-        <div style={{ marginBottom: 16 }}>
-          <div style={{ marginBottom: 8, fontWeight: 600 }}>{t('计费显示模式')}</div>
-          <RadioGroup
-            type='button'
-            value={billingDisplayMode}
-            onChange={handleBillingDisplayModeChange}
-          >
-            <Radio value='price'>
-              {isTokensDisplay ? t('价格模式') : t('价格模式（默认）')}
-            </Radio>
-            <Radio value='ratio'>
-              {isTokensDisplay ? t('倍率模式（默认）') : t('倍率模式')}
-            </Radio>
-          </RadioGroup>
+      <div className='rounded-2xl border border-border bg-surface-secondary/60 p-3'>
+        <div className='mb-2 text-sm font-semibold text-foreground'>
+          {t('计费显示模式')}
+        </div>
+        <div className='flex flex-wrap gap-2'>
+          {[
+            {
+              value: 'price',
+              label: isTokensDisplay ? t('价格模式') : t('价格模式（默认）'),
+            },
+            {
+              value: 'ratio',
+              label: isTokensDisplay ? t('倍率模式（默认）') : t('倍率模式'),
+            },
+          ].map((option) => (
+            <button
+              key={option.value}
+              type='button'
+              onClick={() => setBillingDisplayMode(option.value)}
+              className={`rounded-full border px-3 py-1.5 text-sm transition ${
+                billingDisplayMode === option.value
+                  ? 'border-sky-400 bg-sky-50 text-sky-700 dark:border-sky-500 dark:bg-sky-500/10 dark:text-sky-200'
+                  : 'border-border bg-background text-muted hover:border-primary'
+              }`}
+            >
+              {option.label}
+            </button>
+          ))}
         </div>
-        <Checkbox
-          checked={Object.values(visibleColumns).every((v) => v === true)}
-          indeterminate={
-            Object.values(visibleColumns).some((v) => v === true) &&
-            !Object.values(visibleColumns).every((v) => v === true)
-          }
-          onChange={(e) => handleSelectAll(e.target.checked)}
-        >
-          {t('全选')}
-        </Checkbox>
-      </div>
-      <div
-        className='flex flex-wrap max-h-96 overflow-y-auto rounded-lg p-4'
-        style={{ border: '1px solid var(--semi-color-border)' }}
-      >
-        {allColumns.map((column) => {
-          // Skip admin-only columns for non-admin users
-          if (
-            !isAdminUser &&
-            (column.key === COLUMN_KEYS.CHANNEL ||
-              column.key === COLUMN_KEYS.USERNAME ||
-              column.key === COLUMN_KEYS.RETRY)
-          ) {
-            return null;
-          }
-
-          return (
-            <div key={column.key} className='w-1/2 mb-4 pr-2'>
-              <Checkbox
-                checked={!!visibleColumns[column.key]}
-                onChange={(e) =>
-                  handleColumnVisibilityChange(column.key, e.target.checked)
-                }
-              >
-                {column.title}
-              </Checkbox>
-            </div>
-          );
-        })}
       </div>
-    </Modal>
+    </ColumnSelectorDialog>
   );
 };
 
diff --git a/web/src/components/table/usage-logs/modals/ParamOverrideModal.jsx b/web/src/components/table/usage-logs/modals/ParamOverrideModal.jsx
index 0b0c6ec81c3..7c55ca2e8fd 100644
--- a/web/src/components/table/usage-logs/modals/ParamOverrideModal.jsx
+++ b/web/src/components/table/usage-logs/modals/ParamOverrideModal.jsx
@@ -21,15 +21,17 @@ import React, { useMemo } from 'react';
 import {
   Modal,
   Button,
-  Empty,
-  Divider,
-  Typography,
-} from '@douyinfe/semi-ui';
-import { IconCopy } from '@douyinfe/semi-icons';
+  Chip,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Copy } from 'lucide-react';
 import { copy, showError, showSuccess } from '../../../../helpers';
 
-const { Text } = Typography;
-
 const parseAuditLine = (line) => {
   if (typeof line !== 'string') {
     return null;
@@ -104,6 +106,12 @@ const ParamOverrideModal = ({
   const lines = Array.isArray(paramOverrideTarget?.lines)
     ? paramOverrideTarget.lines
     : [];
+  const modalState = useOverlayState({
+    isOpen: showParamOverrideModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowParamOverrideModal(false);
+    },
+  });
 
   const parsedLines = useMemo(() => {
     return lines.map(parseAuditLine);
@@ -122,149 +130,80 @@ const ParamOverrideModal = ({
   };
 
   return (
-    <Modal
-      title={t('参数覆盖详情')}
-      visible={showParamOverrideModal}
-      onCancel={() => setShowParamOverrideModal(false)}
-      footer={null}
-      centered
-      closable
-      maskClosable
-      width={640}
-    >
-      <div style={{ padding: '8px 20px 20px' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'flex-start',
-            gap: 12,
-            marginBottom: 10,
-          }}
-        >
-          <div style={{ minWidth: 0 }}>
-            <div style={{ marginBottom: 4 }}>
-              <Text style={{ fontWeight: 600 }}>
-                {t('{{count}} 项操作', { count: lines.length })}
-              </Text>
-            </div>
-            <div
-              style={{
-                display: 'flex',
-                flexWrap: 'wrap',
-                gap: 8,
-                fontSize: 12,
-                color: 'var(--semi-color-text-2)',
-              }}
-            >
-              {paramOverrideTarget?.modelName ? (
-                <Text type='tertiary' size='small'>
-                  {paramOverrideTarget.modelName}
-                </Text>
-              ) : null}
-              {paramOverrideTarget?.requestId ? (
-                <Text type='tertiary' size='small'>
-                  {t('Request ID')}: {paramOverrideTarget.requestId}
-                </Text>
-              ) : null}
-              {paramOverrideTarget?.requestPath ? (
-                <Text type='tertiary' size='small'>
-                  {t('请求路径')}: {paramOverrideTarget.requestPath}
-                </Text>
-              ) : null}
-            </div>
-          </div>
-
-          <Button
-            icon={<IconCopy />}
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            onClick={copyAll}
-            disabled={lines.length === 0}
-          >
-            {t('复制')}
-          </Button>
-        </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='2xl' placement='center' scroll='inside'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('参数覆盖详情')}
+            </ModalHeader>
+            <ModalBody className='p-6'>
+              <div className='mb-4 flex items-start justify-between gap-3'>
+                <div className='min-w-0'>
+                  <div className='mb-1 font-semibold text-foreground'>
+                    {t('{{count}} 项操作', { count: lines.length })}
+                  </div>
+                  <div className='flex flex-wrap gap-2 text-xs text-muted'>
+                    {paramOverrideTarget?.modelName ? (
+                      <span>{paramOverrideTarget.modelName}</span>
+                    ) : null}
+                    {paramOverrideTarget?.requestId ? (
+                      <span>
+                        {t('Request ID')}: {paramOverrideTarget.requestId}
+                      </span>
+                    ) : null}
+                    {paramOverrideTarget?.requestPath ? (
+                      <span>
+                        {t('请求路径')}: {paramOverrideTarget.requestPath}
+                      </span>
+                    ) : null}
+                  </div>
+                </div>
 
-        <Divider margin='12px' />
+                <Button
+                  startContent={<Copy size={16} />}
+                  variant='flat'
+                  size='sm'
+                  onPress={copyAll}
+                  isDisabled={lines.length === 0}
+                >
+                  {t('复制')}
+                </Button>
+              </div>
 
-        {lines.length === 0 ? (
-          <Empty
-            description={t('暂无参数覆盖记录')}
-            style={{ padding: '24px 0 8px' }}
-          />
-        ) : (
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 8,
-              maxHeight: '56vh',
-              overflowY: 'auto',
-              paddingRight: 2,
-            }}
-          >
-            {parsedLines.map((item, index) => {
-              if (!item) {
-                return null;
-              }
+              <div className='mb-4 h-px bg-border' />
 
-              return (
-                <div
-                  key={`${item.action}-${index}`}
-                  style={{
-                    padding: '10px 12px',
-                    borderRadius: 10,
-                    border: '1px solid var(--semi-color-border)',
-                    background: 'var(--semi-color-fill-0)',
-                    display: 'flex',
-                    gap: 12,
-                    alignItems: 'flex-start',
-                  }}
-                >
-                  <div
-                    style={{
-                      flex: '0 0 auto',
-                      minWidth: 74,
-                    }}
-                  >
-                    <Text
-                      style={{
-                        display: 'inline-block',
-                        fontSize: 11,
-                        fontWeight: 700,
-                        lineHeight: '20px',
-                        padding: '0 8px',
-                        borderRadius: 999,
-                        background: 'rgba(var(--semi-blue-5), 0.12)',
-                        color: 'var(--semi-color-primary)',
-                      }}
-                    >
-                      {getActionLabel(item.action, t)}
-                    </Text>
-                  </div>
-                  <Text
-                    style={{
-                      flex: 1,
-                      minWidth: 0,
-                      fontFamily:
-                        'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, monospace',
-                      fontSize: 12,
-                      lineHeight: 1.6,
-                      whiteSpace: 'pre-wrap',
-                      wordBreak: 'break-word',
-                      color: 'var(--semi-color-text-0)',
-                    }}
-                  >
-                    {item.content}
-                  </Text>
+              {lines.length === 0 ? (
+                <div className='py-8 text-center text-sm text-muted'>
+                  {t('暂无参数覆盖记录')}
+                </div>
+              ) : (
+                <div className='flex max-h-[56vh] flex-col gap-2 overflow-y-auto pr-1'>
+                  {parsedLines.map((item, index) => {
+                    if (!item) {
+                      return null;
+                    }
+
+                    return (
+                      <div
+                        key={`${item.action}-${index}`}
+                        className='flex items-start gap-3 rounded-2xl border border-border bg-surface-secondary/60 p-3'
+                      >
+                        <Chip color='primary' size='sm' variant='flat'>
+                          {getActionLabel(item.action, t)}
+                        </Chip>
+                        <pre className='min-w-0 flex-1 whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground'>
+                          {item.content}
+                        </pre>
+                      </div>
+                    );
+                  })}
                 </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
+              )}
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/usage-logs/modals/UserInfoModal.jsx b/web/src/components/table/usage-logs/modals/UserInfoModal.jsx
index ad189e599ea..2aaffb9dbdc 100644
--- a/web/src/components/table/usage-logs/modals/UserInfoModal.jsx
+++ b/web/src/components/table/usage-logs/modals/UserInfoModal.jsx
@@ -18,7 +18,15 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Badge } from '@douyinfe/semi-ui';
+import {
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import { renderQuota, renderNumber } from '../../../../helpers';
 
 const UserInfoModal = ({
@@ -27,149 +35,116 @@ const UserInfoModal = ({
   userInfoData,
   t,
 }) => {
-  const infoItemStyle = {
-    marginBottom: '16px',
-  };
-
-  const labelStyle = {
-    display: 'flex',
-    alignItems: 'center',
-    marginBottom: '2px',
-    fontSize: '12px',
-    color: 'var(--semi-color-text-2)',
-    gap: '6px',
-  };
-
   const renderLabel = (text, type = 'tertiary') => (
-    <div style={labelStyle}>
-      <Badge dot type={type} />
+    <div className='mb-1 flex items-center gap-1.5 text-xs text-muted'>
+      <span
+        className={`h-2 w-2 rounded-full ${
+          type === 'primary'
+            ? 'bg-primary'
+            : type === 'success'
+              ? 'bg-success'
+              : type === 'warning'
+                ? 'bg-warning'
+                : 'bg-muted'
+        }`}
+      />
       {text}
     </div>
   );
 
-  const valueStyle = {
-    fontSize: '14px',
-    fontWeight: '600',
-    color: 'var(--semi-color-text-0)',
-  };
-
-  const rowStyle = {
-    display: 'flex',
-    justifyContent: 'space-between',
-    marginBottom: '16px',
-    gap: '20px',
-  };
-
-  const colStyle = {
-    flex: 1,
-    minWidth: 0,
-  };
+  const modalState = useOverlayState({
+    isOpen: showUserInfo,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowUserInfoModal(false);
+    },
+  });
+  const valueClass = 'text-sm font-semibold text-foreground';
 
   return (
-    <Modal
-      title={t('用户信息')}
-      visible={showUserInfo}
-      onCancel={() => setShowUserInfoModal(false)}
-      footer={null}
-      centered
-      closable
-      maskClosable
-      width={600}
-    >
-      {userInfoData && (
-        <div style={{ padding: 20 }}>
-          {/* 基本信息 */}
-          <div style={rowStyle}>
-            <div style={colStyle}>
-              {renderLabel(t('用户名'), 'primary')}
-              <div style={valueStyle}>{userInfoData.username}</div>
-            </div>
-            {userInfoData.display_name && (
-              <div style={colStyle}>
-                {renderLabel(t('显示名称'), 'primary')}
-                <div style={valueStyle}>{userInfoData.display_name}</div>
-              </div>
-            )}
-          </div>
-
-          {/* 余额信息 */}
-          <div style={rowStyle}>
-            <div style={colStyle}>
-              {renderLabel(t('余额'), 'success')}
-              <div style={valueStyle}>{renderQuota(userInfoData.quota)}</div>
-            </div>
-            <div style={colStyle}>
-              {renderLabel(t('已用额度'), 'warning')}
-              <div style={valueStyle}>
-                {renderQuota(userInfoData.used_quota)}
-              </div>
-            </div>
-          </div>
-
-          {/* 统计信息 */}
-          <div style={rowStyle}>
-            <div style={colStyle}>
-              {renderLabel(t('请求次数'), 'warning')}
-              <div style={valueStyle}>
-                {renderNumber(userInfoData.request_count)}
-              </div>
-            </div>
-            {userInfoData.group && (
-              <div style={colStyle}>
-                {renderLabel(t('用户组'), 'tertiary')}
-                <div style={valueStyle}>{userInfoData.group}</div>
-              </div>
-            )}
-          </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='2xl' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              {t('用户信息')}
+            </ModalHeader>
+            <ModalBody className='p-6'>
+              {userInfoData && (
+                <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+                  <div>
+                    {renderLabel(t('用户名'), 'primary')}
+                    <div className={valueClass}>{userInfoData.username}</div>
+                  </div>
+                  {userInfoData.display_name && (
+                    <div>
+                      {renderLabel(t('显示名称'), 'primary')}
+                      <div className={valueClass}>{userInfoData.display_name}</div>
+                    </div>
+                  )}
+
+                  <div>
+                    {renderLabel(t('余额'), 'success')}
+                    <div className={valueClass}>{renderQuota(userInfoData.quota)}</div>
+                  </div>
+                  <div>
+                    {renderLabel(t('已用额度'), 'warning')}
+                    <div className={valueClass}>
+                      {renderQuota(userInfoData.used_quota)}
+                    </div>
+                  </div>
 
-          {/* 邀请信息 */}
-          {(userInfoData.aff_code || userInfoData.aff_count !== undefined) && (
-            <div style={rowStyle}>
-              {userInfoData.aff_code && (
-                <div style={colStyle}>
-                  {renderLabel(t('邀请码'), 'tertiary')}
-                  <div style={valueStyle}>{userInfoData.aff_code}</div>
-                </div>
-              )}
-              {userInfoData.aff_count !== undefined && (
-                <div style={colStyle}>
-                  {renderLabel(t('邀请人数'), 'tertiary')}
-                  <div style={valueStyle}>
-                    {renderNumber(userInfoData.aff_count)}
+                  <div>
+                    {renderLabel(t('请求次数'), 'warning')}
+                    <div className={valueClass}>
+                      {renderNumber(userInfoData.request_count)}
+                    </div>
                   </div>
+                  {userInfoData.group && (
+                    <div>
+                      {renderLabel(t('用户组'), 'tertiary')}
+                      <div className={valueClass}>{userInfoData.group}</div>
+                    </div>
+                  )}
+
+                  {userInfoData.aff_code && (
+                    <div>
+                      {renderLabel(t('邀请码'), 'tertiary')}
+                      <div className={valueClass}>{userInfoData.aff_code}</div>
+                    </div>
+                  )}
+                  {userInfoData.aff_count !== undefined && (
+                    <div>
+                      {renderLabel(t('邀请人数'), 'tertiary')}
+                      <div className={valueClass}>
+                        {renderNumber(userInfoData.aff_count)}
+                      </div>
+                    </div>
+                  )}
+
+                  {userInfoData.aff_quota !== undefined &&
+                    userInfoData.aff_quota > 0 && (
+                      <div>
+                        {renderLabel(t('邀请获得额度'), 'success')}
+                        <div className={valueClass}>
+                          {renderQuota(userInfoData.aff_quota)}
+                        </div>
+                      </div>
+                    )}
+
+                  {userInfoData.remark && (
+                    <div className='sm:col-span-2'>
+                      {renderLabel(t('备注'), 'tertiary')}
+                      <div className={`${valueClass} break-all leading-relaxed`}>
+                        {userInfoData.remark}
+                      </div>
+                    </div>
+                  )}
                 </div>
               )}
-            </div>
-          )}
-
-          {/* 邀请获得额度 */}
-          {userInfoData.aff_quota !== undefined &&
-            userInfoData.aff_quota > 0 && (
-              <div style={infoItemStyle}>
-                {renderLabel(t('邀请获得额度'), 'success')}
-                <div style={valueStyle}>
-                  {renderQuota(userInfoData.aff_quota)}
-                </div>
-              </div>
-            )}
-
-          {/* 备注 */}
-          {userInfoData.remark && (
-            <div style={{ marginBottom: 0 }}>
-              {renderLabel(t('备注'), 'tertiary')}
-              <div
-                style={{
-                  ...valueStyle,
-                  wordBreak: 'break-all',
-                  lineHeight: '1.4',
-                }}
-              >
-                {userInfoData.remark}
-              </div>
-            </div>
-          )}
-        </div>
-      )}
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/table/users/UsersActions.jsx b/web/src/components/table/users/UsersActions.jsx
index c3f2602a259..e787d7b60c7 100644
--- a/web/src/components/table/users/UsersActions.jsx
+++ b/web/src/components/table/users/UsersActions.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Button } from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 
 const UsersActions = ({ setShowAddUser, t }) => {
   // Add new user
@@ -28,7 +28,7 @@ const UsersActions = ({ setShowAddUser, t }) => {
 
   return (
     <div className='flex gap-2 w-full md:w-auto order-2 md:order-1'>
-      <Button className='w-full md:w-auto' onClick={handleAddUser} size='small'>
+      <Button className='w-full md:w-auto' onPress={handleAddUser} size='sm'>
         {t('添加用户')}
       </Button>
     </div>
diff --git a/web/src/components/table/users/UsersColumnDefs.jsx b/web/src/components/table/users/UsersColumnDefs.jsx
index dc3e6f3413e..0af38fd5552 100644
--- a/web/src/components/table/users/UsersColumnDefs.jsx
+++ b/web/src/components/table/users/UsersColumnDefs.jsx
@@ -17,55 +17,184 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React from 'react';
-import {
-  Button,
-  Space,
-  Tag,
-  Tooltip,
-  Progress,
-  Popover,
-  Typography,
-  Dropdown,
-} from '@douyinfe/semi-ui';
-import { IconMore } from '@douyinfe/semi-icons';
-import { renderGroup, renderNumber, renderQuota } from '../../../helpers';
+import React, { useEffect, useRef, useState } from 'react';
+import { Button, Tooltip } from '@heroui/react';
+import { Copy, MoreHorizontal } from 'lucide-react';
+import { renderGroup, renderNumber, renderQuota, copy, showSuccess } from '../../../helpers';
+
+const TONE_CLASSES = {
+  blue:
+    'bg-sky-100 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300',
+  yellow:
+    'bg-amber-100 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300',
+  orange:
+    'bg-orange-100 text-orange-700 dark:bg-orange-950/40 dark:text-orange-300',
+  red:
+    'bg-red-100 text-red-700 dark:bg-red-950/40 dark:text-red-300',
+  green:
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
+  grey: 'bg-surface-secondary text-muted',
+  white:
+    'border border-border bg-background text-foreground',
+};
+
+function Chip({ tone = 'white', children, className = '' }) {
+  const cls = TONE_CLASSES[tone] || TONE_CLASSES.white;
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls} ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function CopyableLine({ value, children }) {
+  const handleCopy = async (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (await copy(value)) {
+      showSuccess('已复制');
+    }
+  };
+  return (
+    <div className='group flex items-center gap-1.5'>
+      <span className='min-w-0 truncate'>{children}</span>
+      <button
+        type='button'
+        onClick={handleCopy}
+        aria-label='copy'
+        className='inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-muted opacity-0 transition group-hover:opacity-100 hover:bg-surface-secondary hover:text-foreground'
+      >
+        <Copy size={11} />
+      </button>
+    </div>
+  );
+}
+
+function HoverPanel({ children, content, position = 'top' }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const timer = useRef(null);
+
+  const show = () => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+    setOpen(true);
+  };
+  const hide = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(false), 100);
+  };
+
+  useEffect(() => () => timer.current && clearTimeout(timer.current), []);
+
+  return (
+    <span
+      ref={ref}
+      className='relative inline-flex'
+      onMouseEnter={show}
+      onMouseLeave={hide}
+    >
+      {children}
+      {open ? (
+        <div
+          role='tooltip'
+          className={`absolute left-1/2 -translate-x-1/2 z-30 min-w-[10rem] rounded-lg border border-border bg-background p-2 text-xs shadow-lg ${
+            position === 'top' ? 'bottom-full mb-1.5' : 'top-full mt-1.5'
+          }`}
+        >
+          {content}
+        </div>
+      ) : null}
+    </span>
+  );
+}
+
+function ProgressBar({ percent }) {
+  const clamped = Math.max(0, Math.min(100, Number(percent) || 0));
+  return (
+    <div className='h-1 w-full overflow-hidden rounded-full bg-surface-secondary'>
+      <div
+        className='h-full rounded-full bg-emerald-500 transition-all'
+        style={{ width: `${clamped}%` }}
+      />
+    </div>
+  );
+}
+
+function ClickMenu({ items, trigger }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const handleClick = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClick);
+    return () => document.removeEventListener('mousedown', handleClick);
+  }, [open]);
+
+  return (
+    <span ref={ref} className='relative inline-flex'>
+      <span onClick={() => setOpen((prev) => !prev)}>{trigger}</span>
+      {open ? (
+        <div
+          role='menu'
+          className='absolute right-0 top-full z-30 mt-1 min-w-[10rem] overflow-hidden rounded-lg border border-border bg-background shadow-lg'
+        >
+          {items.map((item, idx) => {
+            if (item.divider) {
+              return (
+                <div
+                  key={`divider-${idx}`}
+                  className='my-1 h-px bg-border'
+                />
+              );
+            }
+            return (
+              <button
+                key={`item-${idx}`}
+                type='button'
+                role='menuitem'
+                className={`flex w-full items-center px-3 py-2 text-left text-sm transition ${
+                  item.danger
+                    ? 'text-red-600 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-950/40'
+                    : 'text-foreground hover:bg-surface-secondary'
+                }`}
+                onClick={() => {
+                  setOpen(false);
+                  item.onClick?.();
+                }}
+              >
+                {item.label}
+              </button>
+            );
+          })}
+        </div>
+      ) : null}
+    </span>
+  );
+}
 
-/**
- * Render user role
- */
 const renderRole = (role, t) => {
   switch (role) {
     case 1:
-      return (
-        <Tag color='blue' shape='circle'>
-          {t('普通用户')}
-        </Tag>
-      );
+      return <Chip tone='blue'>{t('普通用户')}</Chip>;
     case 10:
-      return (
-        <Tag color='yellow' shape='circle'>
-          {t('管理员')}
-        </Tag>
-      );
+      return <Chip tone='yellow'>{t('管理员')}</Chip>;
     case 100:
-      return (
-        <Tag color='orange' shape='circle'>
-          {t('超级管理员')}
-        </Tag>
-      );
+      return <Chip tone='orange'>{t('超级管理员')}</Chip>;
     default:
-      return (
-        <Tag color='red' shape='circle'>
-          {t('未知身份')}
-        </Tag>
-      );
+      return <Chip tone='red'>{t('未知身份')}</Chip>;
   }
 };
 
-/**
- * Render username with remark
- */
 const renderUsername = (text, record) => {
   const remark = record.remark;
   if (!remark) {
@@ -75,127 +204,99 @@ const renderUsername = (text, record) => {
   const displayRemark =
     remark.length > maxLen ? remark.slice(0, maxLen) + '…' : remark;
   return (
-    <Space spacing={2}>
+    <div className='flex items-center gap-1.5'>
       <span>{text}</span>
-      <Tooltip content={remark} position='top' showArrow>
-        <Tag color='white' shape='circle' className='!text-xs'>
-          <div className='flex items-center gap-1'>
-            <div
-              className='w-2 h-2 flex-shrink-0 rounded-full'
-              style={{ backgroundColor: '#10b981' }}
-            />
-            {displayRemark}
-          </div>
-        </Tag>
+      <Tooltip content={remark} placement='top'>
+        <span className='inline-flex items-center gap-1 rounded-full border border-border bg-background px-2 py-0.5 text-xs text-foreground'>
+          <span
+            className='h-2 w-2 shrink-0 rounded-full'
+            style={{ backgroundColor: '#10b981' }}
+          />
+          {displayRemark}
+        </span>
       </Tooltip>
-    </Space>
+    </div>
   );
 };
 
-/**
- * Render user statistics
- */
 const renderStatistics = (text, record, showEnableDisableModal, t) => {
   const isDeleted = record.DeletedAt !== null;
 
-  // Determine tag text & color like original status column
-  let tagColor = 'grey';
+  let tone = 'grey';
   let tagText = t('未知状态');
   if (isDeleted) {
-    tagColor = 'red';
+    tone = 'red';
     tagText = t('已注销');
   } else if (record.status === 1) {
-    tagColor = 'green';
+    tone = 'green';
     tagText = t('已启用');
   } else if (record.status === 2) {
-    tagColor = 'red';
+    tone = 'red';
     tagText = t('已禁用');
   }
 
-  const content = (
-    <Tag color={tagColor} shape='circle' size='small'>
-      {tagText}
-    </Tag>
-  );
-
-  const tooltipContent = (
-    <div className='text-xs'>
-      <div>
-        {t('调用次数')}: {renderNumber(record.request_count)}
-      </div>
-    </div>
-  );
-
   return (
-    <Tooltip content={tooltipContent} position='top'>
-      {content}
+    <Tooltip
+      content={
+        <div className='text-xs'>
+          {t('调用次数')}: {renderNumber(record.request_count)}
+        </div>
+      }
+      placement='top'
+    >
+      <span>
+        <Chip tone={tone}>{tagText}</Chip>
+      </span>
     </Tooltip>
   );
 };
 
-// Render separate quota usage column
 const renderQuotaUsage = (text, record, t) => {
-  const { Paragraph } = Typography;
   const used = parseInt(record.used_quota) || 0;
   const remain = parseInt(record.quota) || 0;
   const total = used + remain;
   const percent = total > 0 ? (remain / total) * 100 : 0;
+
   const popoverContent = (
-    <div className='text-xs p-2'>
-      <Paragraph copyable={{ content: renderQuota(used) }}>
+    <div className='space-y-1'>
+      <CopyableLine value={renderQuota(used)}>
         {t('已用额度')}: {renderQuota(used)}
-      </Paragraph>
-      <Paragraph copyable={{ content: renderQuota(remain) }}>
+      </CopyableLine>
+      <CopyableLine value={renderQuota(remain)}>
         {t('剩余额度')}: {renderQuota(remain)} ({percent.toFixed(0)}%)
-      </Paragraph>
-      <Paragraph copyable={{ content: renderQuota(total) }}>
+      </CopyableLine>
+      <CopyableLine value={renderQuota(total)}>
         {t('总额度')}: {renderQuota(total)}
-      </Paragraph>
+      </CopyableLine>
     </div>
   );
-  return (
-    <Popover content={popoverContent} position='top'>
-      <Tag color='white' shape='circle'>
-        <div className='flex flex-col items-end'>
-          <span className='text-xs leading-none'>{`${renderQuota(remain)} / ${renderQuota(total)}`}</span>
-          <Progress
-            percent={percent}
-            aria-label='quota usage'
-            format={() => `${percent.toFixed(0)}%`}
-            style={{ width: '100%', marginTop: '1px', marginBottom: 0 }}
-          />
-        </div>
-      </Tag>
-    </Popover>
-  );
-};
 
-/**
- * Render invite information
- */
-const renderInviteInfo = (text, record, t) => {
   return (
-    <div>
-      <Space spacing={1}>
-        <Tag color='white' shape='circle' className='!text-xs'>
-          {t('邀请')}: {renderNumber(record.aff_count)}
-        </Tag>
-        <Tag color='white' shape='circle' className='!text-xs'>
-          {t('收益')}: {renderQuota(record.aff_history_quota)}
-        </Tag>
-        <Tag color='white' shape='circle' className='!text-xs'>
-          {record.inviter_id === 0
-            ? t('无邀请人')
-            : `${t('邀请人')}: ${record.inviter_id}`}
-        </Tag>
-      </Space>
-    </div>
+    <HoverPanel content={popoverContent} position='top'>
+      <span className='inline-flex flex-col items-stretch gap-1 rounded-full border border-border bg-background px-2 py-1 text-xs text-foreground'>
+        <span className='leading-none tabular-nums'>{`${renderQuota(remain)} / ${renderQuota(total)}`}</span>
+        <ProgressBar percent={percent} />
+      </span>
+    </HoverPanel>
   );
 };
 
-/**
- * Render operations column
- */
+const renderInviteInfo = (text, record, t) => (
+  <div className='flex flex-wrap items-center gap-1'>
+    <Chip tone='white'>
+      {t('邀请')}: {renderNumber(record.aff_count)}
+    </Chip>
+    <Chip tone='white'>
+      {t('收益')}: {renderQuota(record.aff_history_quota)}
+    </Chip>
+    <Chip tone='white'>
+      {record.inviter_id === 0
+        ? t('无邀请人')
+        : `${t('邀请人')}: ${record.inviter_id}`}
+    </Chip>
+  </div>
+);
+
 const renderOperations = (
   text,
   record,
@@ -213,61 +314,55 @@ const renderOperations = (
   },
 ) => {
   if (record.DeletedAt !== null) {
-    return <></>;
+    return null;
   }
 
-  const moreMenu = [
+  const moreItems = [
     {
-      node: 'item',
-      name: t('订阅管理'),
+      label: t('订阅管理'),
       onClick: () => showUserSubscriptionsModal(record),
     },
+    { divider: true },
     {
-      node: 'divider',
-    },
-    {
-      node: 'item',
-      name: t('重置 Passkey'),
+      label: t('重置 Passkey'),
       onClick: () => showResetPasskeyModal(record),
     },
     {
-      node: 'item',
-      name: t('重置 2FA'),
+      label: t('重置 2FA'),
       onClick: () => showResetTwoFAModal(record),
     },
+    { divider: true },
     {
-      node: 'divider',
-    },
-    {
-      node: 'item',
-      name: t('注销'),
-      type: 'danger',
+      label: t('注销'),
+      danger: true,
       onClick: () => showDeleteModal(record),
     },
   ];
 
   return (
-    <Space>
+    <div className='flex flex-wrap items-center gap-1.5'>
       {record.status === 1 ? (
         <Button
-          type='danger'
-          size='small'
-          onClick={() => showEnableDisableModal(record, 'disable')}
+          color='danger'
+          size='sm'
+          variant='flat'
+          onPress={() => showEnableDisableModal(record, 'disable')}
         >
           {t('禁用')}
         </Button>
       ) : (
         <Button
-          size='small'
-          onClick={() => showEnableDisableModal(record, 'enable')}
+          size='sm'
+          variant='flat'
+          onPress={() => showEnableDisableModal(record, 'enable')}
         >
           {t('启用')}
         </Button>
       )}
       <Button
-        type='tertiary'
-        size='small'
-        onClick={() => {
+        variant='light'
+        size='sm'
+        onPress={() => {
           setEditingUser(record);
           setShowEditUser(true);
         }}
@@ -275,29 +370,37 @@ const renderOperations = (
         {t('编辑')}
       </Button>
       <Button
-        type='warning'
-        size='small'
-        onClick={() => showPromoteModal(record)}
+        color='warning'
+        variant='flat'
+        size='sm'
+        onPress={() => showPromoteModal(record)}
       >
         {t('提升')}
       </Button>
       <Button
-        type='secondary'
-        size='small'
-        onClick={() => showDemoteModal(record)}
+        variant='flat'
+        size='sm'
+        onPress={() => showDemoteModal(record)}
       >
         {t('降级')}
       </Button>
-      <Dropdown menu={moreMenu} trigger='click' position='bottomRight'>
-        <Button type='tertiary' size='small' icon={<IconMore />} />
-      </Dropdown>
-    </Space>
+      <ClickMenu
+        items={moreItems}
+        trigger={
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label='more'
+          >
+            <MoreHorizontal size={14} />
+          </Button>
+        }
+      />
+    </div>
   );
 };
 
-/**
- * Get users table column definitions
- */
 export const getUsersColumns = ({
   t,
   setEditingUser,
@@ -323,7 +426,7 @@ export const getUsersColumns = ({
     {
       title: t('状态'),
       dataIndex: 'info',
-      render: (text, record, index) =>
+      render: (text, record) =>
         renderStatistics(text, record, showEnableDisableModal, t),
     },
     {
@@ -334,28 +437,24 @@ export const getUsersColumns = ({
     {
       title: t('分组'),
       dataIndex: 'group',
-      render: (text, record, index) => {
-        return <div>{renderGroup(text)}</div>;
-      },
+      render: (text) => <div>{renderGroup(text)}</div>,
     },
     {
       title: t('角色'),
       dataIndex: 'role',
-      render: (text, record, index) => {
-        return <div>{renderRole(text, t)}</div>;
-      },
+      render: (text) => <div>{renderRole(text, t)}</div>,
     },
     {
       title: t('邀请信息'),
       dataIndex: 'invite',
-      render: (text, record, index) => renderInviteInfo(text, record, t),
+      render: (text, record) => renderInviteInfo(text, record, t),
     },
     {
       title: '',
       dataIndex: 'operate',
       fixed: 'right',
       width: 200,
-      render: (text, record, index) =>
+      render: (text, record) =>
         renderOperations(text, record, {
           setEditingUser,
           setShowEditUser,
diff --git a/web/src/components/table/users/UsersDescription.jsx b/web/src/components/table/users/UsersDescription.jsx
index 646801875b8..3b1a7de198c 100644
--- a/web/src/components/table/users/UsersDescription.jsx
+++ b/web/src/components/table/users/UsersDescription.jsx
@@ -18,19 +18,14 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Typography } from '@douyinfe/semi-ui';
-import { IconUserAdd } from '@douyinfe/semi-icons';
 import CompactModeToggle from '../../common/ui/CompactModeToggle';
 
-const { Text } = Typography;
-
 const UsersDescription = ({ compactMode, setCompactMode, t }) => {
   return (
     <div className='flex flex-col md:flex-row justify-between items-start md:items-center gap-2 w-full'>
-      <div className='flex items-center text-blue-500'>
-        <IconUserAdd className='mr-2' />
-        <Text>{t('用户管理')}</Text>
-      </div>
+      <span className='text-sm font-medium text-foreground'>
+        {t('用户管理')}
+      </span>
       <CompactModeToggle
         compactMode={compactMode}
         setCompactMode={setCompactMode}
diff --git a/web/src/components/table/users/UsersFilters.jsx b/web/src/components/table/users/UsersFilters.jsx
index 7c4c7486b2e..5855d4f4575 100644
--- a/web/src/components/table/users/UsersFilters.jsx
+++ b/web/src/components/table/users/UsersFilters.jsx
@@ -17,9 +17,13 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useRef } from 'react';
-import { Form, Button } from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+import React from 'react';
+import { Button } from '@heroui/react';
+import {
+  FilterInput,
+  FilterSelect,
+  useTableFilterForm,
+} from '../../common/ui/TableFilterForm';
 
 const UsersFilters = ({
   formInitValues,
@@ -33,82 +37,70 @@ const UsersFilters = ({
   searching,
   t,
 }) => {
-  const formApiRef = useRef(null);
+  const { values, setFieldValue, handleSubmit, api } = useTableFilterForm({
+    initValues: formInitValues,
+    setFormApi,
+    onSubmit: () => {
+      searchUsers(1, pageSize);
+    },
+  });
 
   const handleReset = () => {
-    if (!formApiRef.current) return;
-    formApiRef.current.reset();
+    api.reset();
     setTimeout(() => {
       loadUsers(1, pageSize);
     }, 100);
   };
 
   return (
-    <Form
-      initValues={formInitValues}
-      getFormApi={(api) => {
-        setFormApi(api);
-        formApiRef.current = api;
-      }}
-      onSubmit={() => {
-        searchUsers(1, pageSize);
-      }}
-      allowEmpty={true}
+    <form
+      onSubmit={handleSubmit}
       autoComplete='off'
-      layout='horizontal'
-      trigger='change'
-      stopValidateWithError={false}
       className='w-full md:w-auto order-1 md:order-2'
     >
       <div className='flex flex-col md:flex-row items-center gap-2 w-full md:w-auto'>
         <div className='relative w-full md:w-64'>
-          <Form.Input
-            field='searchKeyword'
-            prefix={<IconSearch />}
+          <FilterInput
+            value={values.searchKeyword}
+            onChange={(value) => setFieldValue('searchKeyword', value)}
             placeholder={t('支持搜索用户的 ID、用户名、显示名称和邮箱地址')}
-            showClear
-            pure
-            size='small'
           />
         </div>
         <div className='w-full md:w-48'>
-          <Form.Select
-            field='searchGroup'
-            placeholder={t('选择分组')}
-            optionList={groupOptions}
+          <FilterSelect
+            value={values.searchGroup}
             onChange={(value) => {
-              // Group change triggers automatic search
+              setFieldValue('searchGroup', value);
               setTimeout(() => {
                 searchUsers(1, pageSize);
               }, 100);
             }}
-            className='w-full'
-            showClear
-            pure
-            size='small'
+            placeholder={t('选择分组')}
+            options={groupOptions}
           />
         </div>
         <div className='flex gap-2 w-full md:w-auto'>
           <Button
-            type='tertiary'
-            htmlType='submit'
-            loading={loading || searching}
+            type='submit'
+            variant='outline'
+            isPending={loading || searching}
             className='flex-1 md:flex-initial md:w-auto'
-            size='small'
+            size='sm'
           >
             {t('查询')}
           </Button>
           <Button
-            type='tertiary'
-            onClick={handleReset}
+            type='button'
+            variant='outline'
+            onPress={handleReset}
             className='flex-1 md:flex-initial md:w-auto'
-            size='small'
+            size='sm'
           >
             {t('重置')}
           </Button>
         </div>
       </div>
-    </Form>
+    </form>
   );
 };
 
diff --git a/web/src/components/table/users/UsersTable.jsx b/web/src/components/table/users/UsersTable.jsx
index e0f8a9cec34..0f4a5dc3a35 100644
--- a/web/src/components/table/users/UsersTable.jsx
+++ b/web/src/components/table/users/UsersTable.jsx
@@ -18,12 +18,8 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo, useState } from 'react';
-import { Empty } from '@douyinfe/semi-ui';
 import CardTable from '../../common/ui/CardTable';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import TableEmptyState from '../../common/ui/TableEmptyState';
 import { getUsersColumns } from './UsersColumnDefs';
 import PromoteUserModal from './modals/PromoteUserModal';
 import DemoteUserModal from './modals/DemoteUserModal';
@@ -187,14 +183,7 @@ const UsersTable = (usersData) => {
         loading={loading}
         onRow={handleRow}
         empty={
-          <Empty
-            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-            darkModeImage={
-              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('搜索无结果')}
-            style={{ padding: 30 }}
-          />
+          <TableEmptyState description={t('搜索无结果')} />
         }
         className='overflow-hidden'
         size='middle'
diff --git a/web/src/components/table/users/modals/AddUserModal.jsx b/web/src/components/table/users/modals/AddUserModal.jsx
index 05b3620c8a7..7bec45b1e8b 100644
--- a/web/src/components/table/users/modals/AddUserModal.jsx
+++ b/web/src/components/table/users/modals/AddUserModal.jsx
@@ -17,168 +17,224 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Input } from '@heroui/react';
+import { Save, X, UserPlus } from 'lucide-react';
 import { API, showError, showSuccess } from '../../../../helpers';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
-import {
-  Button,
-  SideSheet,
-  Space,
-  Spin,
-  Typography,
-  Card,
-  Tag,
-  Avatar,
-  Form,
-  Row,
-  Col,
-} from '@douyinfe/semi-ui';
-import { IconSave, IconClose, IconUserAdd } from '@douyinfe/semi-icons';
 import { useTranslation } from 'react-i18next';
 
-const { Text, Title } = Typography;
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
 
 const AddUserModal = (props) => {
   const { t } = useTranslation();
-  const formApiRef = useRef(null);
-  const [loading, setLoading] = useState(false);
   const isMobile = useIsMobile();
-
-  const getInitValues = () => ({
+  const [loading, setLoading] = useState(false);
+  const [values, setValues] = useState({
     username: '',
     display_name: '',
     password: '',
     remark: '',
   });
+  const [errors, setErrors] = useState({});
 
-  const submit = async (values) => {
-    setLoading(true);
-    const res = await API.post(`/api/user/`, values);
-    const { success, message } = res.data;
-    if (success) {
-      showSuccess(t('用户账户创建成功！'));
-      formApiRef.current?.setValues(getInitValues());
-      props.refresh();
-      props.handleClose();
-    } else {
-      showError(message);
-    }
-    setLoading(false);
+  const setField = (key) => (value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
+
+  const reset = () => {
+    setValues({ username: '', display_name: '', password: '', remark: '' });
+    setErrors({});
+  };
+
+  useEffect(() => {
+    if (!props.visible) reset();
+  }, [props.visible]);
+
+  useEffect(() => {
+    if (!props.visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') props.handleClose?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [props.visible, props.handleClose]);
+
+  const validate = () => {
+    const next = {};
+    if (!values.username.trim()) next.username = t('请输入用户名');
+    if (!values.password.trim()) next.password = t('请输入密码');
+    setErrors(next);
+    return Object.keys(next).length === 0;
   };
 
-  const handleCancel = () => {
-    props.handleClose();
+  const submit = async () => {
+    if (!validate()) return;
+    setLoading(true);
+    try {
+      const res = await API.post('/api/user/', values);
+      const { success, message } = res.data || {};
+      if (success) {
+        showSuccess(t('用户账户创建成功！'));
+        reset();
+        props.refresh?.();
+        props.handleClose?.();
+      } else {
+        showError(message);
+      }
+    } catch (err) {
+      showError(err.response?.data?.message || t('创建失败'));
+    } finally {
+      setLoading(false);
+    }
   };
 
   return (
     <>
-      <SideSheet
-        placement={'left'}
-        title={
-          <Space>
-            <Tag color='green' shape='circle'>
+      <div
+        aria-hidden={!props.visible}
+        onClick={props.handleClose}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          props.visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!props.visible}
+        style={{ width: isMobile ? '100%' : 600 }}
+        className={`fixed bottom-0 left-0 top-0 z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          props.visible ? 'translate-x-0' : '-translate-x-full'
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-[color:var(--app-border)] px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <span className='inline-flex items-center rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-semibold text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'>
               {t('新建')}
-            </Tag>
-            <Title heading={4} className='m-0'>
+            </span>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
               {t('添加用户')}
-            </Title>
-          </Space>
-        }
-        bodyStyle={{ padding: '0' }}
-        visible={props.visible}
-        width={isMobile ? '100%' : 600}
-        footer={
-          <div className='flex justify-end bg-white'>
-            <Space>
-              <Button
-                theme='solid'
-                onClick={() => formApiRef.current?.submitForm()}
-                icon={<IconSave />}
-                loading={loading}
-              >
-                {t('提交')}
-              </Button>
-              <Button
-                theme='light'
-                type='primary'
-                onClick={handleCancel}
-                icon={<IconClose />}
-              >
-                {t('取消')}
-              </Button>
-            </Space>
+            </h4>
           </div>
-        }
-        closeIcon={null}
-        onCancel={() => handleCancel()}
-      >
-        <Spin spinning={loading}>
-          <Form
-            initValues={getInitValues()}
-            getFormApi={(api) => (formApiRef.current = api)}
-            onSubmit={submit}
-            onSubmitFail={(errs) => {
-              const first = Object.values(errs)[0];
-              if (first) showError(Array.isArray(first) ? first[0] : first);
-              formApiRef.current?.scrollToError();
-            }}
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={props.handleClose}
           >
-            <div className='p-2'>
-              <Card className='!rounded-2xl shadow-sm border-0'>
-                <div className='flex items-center mb-2'>
-                  <Avatar size='small' color='blue' className='mr-2 shadow-md'>
-                    <IconUserAdd size={16} />
-                  </Avatar>
-                  <div>
-                    <Text className='text-lg font-medium'>{t('用户信息')}</Text>
-                    <div className='text-xs text-gray-600'>
-                      {t('创建新用户账户')}
-                    </div>
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='flex-1 overflow-y-auto p-3'>
+          <Card className='!rounded-2xl border-0 shadow-sm'>
+            <Card.Content className='space-y-4 p-5'>
+              <div className='flex items-center gap-2'>
+                <div className='flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-sky-100 text-sky-600 dark:bg-sky-950/40 dark:text-sky-300'>
+                  <UserPlus size={16} />
+                </div>
+                <div>
+                  <div className='text-base font-semibold text-foreground'>
+                    {t('用户信息')}
+                  </div>
+                  <div className='text-xs text-muted'>
+                    {t('创建新用户账户')}
+                  </div>
+                </div>
+              </div>
+
+              <div className='space-y-3'>
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('用户名')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='text'
+                    value={values.username}
+                    onChange={(event) => setField('username')(event.target.value)}
+                    placeholder={t('请输入用户名')}
+                    aria-label={t('用户名')}
+                    className={inputClass}
+                  />
+                  {errors.username ? (
+                    <div className='text-xs text-red-600'>{errors.username}</div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('显示名称')}
                   </div>
+                  <Input
+                    type='text'
+                    value={values.display_name}
+                    onChange={(event) =>
+                      setField('display_name')(event.target.value)
+                    }
+                    placeholder={t('请输入显示名称')}
+                    aria-label={t('显示名称')}
+                    className={inputClass}
+                  />
                 </div>
 
-                <Row gutter={12}>
-                  <Col span={24}>
-                    <Form.Input
-                      field='username'
-                      label={t('用户名')}
-                      placeholder={t('请输入用户名')}
-                      rules={[{ required: true, message: t('请输入用户名') }]}
-                      showClear
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Form.Input
-                      field='display_name'
-                      label={t('显示名称')}
-                      placeholder={t('请输入显示名称')}
-                      showClear
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Form.Input
-                      field='password'
-                      label={t('密码')}
-                      type='password'
-                      placeholder={t('请输入密码')}
-                      rules={[{ required: true, message: t('请输入密码') }]}
-                      showClear
-                    />
-                  </Col>
-                  <Col span={24}>
-                    <Form.Input
-                      field='remark'
-                      label={t('备注')}
-                      placeholder={t('请输入备注（仅管理员可见）')}
-                      showClear
-                    />
-                  </Col>
-                </Row>
-              </Card>
-            </div>
-          </Form>
-        </Spin>
-      </SideSheet>
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('密码')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='password'
+                    value={values.password}
+                    onChange={(event) => setField('password')(event.target.value)}
+                    placeholder={t('请输入密码')}
+                    aria-label={t('密码')}
+                    className={inputClass}
+                  />
+                  {errors.password ? (
+                    <div className='text-xs text-red-600'>{errors.password}</div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('备注')}
+                  </div>
+                  <Input
+                    type='text'
+                    value={values.remark}
+                    onChange={(event) => setField('remark')(event.target.value)}
+                    placeholder={t('请输入备注（仅管理员可见）')}
+                    aria-label={t('备注')}
+                    className={inputClass}
+                  />
+                </div>
+              </div>
+            </Card.Content>
+          </Card>
+        </div>
+
+        <footer className='flex justify-end gap-2 border-t border-[color:var(--app-border)] bg-[color:var(--app-background)] px-5 py-3'>
+          <Button
+            variant='light'
+            onPress={props.handleClose}
+            startContent={<X size={14} />}
+          >
+            {t('取消')}
+          </Button>
+          <Button
+            color='primary'
+            onPress={submit}
+            isPending={loading}
+            startContent={<Save size={14} />}
+          >
+            {t('提交')}
+          </Button>
+        </footer>
+      </aside>
     </>
   );
 };
diff --git a/web/src/components/table/users/modals/DeleteUserModal.jsx b/web/src/components/table/users/modals/DeleteUserModal.jsx
index 6e7a9099450..bc253d487f6 100644
--- a/web/src/components/table/users/modals/DeleteUserModal.jsx
+++ b/web/src/components/table/users/modals/DeleteUserModal.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const DeleteUserModal = ({
   visible,
@@ -43,15 +43,17 @@ const DeleteUserModal = ({
   };
 
   return (
-    <Modal
+    <ConfirmDialog
       title={t('确定是否要注销此用户？')}
       visible={visible}
       onCancel={onCancel}
-      onOk={handleConfirm}
-      type='danger'
+      onConfirm={handleConfirm}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
+      danger
     >
       {t('相当于删除用户，此修改将不可逆')}
-    </Modal>
+    </ConfirmDialog>
   );
 };
 
diff --git a/web/src/components/table/users/modals/DemoteUserModal.jsx b/web/src/components/table/users/modals/DemoteUserModal.jsx
index 4168ca7c8b2..4a1ab26d9c0 100644
--- a/web/src/components/table/users/modals/DemoteUserModal.jsx
+++ b/web/src/components/table/users/modals/DemoteUserModal.jsx
@@ -18,19 +18,20 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const DemoteUserModal = ({ visible, onCancel, onConfirm, user, t }) => {
   return (
-    <Modal
+    <ConfirmDialog
       title={t('确定要降级此用户吗？')}
       visible={visible}
       onCancel={onCancel}
-      onOk={onConfirm}
-      type='warning'
+      onConfirm={onConfirm}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
     >
       {t('此操作将降低用户的权限级别')}
-    </Modal>
+    </ConfirmDialog>
   );
 };
 
diff --git a/web/src/components/table/users/modals/EditUserModal.jsx b/web/src/components/table/users/modals/EditUserModal.jsx
index 94ccc0a0ce5..6ff50933801 100644
--- a/web/src/components/table/users/modals/EditUserModal.jsx
+++ b/web/src/components/table/users/modals/EditUserModal.jsx
@@ -6,19 +6,35 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  Card,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
+import {
+  Edit3,
+  Link as LinkIcon,
+  Save,
+  User,
+  Users,
+  X,
+} from 'lucide-react';
 import {
   API,
   showError,
@@ -31,75 +47,125 @@ import {
   displayAmountToQuota,
 } from '../../../../helpers/quota';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
-import {
-  Button,
-  Modal,
-  SideSheet,
-  Space,
-  Spin,
-  Typography,
-  Card,
-  Tag,
-  Form,
-  Avatar,
-  Row,
-  Col,
-  InputNumber,
-  RadioGroup,
-  Radio,
-} from '@douyinfe/semi-ui';
-import {
-  IconUser,
-  IconSave,
-  IconClose,
-  IconLink,
-  IconUserGroup,
-  IconEdit,
-} from '@douyinfe/semi-icons';
 import UserBindingManagementModal from './UserBindingManagementModal';
 
-const { Text, Title } = Typography;
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  blue: 'bg-primary/15 text-primary',
+};
+
+function StatusChip({ tone, children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.blue
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function IconTile({ tone, children }) {
+  const cls =
+    {
+      blue: 'bg-primary/10 text-primary',
+      green: 'bg-success/10 text-success',
+      purple:
+        'bg-[color-mix(in_oklab,var(--app-primary)_8%,transparent)] text-[color-mix(in_oklab,var(--app-primary)_82%,var(--app-foreground))]',
+    }[tone] || 'bg-primary/10 text-primary';
+  return (
+    <div
+      className={`flex h-8 w-8 shrink-0 items-center justify-center rounded-full ${cls}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function FieldError({ children }) {
+  if (!children) return null;
+  return <div className='mt-1 text-xs text-danger'>{children}</div>;
+}
+
+const INIT_VALUES = {
+  username: '',
+  display_name: '',
+  password: '',
+  github_id: '',
+  oidc_id: '',
+  discord_id: '',
+  wechat_id: '',
+  telegram_id: '',
+  linux_do_id: '',
+  email: '',
+  quota: 0,
+  quota_amount: 0,
+  group: 'default',
+  remark: '',
+};
 
 const EditUserModal = (props) => {
   const { t } = useTranslation();
-  const userId = props.editingUser.id;
+  const userId = props.editingUser?.id;
+  const isEdit = Boolean(userId);
+  const isMobile = useIsMobile();
+
   const [loading, setLoading] = useState(true);
+  const [values, setValues] = useState(INIT_VALUES);
+  const [errors, setErrors] = useState({});
+  const [groupOptions, setGroupOptions] = useState([]);
+  const [bindingModalVisible, setBindingModalVisible] = useState(false);
+
+  // Quota-adjust modal state
   const [adjustModalOpen, setAdjustModalOpen] = useState(false);
   const [adjustQuotaLocal, setAdjustQuotaLocal] = useState('');
   const [adjustAmountLocal, setAdjustAmountLocal] = useState('');
   const [adjustMode, setAdjustMode] = useState('add');
   const [adjustLoading, setAdjustLoading] = useState(false);
-  const isMobile = useIsMobile();
-  const [groupOptions, setGroupOptions] = useState([]);
-  const [bindingModalVisible, setBindingModalVisible] = useState(false);
-  const formApiRef = useRef(null);
   const [showAdjustQuotaRaw, setShowAdjustQuotaRaw] = useState(false);
   const [showQuotaInput, setShowQuotaInput] = useState(false);
-  const [inputs, setInputs] = useState(null);
 
-  const isEdit = Boolean(userId);
-
-  const getInitValues = () => ({
-    username: '',
-    display_name: '',
-    password: '',
-    github_id: '',
-    oidc_id: '',
-    discord_id: '',
-    wechat_id: '',
-    telegram_id: '',
-    linux_do_id: '',
-    email: '',
-    quota: 0,
-    quota_amount: 0,
-    group: 'default',
-    remark: '',
+  const adjustModalState = useOverlayState({
+    isOpen: adjustModalOpen,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) {
+        setAdjustModalOpen(false);
+        setAdjustQuotaLocal('');
+        setAdjustAmountLocal('');
+        setAdjustMode('add');
+      }
+    },
   });
 
+  const setField = (key) => (value) => {
+    setValues((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
+
   const fetchGroups = async () => {
     try {
-      let res = await API.get(`/api/group/`);
-      setGroupOptions(res.data.data.map((g) => ({ label: g, value: g })));
+      const res = await API.get(`/api/group/`);
+      setGroupOptions(
+        (res.data?.data || []).map((g) => ({ label: g, value: g })),
+      );
     } catch (e) {
       showError(e.message);
     }
@@ -111,43 +177,50 @@ const EditUserModal = (props) => {
     setLoading(true);
     const url = userId ? `/api/user/${userId}` : `/api/user/self`;
     const res = await API.get(url);
-    const { success, message, data } = res.data;
-    if (success) {
+    const { success, message, data } = res.data || {};
+    if (success && data) {
       data.password = '';
       data.quota_amount = Number(
         quotaToDisplayAmount(data.quota || 0).toFixed(6),
       );
-      setInputs({ ...getInitValues(), ...data });
+      setValues({ ...INIT_VALUES, ...data });
+      setErrors({});
     } else {
       showError(message);
     }
     setLoading(false);
   };
 
-  useEffect(() => {
-    if (inputs && formApiRef.current) {
-      formApiRef.current.setValues(inputs);
-    }
-  }, [inputs]);
-
   useEffect(() => {
     loadUser();
     if (userId) fetchGroups();
     setBindingModalVisible(false);
-  }, [props.editingUser.id]);
-
-  const openBindingModal = () => {
-    setBindingModalVisible(true);
-  };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.editingUser?.id]);
 
-  const closeBindingModal = () => {
-    setBindingModalVisible(false);
+  // ESC-to-close
+  useEffect(() => {
+    if (!props.visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape' && !adjustModalOpen) handleCancel();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.visible, adjustModalOpen]);
+
+  const validate = () => {
+    const next = {};
+    if (!values.username?.trim()) next.username = t('请输入用户名');
+    if (isEdit && !values.group) next.group = t('请选择分组');
+    setErrors(next);
+    return Object.keys(next).length === 0;
   };
 
-  /* ----------------------- submit ----------------------- */
-  const submit = async (values) => {
+  const submit = async () => {
+    if (!validate()) return;
     setLoading(true);
-    let payload = { ...values };
+    const payload = { ...values };
     delete payload.quota;
     delete payload.quota_amount;
     if (userId) {
@@ -155,10 +228,10 @@ const EditUserModal = (props) => {
     }
     const url = userId ? `/api/user/` : `/api/user/self`;
     const res = await API.put(url, payload);
-    const { success, message } = res.data;
+    const { success, message } = res.data || {};
     if (success) {
       showSuccess(t('用户信息更新成功！'));
-      props.refresh();
+      props.refresh?.();
       props.handleClose();
     } else {
       showError(message);
@@ -166,11 +239,15 @@ const EditUserModal = (props) => {
     setLoading(false);
   };
 
-  /* --------------------- atomic quota adjust -------------------- */
   const adjustQuota = async () => {
     const quotaVal = parseInt(adjustQuotaLocal) || 0;
     if (quotaVal <= 0 && adjustMode !== 'override') return;
-    if (adjustMode === 'override' && (adjustQuotaLocal === '' || adjustQuotaLocal == null)) return;
+    if (
+      adjustMode === 'override' &&
+      (adjustQuotaLocal === '' || adjustQuotaLocal == null)
+    ) {
+      return;
+    }
     setAdjustLoading(true);
     try {
       const res = await API.post('/api/user/manage', {
@@ -179,7 +256,7 @@ const EditUserModal = (props) => {
         mode: adjustMode,
         value: adjustMode === 'override' ? quotaVal : Math.abs(quotaVal),
       });
-      const { success, message } = res.data;
+      const { success, message } = res.data || {};
       if (success) {
         showSuccess(t('调整额度成功'));
         setAdjustModalOpen(false);
@@ -192,9 +269,9 @@ const EditUserModal = (props) => {
           data.quota_amount = Number(
             quotaToDisplayAmount(data.quota || 0).toFixed(6),
           );
-          setInputs({ ...getInitValues(), ...data });
+          setValues({ ...INIT_VALUES, ...data });
         }
-        props.refresh();
+        props.refresh?.();
       } else {
         showError(message);
       }
@@ -205,7 +282,7 @@ const EditUserModal = (props) => {
   };
 
   const getPreviewText = () => {
-    const current = formApiRef.current?.getValue('quota') || 0;
+    const current = values.quota || 0;
     const val = parseInt(adjustQuotaLocal) || 0;
     let result;
     switch (adjustMode) {
@@ -222,347 +299,423 @@ const EditUserModal = (props) => {
     }
   };
 
-  /* --------------------------- UI --------------------------- */
+  const ADJUST_MODES = [
+    { value: 'add', label: t('添加') },
+    { value: 'subtract', label: t('减少') },
+    { value: 'override', label: t('覆盖') },
+  ];
+
   return (
     <>
-      <SideSheet
-        placement='right'
-        title={
-          <Space>
-            <Tag color='blue' shape='circle'>
+      <div
+        aria-hidden={!props.visible}
+        onClick={handleCancel}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          props.visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!props.visible}
+        style={{ width: isMobile ? '100%' : 600 }}
+        className={`fixed bottom-0 right-0 top-0 z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          props.visible ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-border px-5 py-3'>
+          <div className='flex items-center gap-2'>
+            <StatusChip tone='blue'>
               {t(isEdit ? '编辑' : '新建')}
-            </Tag>
-            <Title heading={4} className='m-0'>
+            </StatusChip>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
               {isEdit ? t('编辑用户') : t('创建用户')}
-            </Title>
-          </Space>
-        }
-        bodyStyle={{ padding: 0 }}
-        visible={props.visible}
-        width={isMobile ? '100%' : 600}
-        footer={
-          <div className='flex justify-end bg-white'>
-            <Space>
-              <Button
-                theme='solid'
-                onClick={() => formApiRef.current?.submitForm()}
-                icon={<IconSave />}
-                loading={loading}
-              >
-                {t('提交')}
-              </Button>
-              <Button
-                theme='light'
-                type='primary'
-                onClick={handleCancel}
-                icon={<IconClose />}
-              >
-                {t('取消')}
-              </Button>
-            </Space>
+            </h4>
           </div>
-        }
-        closeIcon={null}
-        onCancel={handleCancel}
-      >
-        <Spin spinning={loading}>
-          <Form
-            initValues={getInitValues()}
-            getFormApi={(api) => (formApiRef.current = api)}
-            onSubmit={submit}
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={handleCancel}
           >
-            {({ values }) => (
-              <div className='p-2 space-y-3'>
-                {/* 基本信息 */}
-                <Card className='!rounded-2xl shadow-sm border-0'>
-                  <div className='flex items-center mb-2'>
-                    <Avatar
-                      size='small'
-                      color='blue'
-                      className='mr-2 shadow-md'
-                    >
-                      <IconUser size={16} />
-                    </Avatar>
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='relative flex-1 overflow-y-auto p-3'>
+          {loading && (
+            <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+              <Spinner color='primary' />
+            </div>
+          )}
+
+          <div className='space-y-3'>
+            {/* 基本信息 */}
+            <Card className='!rounded-2xl border-0 shadow-sm'>
+              <Card.Content className='space-y-4 p-5'>
+                <div className='flex items-center gap-2'>
+                  <IconTile tone='blue'>
+                    <User size={16} />
+                  </IconTile>
+                  <div>
+                    <div className='text-base font-semibold text-foreground'>
+                      {t('基本信息')}
+                    </div>
+                    <div className='text-xs text-muted'>
+                      {t('用户的基本账户信息')}
+                    </div>
+                  </div>
+                </div>
+
+                <div className='space-y-3'>
+                  <div className='space-y-2'>
+                    <FieldLabel required>{t('用户名')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={values.username || ''}
+                      onChange={(event) =>
+                        setField('username')(event.target.value)
+                      }
+                      placeholder={t('请输入新的用户名')}
+                      className={inputClass}
+                    />
+                    <FieldError>{errors.username}</FieldError>
+                  </div>
+
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('密码')}</FieldLabel>
+                    <input
+                      type='password'
+                      value={values.password || ''}
+                      onChange={(event) =>
+                        setField('password')(event.target.value)
+                      }
+                      placeholder={t('请输入新的密码，最短 8 位')}
+                      className={inputClass}
+                    />
+                  </div>
+
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('显示名称')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={values.display_name || ''}
+                      onChange={(event) =>
+                        setField('display_name')(event.target.value)
+                      }
+                      placeholder={t('请输入新的显示名称')}
+                      className={inputClass}
+                    />
+                  </div>
+
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('备注')}</FieldLabel>
+                    <input
+                      type='text'
+                      value={values.remark || ''}
+                      onChange={(event) =>
+                        setField('remark')(event.target.value)
+                      }
+                      placeholder={t('请输入备注（仅管理员可见）')}
+                      className={inputClass}
+                    />
+                  </div>
+                </div>
+              </Card.Content>
+            </Card>
+
+            {/* 权限设置 */}
+            {userId && (
+              <Card className='!rounded-2xl border-0 shadow-sm'>
+                <Card.Content className='space-y-4 p-5'>
+                  <div className='flex items-center gap-2'>
+                    <IconTile tone='green'>
+                      <Users size={16} />
+                    </IconTile>
                     <div>
-                      <Text className='text-lg font-medium'>
-                        {t('基本信息')}
-                      </Text>
-                      <div className='text-xs text-gray-600'>
-                        {t('用户的基本账户信息')}
+                      <div className='text-base font-semibold text-foreground'>
+                        {t('权限设置')}
+                      </div>
+                      <div className='text-xs text-muted'>
+                        {t('用户分组和额度管理')}
                       </div>
                     </div>
                   </div>
 
-                  <Row gutter={12}>
-                    <Col span={24}>
-                      <Form.Input
-                        field='username'
-                        label={t('用户名')}
-                        placeholder={t('请输入新的用户名')}
-                        rules={[{ required: true, message: t('请输入用户名') }]}
-                        showClear
-                      />
-                    </Col>
-
-                    <Col span={24}>
-                      <Form.Input
-                        field='password'
-                        label={t('密码')}
-                        placeholder={t('请输入新的密码，最短 8 位')}
-                        mode='password'
-                        showClear
-                      />
-                    </Col>
-
-                    <Col span={24}>
-                      <Form.Input
-                        field='display_name'
-                        label={t('显示名称')}
-                        placeholder={t('请输入新的显示名称')}
-                        showClear
-                      />
-                    </Col>
-
-                    <Col span={24}>
-                      <Form.Input
-                        field='remark'
-                        label={t('备注')}
-                        placeholder={t('请输入备注（仅管理员可见）')}
-                        showClear
-                      />
-                    </Col>
-                  </Row>
-                </Card>
-
-                {/* 权限设置 */}
-                {userId && (
-                  <Card className='!rounded-2xl shadow-sm border-0'>
-                    <div className='flex items-center mb-2'>
-                      <Avatar
-                        size='small'
-                        color='green'
-                        className='mr-2 shadow-md'
+                  <div className='space-y-3'>
+                    <div className='space-y-2'>
+                      <FieldLabel required>{t('分组')}</FieldLabel>
+                      <select
+                        value={values.group || ''}
+                        onChange={(event) =>
+                          setField('group')(event.target.value)
+                        }
+                        className={inputClass}
                       >
-                        <IconUserGroup size={16} />
-                      </Avatar>
-                      <div>
-                        <Text className='text-lg font-medium'>
-                          {t('权限设置')}
-                        </Text>
-                        <div className='text-xs text-gray-600'>
-                          {t('用户分组和额度管理')}
+                        <option value=''>{t('请选择分组')}</option>
+                        {groupOptions.map((g) => (
+                          <option key={g.value} value={g.value}>
+                            {g.label}
+                          </option>
+                        ))}
+                      </select>
+                      <FieldError>{errors.group}</FieldError>
+                    </div>
+
+                    <div className='grid grid-cols-1 gap-3 sm:grid-cols-12'>
+                      <div className='space-y-2 sm:col-span-5'>
+                        <FieldLabel>{t('金额')}</FieldLabel>
+                        <div className='relative'>
+                          <span className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted'>
+                            {getCurrencyConfig().symbol}
+                          </span>
+                          <input
+                            type='number'
+                            value={values.quota_amount ?? 0}
+                            readOnly
+                            className={`${inputClass} pl-8 cursor-not-allowed`}
+                          />
                         </div>
                       </div>
+                      <div className='space-y-2 sm:col-span-7'>
+                        <FieldLabel>{t('调整额度')}</FieldLabel>
+                        <Button
+                          variant='flat'
+                          startContent={<Edit3 size={14} />}
+                          onPress={() => setAdjustModalOpen(true)}
+                        >
+                          {t('调整额度')}
+                        </Button>
+                      </div>
                     </div>
 
-                    <Row gutter={12}>
-                      <Col span={24}>
-                        <Form.Select
-                          field='group'
-                          label={t('分组')}
-                          placeholder={t('请选择分组')}
-                          optionList={groupOptions}
-                          allowAdditions
-                          search
-                          rules={[{ required: true, message: t('请选择分组') }]}
-                        />
-                      </Col>
-
-                      <Col span={10}>
-                        <Form.InputNumber
-                          field='quota_amount'
-                          label={t('金额')}
-                          prefix={getCurrencyConfig().symbol}
-                          precision={6}
-                          step={0.000001}
-                          style={{ width: '100%' }}
-                          readonly
-                        />
-                      </Col>
-
-                      <Col span={14}>
-                        <Form.Slot label={t('调整额度')}>
-                          <Button
-                            icon={<IconEdit />}
-                            onClick={() => setAdjustModalOpen(true)}
-                          >
-                            {t('调整额度')}
-                          </Button>
-                        </Form.Slot>
-                      </Col>
-
-                      <Col span={24}>
-                        <div
-                          className='text-xs cursor-pointer'
-                          style={{ color: 'var(--semi-color-text-2)' }}
-                          onClick={() => setShowQuotaInput((v) => !v)}
-                        >
-                          {showQuotaInput
-                            ? `▾ ${t('收起原生额度输入')}`
-                            : `▸ ${t('使用原生额度输入')}`}
-                        </div>
-                        <div style={{ display: showQuotaInput ? 'block' : 'none' }} className='mt-2'>
-                          <Form.InputNumber
-                            field='quota'
-                            label={t('额度')}
+                    <div>
+                      <button
+                        type='button'
+                        className='cursor-pointer text-xs text-muted hover:text-foreground'
+                        onClick={() => setShowQuotaInput((v) => !v)}
+                      >
+                        {showQuotaInput
+                          ? `▾ ${t('收起原生额度输入')}`
+                          : `▸ ${t('使用原生额度输入')}`}
+                      </button>
+                      {showQuotaInput && (
+                        <div className='mt-2 space-y-2'>
+                          <FieldLabel>{t('额度')}</FieldLabel>
+                          <input
+                            type='number'
+                            value={values.quota ?? 0}
+                            readOnly
                             placeholder={t('请输入额度')}
-                            style={{ width: '100%' }}
-                            readonly
+                            className={`${inputClass} cursor-not-allowed`}
                           />
                         </div>
-                      </Col>
-                    </Row>
-                  </Card>
-                )}
-
-                {/* 绑定信息入口 */}
-                {userId && (
-                  <Card className='!rounded-2xl shadow-sm border-0'>
-                    <div className='flex items-center justify-between gap-3'>
-                      <div className='flex items-center min-w-0'>
-                        <Avatar
-                          size='small'
-                          color='purple'
-                          className='mr-2 shadow-md'
-                        >
-                          <IconLink size={16} />
-                        </Avatar>
-                        <div className='min-w-0'>
-                          <Text className='text-lg font-medium'>
-                            {t('绑定信息')}
-                          </Text>
-                          <div className='text-xs text-gray-600'>
-                            {t('管理用户已绑定的第三方账户，支持筛选与解绑')}
-                          </div>
+                      )}
+                    </div>
+                  </div>
+                </Card.Content>
+              </Card>
+            )}
+
+            {/* 绑定信息入口 */}
+            {userId && (
+              <Card className='!rounded-2xl border-0 shadow-sm'>
+                <Card.Content className='p-5'>
+                  <div className='flex items-center justify-between gap-3'>
+                    <div className='flex items-center gap-2 min-w-0'>
+                      <IconTile tone='purple'>
+                        <LinkIcon size={16} />
+                      </IconTile>
+                      <div className='min-w-0'>
+                        <div className='text-base font-semibold text-foreground'>
+                          {t('绑定信息')}
+                        </div>
+                        <div className='text-xs text-muted'>
+                          {t(
+                            '管理用户已绑定的第三方账户，支持筛选与解绑',
+                          )}
                         </div>
                       </div>
-                      <Button
-                        type='primary'
-                        theme='outline'
-                        onClick={openBindingModal}
-                      >
-                        {t('管理绑定')}
-                      </Button>
                     </div>
-                  </Card>
-                )}
-              </div>
+                    <Button
+                      variant='bordered'
+                      color='primary'
+                      onPress={() => setBindingModalVisible(true)}
+                    >
+                      {t('管理绑定')}
+                    </Button>
+                  </div>
+                </Card.Content>
+              </Card>
             )}
-          </Form>
-        </Spin>
-      </SideSheet>
+          </div>
+        </div>
+
+        <footer className='flex justify-end gap-2 border-t border-border bg-background px-5 py-3'>
+          <Button
+            variant='light'
+            startContent={<X size={14} />}
+            onPress={handleCancel}
+          >
+            {t('取消')}
+          </Button>
+          <Button
+            color='primary'
+            isPending={loading}
+            startContent={<Save size={14} />}
+            onPress={submit}
+          >
+            {t('提交')}
+          </Button>
+        </footer>
+      </aside>
 
       <UserBindingManagementModal
         visible={bindingModalVisible}
-        onCancel={closeBindingModal}
+        onCancel={() => setBindingModalVisible(false)}
         userId={userId}
         isMobile={isMobile}
-        formApiRef={formApiRef}
+        // formApiRef is no longer used; kept for backward compat with the
+        // child modal's prop signature.
       />
 
       {/* 调整额度模态框 */}
-      <Modal
-        centered
-        visible={adjustModalOpen}
-        onOk={adjustQuota}
-        onCancel={() => {
-          setAdjustModalOpen(false);
-          setAdjustQuotaLocal('');
-          setAdjustAmountLocal('');
-          setAdjustMode('add');
-        }}
-        confirmLoading={adjustLoading}
-        closable={null}
-        title={
-          <div className='flex items-center'>
-            <IconEdit className='mr-2' />
-            {t('调整额度')}
-          </div>
-        }
-      >
-        <div className='mb-4'>
-          <Text type='secondary' className='block mb-2'>
-            {getPreviewText()}
-          </Text>
-        </div>
-        <div className='mb-3'>
-          <div className='mb-1'>
-            <Text size='small'>{t('操作')}</Text>
-          </div>
-          <RadioGroup
-            type='button'
-            value={adjustMode}
-            onChange={(e) => {
-              setAdjustMode(e.target.value);
-              setAdjustQuotaLocal('');
-              setAdjustAmountLocal('');
-            }}
-            style={{ width: '100%' }}
-          >
-            <Radio value='add'>{t('添加')}</Radio>
-            <Radio value='subtract'>{t('减少')}</Radio>
-            <Radio value='override'>{t('覆盖')}</Radio>
-          </RadioGroup>
-        </div>
-        <div className='mb-3'>
-          <div className='mb-1'>
-            <Text size='small'>{t('金额')}</Text>
-          </div>
-          <InputNumber
-            prefix={getCurrencyConfig().symbol}
-            placeholder={t('输入金额')}
-            value={adjustAmountLocal}
-            precision={6}
-            min={adjustMode === 'override' ? undefined : 0}
-            step={0.000001}
-            onChange={(val) => {
-              const amount = val === '' || val == null ? '' : val;
-              setAdjustAmountLocal(amount);
-              setAdjustQuotaLocal(
-                amount === ''
-                  ? ''
-                  : adjustMode === 'override'
-                    ? displayAmountToQuota(amount)
-                    : displayAmountToQuota(Math.abs(amount)),
-              );
-            }}
-            style={{ width: '100%' }}
-            showClear
-          />
-        </div>
-        <div
-          className='text-xs cursor-pointer mt-2'
-          style={{ color: 'var(--semi-color-text-2)' }}
-          onClick={() => setShowAdjustQuotaRaw((v) => !v)}
-        >
-          {showAdjustQuotaRaw
-            ? `▾ ${t('收起原生额度输入')}`
-            : `▸ ${t('使用原生额度输入')}`}
-        </div>
-        <div style={{ display: showAdjustQuotaRaw ? 'block' : 'none' }} className='mt-2'>
-          <div className='mb-1'>
-            <Text size='small'>{t('额度')}</Text>
-          </div>
-          <InputNumber
-            placeholder={t('输入额度')}
-            value={adjustQuotaLocal}
-            min={adjustMode === 'override' ? undefined : 0}
-            onChange={(val) => {
-              const quota = val === '' || val == null ? '' : val;
-              setAdjustQuotaLocal(quota);
-              setAdjustAmountLocal(
-                quota === ''
-                  ? ''
-                  : adjustMode === 'override'
-                    ? Number(quotaToDisplayAmount(quota).toFixed(6))
-                    : Number(quotaToDisplayAmount(Math.abs(quota)).toFixed(6)),
-              );
-            }}
-            style={{ width: '100%' }}
-            showClear
-            step={500000}
-          />
-        </div>
+      <Modal state={adjustModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='md' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <div className='flex items-center gap-2'>
+                  <Edit3 size={16} className='text-primary' />
+                  <span>{t('调整额度')}</span>
+                </div>
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='text-sm text-muted'>{getPreviewText()}</div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('操作')}</FieldLabel>
+                  <div className='inline-flex w-full overflow-hidden rounded-xl border border-border'>
+                    {ADJUST_MODES.map((mode) => {
+                      const active = mode.value === adjustMode;
+                      return (
+                        <button
+                          key={mode.value}
+                          type='button'
+                          onClick={() => {
+                            setAdjustMode(mode.value);
+                            setAdjustQuotaLocal('');
+                            setAdjustAmountLocal('');
+                          }}
+                          className={`flex-1 px-3 py-2 text-sm font-medium transition-colors ${
+                            active
+                              ? 'bg-foreground text-background'
+                              : 'bg-background text-muted hover:bg-surface-secondary'
+                          }`}
+                        >
+                          {mode.label}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('金额')}</FieldLabel>
+                  <div className='relative'>
+                    <span className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-muted'>
+                      {getCurrencyConfig().symbol}
+                    </span>
+                    <input
+                      type='number'
+                      value={adjustAmountLocal}
+                      step={0.000001}
+                      min={adjustMode === 'override' ? undefined : 0}
+                      onChange={(event) => {
+                        const raw = event.target.value;
+                        const amount = raw === '' ? '' : Number(raw);
+                        setAdjustAmountLocal(amount);
+                        setAdjustQuotaLocal(
+                          amount === ''
+                            ? ''
+                            : adjustMode === 'override'
+                              ? displayAmountToQuota(amount)
+                              : displayAmountToQuota(Math.abs(amount)),
+                        );
+                      }}
+                      placeholder={t('输入金额')}
+                      className={`${inputClass} pl-8`}
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <button
+                    type='button'
+                    className='cursor-pointer text-xs text-muted hover:text-foreground'
+                    onClick={() => setShowAdjustQuotaRaw((v) => !v)}
+                  >
+                    {showAdjustQuotaRaw
+                      ? `▾ ${t('收起原生额度输入')}`
+                      : `▸ ${t('使用原生额度输入')}`}
+                  </button>
+                  {showAdjustQuotaRaw && (
+                    <div className='mt-2 space-y-2'>
+                      <FieldLabel>{t('额度')}</FieldLabel>
+                      <input
+                        type='number'
+                        value={adjustQuotaLocal}
+                        step={500000}
+                        min={adjustMode === 'override' ? undefined : 0}
+                        onChange={(event) => {
+                          const raw = event.target.value;
+                          const quota = raw === '' ? '' : Number(raw);
+                          setAdjustQuotaLocal(quota);
+                          setAdjustAmountLocal(
+                            quota === ''
+                              ? ''
+                              : adjustMode === 'override'
+                                ? Number(
+                                    quotaToDisplayAmount(quota).toFixed(6),
+                                  )
+                                : Number(
+                                    quotaToDisplayAmount(
+                                      Math.abs(quota),
+                                    ).toFixed(6),
+                                  ),
+                          );
+                        }}
+                        placeholder={t('输入额度')}
+                        className={inputClass}
+                      />
+                    </div>
+                  )}
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button
+                  variant='light'
+                  onPress={() => {
+                    setAdjustModalOpen(false);
+                    setAdjustQuotaLocal('');
+                    setAdjustAmountLocal('');
+                    setAdjustMode('add');
+                  }}
+                >
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  isPending={adjustLoading}
+                  onPress={adjustQuota}
+                >
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
     </>
   );
diff --git a/web/src/components/table/users/modals/EnableDisableUserModal.jsx b/web/src/components/table/users/modals/EnableDisableUserModal.jsx
index 0e8cb184b99..cdf7191d8fe 100644
--- a/web/src/components/table/users/modals/EnableDisableUserModal.jsx
+++ b/web/src/components/table/users/modals/EnableDisableUserModal.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const EnableDisableUserModal = ({
   visible,
@@ -31,15 +31,16 @@ const EnableDisableUserModal = ({
   const isDisable = action === 'disable';
 
   return (
-    <Modal
+    <ConfirmDialog
       title={isDisable ? t('确定要禁用此用户吗？') : t('确定要启用此用户吗？')}
       visible={visible}
       onCancel={onCancel}
-      onOk={onConfirm}
-      type='warning'
+      onConfirm={onConfirm}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
     >
       {isDisable ? t('此操作将禁用用户账户') : t('此操作将启用用户账户')}
-    </Modal>
+    </ConfirmDialog>
   );
 };
 
diff --git a/web/src/components/table/users/modals/PromoteUserModal.jsx b/web/src/components/table/users/modals/PromoteUserModal.jsx
index 1490982b653..6b6bfaa8d80 100644
--- a/web/src/components/table/users/modals/PromoteUserModal.jsx
+++ b/web/src/components/table/users/modals/PromoteUserModal.jsx
@@ -18,19 +18,20 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const PromoteUserModal = ({ visible, onCancel, onConfirm, user, t }) => {
   return (
-    <Modal
+    <ConfirmDialog
       title={t('确定要提升此用户吗？')}
       visible={visible}
       onCancel={onCancel}
-      onOk={onConfirm}
-      type='warning'
+      onConfirm={onConfirm}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
     >
       {t('此操作将提升用户的权限级别')}
-    </Modal>
+    </ConfirmDialog>
   );
 };
 
diff --git a/web/src/components/table/users/modals/ResetPasskeyModal.jsx b/web/src/components/table/users/modals/ResetPasskeyModal.jsx
index 99f81c74938..e257403632d 100644
--- a/web/src/components/table/users/modals/ResetPasskeyModal.jsx
+++ b/web/src/components/table/users/modals/ResetPasskeyModal.jsx
@@ -18,22 +18,23 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const ResetPasskeyModal = ({ visible, onCancel, onConfirm, user, t }) => {
   return (
-    <Modal
+    <ConfirmDialog
       title={t('确认重置 Passkey')}
       visible={visible}
       onCancel={onCancel}
-      onOk={onConfirm}
-      type='warning'
+      onConfirm={onConfirm}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
     >
       {t('此操作将解绑用户当前的 Passkey，下次登录需要重新注册。')}{' '}
       {user?.username
         ? t('目标用户：{{username}}', { username: user.username })
         : ''}
-    </Modal>
+    </ConfirmDialog>
   );
 };
 
diff --git a/web/src/components/table/users/modals/ResetTwoFAModal.jsx b/web/src/components/table/users/modals/ResetTwoFAModal.jsx
index 64b42926b1d..be73b639d07 100644
--- a/web/src/components/table/users/modals/ResetTwoFAModal.jsx
+++ b/web/src/components/table/users/modals/ResetTwoFAModal.jsx
@@ -18,16 +18,17 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal } from '@douyinfe/semi-ui';
+import ConfirmDialog from '../../../common/ui/ConfirmDialog';
 
 const ResetTwoFAModal = ({ visible, onCancel, onConfirm, user, t }) => {
   return (
-    <Modal
+    <ConfirmDialog
       title={t('确认重置两步验证')}
       visible={visible}
       onCancel={onCancel}
-      onOk={onConfirm}
-      type='warning'
+      onConfirm={onConfirm}
+      cancelText={t('取消')}
+      confirmText={t('确定')}
     >
       {t(
         '此操作将禁用该用户当前的两步验证配置，下次登录将不再强制输入验证码，直到用户重新启用。',
@@ -35,7 +36,7 @@ const ResetTwoFAModal = ({ visible, onCancel, onConfirm, user, t }) => {
       {user?.username
         ? t('目标用户：{{username}}', { username: user.username })
         : ''}
-    </Modal>
+    </ConfirmDialog>
   );
 };
 
diff --git a/web/src/components/table/users/modals/UserBindingManagementModal.jsx b/web/src/components/table/users/modals/UserBindingManagementModal.jsx
index e01ecca9488..95f0c53b8e2 100644
--- a/web/src/components/table/users/modals/UserBindingManagementModal.jsx
+++ b/web/src/components/table/users/modals/UserBindingManagementModal.jsx
@@ -26,23 +26,20 @@ import {
   getOAuthProviderIcon,
 } from '../../../../helpers';
 import {
-  Modal,
-  Spin,
-  Typography,
-  Card,
-  Checkbox,
-  Tag,
   Button,
-} from '@douyinfe/semi-ui';
-import {
-  IconLink,
-  IconMail,
-  IconDelete,
-  IconGithubLogo,
-} from '@douyinfe/semi-icons';
+  Card,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
+import { Github, Link as LinkIcon, Mail, Trash2 } from 'lucide-react';
 import { SiDiscord, SiTelegram, SiWechat, SiLinux } from 'react-icons/si';
-
-const { Text } = Typography;
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 
 const UserBindingManagementModal = ({
   visible,
@@ -58,10 +55,10 @@ const UserBindingManagementModal = ({
   const [customOAuthBindings, setCustomOAuthBindings] = React.useState([]);
   const [builtInBindings, setBuiltInBindings] = React.useState({});
   const [bindingActionLoading, setBindingActionLoading] = React.useState({});
+  const [pendingUnbind, setPendingUnbind] = React.useState(null);
 
   const loadBindingData = React.useCallback(async () => {
     if (!userId) return;
-
     setBindingLoading(true);
     try {
       const [statusRes, customBindingRes, userRes] = await Promise.all([
@@ -116,79 +113,65 @@ const UserBindingManagementModal = ({
     setBindingActionLoading((prev) => ({ ...prev, [key]: value }));
   };
 
-  const handleUnbindBuiltInAccount = (bindingItem) => {
+  const performUnbindBuiltIn = async (bindingItem) => {
     if (!userId) return;
-
-    Modal.confirm({
-      title: t('确认解绑'),
-      content: t('确定要解绑 {{name}} 吗？', { name: bindingItem.name }),
-      okText: t('确认'),
-      cancelText: t('取消'),
-      onOk: async () => {
-        const loadingKey = `builtin-${bindingItem.key}`;
-        setBindingLoadingState(loadingKey, true);
-        try {
-          const res = await API.delete(
-            `/api/user/${userId}/bindings/${bindingItem.key}`,
-          );
-          if (!res.data?.success) {
-            showError(res.data?.message || t('操作失败'));
-            return;
-          }
-          setBuiltInBindings((prev) => ({
-            ...prev,
-            [bindingItem.field]: '',
-          }));
-          formApiRef.current?.setValue(bindingItem.field, '');
-          showSuccess(t('解绑成功'));
-        } catch (error) {
-          showError(
-            error.response?.data?.message || error.message || t('操作失败'),
-          );
-        } finally {
-          setBindingLoadingState(loadingKey, false);
-        }
-      },
-    });
+    const loadingKey = `builtin-${bindingItem.key}`;
+    setBindingLoadingState(loadingKey, true);
+    try {
+      const res = await API.delete(
+        `/api/user/${userId}/bindings/${bindingItem.key}`,
+      );
+      if (!res.data?.success) {
+        showError(res.data?.message || t('操作失败'));
+        return;
+      }
+      setBuiltInBindings((prev) => ({
+        ...prev,
+        [bindingItem.field]: '',
+      }));
+      formApiRef?.current?.setValue?.(bindingItem.field, '');
+      showSuccess(t('解绑成功'));
+    } catch (error) {
+      showError(
+        error.response?.data?.message || error.message || t('操作失败'),
+      );
+    } finally {
+      setBindingLoadingState(loadingKey, false);
+    }
   };
 
-  const handleUnbindCustomOAuthAccount = (provider) => {
+  const performUnbindCustom = async (provider) => {
     if (!userId) return;
+    const loadingKey = `custom-${provider.id}`;
+    setBindingLoadingState(loadingKey, true);
+    try {
+      const res = await API.delete(
+        `/api/user/${userId}/oauth/bindings/${provider.id}`,
+      );
+      if (!res.data?.success) {
+        showError(res.data?.message || t('操作失败'));
+        return;
+      }
+      setCustomOAuthBindings((prev) =>
+        prev.filter(
+          (item) => Number(item.provider_id) !== Number(provider.id),
+        ),
+      );
+      showSuccess(t('解绑成功'));
+    } catch (error) {
+      showError(
+        error.response?.data?.message || error.message || t('操作失败'),
+      );
+    } finally {
+      setBindingLoadingState(loadingKey, false);
+    }
+  };
 
-    Modal.confirm({
-      title: t('确认解绑'),
-      content: t('确定要解绑 {{name}} 吗？', { name: provider.name }),
-      okText: t('确认'),
-      cancelText: t('取消'),
-      onOk: async () => {
-        const loadingKey = `custom-${provider.id}`;
-        setBindingLoadingState(loadingKey, true);
-        try {
-          const res = await API.delete(
-            `/api/user/${userId}/oauth/bindings/${provider.id}`,
-          );
-          if (!res.data?.success) {
-            showError(res.data?.message || t('操作失败'));
-            return;
-          }
-          setCustomOAuthBindings((prev) =>
-            prev.filter(
-              (item) => Number(item.provider_id) !== Number(provider.id),
-            ),
-          );
-          showSuccess(t('解绑成功'));
-        } catch (error) {
-          showError(
-            error.response?.data?.message || error.message || t('操作失败'),
-          );
-        } finally {
-          setBindingLoadingState(loadingKey, false);
-        }
-      },
-    });
+  const requestUnbind = (item) => {
+    setPendingUnbind(item);
   };
 
-  const currentValues = formApiRef.current?.getValues?.() || {};
+  const currentValues = formApiRef?.current?.getValues?.() || {};
   const getBuiltInBindingValue = (field) =>
     builtInBindings[field] || currentValues[field] || '';
 
@@ -199,12 +182,7 @@ const UserBindingManagementModal = ({
       name: t('邮箱'),
       enabled: true,
       value: getBuiltInBindingValue('email'),
-      icon: (
-        <IconMail
-          size='default'
-          className='text-slate-600 dark:text-slate-300'
-        />
-      ),
+      icon: <Mail size={20} className='text-foreground' />,
     },
     {
       key: 'github',
@@ -212,12 +190,7 @@ const UserBindingManagementModal = ({
       name: 'GitHub',
       enabled: Boolean(statusInfo.github_oauth),
       value: getBuiltInBindingValue('github_id'),
-      icon: (
-        <IconGithubLogo
-          size='default'
-          className='text-slate-600 dark:text-slate-300'
-        />
-      ),
+      icon: <Github size={20} className='text-foreground' />,
     },
     {
       key: 'discord',
@@ -226,7 +199,7 @@ const UserBindingManagementModal = ({
       enabled: Boolean(statusInfo.discord_oauth),
       value: getBuiltInBindingValue('discord_id'),
       icon: (
-        <SiDiscord size={20} className='text-slate-600 dark:text-slate-300' />
+        <SiDiscord size={20} className='text-foreground' />
       ),
     },
     {
@@ -236,10 +209,7 @@ const UserBindingManagementModal = ({
       enabled: Boolean(statusInfo.oidc_enabled),
       value: getBuiltInBindingValue('oidc_id'),
       icon: (
-        <IconLink
-          size='default'
-          className='text-slate-600 dark:text-slate-300'
-        />
+        <LinkIcon size={20} className='text-foreground' />
       ),
     },
     {
@@ -249,7 +219,7 @@ const UserBindingManagementModal = ({
       enabled: Boolean(statusInfo.wechat_login),
       value: getBuiltInBindingValue('wechat_id'),
       icon: (
-        <SiWechat size={20} className='text-slate-600 dark:text-slate-300' />
+        <SiWechat size={20} className='text-foreground' />
       ),
     },
     {
@@ -259,7 +229,7 @@ const UserBindingManagementModal = ({
       enabled: Boolean(statusInfo.telegram_oauth),
       value: getBuiltInBindingValue('telegram_id'),
       icon: (
-        <SiTelegram size={20} className='text-slate-600 dark:text-slate-300' />
+        <SiTelegram size={20} className='text-foreground' />
       ),
     },
     {
@@ -269,7 +239,7 @@ const UserBindingManagementModal = ({
       enabled: Boolean(statusInfo.linuxdo_oauth),
       value: getBuiltInBindingValue('linux_do_id'),
       icon: (
-        <SiLinux size={20} className='text-slate-600 dark:text-slate-300' />
+        <SiLinux size={20} className='text-foreground' />
       ),
     },
   ];
@@ -325,108 +295,163 @@ const UserBindingManagementModal = ({
     ? allBindingItems.filter((item) => Boolean(item.value))
     : allBindingItems;
 
+  const modalState = useOverlayState({
+    isOpen: !!visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
+    },
+  });
+
   return (
-    <Modal
-      centered
-      visible={visible}
-      onCancel={onCancel}
-      footer={null}
-      width={isMobile ? '100%' : 760}
-      title={
-        <div className='flex items-center'>
-          <IconLink className='mr-2' />
-          {t('账户绑定管理')}
-        </div>
-      }
-    >
-      <Spin spinning={bindingLoading}>
-        <div className='max-h-[68vh] overflow-y-auto pr-1 pb-2'>
-          <div className='flex items-center justify-between mb-4 gap-3 flex-wrap'>
-            <Checkbox
-              checked={showBoundOnly}
-              onChange={(e) => setShowBoundOnly(Boolean(e.target.checked))}
-            >
-              {t('仅显示已绑定')}
-            </Checkbox>
-            <Text type='tertiary'>
-              {t('已绑定')} {boundCount} / {allBindingItems.length}
-            </Text>
-          </div>
+    <>
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size={isMobile ? 'full' : 'xl'}
+            placement='center'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <div className='flex items-center gap-2'>
+                  <LinkIcon size={18} />
+                  {t('账户绑定管理')}
+                </div>
+              </ModalHeader>
+              <ModalBody className='max-h-[68vh] overflow-y-auto px-6 py-5'>
+                {bindingLoading ? (
+                  <div className='flex items-center justify-center py-10'>
+                    <Spinner />
+                  </div>
+                ) : (
+                  <>
+                    <div className='mb-4 flex flex-wrap items-center justify-between gap-3'>
+                      <label className='inline-flex cursor-pointer items-center gap-2 text-sm text-foreground'>
+                        <input
+                          type='checkbox'
+                          checked={showBoundOnly}
+                          onChange={(event) =>
+                            setShowBoundOnly(Boolean(event.target.checked))
+                          }
+                          className='h-4 w-4 accent-primary'
+                        />
+                        {t('仅显示已绑定')}
+                      </label>
+                      <span className='text-sm text-muted'>
+                        {t('已绑定')} {boundCount} / {allBindingItems.length}
+                      </span>
+                    </div>
 
-          {visibleBindingItems.length === 0 ? (
-            <Card className='!rounded-xl border-dashed'>
-              <Text type='tertiary'>{t('暂无已绑定项')}</Text>
-            </Card>
-          ) : (
-            <div className='grid grid-cols-1 lg:grid-cols-2 gap-4'>
-              {visibleBindingItems.map((item, index) => {
-                const isBound = Boolean(item.value);
-                const loadingKey =
-                  item.type === 'builtin'
-                    ? `builtin-${item.key}`
-                    : `custom-${item.providerId}`;
-                const statusText = isBound
-                  ? item.value
-                  : item.enabled
-                    ? t('未绑定')
-                    : t('未启用');
-                const shouldSpanTwoColsOnDesktop =
-                  visibleBindingItems.length % 2 === 1 &&
-                  index === visibleBindingItems.length - 1;
+                    {visibleBindingItems.length === 0 ? (
+                      <Card className='!rounded-xl border-2 border-dashed border-[color:var(--app-border)]'>
+                        <Card.Content className='p-5 text-sm text-muted'>
+                          {t('暂无已绑定项')}
+                        </Card.Content>
+                      </Card>
+                    ) : (
+                      <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+                        {visibleBindingItems.map((item, index) => {
+                          const isBound = Boolean(item.value);
+                          const loadingKey =
+                            item.type === 'builtin'
+                              ? `builtin-${item.key}`
+                              : `custom-${item.providerId}`;
+                          const statusText = isBound
+                            ? item.value
+                            : item.enabled
+                              ? t('未绑定')
+                              : t('未启用');
+                          const shouldSpanTwoCols =
+                            visibleBindingItems.length % 2 === 1 &&
+                            index === visibleBindingItems.length - 1;
 
-                return (
-                  <Card
-                    key={item.key}
-                    className={`!rounded-xl ${shouldSpanTwoColsOnDesktop ? 'lg:col-span-2' : ''}`}
-                  >
-                    <div className='flex items-center justify-between gap-3 min-h-[92px]'>
-                      <div className='flex items-center flex-1 min-w-0'>
-                        <div className='w-10 h-10 rounded-full bg-slate-100 dark:bg-slate-700 flex items-center justify-center mr-3 flex-shrink-0'>
-                          {item.icon}
-                        </div>
-                        <div className='min-w-0 flex-1'>
-                          <div className='font-medium text-gray-900 flex items-center gap-2'>
-                            <span>{item.name}</span>
-                            <Tag size='small' color='white'>
-                              {item.type === 'builtin'
-                                ? t('内置')
-                                : t('自定义')}
-                            </Tag>
-                          </div>
-                          <div className='text-sm text-gray-500 truncate'>
-                            {statusText}
-                          </div>
-                        </div>
+                          return (
+                            <Card
+                              key={item.key}
+                              className={`!rounded-xl border border-[color:var(--app-border)] shadow-sm ${
+                                shouldSpanTwoCols ? 'lg:col-span-2' : ''
+                              }`}
+                            >
+                              <Card.Content className='flex min-h-[92px] items-center justify-between gap-3 p-4'>
+                                <div className='flex flex-1 items-center min-w-0'>
+                                  <div className='mr-3 flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-surface-secondary'>
+                                    {item.icon}
+                                  </div>
+                                  <div className='min-w-0 flex-1'>
+                                    <div className='flex items-center gap-2 text-sm font-medium text-foreground'>
+                                      <span>{item.name}</span>
+                                      <span className='inline-flex items-center rounded-full border border-border bg-background px-1.5 py-0.5 text-[10px] font-medium text-foreground'>
+                                        {item.type === 'builtin'
+                                          ? t('内置')
+                                          : t('自定义')}
+                                      </span>
+                                    </div>
+                                    <div className='truncate text-xs text-muted'>
+                                      {statusText}
+                                    </div>
+                                  </div>
+                                </div>
+                                <Button
+                                  color='danger'
+                                  variant='light'
+                                  size='sm'
+                                  startContent={<Trash2 size={14} />}
+                                  isDisabled={!isBound}
+                                  isPending={Boolean(
+                                    bindingActionLoading[loadingKey],
+                                  )}
+                                  onPress={() => {
+                                    if (item.type === 'builtin') {
+                                      requestUnbind({
+                                        kind: 'builtin',
+                                        bindingItem: item,
+                                        name: item.name,
+                                      });
+                                    } else {
+                                      requestUnbind({
+                                        kind: 'custom',
+                                        provider: {
+                                          id: item.providerId,
+                                          name: item.name,
+                                        },
+                                        name: item.name,
+                                      });
+                                    }
+                                  }}
+                                >
+                                  {t('解绑')}
+                                </Button>
+                              </Card.Content>
+                            </Card>
+                          );
+                        })}
                       </div>
-                      <Button
-                        type='danger'
-                        theme='borderless'
-                        icon={<IconDelete />}
-                        size='small'
-                        disabled={!isBound}
-                        loading={Boolean(bindingActionLoading[loadingKey])}
-                        onClick={() => {
-                          if (item.type === 'builtin') {
-                            handleUnbindBuiltInAccount(item);
-                            return;
-                          }
-                          handleUnbindCustomOAuthAccount({
-                            id: item.providerId,
-                            name: item.name,
-                          });
-                        }}
-                      >
-                        {t('解绑')}
-                      </Button>
-                    </div>
-                  </Card>
-                );
-              })}
-            </div>
-          )}
-        </div>
-      </Spin>
-    </Modal>
+                    )}
+                  </>
+                )}
+              </ModalBody>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
+
+      <ConfirmDialog
+        visible={!!pendingUnbind}
+        title={t('确认解绑')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setPendingUnbind(null)}
+        onConfirm={() => {
+          const target = pendingUnbind;
+          setPendingUnbind(null);
+          if (!target) return;
+          if (target.kind === 'builtin') performUnbindBuiltIn(target.bindingItem);
+          else performUnbindCustom(target.provider);
+        }}
+      >
+        {t('确定要解绑 {{name}} 吗？', { name: pendingUnbind?.name || '' })}
+      </ConfirmDialog>
+    </>
   );
 };
 
diff --git a/web/src/components/table/users/modals/UserSubscriptionsModal.jsx b/web/src/components/table/users/modals/UserSubscriptionsModal.jsx
index 455f7b18809..524324575bc 100644
--- a/web/src/components/table/users/modals/UserSubscriptionsModal.jsx
+++ b/web/src/components/table/users/modals/UserSubscriptionsModal.jsx
@@ -9,7 +9,7 @@ License, or (at your option) any later version.
 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
+GNU Affore General Public License for more details.
 
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
@@ -18,33 +18,38 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useMemo, useState } from 'react';
-import {
-  Button,
-  Empty,
-  Modal,
-  Select,
-  SideSheet,
-  Space,
-  Tag,
-  Typography,
-} from '@douyinfe/semi-ui';
-import { IconPlusCircle } from '@douyinfe/semi-icons';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
+import { Button } from '@heroui/react';
+import { Inbox, PlusCircle, X } from 'lucide-react';
 import { API, showError, showSuccess } from '../../../../helpers';
 import { convertUSDToCurrency } from '../../../../helpers/render';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 import CardTable from '../../../common/ui/CardTable';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 
-const { Text } = Typography;
+const PAGE_SIZE = 10;
+
+const selectClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
 
 function formatTs(ts) {
   if (!ts) return '-';
   return new Date(ts * 1000).toLocaleString();
 }
 
+function StatusChip({ tone, children }) {
+  const cls =
+    tone === 'green'
+      ? 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
+      : 'bg-surface-secondary text-muted';
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}
+    >
+      {children}
+    </span>
+  );
+}
+
 function renderStatusTag(sub, t) {
   const now = Date.now() / 1000;
   const end = sub?.end_time || 0;
@@ -52,39 +57,29 @@ function renderStatusTag(sub, t) {
 
   const isExpiredByTime = end > 0 && end < now;
   const isActive = status === 'active' && !isExpiredByTime;
-  if (isActive) {
-    return (
-      <Tag color='green' shape='circle' size='small'>
-        {t('生效')}
-      </Tag>
-    );
-  }
-  if (status === 'cancelled') {
-    return (
-      <Tag color='grey' shape='circle' size='small'>
-        {t('已作废')}
-      </Tag>
-    );
-  }
-  return (
-    <Tag color='grey' shape='circle' size='small'>
-      {t('已过期')}
-    </Tag>
-  );
+  if (isActive) return <StatusChip tone='green'>{t('生效')}</StatusChip>;
+  if (status === 'cancelled') return <StatusChip>{t('已作废')}</StatusChip>;
+  return <StatusChip>{t('已过期')}</StatusChip>;
 }
 
-const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
+const UserSubscriptionsModal = ({
+  visible,
+  onCancel,
+  user,
+  t,
+  onSuccess,
+}) => {
   const isMobile = useIsMobile();
   const [loading, setLoading] = useState(false);
   const [creating, setCreating] = useState(false);
   const [plansLoading, setPlansLoading] = useState(false);
 
   const [plans, setPlans] = useState([]);
-  const [selectedPlanId, setSelectedPlanId] = useState(null);
+  const [selectedPlanId, setSelectedPlanId] = useState('');
 
   const [subs, setSubs] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
-  const pageSize = 10;
+  const [pendingConfirm, setPendingConfirm] = useState(null);
 
   const planTitleMap = useMemo(() => {
     const map = new Map();
@@ -97,8 +92,8 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
   }, [plans]);
 
   const pagedSubs = useMemo(() => {
-    const start = Math.max(0, (Number(currentPage || 1) - 1) * pageSize);
-    const end = start + pageSize;
+    const start = Math.max(0, (Number(currentPage || 1) - 1) * PAGE_SIZE);
+    const end = start + PAGE_SIZE;
     return (subs || []).slice(start, end);
   }, [subs, currentPage]);
 
@@ -108,7 +103,7 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
         Number(p?.plan?.price_amount || 0),
         2,
       )})`,
-      value: p?.plan?.id,
+      value: String(p?.plan?.id ?? ''),
     }));
   }, [plans]);
 
@@ -151,15 +146,21 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
 
   useEffect(() => {
     if (!visible) return;
-    setSelectedPlanId(null);
+    setSelectedPlanId('');
     setCurrentPage(1);
     loadPlans();
     loadUserSubscriptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [visible]);
 
-  const handlePageChange = (page) => {
-    setCurrentPage(page);
-  };
+  useEffect(() => {
+    if (!visible) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') onCancel?.();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [visible, onCancel]);
 
   const createSubscription = async () => {
     if (!user?.id) {
@@ -174,14 +175,12 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
     try {
       const res = await API.post(
         `/api/subscription/admin/users/${user.id}/subscriptions`,
-        {
-          plan_id: selectedPlanId,
-        },
+        { plan_id: Number(selectedPlanId) },
       );
       if (res.data?.success) {
         const msg = res.data?.data?.message;
         showSuccess(msg ? msg : t('新增成功'));
-        setSelectedPlanId(null);
+        setSelectedPlanId('');
         await loadUserSubscriptions();
         onSuccess?.();
       } else {
@@ -194,55 +193,40 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
     }
   };
 
-  const invalidateSubscription = (subId) => {
-    Modal.confirm({
-      title: t('确认作废'),
-      content: t('作废后该订阅将立即失效，历史记录不受影响。是否继续？'),
-      centered: true,
-      onOk: async () => {
-        try {
-          const res = await API.post(
-            `/api/subscription/admin/user_subscriptions/${subId}/invalidate`,
-          );
-          if (res.data?.success) {
-            const msg = res.data?.data?.message;
-            showSuccess(msg ? msg : t('已作废'));
-            await loadUserSubscriptions();
-            onSuccess?.();
-          } else {
-            showError(res.data?.message || t('操作失败'));
-          }
-        } catch (e) {
-          showError(t('请求失败'));
-        }
-      },
-    });
+  const performInvalidate = async (subId) => {
+    try {
+      const res = await API.post(
+        `/api/subscription/admin/user_subscriptions/${subId}/invalidate`,
+      );
+      if (res.data?.success) {
+        const msg = res.data?.data?.message;
+        showSuccess(msg ? msg : t('已作废'));
+        await loadUserSubscriptions();
+        onSuccess?.();
+      } else {
+        showError(res.data?.message || t('操作失败'));
+      }
+    } catch (e) {
+      showError(t('请求失败'));
+    }
   };
 
-  const deleteSubscription = (subId) => {
-    Modal.confirm({
-      title: t('确认删除'),
-      content: t('删除会彻底移除该订阅记录（含权益明细）。是否继续？'),
-      centered: true,
-      okType: 'danger',
-      onOk: async () => {
-        try {
-          const res = await API.delete(
-            `/api/subscription/admin/user_subscriptions/${subId}`,
-          );
-          if (res.data?.success) {
-            const msg = res.data?.data?.message;
-            showSuccess(msg ? msg : t('已删除'));
-            await loadUserSubscriptions();
-            onSuccess?.();
-          } else {
-            showError(res.data?.message || t('删除失败'));
-          }
-        } catch (e) {
-          showError(t('请求失败'));
-        }
-      },
-    });
+  const performDelete = async (subId) => {
+    try {
+      const res = await API.delete(
+        `/api/subscription/admin/user_subscriptions/${subId}`,
+      );
+      if (res.data?.success) {
+        const msg = res.data?.data?.message;
+        showSuccess(msg ? msg : t('已删除'));
+        await loadUserSubscriptions();
+        onSuccess?.();
+      } else {
+        showError(res.data?.message || t('删除失败'));
+      }
+    } catch (e) {
+      showError(t('请求失败'));
+    }
   };
 
   const columns = useMemo(() => {
@@ -264,8 +248,10 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
             planTitleMap.get(planId) || (planId ? `#${planId}` : '-');
           return (
             <div className='min-w-0'>
-              <div className='font-medium truncate'>{title}</div>
-              <div className='text-xs text-gray-500'>
+              <div className='truncate text-sm font-medium text-foreground'>
+                {title}
+              </div>
+              <div className='text-xs text-muted'>
                 {t('来源')}: {sub?.source || '-'}
               </div>
             </div>
@@ -285,7 +271,7 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
         render: (_, record) => {
           const sub = record?.subscription;
           return (
-            <div className='text-xs text-gray-600'>
+            <div className='space-y-0.5 text-xs text-muted'>
               <div>
                 {t('开始')}: {formatTs(sub?.start_time)}
               </div>
@@ -305,9 +291,13 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
           const total = Number(sub?.amount_total || 0);
           const used = Number(sub?.amount_used || 0);
           return (
-            <Text type={total > 0 ? 'secondary' : 'tertiary'}>
+            <span
+              className={
+                total > 0 ? 'text-sm text-foreground' : 'text-xs text-muted'
+              }
+            >
               {total > 0 ? `${used}/${total}` : t('不限')}
-            </Text>
+            </span>
           );
         },
       },
@@ -324,109 +314,166 @@ const UserSubscriptionsModal = ({ visible, onCancel, user, t, onSuccess }) => {
           const isActive = sub?.status === 'active' && !isExpired;
           const isCancelled = sub?.status === 'cancelled';
           return (
-            <Space>
+            <div className='flex flex-wrap items-center gap-1.5'>
               <Button
-                size='small'
-                type='warning'
-                theme='light'
-                disabled={!isActive || isCancelled}
-                onClick={() => invalidateSubscription(sub?.id)}
+                size='sm'
+                color='warning'
+                variant='flat'
+                isDisabled={!isActive || isCancelled}
+                onPress={() =>
+                  setPendingConfirm({
+                    title: t('确认作废'),
+                    content: t(
+                      '作废后该订阅将立即失效，历史记录不受影响。是否继续？',
+                    ),
+                    danger: false,
+                    action: () => performInvalidate(sub?.id),
+                  })
+                }
               >
                 {t('作废')}
               </Button>
               <Button
-                size='small'
-                type='danger'
-                theme='light'
-                onClick={() => deleteSubscription(sub?.id)}
+                size='sm'
+                color='danger'
+                variant='flat'
+                onPress={() =>
+                  setPendingConfirm({
+                    title: t('确认删除'),
+                    content: t(
+                      '删除会彻底移除该订阅记录（含权益明细）。是否继续？',
+                    ),
+                    danger: true,
+                    action: () => performDelete(sub?.id),
+                  })
+                }
               >
                 {t('删除')}
               </Button>
-            </Space>
+            </div>
           );
         },
       },
     ];
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [t, planTitleMap]);
 
   return (
-    <SideSheet
-      visible={visible}
-      placement='right'
-      width={isMobile ? '100%' : 920}
-      bodyStyle={{ padding: 0 }}
-      onCancel={onCancel}
-      title={
-        <Space>
-          <Tag color='blue' shape='circle'>
-            {t('管理')}
-          </Tag>
-          <Typography.Title heading={4} className='m-0'>
-            {t('用户订阅管理')}
-          </Typography.Title>
-          <Text type='tertiary' className='ml-2'>
-            {user?.username || '-'} (ID: {user?.id || '-'})
-          </Text>
-        </Space>
-      }
-    >
-      <div className='p-4'>
-        {/* 顶部操作栏：新增订阅 */}
-        <div className='flex flex-col md:flex-row md:items-center md:justify-between gap-3 mb-4'>
-          <div className='flex gap-2 flex-1'>
-            <Select
-              placeholder={t('选择订阅套餐')}
-              optionList={planOptions}
-              value={selectedPlanId}
-              onChange={setSelectedPlanId}
-              loading={plansLoading}
-              filter
-              style={{ minWidth: isMobile ? undefined : 300, flex: 1 }}
-            />
-            <Button
-              type='primary'
-              theme='solid'
-              icon={<IconPlusCircle />}
-              loading={creating}
-              onClick={createSubscription}
-            >
-              {t('新增订阅')}
-            </Button>
+    <>
+      <div
+        aria-hidden={!visible}
+        onClick={onCancel}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          visible ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!visible}
+        style={{ width: isMobile ? '100%' : 920 }}
+        className={`fixed bottom-0 right-0 top-0 z-50 flex flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          visible ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-[color:var(--app-border)] px-5 py-3'>
+          <div className='flex flex-wrap items-center gap-2'>
+            <span className='inline-flex items-center rounded-full bg-sky-100 px-2 py-0.5 text-[11px] font-semibold text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'>
+              {t('管理')}
+            </span>
+            <h4 className='m-0 text-lg font-semibold text-foreground'>
+              {t('用户订阅管理')}
+            </h4>
+            <span className='text-sm text-muted'>
+              {user?.username || '-'} (ID: {user?.id || '-'})
+            </span>
+          </div>
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={onCancel}
+          >
+            <X size={16} />
+          </Button>
+        </header>
+
+        <div className='flex-1 overflow-y-auto p-4'>
+          <div className='mb-4 flex flex-col gap-3 md:flex-row md:items-center md:justify-between'>
+            <div className='flex flex-1 gap-2'>
+              <select
+                value={selectedPlanId}
+                onChange={(event) => setSelectedPlanId(event.target.value)}
+                disabled={plansLoading}
+                aria-label={t('选择订阅套餐')}
+                className={selectClass}
+                style={{ minWidth: isMobile ? undefined : 300, flex: 1 }}
+              >
+                <option value=''>
+                  {plansLoading ? t('加载中...') : t('选择订阅套餐')}
+                </option>
+                {planOptions.map((opt) => (
+                  <option key={opt.value} value={opt.value}>
+                    {opt.label}
+                  </option>
+                ))}
+              </select>
+              <Button
+                color='primary'
+                startContent={<PlusCircle size={14} />}
+                isPending={creating}
+                onPress={createSubscription}
+              >
+                {t('新增订阅')}
+              </Button>
+            </div>
           </div>
+
+          <CardTable
+            columns={columns}
+            dataSource={pagedSubs}
+            rowKey={(row) => row?.subscription?.id}
+            loading={loading}
+            scroll={{ x: 'max-content' }}
+            hidePagination={false}
+            pagination={{
+              currentPage,
+              pageSize: PAGE_SIZE,
+              total: subs.length,
+              pageSizeOpts: [10, 20, 50],
+              showSizeChanger: false,
+              onPageChange: setCurrentPage,
+            }}
+            empty={
+              <div className='flex flex-col items-center gap-3 py-10 text-center text-sm text-muted'>
+                <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                  <Inbox size={28} />
+                </div>
+                <div>{t('暂无订阅记录')}</div>
+              </div>
+            }
+            size='middle'
+          />
         </div>
+      </aside>
 
-        {/* 订阅列表 */}
-        <CardTable
-          columns={columns}
-          dataSource={pagedSubs}
-          rowKey={(row) => row?.subscription?.id}
-          loading={loading}
-          scroll={{ x: 'max-content' }}
-          hidePagination={false}
-          pagination={{
-            currentPage,
-            pageSize,
-            total: subs.length,
-            pageSizeOpts: [10, 20, 50],
-            showSizeChanger: false,
-            onPageChange: handlePageChange,
-          }}
-          empty={
-            <Empty
-              image={
-                <IllustrationNoResult style={{ width: 150, height: 150 }} />
-              }
-              darkModeImage={
-                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-              }
-              description={t('暂无订阅记录')}
-              style={{ padding: 30 }}
-            />
-          }
-          size='middle'
-        />
-      </div>
-    </SideSheet>
+      <ConfirmDialog
+        visible={!!pendingConfirm}
+        title={pendingConfirm?.title || ''}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger={!!pendingConfirm?.danger}
+        onCancel={() => setPendingConfirm(null)}
+        onConfirm={() => {
+          const action = pendingConfirm?.action;
+          setPendingConfirm(null);
+          action?.();
+        }}
+      >
+        {pendingConfirm?.content}
+      </ConfirmDialog>
+    </>
   );
 };
 
diff --git a/web/src/components/topup/InvitationCard.jsx b/web/src/components/topup/InvitationCard.jsx
index 7ae6b0a5a23..f7b093ca035 100644
--- a/web/src/components/topup/InvitationCard.jsx
+++ b/web/src/components/topup/InvitationCard.jsx
@@ -18,19 +18,9 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import {
-  Avatar,
-  Typography,
-  Card,
-  Button,
-  Input,
-  Badge,
-  Space,
-} from '@douyinfe/semi-ui';
+import { Avatar, Button, Card, Input } from '@heroui/react';
 import { Copy, Users, BarChart2, TrendingUp, Gift, Zap } from 'lucide-react';
 
-const { Text } = Typography;
-
 const InvitationCard = ({
   t,
   userState,
@@ -40,26 +30,27 @@ const InvitationCard = ({
   handleAffLinkClick,
 }) => {
   return (
-    <Card className='!rounded-2xl shadow-sm border-0'>
+    <Card className='rounded-2xl border-0 shadow-sm' shadow='none'>
+      <Card.Content>
       {/* 卡片头部 */}
       <div className='flex items-center mb-4'>
-        <Avatar size='small' color='green' className='mr-3 shadow-md'>
-          <Gift size={16} />
+        <Avatar size='sm' color='success' className='mr-3 shadow-md'>
+          <Avatar.Fallback>
+            <Gift size={16} />
+          </Avatar.Fallback>
         </Avatar>
         <div>
-          <Typography.Text className='text-lg font-medium'>
+          <div className='text-lg font-medium text-foreground'>
             {t('邀请奖励')}
-          </Typography.Text>
+          </div>
           <div className='text-xs'>{t('邀请好友获得额外奖励')}</div>
         </div>
       </div>
 
       {/* 收益展示区域 */}
-      <Space vertical style={{ width: '100%' }}>
+      <div className='flex w-full flex-col gap-4'>
         {/* 统计数据统一卡片 */}
-        <Card
-          className='!rounded-xl w-full'
-          cover={
+        <Card className='w-full overflow-hidden rounded-xl' shadow='none'>
             <div
               className='relative h-30'
               style={{
@@ -73,19 +64,18 @@ const InvitationCard = ({
               {/* 标题和按钮 */}
               <div className='relative z-10 h-full flex flex-col justify-between p-4'>
                 <div className='flex justify-between items-center'>
-                  <Text strong style={{ color: 'white', fontSize: '16px' }}>
+                  <span className='text-base font-semibold text-white'>
                     {t('收益统计')}
-                  </Text>
+                  </span>
                   <Button
-                    type='primary'
-                    theme='solid'
-                    size='small'
-                    disabled={
+                    size='sm'
+                    variant='primary'
+                    isDisabled={
                       !userState?.user?.aff_quota ||
                       userState?.user?.aff_quota <= 0
                     }
-                    onClick={() => setOpenTransfer(true)}
-                    className='!rounded-lg'
+                    onPress={() => setOpenTransfer(true)}
+                    className='rounded-lg'
                   >
                     <Zap size={12} className='mr-1' />
                     {t('划转到余额')}
@@ -108,14 +98,9 @@ const InvitationCard = ({
                         className='mr-1'
                         style={{ color: 'rgba(255,255,255,0.8)' }}
                       />
-                      <Text
-                        style={{
-                          color: 'rgba(255,255,255,0.8)',
-                          fontSize: '12px',
-                        }}
-                      >
+                      <span className='text-xs text-white/80'>
                         {t('待使用收益')}
-                      </Text>
+                      </span>
                     </div>
                   </div>
 
@@ -133,14 +118,9 @@ const InvitationCard = ({
                         className='mr-1'
                         style={{ color: 'rgba(255,255,255,0.8)' }}
                       />
-                      <Text
-                        style={{
-                          color: 'rgba(255,255,255,0.8)',
-                          fontSize: '12px',
-                        }}
-                      >
+                      <span className='text-xs text-white/80'>
                         {t('总收益')}
-                      </Text>
+                      </span>
                     </div>
                   </div>
 
@@ -158,70 +138,70 @@ const InvitationCard = ({
                         className='mr-1'
                         style={{ color: 'rgba(255,255,255,0.8)' }}
                       />
-                      <Text
-                        style={{
-                          color: 'rgba(255,255,255,0.8)',
-                          fontSize: '12px',
-                        }}
-                      >
+                      <span className='text-xs text-white/80'>
                         {t('邀请人数')}
-                      </Text>
+                      </span>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          }
-        >
+          <Card.Content className='p-4'>
           {/* 邀请链接部分 */}
-          <Input
-            value={affLink}
-            readonly
-            className='!rounded-lg'
-            prefix={t('邀请链接')}
-            suffix={
+          <div className='flex flex-col gap-2 sm:flex-row'>
+            <Input
+              value={affLink}
+              readOnly
+              aria-label={t('邀请链接')}
+              className='flex-1 rounded-lg'
+              fullWidth
+            />
               <Button
-                type='primary'
-                theme='solid'
-                onClick={handleAffLinkClick}
-                icon={<Copy size={14} />}
-                className='!rounded-lg'
+                variant='primary'
+                onPress={handleAffLinkClick}
+                className='rounded-lg'
               >
+                <Copy size={14} />
                 {t('复制')}
               </Button>
-            }
-          />
+          </div>
+          </Card.Content>
         </Card>
 
         {/* 奖励说明 */}
-        <Card
-          className='!rounded-xl w-full'
-          title={<Text type='tertiary'>{t('奖励说明')}</Text>}
-        >
+        <Card className='w-full rounded-xl' shadow='none'>
+          <Card.Header>
+            <Card.Title className='text-sm text-muted'>
+              {t('奖励说明')}
+            </Card.Title>
+          </Card.Header>
+          <Card.Content>
           <div className='space-y-3'>
             <div className='flex items-start gap-2'>
-              <Badge dot type='success' />
-              <Text type='tertiary' className='text-sm'>
+              <span className='mt-2 size-2 rounded-full bg-emerald-500' />
+              <span className='text-sm text-muted'>
                 {t('邀请好友注册，好友充值后您可获得相应奖励')}
-              </Text>
+              </span>
             </div>
 
             <div className='flex items-start gap-2'>
-              <Badge dot type='success' />
-              <Text type='tertiary' className='text-sm'>
+              <span className='mt-2 size-2 rounded-full bg-emerald-500' />
+              <span className='text-sm text-muted'>
                 {t('通过划转功能将奖励额度转入到您的账户余额中')}
-              </Text>
+              </span>
             </div>
 
             <div className='flex items-start gap-2'>
-              <Badge dot type='success' />
-              <Text type='tertiary' className='text-sm'>
+              <span className='mt-2 size-2 rounded-full bg-emerald-500' />
+              <span className='text-sm text-muted'>
                 {t('邀请的好友越多，获得的奖励越多')}
-              </Text>
+              </span>
             </div>
           </div>
+          </Card.Content>
         </Card>
-      </Space>
+      </div>
+      </Card.Content>
     </Card>
   );
 };
diff --git a/web/src/components/topup/RechargeCard.jsx b/web/src/components/topup/RechargeCard.jsx
index 1e2923cafc1..fe10c963dec 100644
--- a/web/src/components/topup/RechargeCard.jsx
+++ b/web/src/components/topup/RechargeCard.jsx
@@ -6,51 +6,60 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useRef, useState } from 'react';
-import {
-  Avatar,
-  Typography,
-  Card,
-  Button,
-  Banner,
-  Skeleton,
-  Form,
-  Space,
-  Row,
-  Col,
-  Spin,
-  Tooltip,
-  Tag,
-  Tabs,
-  TabPane,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Card, Button, Skeleton, Spinner, Tooltip } from '@heroui/react';
 import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
 import {
+  BarChart2,
   CreditCard,
   Coins,
-  Wallet,
-  BarChart2,
-  TrendingUp,
+  Gift,
   Receipt,
   Sparkles,
+  TrendingUp,
+  Wallet,
 } from 'lucide-react';
-import { IconGift } from '@douyinfe/semi-icons';
 import { useMinimumLoadingTime } from '../../hooks/common/useMinimumLoadingTime';
 import { getCurrencyConfig } from '../../helpers/render';
 import SubscriptionPlansCard from './SubscriptionPlansCard';
 
-const { Text } = Typography;
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+function FieldLabel({ children }) {
+  return (
+    <div className='block text-sm font-medium text-foreground'>{children}</div>
+  );
+}
+
+function InfoBanner({ children }) {
+  return (
+    <div className='flex items-start gap-2 rounded-xl border border-primary/20 bg-primary/5 px-3 py-2 text-sm text-foreground'>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+function StatusChip({ tone = 'green', children }) {
+  const cls =
+    {
+      green: 'bg-success/15 text-success',
+      blue: 'bg-primary/15 text-primary',
+    }[tone] || 'bg-success/15 text-success';
+  return (
+    <span
+      className={`ml-1 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${cls}`}
+    >
+      {children}
+    </span>
+  );
+}
 
 const RechargeCard = ({
   t,
@@ -97,597 +106,508 @@ const RechargeCard = ({
   allSubscriptions = [],
   reloadSubscriptionSelf,
 }) => {
-  const onlineFormApiRef = useRef(null);
-  const redeemFormApiRef = useRef(null);
-  const initialTabSetRef = useRef(false);
   const showAmountSkeleton = useMinimumLoadingTime(amountLoading);
   const [activeTab, setActiveTab] = useState('topup');
   const shouldShowSubscription =
     !subscriptionLoading && subscriptionPlans.length > 0;
   const regularPayMethods = payMethods || [];
 
+  const [initialTabSet, setInitialTabSet] = useState(false);
+
   useEffect(() => {
-    if (initialTabSetRef.current) return;
+    if (initialTabSet) return;
     if (subscriptionLoading) return;
     setActiveTab(shouldShowSubscription ? 'subscription' : 'topup');
-    initialTabSetRef.current = true;
-  }, [shouldShowSubscription, subscriptionLoading]);
+    setInitialTabSet(true);
+  }, [shouldShowSubscription, subscriptionLoading, initialTabSet]);
 
   useEffect(() => {
     if (!shouldShowSubscription && activeTab !== 'topup') {
       setActiveTab('topup');
     }
   }, [shouldShowSubscription, activeTab]);
-  const topupContent = (
-    <Space vertical style={{ width: '100%' }}>
-      {/* 统计数据 */}
-      <Card
-        className='!rounded-xl w-full'
-        cover={
-          <div
-            className='relative h-30'
-            style={{
-              '--palette-primary-darkerChannel': '37 99 235',
-              backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
-              backgroundSize: 'cover',
-              backgroundPosition: 'center',
-              backgroundRepeat: 'no-repeat',
-            }}
-          >
-            <div className='relative z-10 h-full flex flex-col justify-between p-4'>
-              <div className='flex justify-between items-center'>
-                <Text strong style={{ color: 'white', fontSize: '16px' }}>
-                  {t('账户统计')}
-                </Text>
-              </div>
 
-              {/* 统计数据 */}
-              <div className='grid grid-cols-3 gap-6 mt-4'>
-                {/* 当前余额 */}
-                <div className='text-center'>
-                  <div
-                    className='text-base sm:text-2xl font-bold mb-2'
-                    style={{ color: 'white' }}
-                  >
-                    {renderQuota(userState?.user?.quota)}
-                  </div>
-                  <div className='flex items-center justify-center text-sm'>
-                    <Wallet
-                      size={14}
-                      className='mr-1'
-                      style={{ color: 'rgba(255,255,255,0.8)' }}
-                    />
-                    <Text
-                      style={{
-                        color: 'rgba(255,255,255,0.8)',
-                        fontSize: '12px',
-                      }}
-                    >
-                      {t('当前余额')}
-                    </Text>
-                  </div>
-                </div>
-
-                {/* 历史消耗 */}
-                <div className='text-center'>
-                  <div
-                    className='text-base sm:text-2xl font-bold mb-2'
-                    style={{ color: 'white' }}
-                  >
-                    {renderQuota(userState?.user?.used_quota)}
-                  </div>
-                  <div className='flex items-center justify-center text-sm'>
-                    <TrendingUp
-                      size={14}
-                      className='mr-1'
-                      style={{ color: 'rgba(255,255,255,0.8)' }}
-                    />
-                    <Text
-                      style={{
-                        color: 'rgba(255,255,255,0.8)',
-                        fontSize: '12px',
-                      }}
-                    >
-                      {t('历史消耗')}
-                    </Text>
-                  </div>
-                </div>
-
-                {/* 请求次数 */}
-                <div className='text-center'>
-                  <div
-                    className='text-base sm:text-2xl font-bold mb-2'
-                    style={{ color: 'white' }}
-                  >
-                    {userState?.user?.request_count || 0}
-                  </div>
-                  <div className='flex items-center justify-center text-sm'>
-                    <BarChart2
-                      size={14}
-                      className='mr-1'
-                      style={{ color: 'rgba(255,255,255,0.8)' }}
-                    />
-                    <Text
-                      style={{
-                        color: 'rgba(255,255,255,0.8)',
-                        fontSize: '12px',
-                      }}
-                    >
-                      {t('请求次数')}
-                    </Text>
-                  </div>
-                </div>
-              </div>
+  const renderStatHeader = () => (
+    <div
+      className='relative h-30'
+      style={{
+        '--palette-primary-darkerChannel': '37 99 235',
+        backgroundImage: `linear-gradient(0deg, rgba(var(--palette-primary-darkerChannel) / 80%), rgba(var(--palette-primary-darkerChannel) / 80%)), url('/cover-4.webp')`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    >
+      <div className='relative z-10 flex h-full flex-col justify-between p-4'>
+        <div className='flex items-center justify-between'>
+          <span className='text-base font-semibold text-white'>
+            {t('账户统计')}
+          </span>
+        </div>
+        <div className='mt-4 grid grid-cols-3 gap-6'>
+          <div className='text-center'>
+            <div className='mb-2 text-base font-bold text-white sm:text-2xl'>
+              {renderQuota(userState?.user?.quota)}
+            </div>
+            <div className='flex items-center justify-center gap-1 text-xs text-white/80'>
+              <Wallet size={14} />
+              <span>{t('当前余额')}</span>
             </div>
           </div>
-        }
-      >
-        {/* 在线充值表单 */}
-        {statusLoading ? (
-          <div className='py-8 flex justify-center'>
-            <Spin size='large' />
+          <div className='text-center'>
+            <div className='mb-2 text-base font-bold text-white sm:text-2xl'>
+              {renderQuota(userState?.user?.used_quota)}
+            </div>
+            <div className='flex items-center justify-center gap-1 text-xs text-white/80'>
+              <TrendingUp size={14} />
+              <span>{t('历史消耗')}</span>
+            </div>
           </div>
-        ) : enableOnlineTopUp ||
-          enableStripeTopUp ||
-          enableCreemTopUp ||
-          enableWaffoTopUp ||
-          enableWaffoPancakeTopUp ? (
-          <Form
-            getFormApi={(api) => (onlineFormApiRef.current = api)}
-            initValues={{ topUpCount: topUpCount }}
+          <div className='text-center'>
+            <div className='mb-2 text-base font-bold text-white sm:text-2xl'>
+              {userState?.user?.request_count || 0}
+            </div>
+            <div className='flex items-center justify-center gap-1 text-xs text-white/80'>
+              <BarChart2 size={14} />
+              <span>{t('请求次数')}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+
+  const renderActualPayLine = () => {
+    if (showAmountSkeleton) {
+      return <Skeleton className='h-5 w-32 rounded-md' />;
+    }
+    return (
+      <div className='text-sm text-muted'>
+        {t('实付金额：')}
+        <span className='text-danger'>{renderAmount()}</span>
+      </div>
+    );
+  };
+
+  const renderPayMethodButton = (payMethod) => {
+    const minTopupVal = Number(payMethod.min_topup) || 0;
+    const isStripe = payMethod.type === 'stripe';
+    const isWaffo =
+      typeof payMethod.type === 'string' &&
+      payMethod.type.startsWith('waffo:');
+    const isWaffoPancake = payMethod.type === 'waffo_pancake';
+    const disabled =
+      (!enableOnlineTopUp &&
+        !isStripe &&
+        !isWaffo &&
+        !isWaffoPancake) ||
+      (!enableStripeTopUp && isStripe) ||
+      (!enableWaffoTopUp && isWaffo) ||
+      (!enableWaffoPancakeTopUp && isWaffoPancake) ||
+      minTopupVal > Number(topUpCount || 0);
+
+    const startIcon =
+      payMethod.type === 'alipay' ? (
+        <SiAlipay size={18} color='#1677FF' />
+      ) : payMethod.type === 'wxpay' ? (
+        <SiWechat size={18} color='#07C160' />
+      ) : payMethod.type === 'stripe' ? (
+        <SiStripe size={18} color='#635BFF' />
+      ) : payMethod.icon ? (
+        <img
+          src={payMethod.icon}
+          alt={payMethod.name}
+          className='h-[18px] w-[18px] object-contain'
+        />
+      ) : payMethod.type === 'waffo_pancake' ? (
+        <CreditCard size={18} className='text-primary' />
+      ) : (
+        <CreditCard
+          size={18}
+          style={{
+            color: payMethod.color || 'var(--app-muted)',
+          }}
+        />
+      );
+
+    const buttonEl = (
+      <Button
+        key={payMethod.type}
+        variant='bordered'
+        startContent={startIcon}
+        onPress={() => preTopUp(payMethod.type)}
+        isDisabled={disabled}
+        isPending={paymentLoading && payWay === payMethod.type}
+        className='!rounded-lg !px-4 !py-2'
+      >
+        {payMethod.name}
+      </Button>
+    );
+
+    if (disabled && minTopupVal > Number(topUpCount || 0)) {
+      return (
+        <Tooltip
+          key={payMethod.type}
+          content={t('此支付方式最低充值金额为') + ' ' + minTopupVal}
+        >
+          {buttonEl}
+        </Tooltip>
+      );
+    }
+    return (
+      <React.Fragment key={payMethod.type}>{buttonEl}</React.Fragment>
+    );
+  };
+
+  const renderPresetGrid = () => (
+    <div className='space-y-2'>
+      <FieldLabel>
+        <div className='flex items-center gap-2'>
+          <span>{t('选择充值额度')}</span>
+          {(() => {
+            const { symbol, rate, type } = getCurrencyConfig();
+            if (type === 'USD') return null;
+            return (
+              <span className='text-xs font-normal text-muted'>
+                (1 $ = {rate.toFixed(2)} {symbol})
+              </span>
+            );
+          })()}
+        </div>
+      </FieldLabel>
+      <div className='grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4'>
+        {presetAmounts.map((preset, index) => {
+          const discount =
+            preset.discount ||
+            topupInfo?.discount?.[preset.value] ||
+            1.0;
+          const originalPrice = preset.value * priceRatio;
+          const discountedPrice = originalPrice * discount;
+          const hasDiscount = discount < 1.0;
+          const actualPay = discountedPrice;
+          const save = originalPrice - discountedPrice;
+
+          // Convert displayed amount and price to the active currency
+          const { symbol, rate, type } = getCurrencyConfig();
+          const statusStr = localStorage.getItem('status');
+          let usdRate = 7;
+          try {
+            if (statusStr) {
+              const s = JSON.parse(statusStr);
+              usdRate = s?.usd_exchange_rate || 7;
+            }
+          } catch (e) {}
+
+          let displayValue = preset.value;
+          let displayActualPay = actualPay;
+          let displaySave = save;
+
+          if (type === 'USD') {
+            displayActualPay = actualPay / usdRate;
+            displaySave = save / usdRate;
+          } else if (type === 'CNY') {
+            displayValue = preset.value * usdRate;
+          } else if (type === 'CUSTOM') {
+            displayValue = preset.value * rate;
+            displayActualPay = (actualPay / usdRate) * rate;
+            displaySave = (save / usdRate) * rate;
+          }
+
+          const selected = selectedPreset === preset.value;
+
+          return (
+            <button
+              key={index}
+              type='button'
+              onClick={() => {
+                selectPresetAmount(preset);
+                setTopUpCount(preset.value);
+              }}
+              className={`flex w-full cursor-pointer flex-col items-center gap-1 rounded-xl bg-background px-3 py-3 text-center transition-colors hover:border-primary ${
+                selected
+                  ? 'border-2 border-primary'
+                  : 'border border-border'
+              }`}
+            >
+              <div className='flex items-center justify-center gap-1.5 text-base font-semibold text-foreground'>
+                <Coins size={18} className='text-primary' />
+                <span>
+                  {formatLargeNumber(displayValue)} {symbol}
+                </span>
+                {hasDiscount && (
+                  <StatusChip tone='green'>
+                    {t('折').includes('off')
+                      ? ((1 - parseFloat(discount)) * 100).toFixed(1)
+                      : (discount * 10).toFixed(1)}
+                    {t('折')}
+                  </StatusChip>
+                )}
+              </div>
+              <div className='text-xs text-muted'>
+                {t('实付')} {symbol}
+                {displayActualPay.toFixed(2)}，
+                {hasDiscount
+                  ? `${t('节省')} ${symbol}${displaySave.toFixed(2)}`
+                  : `${t('节省')} ${symbol}0.00`}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+
+  const renderCreemGrid = () => (
+    <div className='space-y-2'>
+      <FieldLabel>{t('Creem 充值')}</FieldLabel>
+      <div className='grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3'>
+        {creemProducts.map((product, index) => (
+          <button
+            key={index}
+            type='button'
+            onClick={() => creemPreTopUp(product)}
+            className='cursor-pointer rounded-2xl border border-border bg-background p-4 text-center transition-all hover:border-foreground/40 hover:shadow-md'
           >
-            <div className='space-y-6'>
-              {(enableOnlineTopUp ||
-                enableStripeTopUp ||
-                enableWaffoTopUp ||
-                enableWaffoPancakeTopUp) && (
-                <Row gutter={12}>
-                  <Col xs={24} sm={24} md={24} lg={10} xl={10}>
-                    <Form.InputNumber
-                      field='topUpCount'
-                      label={t('充值数量')}
-                      disabled={
-                        !enableOnlineTopUp &&
-                        !enableStripeTopUp &&
-                        !enableWaffoTopUp &&
-                        !enableWaffoPancakeTopUp
-                      }
-                      placeholder={
-                        t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
-                      }
-                      value={topUpCount}
-                      min={minTopUp}
-                      max={999999999}
-                      step={1}
-                      precision={0}
-                      onChange={async (value) => {
-                        if (value && value >= 1) {
-                          setTopUpCount(value);
-                          setSelectedPreset(null);
-                          await getAmount(value);
-                        }
-                      }}
-                      onBlur={(e) => {
-                        const value = parseInt(e.target.value);
-                        if (!value || value < 1) {
-                          setTopUpCount(1);
-                          getAmount(1);
-                        }
-                      }}
-                      formatter={(value) => (value ? `${value}` : '')}
-                      parser={(value) =>
-                        value ? parseInt(value.replace(/[^\d]/g, '')) : 0
-                      }
-                      extraText={
-                        <Skeleton
-                          loading={showAmountSkeleton}
-                          active
-                          placeholder={
-                            <Skeleton.Title
-                              style={{
-                                width: 120,
-                                height: 20,
-                                borderRadius: 6,
-                              }}
-                            />
-                          }
-                        >
-                          <Text type='secondary' className='text-red-600'>
-                            {t('实付金额：')}
-                            <span style={{ color: 'red' }}>
-                              {renderAmount()}
-                            </span>
-                          </Text>
-                        </Skeleton>
-                      }
-                      style={{ width: '100%' }}
-                    />
-                  </Col>
-                  {regularPayMethods.length > 0 && (
-                    <Col xs={24} sm={24} md={24} lg={14} xl={14}>
-                      <Form.Slot label={t('选择支付方式')}>
-                        <Space wrap>
-                          {regularPayMethods.map((payMethod) => {
-                            const minTopupVal =
-                              Number(payMethod.min_topup) || 0;
-                            const isStripe = payMethod.type === 'stripe';
-                            const isWaffo =
-                              typeof payMethod.type === 'string' &&
-                              payMethod.type.startsWith('waffo:');
-                            const isWaffoPancake =
-                              payMethod.type === 'waffo_pancake';
-                            const disabled =
-                              (!enableOnlineTopUp &&
-                                !isStripe &&
-                                !isWaffo &&
-                                !isWaffoPancake) ||
-                              (!enableStripeTopUp && isStripe) ||
-                              (!enableWaffoTopUp && isWaffo) ||
-                              (!enableWaffoPancakeTopUp && isWaffoPancake) ||
-                              minTopupVal > Number(topUpCount || 0);
-
-                            const buttonEl = (
-                              <Button
-                                key={payMethod.type}
-                                theme='outline'
-                                type='tertiary'
-                                onClick={() => preTopUp(payMethod.type)}
-                                disabled={disabled}
-                                loading={
-                                  paymentLoading && payWay === payMethod.type
-                                }
-                                icon={
-                                  payMethod.type === 'alipay' ? (
-                                    <SiAlipay size={18} color='#1677FF' />
-                                  ) : payMethod.type === 'wxpay' ? (
-                                    <SiWechat size={18} color='#07C160' />
-                                  ) : payMethod.type === 'stripe' ? (
-                                    <SiStripe size={18} color='#635BFF' />
-                                  ) : payMethod.icon ? (
-                                    <img
-                                      src={payMethod.icon}
-                                      alt={payMethod.name}
-                                      style={{
-                                        width: 18,
-                                        height: 18,
-                                        objectFit: 'contain',
-                                      }}
-                                    />
-                                  ) : payMethod.type === 'waffo_pancake' ? (
-                                    <CreditCard
-                                      size={18}
-                                      color='var(--semi-color-primary)'
-                                    />
-                                  ) : (
-                                    <CreditCard
-                                      size={18}
-                                      color={
-                                        payMethod.color ||
-                                        'var(--semi-color-text-2)'
-                                      }
-                                    />
-                                  )
-                                }
-                                className='!rounded-lg !px-4 !py-2'
-                              >
-                                {payMethod.name}
-                              </Button>
-                            );
-
-                            return disabled &&
-                              minTopupVal > Number(topUpCount || 0) ? (
-                              <Tooltip
-                                content={
-                                  t('此支付方式最低充值金额为') +
-                                  ' ' +
-                                  minTopupVal
-                                }
-                                key={payMethod.type}
-                              >
-                                {buttonEl}
-                              </Tooltip>
-                            ) : (
-                              <React.Fragment key={payMethod.type}>
-                                {buttonEl}
-                              </React.Fragment>
-                            );
-                          })}
-                        </Space>
-                      </Form.Slot>
-                    </Col>
-                  )}
-                </Row>
-              )}
+            <div className='mb-2 text-lg font-medium text-foreground'>
+              {product.name}
+            </div>
+            <div className='mb-2 text-sm text-muted'>
+              {t('充值额度')}: {product.quota}
+            </div>
+            <div className='text-lg font-semibold text-primary'>
+              {product.currency === 'EUR' ? '€' : '$'}
+              {product.price}
+            </div>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
 
-              {(enableOnlineTopUp || enableStripeTopUp || enableWaffoTopUp) && (
-                <Form.Slot
-                  label={
-                    <div className='flex items-center gap-2'>
-                      <span>{t('选择充值额度')}</span>
-                      {(() => {
-                        const { symbol, rate, type } = getCurrencyConfig();
-                        if (type === 'USD') return null;
-
-                        return (
-                          <span
-                            style={{
-                              color: 'var(--semi-color-text-2)',
-                              fontSize: '12px',
-                              fontWeight: 'normal',
-                            }}
-                          >
-                            (1 $ = {rate.toFixed(2)} {symbol})
-                          </span>
-                        );
-                      })()}
-                    </div>
-                  }
-                >
-                  <div className='grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-2'>
-                    {presetAmounts.map((preset, index) => {
-                      const discount =
-                        preset.discount ||
-                        topupInfo?.discount?.[preset.value] ||
-                        1.0;
-                      const originalPrice = preset.value * priceRatio;
-                      const discountedPrice = originalPrice * discount;
-                      const hasDiscount = discount < 1.0;
-                      const actualPay = discountedPrice;
-                      const save = originalPrice - discountedPrice;
-
-                      // 根据当前货币类型换算显示金额和数量
-                      const { symbol, rate, type } = getCurrencyConfig();
-                      const statusStr = localStorage.getItem('status');
-                      let usdRate = 7; // 默认CNY汇率
-                      try {
-                        if (statusStr) {
-                          const s = JSON.parse(statusStr);
-                          usdRate = s?.usd_exchange_rate || 7;
-                        }
-                      } catch (e) {}
-
-                      let displayValue = preset.value; // 显示的数量
-                      let displayActualPay = actualPay;
-                      let displaySave = save;
-
-                      if (type === 'USD') {
-                        // 数量保持USD，价格从CNY转USD
-                        displayActualPay = actualPay / usdRate;
-                        displaySave = save / usdRate;
-                      } else if (type === 'CNY') {
-                        // 数量转CNY，价格已是CNY
-                        displayValue = preset.value * usdRate;
-                      } else if (type === 'CUSTOM') {
-                        // 数量和价格都转自定义货币
-                        displayValue = preset.value * rate;
-                        displayActualPay = (actualPay / usdRate) * rate;
-                        displaySave = (save / usdRate) * rate;
-                      }
-
-                      return (
-                        <Card
-                          key={index}
-                          style={{
-                            cursor: 'pointer',
-                            border:
-                              selectedPreset === preset.value
-                                ? '2px solid var(--semi-color-primary)'
-                                : '1px solid var(--semi-color-border)',
-                            height: '100%',
-                            width: '100%',
-                          }}
-                          bodyStyle={{ padding: '12px' }}
-                          onClick={() => {
-                            selectPresetAmount(preset);
-                            onlineFormApiRef.current?.setValue(
-                              'topUpCount',
-                              preset.value,
-                            );
-                          }}
-                        >
-                          <div style={{ textAlign: 'center' }}>
-                            <Typography.Title
-                              heading={6}
-                              style={{ margin: '0 0 8px 0' }}
-                            >
-                              <Coins size={18} />
-                              {formatLargeNumber(displayValue)} {symbol}
-                              {hasDiscount && (
-                                <Tag style={{ marginLeft: 4 }} color='green'>
-                                  {t('折').includes('off')
-                                    ? (
-                                        (1 - parseFloat(discount)) *
-                                        100
-                                      ).toFixed(1)
-                                    : (discount * 10).toFixed(1)}
-                                  {t('折')}
-                                </Tag>
-                              )}
-                            </Typography.Title>
-                            <div
-                              style={{
-                                color: 'var(--semi-color-text-2)',
-                                fontSize: '12px',
-                                margin: '4px 0',
-                              }}
-                            >
-                              {t('实付')} {symbol}
-                              {displayActualPay.toFixed(2)}，
-                              {hasDiscount
-                                ? `${t('节省')} ${symbol}${displaySave.toFixed(2)}`
-                                : `${t('节省')} ${symbol}0.00`}
-                            </div>
-                          </div>
-                        </Card>
-                      );
-                    })}
-                  </div>
-                </Form.Slot>
-              )}
+  const renderTopupForm = () => (
+    <>
+      {(enableOnlineTopUp ||
+        enableStripeTopUp ||
+        enableWaffoTopUp ||
+        enableWaffoPancakeTopUp) && (
+        <div className='grid grid-cols-1 gap-3 lg:grid-cols-12'>
+          <div className='space-y-2 lg:col-span-5'>
+            <FieldLabel>{t('充值数量')}</FieldLabel>
+            <input
+              type='number'
+              value={topUpCount ?? ''}
+              min={minTopUp}
+              max={999999999}
+              step={1}
+              disabled={
+                !enableOnlineTopUp &&
+                !enableStripeTopUp &&
+                !enableWaffoTopUp &&
+                !enableWaffoPancakeTopUp
+              }
+              placeholder={
+                t('充值数量，最低 ') + renderQuotaWithAmount(minTopUp)
+              }
+              onChange={async (event) => {
+                const raw = event.target.value;
+                const value = raw === '' ? '' : parseInt(raw, 10);
+                if (value && value >= 1) {
+                  setTopUpCount(value);
+                  setSelectedPreset(null);
+                  await getAmount(value);
+                } else {
+                  setTopUpCount(value);
+                }
+              }}
+              onBlur={(event) => {
+                const value = parseInt(event.target.value, 10);
+                if (!value || value < 1) {
+                  setTopUpCount(1);
+                  getAmount(1);
+                }
+              }}
+              className={inputClass}
+            />
+            <div className='min-h-[20px]'>{renderActualPayLine()}</div>
+          </div>
+          {regularPayMethods.length > 0 && (
+            <div className='space-y-2 lg:col-span-7'>
+              <FieldLabel>{t('选择支付方式')}</FieldLabel>
+              <div className='flex flex-wrap items-center gap-2'>
+                {regularPayMethods.map(renderPayMethodButton)}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
 
-              {/* Creem 充值区域 */}
-              {enableCreemTopUp && creemProducts.length > 0 && (
-                <Form.Slot label={t('Creem 充值')}>
-                  <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-3'>
-                    {creemProducts.map((product, index) => (
-                      <Card
-                        key={index}
-                        onClick={() => creemPreTopUp(product)}
-                        className='cursor-pointer !rounded-2xl transition-all hover:shadow-md border-gray-200 hover:border-gray-300'
-                        bodyStyle={{ textAlign: 'center', padding: '16px' }}
-                      >
-                        <div className='font-medium text-lg mb-2'>
-                          {product.name}
-                        </div>
-                        <div className='text-sm text-gray-600 mb-2'>
-                          {t('充值额度')}: {product.quota}
-                        </div>
-                        <div className='text-lg font-semibold text-blue-600'>
-                          {product.currency === 'EUR' ? '€' : '$'}
-                          {product.price}
-                        </div>
-                      </Card>
-                    ))}
-                  </div>
-                </Form.Slot>
-              )}
+      {(enableOnlineTopUp || enableStripeTopUp || enableWaffoTopUp) &&
+        renderPresetGrid()}
+
+      {enableCreemTopUp && creemProducts.length > 0 && renderCreemGrid()}
+    </>
+  );
+
+  const topupContent = (
+    <div className='flex w-full flex-col gap-4'>
+      {/* 统计数据 */}
+      <Card className='!w-full !rounded-xl'>
+        {renderStatHeader()}
+        <Card.Content className='space-y-6 p-4'>
+          {statusLoading ? (
+            <div className='flex justify-center py-8'>
+              <Spinner color='primary' />
             </div>
-          </Form>
-        ) : (
-          <Banner
-            type='info'
-            description={t(
-              '管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。',
-            )}
-            className='!rounded-xl'
-            closeIcon={null}
-          />
-        )}
+          ) : enableOnlineTopUp ||
+            enableStripeTopUp ||
+            enableCreemTopUp ||
+            enableWaffoTopUp ||
+            enableWaffoPancakeTopUp ? (
+            renderTopupForm()
+          ) : (
+            <InfoBanner>
+              {t(
+                '管理员未开启在线充值功能，请联系管理员开启或使用兑换码充值。',
+              )}
+            </InfoBanner>
+          )}
+        </Card.Content>
       </Card>
 
       {/* 兑换码充值 */}
-      <Card
-        className='!rounded-xl w-full'
-        title={
-          <Text type='tertiary' strong>
+      <Card className='!w-full !rounded-xl'>
+        <Card.Content className='space-y-3 p-4'>
+          <div className='text-sm font-semibold text-muted'>
             {t('兑换码充值')}
-          </Text>
-        }
-      >
-        <Form
-          getFormApi={(api) => (redeemFormApiRef.current = api)}
-          initValues={{ redemptionCode: redemptionCode }}
-        >
-          <Form.Input
-            field='redemptionCode'
-            noLabel={true}
-            placeholder={t('请输入兑换码')}
-            value={redemptionCode}
-            onChange={(value) => setRedemptionCode(value)}
-            prefix={<IconGift />}
-            suffix={
-              <div className='flex items-center gap-2'>
-                <Button
-                  type='primary'
-                  theme='solid'
-                  onClick={topUp}
-                  loading={isSubmitting}
-                >
-                  {t('兑换额度')}
-                </Button>
-              </div>
-            }
-            showClear
-            style={{ width: '100%' }}
-            extraText={
-              topUpLink && (
-                <Text type='tertiary'>
-                  {t('在找兑换码？')}
-                  <Text
-                    type='secondary'
-                    underline
-                    className='cursor-pointer'
-                    onClick={openTopUpLink}
-                  >
-                    {t('购买兑换码')}
-                  </Text>
-                </Text>
-              )
-            }
-          />
-        </Form>
+          </div>
+          <div className='relative'>
+            <Gift
+              size={16}
+              className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+            />
+            <input
+              type='text'
+              value={redemptionCode || ''}
+              onChange={(event) => setRedemptionCode(event.target.value)}
+              placeholder={t('请输入兑换码')}
+              className={`${inputClass} pl-9 pr-[120px]`}
+            />
+            <div className='absolute right-2 top-1/2 -translate-y-1/2'>
+              <Button
+                color='primary'
+                size='sm'
+                isPending={isSubmitting}
+                onPress={topUp}
+              >
+                {t('兑换额度')}
+              </Button>
+            </div>
+          </div>
+          {topUpLink && (
+            <div className='text-xs text-muted'>
+              {t('在找兑换码？')}
+              <button
+                type='button'
+                onClick={openTopUpLink}
+                className='ml-1 cursor-pointer underline-offset-2 hover:underline'
+              >
+                {t('购买兑换码')}
+              </button>
+            </div>
+          )}
+        </Card.Content>
       </Card>
-    </Space>
+    </div>
   );
 
+  const tabs = [
+    {
+      key: 'subscription',
+      label: t('订阅套餐'),
+      icon: <Sparkles size={16} />,
+    },
+    {
+      key: 'topup',
+      label: t('额度充值'),
+      icon: <Wallet size={16} />,
+    },
+  ];
+
   return (
-    <Card className='!rounded-2xl shadow-sm border-0'>
-      {/* 卡片头部 */}
-      <div className='flex items-center justify-between mb-4'>
-        <div className='flex items-center'>
-          <Avatar size='small' color='blue' className='mr-3 shadow-md'>
-            <CreditCard size={16} />
-          </Avatar>
-          <div>
-            <Typography.Text className='text-lg font-medium'>
-              {t('账户充值')}
-            </Typography.Text>
-            <div className='text-xs'>{t('多种充值方式，安全便捷')}</div>
+    <Card className='!rounded-2xl border-0 shadow-sm'>
+      <Card.Content className='space-y-4 p-5'>
+        {/* 卡片头部 */}
+        <div className='flex items-center justify-between'>
+          <div className='flex items-center gap-2'>
+            <div className='flex h-9 w-9 items-center justify-center rounded-full bg-primary/10 text-primary shadow-md'>
+              <CreditCard size={16} />
+            </div>
+            <div>
+              <div className='text-base font-semibold text-foreground'>
+                {t('账户充值')}
+              </div>
+              <div className='text-xs text-muted'>
+                {t('多种充值方式，安全便捷')}
+              </div>
+            </div>
           </div>
+          <Button
+            color='primary'
+            startContent={<Receipt size={16} />}
+            onPress={onOpenHistory}
+          >
+            {t('账单')}
+          </Button>
         </div>
-        <Button
-          icon={<Receipt size={16} />}
-          theme='solid'
-          onClick={onOpenHistory}
-        >
-          {t('账单')}
-        </Button>
-      </div>
 
-      {shouldShowSubscription ? (
-        <Tabs type='card' activeKey={activeTab} onChange={setActiveTab}>
-          <TabPane
-            tab={
-              <div className='flex items-center gap-2'>
-                <Sparkles size={16} />
-                {t('订阅套餐')}
-              </div>
-            }
-            itemKey='subscription'
-          >
+        {shouldShowSubscription ? (
+          <>
+            <div className='inline-flex overflow-hidden rounded-xl border border-border'>
+              {tabs.map((tab) => {
+                const active = tab.key === activeTab;
+                return (
+                  <button
+                    key={tab.key}
+                    type='button'
+                    onClick={() => setActiveTab(tab.key)}
+                    className={`flex items-center gap-2 px-4 py-2 text-sm font-medium transition-colors ${
+                      active
+                        ? 'bg-foreground text-background'
+                        : 'bg-background text-muted hover:bg-surface-secondary'
+                    }`}
+                  >
+                    {tab.icon}
+                    <span>{tab.label}</span>
+                  </button>
+                );
+              })}
+            </div>
             <div className='py-2'>
-              <SubscriptionPlansCard
-                t={t}
-                loading={subscriptionLoading}
-                plans={subscriptionPlans}
-                payMethods={payMethods}
-                enableOnlineTopUp={enableOnlineTopUp}
-                enableStripeTopUp={enableStripeTopUp}
-                enableCreemTopUp={enableCreemTopUp}
-                billingPreference={billingPreference}
-                onChangeBillingPreference={onChangeBillingPreference}
-                activeSubscriptions={activeSubscriptions}
-                allSubscriptions={allSubscriptions}
-                reloadSubscriptionSelf={reloadSubscriptionSelf}
-                withCard={false}
-              />
+              {activeTab === 'subscription' ? (
+                <SubscriptionPlansCard
+                  t={t}
+                  loading={subscriptionLoading}
+                  plans={subscriptionPlans}
+                  payMethods={payMethods}
+                  enableOnlineTopUp={enableOnlineTopUp}
+                  enableStripeTopUp={enableStripeTopUp}
+                  enableCreemTopUp={enableCreemTopUp}
+                  billingPreference={billingPreference}
+                  onChangeBillingPreference={onChangeBillingPreference}
+                  activeSubscriptions={activeSubscriptions}
+                  allSubscriptions={allSubscriptions}
+                  reloadSubscriptionSelf={reloadSubscriptionSelf}
+                  withCard={false}
+                />
+              ) : (
+                topupContent
+              )}
             </div>
-          </TabPane>
-          <TabPane
-            tab={
-              <div className='flex items-center gap-2'>
-                <Wallet size={16} />
-                {t('额度充值')}
-              </div>
-            }
-            itemKey='topup'
-          >
-            <div className='py-2'>{topupContent}</div>
-          </TabPane>
-        </Tabs>
-      ) : (
-        topupContent
-      )}
+          </>
+        ) : (
+          topupContent
+        )}
+      </Card.Content>
     </Card>
   );
 };
diff --git a/web/src/components/topup/SubscriptionPlansCard.jsx b/web/src/components/topup/SubscriptionPlansCard.jsx
index 9c50828372b..0bfad9ed5d5 100644
--- a/web/src/components/topup/SubscriptionPlansCard.jsx
+++ b/web/src/components/topup/SubscriptionPlansCard.jsx
@@ -18,18 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useMemo, useState } from 'react';
-import {
-  Badge,
-  Button,
-  Card,
-  Divider,
-  Select,
-  Skeleton,
-  Space,
-  Tag,
-  Tooltip,
-  Typography,
-} from '@douyinfe/semi-ui';
+import { Badge, Button, Card, Chip, Separator, Tooltip } from '@heroui/react';
 import { API, showError, showSuccess, renderQuota } from '../../helpers';
 import { getCurrencyConfig } from '../../helpers/render';
 import { RefreshCw, Sparkles } from 'lucide-react';
@@ -39,16 +28,14 @@ import {
   formatSubscriptionResetPeriod,
 } from '../../helpers/subscriptionFormat';
 
-const { Text } = Typography;
-
-// 过滤易支付方式
+// Filter EPay methods.
 function getEpayMethods(payMethods = []) {
   return (payMethods || []).filter(
     (m) => m?.type && m.type !== 'stripe' && m.type !== 'creem',
   );
 }
 
-// 提交易支付表单
+// Submit EPay form.
 function submitEpayForm({ url, params }) {
   const form = document.createElement('form');
   form.action = url;
@@ -198,7 +185,30 @@ const SubscriptionPlansCard = ({
     }
   };
 
-  // 当前订阅信息 - 支持多个订阅
+  const SkeletonLine = ({ className = '' }) => (
+    <div className={`animate-pulse rounded bg-surface-secondary ${className}`} />
+  );
+
+  const StatusChip = ({ children, tone = 'default', dot = false }) => {
+    const colorMap = {
+      default: 'default',
+      success: 'success',
+      purple: 'secondary',
+    };
+
+    return (
+      <Chip size='sm' color={colorMap[tone] || 'default'} variant='secondary'>
+        {dot ? <Badge dot type='success' className='mr-1' /> : null}
+        {children}
+      </Chip>
+    );
+  };
+
+  const SectionSeparator = ({ className = '' }) => (
+    <Separator className={`my-3 ${className}`} />
+  );
+
+  // Current subscription info, supports multiple subscriptions.
   const hasActiveSubscription = activeSubscriptions.length > 0;
   const hasAnySubscription = allSubscriptions.length > 0;
   const disableSubscriptionPreference = !hasActiveSubscription;
@@ -235,7 +245,7 @@ const SubscriptionPlansCard = ({
   const getPlanPurchaseCount = (planId) =>
     planPurchaseCountMap.get(planId) || 0;
 
-  // 计算单个订阅的剩余天数
+  // Calculate remaining days for one subscription.
   const getRemainingDays = (sub) => {
     if (!sub?.subscription?.end_time) return 0;
     const now = Date.now() / 1000;
@@ -243,7 +253,7 @@ const SubscriptionPlansCard = ({
     return Math.max(0, Math.ceil(remaining / 86400));
   };
 
-  // 计算单个订阅的使用进度
+  // Calculate usage progress for one subscription.
   const getUsagePercent = (sub) => {
     const total = Number(sub?.subscription?.amount_total || 0);
     const used = Number(sub?.subscription?.amount_used || 0);
@@ -253,130 +263,120 @@ const SubscriptionPlansCard = ({
 
   const cardContent = (
     <>
-      {/* 卡片头部 */}
+      {/* Card content */}
       {loading ? (
         <div className='space-y-4'>
-          {/* 我的订阅骨架屏 */}
-          <Card className='!rounded-xl w-full' bodyStyle={{ padding: '12px' }}>
+          {/* My subscription skeleton */}
+          <Card className='!rounded-xl w-full'>
+            <Card.Content className='p-3'>
             <div className='flex items-center justify-between mb-3'>
-              <Skeleton.Title active style={{ width: 100, height: 20 }} />
-              <Skeleton.Button active style={{ width: 24, height: 24 }} />
+              <SkeletonLine className='h-5 w-24' />
+              <SkeletonLine className='h-6 w-6 rounded-full' />
             </div>
             <div className='space-y-2'>
-              <Skeleton.Paragraph active rows={2} />
+              <SkeletonLine className='h-4 w-full' />
+              <SkeletonLine className='h-4 w-2/3' />
             </div>
+            </Card.Content>
           </Card>
-          {/* 套餐列表骨架屏 */}
+          {/* Plan list skeleton */}
           <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 w-full px-1'>
             {[1, 2, 3].map((i) => (
-              <Card
-                key={i}
-                className='!rounded-xl w-full h-full'
-                bodyStyle={{ padding: 16 }}
-              >
-                <Skeleton.Title
-                  active
-                  style={{ width: '60%', height: 24, marginBottom: 8 }}
-                />
-                <Skeleton.Paragraph
-                  active
-                  rows={1}
-                  style={{ marginBottom: 12 }}
-                />
+              <Card key={i} className='!rounded-xl w-full h-full'>
+                <Card.Content className='p-4'>
+                <SkeletonLine className='mb-2 h-6 w-3/5' />
+                <SkeletonLine className='mb-3 h-4 w-4/5' />
                 <div className='text-center py-4'>
-                  <Skeleton.Title
-                    active
-                    style={{ width: '40%', height: 32, margin: '0 auto' }}
-                  />
+                  <SkeletonLine className='mx-auto h-8 w-2/5' />
+                </div>
+                <div className='mt-3 space-y-2'>
+                  <SkeletonLine className='h-4 w-full' />
+                  <SkeletonLine className='h-4 w-4/5' />
+                  <SkeletonLine className='h-4 w-2/3' />
                 </div>
-                <Skeleton.Paragraph active rows={3} style={{ marginTop: 12 }} />
-                <Skeleton.Button
-                  active
-                  block
-                  style={{ marginTop: 16, height: 32 }}
-                />
+                <SkeletonLine className='mt-4 h-8 w-full' />
+                </Card.Content>
               </Card>
             ))}
           </div>
         </div>
       ) : (
-        <Space vertical style={{ width: '100%' }} spacing={8}>
-          {/* 当前订阅状态 */}
-          <Card className='!rounded-xl w-full' bodyStyle={{ padding: '12px' }}>
+        <div className='flex w-full flex-col gap-2'>
+          {/* Current subscription status */}
+          <Card className='!rounded-xl w-full'>
+            <Card.Content className='p-3'>
             <div className='flex items-center justify-between mb-2 gap-3'>
               <div className='flex items-center gap-2 flex-1 min-w-0'>
-                <Text strong>{t('我的订阅')}</Text>
+                <span className='font-semibold text-foreground'>
+                  {t('我的订阅')}
+                </span>
                 {hasActiveSubscription ? (
-                  <Tag
-                    color='white'
-                    size='small'
-                    shape='circle'
-                    prefixIcon={<Badge dot type='success' />}
-                  >
+                  <StatusChip tone='success' dot>
                     {activeSubscriptions.length} {t('个生效中')}
-                  </Tag>
+                  </StatusChip>
                 ) : (
-                  <Tag color='white' size='small' shape='circle'>
-                    {t('无生效')}
-                  </Tag>
+                  <StatusChip>{t('无生效')}</StatusChip>
                 )}
                 {allSubscriptions.length > activeSubscriptions.length && (
-                  <Tag color='white' size='small' shape='circle'>
+                  <StatusChip>
                     {allSubscriptions.length - activeSubscriptions.length}{' '}
                     {t('个已过期')}
-                  </Tag>
+                  </StatusChip>
                 )}
               </div>
               <div className='flex items-center gap-2'>
-                <Select
+                <select
                   value={displayBillingPreference}
-                  onChange={onChangeBillingPreference}
-                  size='small'
-                  optionList={[
-                    {
-                      value: 'subscription_first',
-                      label: disableSubscriptionPreference
-                        ? `${t('优先订阅')} (${t('无生效')})`
-                        : t('优先订阅'),
-                      disabled: disableSubscriptionPreference,
-                    },
-                    { value: 'wallet_first', label: t('优先钱包') },
-                    {
-                      value: 'subscription_only',
-                      label: disableSubscriptionPreference
-                        ? `${t('仅用订阅')} (${t('无生效')})`
-                        : t('仅用订阅'),
-                      disabled: disableSubscriptionPreference,
-                    },
-                    { value: 'wallet_only', label: t('仅用钱包') },
-                  ]}
-                />
-                <Button
-                  size='small'
-                  theme='light'
-                  type='tertiary'
-                  icon={
-                    <RefreshCw
-                      size={12}
-                      className={refreshing ? 'animate-spin' : ''}
-                    />
+                  onChange={(event) =>
+                    onChangeBillingPreference?.(event.target.value)
                   }
-                  onClick={handleRefresh}
-                  loading={refreshing}
-                />
+                  className='h-8 rounded-lg border border-border bg-background px-2 text-xs text-foreground outline-none transition focus:border-accent'
+                >
+                  <option
+                    value='subscription_first'
+                    disabled={disableSubscriptionPreference}
+                  >
+                    {disableSubscriptionPreference
+                      ? `${t('优先订阅')} (${t('无生效')})`
+                      : t('优先订阅')}
+                  </option>
+                  <option value='wallet_first'>{t('优先钱包')}</option>
+                  <option
+                    value='subscription_only'
+                    disabled={disableSubscriptionPreference}
+                  >
+                    {disableSubscriptionPreference
+                      ? `${t('仅用订阅')} (${t('无生效')})`
+                      : t('仅用订阅')}
+                  </option>
+                  <option value='wallet_only'>{t('仅用钱包')}</option>
+                </select>
+                <Button
+                  isIconOnly
+                  size='sm'
+                  variant='ghost'
+                  onPress={handleRefresh}
+                  isPending={refreshing}
+                  aria-label={t('刷新')}
+                >
+                  <RefreshCw
+                    size={12}
+                    className={refreshing ? 'animate-spin' : ''}
+                  />
+                </Button>
               </div>
             </div>
             {disableSubscriptionPreference && isSubscriptionPreference && (
-              <Text type='tertiary' size='small'>
+              <span className='text-sm text-muted'>
                 {t('已保存偏好为')}
                 {subscriptionPreferenceLabel}
                 {t('，当前无生效订阅，将自动使用钱包')}
-              </Text>
+              </span>
             )}
 
             {hasAnySubscription ? (
               <>
-                <Divider margin={8} />
+                <SectionSeparator className='my-2' />
                 <div className='max-h-64 overflow-y-auto pr-1 semi-table-body'>
                   {allSubscriptions.map((sub, subIndex) => {
                     const isLast = subIndex === allSubscriptions.length - 1;
@@ -399,7 +399,7 @@ const SubscriptionPlansCard = ({
 
                     return (
                       <div key={subscription?.id || subIndex}>
-                        {/* 订阅概要 */}
+                        {/* Subscription summary */}
                         <div className='flex items-center justify-between text-xs mb-2'>
                           <div className='flex items-center gap-2'>
                             <span className='font-medium'>
@@ -408,31 +408,22 @@ const SubscriptionPlansCard = ({
                                 : `${t('订阅')} #${subscription?.id}`}
                             </span>
                             {isActive ? (
-                              <Tag
-                                color='white'
-                                size='small'
-                                shape='circle'
-                                prefixIcon={<Badge dot type='success' />}
-                              >
+                              <StatusChip tone='success' dot>
                                 {t('生效')}
-                              </Tag>
+                              </StatusChip>
                             ) : isCancelled ? (
-                              <Tag color='white' size='small' shape='circle'>
-                                {t('已作废')}
-                              </Tag>
+                              <StatusChip>{t('已作废')}</StatusChip>
                             ) : (
-                              <Tag color='white' size='small' shape='circle'>
-                                {t('已过期')}
-                              </Tag>
+                              <StatusChip>{t('已过期')}</StatusChip>
                             )}
                           </div>
                           {isActive && (
-                            <span className='text-gray-500'>
+                            <span className='text-muted'>
                               {t('剩余')} {remainDays} {t('天')}
                             </span>
                           )}
                         </div>
-                        <div className='text-xs text-gray-500 mb-2'>
+                        <div className='text-xs text-muted mb-2'>
                           {isActive
                             ? t('至')
                             : isCancelled
@@ -443,14 +434,14 @@ const SubscriptionPlansCard = ({
                           ).toLocaleString()}
                         </div>
                         {isActive && subscription?.next_reset_time > 0 && (
-                          <div className='text-xs text-gray-500 mb-2'>
+                          <div className='text-xs text-muted mb-2'>
                             {t('下一次重置')}:{' '}
                             {new Date(
                               subscription.next_reset_time * 1000,
                             ).toLocaleString()}
                           </div>
                         )}
-                        <div className='text-xs text-gray-500 mb-2'>
+                        <div className='text-xs text-muted mb-2'>
                           {t('总额度')}:{' '}
                           {totalAmount > 0 ? (
                             <Tooltip
@@ -471,20 +462,21 @@ const SubscriptionPlansCard = ({
                             </span>
                           )}
                         </div>
-                        {!isLast && <Divider margin={12} />}
+                        {!isLast && <SectionSeparator />}
                       </div>
                     );
                   })}
                 </div>
               </>
             ) : (
-              <div className='text-xs text-gray-500'>
+              <div className='text-xs text-muted'>
                 {t('购买套餐后即可享受模型权益')}
               </div>
             )}
+            </Card.Content>
           </Card>
 
-          {/* 可购买套餐 - 标准定价卡片 */}
+          {/* Purchasable plans */}
           {plans.length > 0 ? (
             <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-5 w-full px-1'>
               {plans.map((p, index) => {
@@ -531,40 +523,30 @@ const SubscriptionPlansCard = ({
                     className={`!rounded-xl transition-all hover:shadow-lg w-full h-full ${
                       isPopular ? 'ring-2 ring-purple-500' : ''
                     }`}
-                    bodyStyle={{ padding: 0 }}
                   >
-                    <div className='p-4 h-full flex flex-col'>
-                      {/* 推荐标签 */}
+                    <Card.Content className='p-4 h-full flex flex-col'>
+                      {/* Recommended label */}
                       {isPopular && (
                         <div className='mb-2'>
-                          <Tag color='purple' shape='circle' size='small'>
+                          <StatusChip tone='purple'>
                             <Sparkles size={10} className='mr-1' />
                             {t('推荐')}
-                          </Tag>
+                          </StatusChip>
                         </div>
                       )}
-                      {/* 套餐名称 */}
+                      {/* Plan name */}
                       <div className='mb-3'>
-                        <Typography.Title
-                          heading={5}
-                          ellipsis={{ rows: 1, showTooltip: true }}
-                          style={{ margin: 0 }}
-                        >
+                        <h5 className='m-0 truncate text-xl font-semibold text-foreground'>
                           {plan?.title || t('订阅套餐')}
-                        </Typography.Title>
+                        </h5>
                         {plan?.subtitle && (
-                          <Text
-                            type='tertiary'
-                            size='small'
-                            ellipsis={{ rows: 1, showTooltip: true }}
-                            style={{ display: 'block' }}
-                          >
+                          <span className='block truncate text-sm text-muted'>
                             {plan.subtitle}
-                          </Text>
+                          </span>
                         )}
                       </div>
 
-                      {/* 价格区域 */}
+                      {/* Price */}
                       <div className='py-2'>
                         <div className='flex items-baseline justify-start'>
                           <span className='text-xl font-bold text-purple-600'>
@@ -576,11 +558,11 @@ const SubscriptionPlansCard = ({
                         </div>
                       </div>
 
-                      {/* 套餐权益描述 */}
+                      {/* Plan benefits */}
                       <div className='flex flex-col items-start gap-1 pb-2'>
                         {planBenefits.map((item) => {
                           const content = (
-                            <div className='flex items-center gap-2 text-xs text-gray-500'>
+                            <div className='flex items-center gap-2 text-xs text-muted'>
                               <Badge dot type='tertiary' />
                               <span>{item.label}</span>
                             </div>
@@ -606,9 +588,9 @@ const SubscriptionPlansCard = ({
                       </div>
 
                       <div className='mt-auto'>
-                        <Divider margin={12} />
+                        <SectionSeparator />
 
-                        {/* 购买按钮 */}
+                        {/* Purchase button */}
                         {(() => {
                           const count = getPlanPurchaseCount(p?.plan?.id);
                           const reached = limit > 0 && count >= limit;
@@ -617,11 +599,10 @@ const SubscriptionPlansCard = ({
                             : '';
                           const buttonEl = (
                             <Button
-                              theme='outline'
-                              type='primary'
-                              block
-                              disabled={reached}
-                              onClick={() => {
+                              variant='outline'
+                              fullWidth
+                              isDisabled={reached}
+                              onPress={() => {
                                 if (!reached) openBuy(p);
                               }}
                             >
@@ -637,17 +618,17 @@ const SubscriptionPlansCard = ({
                           );
                         })()}
                       </div>
-                    </div>
+                    </Card.Content>
                   </Card>
                 );
               })}
             </div>
           ) : (
-            <div className='text-center text-gray-400 text-sm py-4'>
+            <div className='text-center text-muted text-sm py-4'>
               {t('暂无可购买套餐')}
             </div>
           )}
-        </Space>
+        </div>
       )}
     </>
   );
@@ -660,7 +641,7 @@ const SubscriptionPlansCard = ({
         <div className='space-y-3'>{cardContent}</div>
       )}
 
-      {/* 购买确认弹窗 */}
+      {/* Purchase confirmation modal */}
       <SubscriptionPurchaseModal
         t={t}
         visible={open}
diff --git a/web/src/components/topup/index.jsx b/web/src/components/topup/index.jsx
index 1c23ca928c1..cd5c165337d 100644
--- a/web/src/components/topup/index.jsx
+++ b/web/src/components/topup/index.jsx
@@ -19,6 +19,17 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useEffect, useState, useContext, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
+import {
+  Button,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import {
   API,
   showError,
@@ -29,7 +40,6 @@ import {
   copy,
   getQuotaPerUnit,
 } from '../../helpers';
-import { Modal, Toast } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 import { UserContext } from '../../context/User';
 import { StatusContext } from '../../context/Status';
@@ -103,6 +113,12 @@ const TopUp = () => {
     useState('subscription_first');
   const [activeSubscriptions, setActiveSubscriptions] = useState([]);
   const [allSubscriptions, setAllSubscriptions] = useState([]);
+  const creemModalState = useOverlayState({
+    isOpen: creemOpen,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleCreemCancel();
+    },
+  });
 
   // 预设充值额度选项
   const [presetAmounts, setPresetAmounts] = useState([]);
@@ -120,7 +136,7 @@ const TopUp = () => {
       ...method,
       type: `waffo:${index}`,
       min_topup: waffoMinTopUp,
-      color: method.color || 'rgba(var(--semi-primary-5), 1)',
+      color: method.color || 'var(--app-primary)',
     })),
   ];
 
@@ -160,11 +176,7 @@ const TopUp = () => {
       const { success, message, data } = res.data;
       if (success) {
         showSuccess(t('兑换成功！'));
-        Modal.success({
-          title: t('兑换成功！'),
-          content: t('成功兑换额度：') + renderQuota(data),
-          centered: true,
-        });
+        showInfo(t('成功兑换额度：') + renderQuota(data));
         if (userState.user) {
           const updatedUser = {
             ...userState.user,
@@ -426,7 +438,7 @@ const TopUp = () => {
           setAmount(parseFloat(data));
         } else {
           setAmount(0);
-          Toast.error({ content: '错误：' + data, id: 'getAmount' });
+          showError('错误：' + data);
         }
       } else {
         showError(res);
@@ -489,7 +501,7 @@ const TopUp = () => {
           setAmount(parseFloat(data));
         } else {
           setAmount(0);
-          Toast.error({ content: '错误：' + data, id: 'getAmount' });
+          showError('错误：' + data);
         }
       } else {
         showError(res);
@@ -614,13 +626,13 @@ const TopUp = () => {
 
               if (!method.color) {
                 if (method.type === 'alipay') {
-                  method.color = 'rgba(var(--semi-blue-5), 1)';
+                  method.color = 'var(--app-primary)';
                 } else if (method.type === 'wxpay') {
-                  method.color = 'rgba(var(--semi-green-5), 1)';
+                  method.color = 'var(--app-success)';
                 } else if (method.type === 'stripe') {
-                  method.color = 'rgba(var(--semi-purple-5), 1)';
+                  method.color = '#9333ea';
                 } else {
-                  method.color = 'rgba(var(--semi-primary-5), 1)';
+                  method.color = 'var(--app-primary)';
                 }
               }
               return method;
@@ -790,7 +802,7 @@ const TopUp = () => {
           setAmount(parseFloat(data));
         } else {
           setAmount(0);
-          Toast.error({ content: '错误：' + data, id: 'getAmount' });
+          showError('错误：' + data);
         }
       } else {
         showError(res);
@@ -816,7 +828,7 @@ const TopUp = () => {
           setAmount(parseFloat(data));
         } else {
           setAmount(0);
-          Toast.error({ content: '错误：' + data, id: 'getAmount' });
+          showError('错误：' + data);
         }
       } else {
         showError(res);
@@ -913,31 +925,46 @@ const TopUp = () => {
       />
 
       {/* Creem 充值确认模态框 */}
-      <Modal
-        title={t('确定要充值 $')}
-        visible={creemOpen}
-        onOk={onlineCreemTopUp}
-        onCancel={handleCreemCancel}
-        maskClosable={false}
-        size='small'
-        centered
-        confirmLoading={confirmLoading}
-      >
-        {selectedCreemProduct && (
-          <>
-            <p>
-              {t('产品名称')}：{selectedCreemProduct.name}
-            </p>
-            <p>
-              {t('价格')}：{selectedCreemProduct.currency === 'EUR' ? '€' : '$'}
-              {selectedCreemProduct.price}
-            </p>
-            <p>
-              {t('充值额度')}：{selectedCreemProduct.quota}
-            </p>
-            <p>{t('是否确认充值？')}</p>
-          </>
-        )}
+      <Modal state={creemModalState}>
+        <ModalBackdrop isDismissable={false} variant='blur'>
+          <ModalContainer size='sm' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {t('确定要充值 $')}
+              </ModalHeader>
+              <ModalBody className='space-y-2 px-6 py-5 text-sm text-muted'>
+                {selectedCreemProduct && (
+                  <>
+                    <p>
+                      {t('产品名称')}：{selectedCreemProduct.name}
+                    </p>
+                    <p>
+                      {t('价格')}：
+                      {selectedCreemProduct.currency === 'EUR' ? '€' : '$'}
+                      {selectedCreemProduct.price}
+                    </p>
+                    <p>
+                      {t('充值额度')}：{selectedCreemProduct.quota}
+                    </p>
+                    <p>{t('是否确认充值？')}</p>
+                  </>
+                )}
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='ghost' onPress={handleCreemCancel}>
+                  {t('取消')}
+                </Button>
+                <Button
+                  isPending={confirmLoading}
+                  variant='primary'
+                  onPress={onlineCreemTopUp}
+                >
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
       {/* 主布局区域 */}
diff --git a/web/src/components/topup/modals/PaymentConfirmModal.jsx b/web/src/components/topup/modals/PaymentConfirmModal.jsx
index f1c53c1219a..efa7eeef279 100644
--- a/web/src/components/topup/modals/PaymentConfirmModal.jsx
+++ b/web/src/components/topup/modals/PaymentConfirmModal.jsx
@@ -18,12 +18,22 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Typography, Card, Skeleton } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Card,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Skeleton,
+  useOverlayState,
+} from '@heroui/react';
 import { SiAlipay, SiWechat, SiStripe } from 'react-icons/si';
 import { CreditCard } from 'lucide-react';
 
-const { Text } = Typography;
-
 const PaymentConfirmModal = ({
   t,
   open,
@@ -44,178 +54,141 @@ const PaymentConfirmModal = ({
     discountRate && discountRate > 0 && discountRate < 1 && amountNumber > 0;
   const originalAmount = hasDiscount ? amountNumber / discountRate : 0;
   const discountAmount = hasDiscount ? originalAmount - amountNumber : 0;
+  const modalState = useOverlayState({
+    isOpen: open,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleCancel();
+    },
+  });
+
+  const payMethod = payMethods.find((method) => method.type === payWay);
+  const iconColor = payMethod?.color || 'currentColor';
+  const methodName =
+    payMethod?.name ||
+    (payWay === 'alipay' ? t('支付宝') : payWay === 'stripe' ? 'Stripe' : t('微信'));
+  const methodIcon = payMethod ? (
+    payMethod.type === 'alipay' ? (
+      <SiAlipay size={16} color='#1677FF' />
+    ) : payMethod.type === 'wxpay' ? (
+      <SiWechat size={16} color='#07C160' />
+    ) : payMethod.type === 'stripe' ? (
+      <SiStripe size={16} color='#635BFF' />
+    ) : payMethod.icon ? (
+      <img
+        src={payMethod.icon}
+        alt={payMethod.name}
+        className='h-4 w-4 object-contain'
+      />
+    ) : (
+      <CreditCard size={16} color={iconColor} />
+    )
+  ) : payWay === 'alipay' ? (
+    <SiAlipay size={16} color='#1677FF' />
+  ) : payWay === 'stripe' ? (
+    <SiStripe size={16} color='#635BFF' />
+  ) : (
+    <SiWechat size={16} color='#07C160' />
+  );
+
   return (
-    <Modal
-      title={
-        <div className='flex items-center'>
-          <CreditCard className='mr-2' size={18} />
-          {t('充值确认')}
-        </div>
-      }
-      visible={open}
-      onOk={onlineTopUp}
-      onCancel={handleCancel}
-      maskClosable={false}
-      size='small'
-      centered
-      confirmLoading={confirmLoading}
-    >
-      <div className='space-y-4'>
-        <Card className='!rounded-xl !border-0 bg-slate-50 dark:bg-slate-800'>
-          <div className='space-y-3'>
-            <div className='flex justify-between items-center'>
-              <Text strong className='text-slate-700 dark:text-slate-200'>
-                {t('充值数量')}：
-              </Text>
-              <Text className='text-slate-900 dark:text-slate-100'>
-                {renderQuotaWithAmount(topUpCount)}
-              </Text>
-            </div>
-            <div className='flex justify-between items-center'>
-              <Text strong className='text-slate-700 dark:text-slate-200'>
-                {t('实付金额')}：
-              </Text>
-              {amountLoading ? (
-                <Skeleton.Title style={{ width: '60px', height: '16px' }} />
-              ) : (
-                <div className='flex items-baseline space-x-2'>
-                  <Text strong className='font-bold' style={{ color: 'red' }}>
-                    {renderAmount()}
-                  </Text>
-                  {hasDiscount && (
-                    <Text size='small' className='text-rose-500'>
-                      {Math.round(discountRate * 100)}%
-                    </Text>
-                  )}
-                </div>
-              )}
-            </div>
-            {hasDiscount && !amountLoading && (
-              <>
-                <div className='flex justify-between items-center'>
-                  <Text className='text-slate-500 dark:text-slate-400'>
-                    {t('原价')}：
-                  </Text>
-                  <Text delete className='text-slate-500 dark:text-slate-400'>
-                    {`${originalAmount.toFixed(2)} ${t('元')}`}
-                  </Text>
-                </div>
-                <div className='flex justify-between items-center'>
-                  <Text className='text-slate-500 dark:text-slate-400'>
-                    {t('优惠')}：
-                  </Text>
-                  <Text className='text-emerald-600 dark:text-emerald-400'>
-                    {`- ${discountAmount.toFixed(2)} ${t('元')}`}
-                  </Text>
-                </div>
-              </>
-            )}
-            <div className='flex justify-between items-center'>
-              <Text strong className='text-slate-700 dark:text-slate-200'>
-                {t('支付方式')}：
-              </Text>
-              <div className='flex items-center'>
-                {(() => {
-                  const payMethod = payMethods.find(
-                    (method) => method.type === payWay,
-                  );
-                  if (payMethod) {
-                    return (
-                      <>
-                        {payMethod.type === 'alipay' ? (
-                          <SiAlipay
-                            className='mr-2'
-                            size={16}
-                            color='#1677FF'
-                          />
-                        ) : payMethod.type === 'wxpay' ? (
-                          <SiWechat
-                            className='mr-2'
-                            size={16}
-                            color='#07C160'
-                          />
-                        ) : payMethod.type === 'stripe' ? (
-                          <SiStripe
-                            className='mr-2'
-                            size={16}
-                            color='#635BFF'
-                          />
-                        ) : payMethod.icon ? (
-                          <img
-                            src={payMethod.icon}
-                            alt={payMethod.name}
-                            className='mr-2'
-                            style={{
-                              width: 16,
-                              height: 16,
-                              objectFit: 'contain',
-                            }}
-                          />
-                        ) : (
-                          <CreditCard
-                            className='mr-2'
-                            size={16}
-                            color={
-                              payMethod.color || 'var(--semi-color-text-2)'
-                            }
-                          />
-                        )}
-                        <Text className='text-slate-900 dark:text-slate-100'>
-                          {payMethod.name}
-                        </Text>
-                      </>
-                    );
-                  } else {
-                    // 默认充值方式
-                    if (payWay === 'alipay') {
-                      return (
-                        <>
-                          <SiAlipay
-                            className='mr-2'
-                            size={16}
-                            color='#1677FF'
-                          />
-                          <Text className='text-slate-900 dark:text-slate-100'>
-                            {t('支付宝')}
-                          </Text>
-                        </>
-                      );
-                    } else if (payWay === 'stripe') {
-                      return (
-                        <>
-                          <SiStripe
-                            className='mr-2'
-                            size={16}
-                            color='#635BFF'
-                          />
-                          <Text className='text-slate-900 dark:text-slate-100'>
-                            Stripe
-                          </Text>
-                        </>
-                      );
-                    } else {
-                      return (
-                        <>
-                          <SiWechat
-                            className='mr-2'
-                            size={16}
-                            color='#07C160'
-                          />
-                          <Text className='text-slate-900 dark:text-slate-100'>
-                            {t('微信')}
-                          </Text>
-                        </>
-                      );
-                    }
-                  }
-                })()}
+    <Modal state={modalState}>
+      <ModalBackdrop isDismissable={false} variant='blur'>
+        <ModalContainer size='sm' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <CreditCard size={18} />
+                {t('充值确认')}
               </div>
-            </div>
-          </div>
-        </Card>
-      </div>
+            </ModalHeader>
+            <ModalBody className='px-6 py-5'>
+              <Card className='rounded-2xl border border-border bg-surface-secondary/60 p-4 shadow-none'>
+                <div className='space-y-3'>
+                  <InfoRow
+                    label={`${t('充值数量')}：`}
+                    value={renderQuotaWithAmount(topUpCount)}
+                  />
+                  <InfoRow
+                    label={`${t('实付金额')}：`}
+                    value={
+                      amountLoading ? (
+                        <Skeleton className='h-4 w-16 rounded-md' />
+                      ) : (
+                        <div className='flex items-baseline gap-2'>
+                          <span className='font-semibold text-rose-600 dark:text-rose-300'>
+                            {renderAmount()}
+                          </span>
+                          {hasDiscount ? (
+                            <span className='text-xs text-rose-500'>
+                              {Math.round(discountRate * 100)}%
+                            </span>
+                          ) : null}
+                        </div>
+                      )
+                    }
+                  />
+                  {hasDiscount && !amountLoading ? (
+                    <>
+                      <InfoRow
+                        label={`${t('原价')}：`}
+                        value={
+                          <span className='text-muted line-through'>
+                            {`${originalAmount.toFixed(2)} ${t('元')}`}
+                          </span>
+                        }
+                      />
+                      <InfoRow
+                        label={`${t('优惠')}：`}
+                        value={
+                          <span className='text-emerald-600 dark:text-emerald-400'>
+                            {`- ${discountAmount.toFixed(2)} ${t('元')}`}
+                          </span>
+                        }
+                      />
+                    </>
+                  ) : null}
+                  <InfoRow
+                    label={`${t('支付方式')}：`}
+                    value={
+                      <span className='flex items-center gap-2'>
+                        {methodIcon}
+                        {methodName}
+                      </span>
+                    }
+                  />
+                </div>
+              </Card>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='ghost' onPress={handleCancel}>
+                {t('取消')}
+              </Button>
+              <Button
+                variant='primary'
+                onPress={onlineTopUp}
+                isPending={confirmLoading}
+              >
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
 
+function InfoRow({ label, value }) {
+  return (
+    <div className='flex items-center justify-between gap-4 text-sm'>
+      <span className='font-medium text-foreground'>
+        {label}
+      </span>
+      <span className='text-right text-foreground'>
+        {value}
+      </span>
+    </div>
+  );
+}
+
 export default PaymentConfirmModal;
diff --git a/web/src/components/topup/modals/SubscriptionPurchaseModal.jsx b/web/src/components/topup/modals/SubscriptionPurchaseModal.jsx
index 8bd861ee301..480ea33f9e4 100644
--- a/web/src/components/topup/modals/SubscriptionPurchaseModal.jsx
+++ b/web/src/components/topup/modals/SubscriptionPurchaseModal.jsx
@@ -19,18 +19,19 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import {
-  Banner,
   Modal,
-  Typography,
   Card,
   Button,
-  Select,
-  Divider,
   Tooltip,
-} from '@douyinfe/semi-ui';
-import { Crown, CalendarClock, Package } from 'lucide-react';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
+import { Crown, CalendarClock, Package, CreditCard } from 'lucide-react';
 import { SiStripe } from 'react-icons/si';
-import { IconCreditCard } from '@douyinfe/semi-icons';
 import { renderQuota } from '../../../helpers';
 import { getCurrencyConfig } from '../../../helpers/render';
 import {
@@ -38,8 +39,6 @@ import {
   formatSubscriptionResetPeriod,
 } from '../../../helpers/subscriptionFormat';
 
-const { Text } = Typography;
-
 const SubscriptionPurchaseModal = ({
   t,
   visible,
@@ -74,186 +73,184 @@ const SubscriptionPurchaseModal = ({
   const purchaseCount = Number(purchaseLimitInfo?.count || 0);
   const purchaseLimitReached =
     purchaseLimit > 0 && purchaseCount >= purchaseLimit;
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel();
+    },
+  });
 
   return (
-    <Modal
-      title={
-        <div className='flex items-center'>
-          <Crown className='mr-2' size={18} />
-          {t('购买订阅套餐')}
-        </div>
-      }
-      visible={visible}
-      onCancel={onCancel}
-      footer={null}
-      size='small'
-      centered
-    >
-      {plan ? (
-        <div className='space-y-4 pb-10'>
-          {/* 套餐信息 */}
-          <Card className='!rounded-xl !border-0 bg-slate-50 dark:bg-slate-800'>
-            <div className='space-y-3'>
-              <div className='flex justify-between items-center'>
-                <Text strong className='text-slate-700 dark:text-slate-200'>
-                  {t('套餐名称')}：
-                </Text>
-                <Typography.Text
-                  ellipsis={{ rows: 1, showTooltip: true }}
-                  className='text-slate-900 dark:text-slate-100'
-                  style={{ maxWidth: 200 }}
-                >
-                  {plan.title}
-                </Typography.Text>
-              </div>
-              <div className='flex justify-between items-center'>
-                <Text strong className='text-slate-700 dark:text-slate-200'>
-                  {t('有效期')}：
-                </Text>
-                <div className='flex items-center'>
-                  <CalendarClock size={14} className='mr-1 text-slate-500' />
-                  <Text className='text-slate-900 dark:text-slate-100'>
-                    {formatSubscriptionDuration(plan, t)}
-                  </Text>
-                </div>
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer size='lg' placement='center' scroll='inside'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center'>
+                <Crown className='mr-2' size={18} />
+                {t('购买订阅套餐')}
               </div>
-              {formatSubscriptionResetPeriod(plan, t) !== t('不重置') && (
-                <div className='flex justify-between items-center'>
-                  <Text strong className='text-slate-700 dark:text-slate-200'>
-                    {t('重置周期')}：
-                  </Text>
-                  <Text className='text-slate-900 dark:text-slate-100'>
-                    {formatSubscriptionResetPeriod(plan, t)}
-                  </Text>
-                </div>
-              )}
-              <div className='flex justify-between items-center'>
-                <Text strong className='text-slate-700 dark:text-slate-200'>
-                  {t('总额度')}：
-                </Text>
-                <div className='flex items-center'>
-                  <Package size={14} className='mr-1 text-slate-500' />
-                  {totalAmount > 0 ? (
-                    <Tooltip content={`${t('原生额度')}：${totalAmount}`}>
-                      <Text className='text-slate-900 dark:text-slate-100'>
-                        {renderQuota(totalAmount)}
-                      </Text>
-                    </Tooltip>
-                  ) : (
-                    <Text className='text-slate-900 dark:text-slate-100'>
-                      {t('不限')}
-                    </Text>
+            </ModalHeader>
+            <ModalBody className='p-5'>
+              {plan ? (
+                <div className='space-y-4 pb-4'>
+                  <Card className='rounded-2xl border border-border bg-surface-secondary/60 p-4 shadow-none'>
+                    <div className='space-y-3'>
+                      <InfoRow label={`${t('套餐名称')}：`} value={plan.title} />
+                      <InfoRow
+                        label={`${t('有效期')}：`}
+                        value={
+                          <span className='flex items-center'>
+                            <CalendarClock size={14} className='mr-1 text-muted' />
+                            {formatSubscriptionDuration(plan, t)}
+                          </span>
+                        }
+                      />
+                      {formatSubscriptionResetPeriod(plan, t) !== t('不重置') && (
+                        <InfoRow
+                          label={`${t('重置周期')}：`}
+                          value={formatSubscriptionResetPeriod(plan, t)}
+                        />
+                      )}
+                      <InfoRow
+                        label={`${t('总额度')}：`}
+                        value={
+                          <span className='flex items-center'>
+                            <Package size={14} className='mr-1 text-muted' />
+                            {totalAmount > 0 ? (
+                              <Tooltip content={`${t('原生额度')}：${totalAmount}`}>
+                                <span>{renderQuota(totalAmount)}</span>
+                              </Tooltip>
+                            ) : (
+                              t('不限')
+                            )}
+                          </span>
+                        }
+                      />
+                      {plan?.upgrade_group ? (
+                        <InfoRow
+                          label={`${t('升级分组')}：`}
+                          value={plan.upgrade_group}
+                        />
+                      ) : null}
+                      <div className='h-px bg-border' />
+                      <InfoRow
+                        label={`${t('应付金额')}：`}
+                        value={
+                          <span className='text-xl font-bold text-sky-600 dark:text-sky-300'>
+                            {symbol}
+                            {displayPrice}
+                          </span>
+                        }
+                      />
+                    </div>
+                  </Card>
+
+                  {purchaseLimitReached && (
+                    <NoticeBox tone='warning'>
+                      {`${t('已达到购买上限')} (${purchaseCount}/${purchaseLimit})`}
+                    </NoticeBox>
                   )}
-                </div>
-              </div>
-              {plan?.upgrade_group ? (
-                <div className='flex justify-between items-center'>
-                  <Text strong className='text-slate-700 dark:text-slate-200'>
-                    {t('升级分组')}：
-                  </Text>
-                  <Text className='text-slate-900 dark:text-slate-100'>
-                    {plan.upgrade_group}
-                  </Text>
-                </div>
-              ) : null}
-              <Divider margin={8} />
-              <div className='flex justify-between items-center'>
-                <Text strong className='text-slate-700 dark:text-slate-200'>
-                  {t('应付金额')}：
-                </Text>
-                <Text strong className='text-xl text-purple-600'>
-                  {symbol}
-                  {displayPrice}
-                </Text>
-              </div>
-            </div>
-          </Card>
 
-          {/* 支付方式 */}
-          {purchaseLimitReached && (
-            <Banner
-              type='warning'
-              description={`${t('已达到购买上限')} (${purchaseCount}/${purchaseLimit})`}
-              className='!rounded-xl'
-              closeIcon={null}
-            />
-          )}
+                  {hasAnyPayment ? (
+                    <div className='space-y-3'>
+                      <div className='text-sm text-muted'>
+                        {t('选择支付方式')}：
+                      </div>
 
-          {hasAnyPayment ? (
-            <div className='space-y-3'>
-              <Text size='small' type='tertiary'>
-                {t('选择支付方式')}：
-              </Text>
+                      {(hasStripe || hasCreem) && (
+                        <div className='flex gap-2'>
+                          {hasStripe && (
+                            <Button
+                              variant='flat'
+                              className='flex-1'
+                              startContent={<SiStripe size={14} color='#635BFF' />}
+                              onPress={onPayStripe}
+                              isLoading={paying}
+                              isDisabled={purchaseLimitReached}
+                            >
+                              Stripe
+                            </Button>
+                          )}
+                          {hasCreem && (
+                            <Button
+                              variant='flat'
+                              className='flex-1'
+                              startContent={<CreditCard size={16} />}
+                              onPress={onPayCreem}
+                              isLoading={paying}
+                              isDisabled={purchaseLimitReached}
+                            >
+                              Creem
+                            </Button>
+                          )}
+                        </div>
+                      )}
 
-              {/* Stripe / Creem */}
-              {(hasStripe || hasCreem) && (
-                <div className='flex gap-2'>
-                  {hasStripe && (
-                    <Button
-                      theme='light'
-                      className='flex-1'
-                      icon={<SiStripe size={14} color='#635BFF' />}
-                      onClick={onPayStripe}
-                      loading={paying}
-                      disabled={purchaseLimitReached}
-                    >
-                      Stripe
-                    </Button>
-                  )}
-                  {hasCreem && (
-                    <Button
-                      theme='light'
-                      className='flex-1'
-                      icon={<IconCreditCard />}
-                      onClick={onPayCreem}
-                      loading={paying}
-                      disabled={purchaseLimitReached}
-                    >
-                      Creem
-                    </Button>
+                      {hasEpay && (
+                        <div className='flex gap-2'>
+                          <select
+                            value={selectedEpayMethod || ''}
+                            onChange={(event) =>
+                              setSelectedEpayMethod(event.target.value)
+                            }
+                            disabled={purchaseLimitReached}
+                            className='h-10 min-w-0 flex-1 rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary disabled:opacity-50'
+                          >
+                            <option value=''>{t('选择支付方式')}</option>
+                            {epayMethods.map((method) => (
+                              <option key={method.type} value={method.type}>
+                                {method.name || method.type}
+                              </option>
+                            ))}
+                          </select>
+                          <Button
+                            color='primary'
+                            onPress={onPayEpay}
+                            isLoading={paying}
+                            isDisabled={!selectedEpayMethod || purchaseLimitReached}
+                          >
+                            {t('支付')}
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+                  ) : (
+                    <NoticeBox>
+                      {t('管理员未开启在线支付功能，请联系管理员配置。')}
+                    </NoticeBox>
                   )}
                 </div>
-              )}
-
-              {/* 易支付 */}
-              {hasEpay && (
-                <div className='flex gap-2'>
-                  <Select
-                    value={selectedEpayMethod}
-                    onChange={setSelectedEpayMethod}
-                    style={{ flex: 1 }}
-                    size='default'
-                    placeholder={t('选择支付方式')}
-                    optionList={epayMethods.map((m) => ({
-                      value: m.type,
-                      label: m.name || m.type,
-                    }))}
-                    disabled={purchaseLimitReached}
-                  />
-                  <Button
-                    theme='solid'
-                    type='primary'
-                    onClick={onPayEpay}
-                    loading={paying}
-                    disabled={!selectedEpayMethod || purchaseLimitReached}
-                  >
-                    {t('支付')}
-                  </Button>
-                </div>
-              )}
-            </div>
-          ) : (
-            <Banner
-              type='info'
-              description={t('管理员未开启在线支付功能，请联系管理员配置。')}
-              className='!rounded-xl'
-              closeIcon={null}
-            />
-          )}
-        </div>
-      ) : null}
+              ) : null}
+            </ModalBody>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
 
+const InfoRow = ({ label, value }) => (
+  <div className='flex items-center justify-between gap-4'>
+    <span className='shrink-0 text-sm font-semibold text-foreground'>
+      {label}
+    </span>
+    <span className='min-w-0 truncate text-right text-sm text-foreground'>
+      {value}
+    </span>
+  </div>
+);
+
+const NoticeBox = ({ children, tone = 'info' }) => (
+  <div
+    className={`rounded-2xl border px-4 py-3 text-sm ${
+      tone === 'warning'
+        ? 'border-warning/30 bg-warning/10 text-warning-700 dark:text-warning-200'
+        : 'border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-500/30 dark:bg-sky-500/10 dark:text-sky-200'
+    }`}
+  >
+    {children}
+  </div>
+);
+
 export default SubscriptionPurchaseModal;
diff --git a/web/src/components/topup/modals/TopupHistoryModal.jsx b/web/src/components/topup/modals/TopupHistoryModal.jsx
index 9659e9291f3..e8d233ff4d4 100644
--- a/web/src/components/topup/modals/TopupHistoryModal.jsx
+++ b/web/src/components/topup/modals/TopupHistoryModal.jsx
@@ -19,25 +19,23 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useState, useEffect, useMemo } from 'react';
 import {
   Modal,
-  Table,
-  Badge,
-  Typography,
-  Toast,
-  Empty,
   Button,
+  Chip,
   Input,
-  Tag,
-} from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { Coins } from 'lucide-react';
-import { IconSearch } from '@douyinfe/semi-icons';
-import { API, timestamp2string } from '../../../helpers';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalHeader,
+  Pagination,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
+import { Coins, Search } from 'lucide-react';
+import { API, copy, showError, showSuccess, timestamp2string } from '../../../helpers';
 import { isAdmin } from '../../../helpers/utils';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
-const { Text } = Typography;
+import ConfirmDialog from '../../common/ui/ConfirmDialog';
 
 // 状态映射配置
 const STATUS_CONFIG = {
@@ -63,7 +61,14 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [keyword, setKeyword] = useState('');
+  const [pendingTradeNo, setPendingTradeNo] = useState('');
   const isMobile = useIsMobile();
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel();
+    },
+  });
 
   const loadTopups = async (currentPage, currentPageSize) => {
     setLoading(true);
@@ -79,10 +84,10 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
         setTopups(data.items || []);
         setTotal(data.total || 0);
       } else {
-        Toast.error({ content: message || t('加载失败') });
+        showError(message || t('加载失败'));
       }
     } catch (error) {
-      Toast.error({ content: t('加载账单失败') });
+      showError(t('加载账单失败'));
     } finally {
       setLoading(false);
     }
@@ -116,39 +121,40 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
       });
       const { success, message } = res.data;
       if (success) {
-        Toast.success({ content: t('补单成功') });
+        showSuccess(t('补单成功'));
         await loadTopups(page, pageSize);
       } else {
-        Toast.error({ content: message || t('补单失败') });
+        showError(message || t('补单失败'));
       }
     } catch (e) {
-      Toast.error({ content: t('补单失败') });
+      showError(t('补单失败'));
     }
   };
 
   const confirmAdminComplete = (tradeNo) => {
-    Modal.confirm({
-      title: t('确认补单'),
-      content: t('是否将该订单标记为成功并为用户入账？'),
-      onOk: () => handleAdminComplete(tradeNo),
-    });
+    setPendingTradeNo(tradeNo);
   };
 
   // 渲染状态徽章
   const renderStatusBadge = (status) => {
     const config = STATUS_CONFIG[status] || { type: 'primary', key: status };
+    const colorMap = {
+      success: 'success',
+      warning: 'warning',
+      danger: 'danger',
+      primary: 'primary',
+    };
     return (
-      <span className='flex items-center gap-2'>
-        <Badge dot type={config.type} />
-        <span>{t(config.key)}</span>
-      </span>
+      <Chip color={colorMap[config.type] || 'default'} size='sm' variant='flat'>
+        {t(config.key)}
+      </Chip>
     );
   };
 
   // 渲染支付方式
   const renderPaymentMethod = (pm) => {
     const displayName = PAYMENT_METHOD_MAP[pm];
-    return <Text>{displayName ? t(displayName) : pm || '-'}</Text>;
+    return <span>{displayName ? t(displayName) : pm || '-'}</span>;
   };
 
   const isSubscriptionTopup = (record) => {
@@ -165,7 +171,21 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
         title: t('订单号'),
         dataIndex: 'trade_no',
         key: 'trade_no',
-        render: (text) => <Text copyable>{text}</Text>,
+        render: (text) => (
+          <button
+            type='button'
+            onClick={async () => {
+              if (await copy(text)) {
+                showSuccess(t('已复制：') + text);
+              } else {
+                showError(t('无法复制到剪贴板，请手动复制'));
+              }
+            }}
+            className='max-w-[180px] truncate font-mono text-xs text-sky-600 hover:text-sky-700 dark:text-sky-300'
+          >
+            {text}
+          </button>
+        ),
       },
       {
         title: t('支付方式'),
@@ -180,15 +200,15 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
         render: (amount, record) => {
           if (isSubscriptionTopup(record)) {
             return (
-              <Tag color='purple' shape='circle' size='small'>
+              <Chip color='secondary' size='sm' variant='flat'>
                 {t('订阅套餐')}
-              </Tag>
+              </Chip>
             );
           }
           return (
             <span className='flex items-center gap-1'>
               <Coins size={16} />
-              <Text>{amount}</Text>
+              <span>{amount}</span>
             </span>
           );
         },
@@ -197,7 +217,9 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
         title: t('支付金额'),
         dataIndex: 'money',
         key: 'money',
-        render: (money) => <Text type='danger'>¥{money.toFixed(2)}</Text>,
+        render: (money) => (
+          <span className='font-semibold text-danger'>¥{Number(money || 0).toFixed(2)}</span>
+        ),
       },
       {
         title: t('状态'),
@@ -218,10 +240,10 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
             actions.push(
               <Button
                 key="complete"
-                size='small'
-                type='primary'
-                theme='outline'
-                onClick={() => confirmAdminComplete(record.trade_no)}
+                size='sm'
+                color='primary'
+                variant='flat'
+                onPress={() => confirmAdminComplete(record.trade_no)}
               >
                 {t('补单')}
               </Button>
@@ -242,50 +264,147 @@ const TopupHistoryModal = ({ visible, onCancel, t }) => {
     return baseColumns;
   }, [t, userIsAdmin]);
 
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+  const pageSizeOptions = [10, 20, 50, 100].map((value) => ({
+    value: String(value),
+    label: String(value),
+  }));
+
+  const renderCell = (record, column) => {
+    const value = record[column.dataIndex];
+    return column.render ? column.render(value, record) : value;
+  };
+
   return (
-    <Modal
-      title={t('充值账单')}
-      visible={visible}
-      onCancel={onCancel}
-      footer={null}
-      size={isMobile ? 'full-width' : 'large'}
-    >
-      <div className='mb-3'>
-        <Input
-          prefix={<IconSearch />}
-          placeholder={t('订单号')}
-          value={keyword}
-          onChange={handleKeywordChange}
-          showClear
-        />
-      </div>
-      <Table
-        columns={columns}
-        dataSource={topups}
-        loading={loading}
-        rowKey='id'
-        pagination={{
-          currentPage: page,
-          pageSize: pageSize,
-          total: total,
-          showSizeChanger: true,
-          pageSizeOpts: [10, 20, 50, 100],
-          onPageChange: handlePageChange,
-          onPageSizeChange: handlePageSizeChange,
+    <>
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size={isMobile ? 'full' : '5xl'} scroll='inside'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {t('充值账单')}
+              </ModalHeader>
+              <ModalBody className='p-4 md:p-6'>
+                <div className='mb-4'>
+                  <Input
+                    startContent={<Search size={16} className='text-muted' />}
+                    placeholder={t('订单号')}
+                    value={keyword}
+                    onValueChange={handleKeywordChange}
+                    isClearable
+                    size='sm'
+                  />
+                </div>
+
+                {loading ? (
+                  <div className='flex flex-col items-center justify-center gap-3 py-12 text-sm text-muted'>
+                    <Spinner />
+                    {t('加载中...')}
+                  </div>
+                ) : topups.length === 0 ? (
+                  <div className='rounded-2xl border border-dashed border-border py-12 text-center text-sm text-muted'>
+                    {t('暂无充值记录')}
+                  </div>
+                ) : isMobile ? (
+                  <div className='space-y-3'>
+                    {topups.map((record) => (
+                      <div
+                        key={record.id}
+                        className='rounded-2xl border border-border bg-surface-secondary/60 p-4'
+                      >
+                        <div className='mb-3 flex items-start justify-between gap-3'>
+                          {columns[0].render(record.trade_no, record)}
+                          {renderStatusBadge(record.status)}
+                        </div>
+                        <div className='grid grid-cols-2 gap-3 text-sm'>
+                          {columns.slice(1).map((column) => (
+                            <div key={column.key}>
+                              <div className='mb-1 text-xs text-muted'>
+                                {column.title}
+                              </div>
+                              <div className='text-foreground'>
+                                {renderCell(record, column) || '-'}
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                ) : (
+                  <div className='overflow-x-auto rounded-2xl border border-border'>
+                    <table className='min-w-full divide-y divide-border text-sm'>
+                      <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+                        <tr>
+                          {columns.map((column) => (
+                            <th key={column.key} className='px-4 py-3 text-left font-semibold'>
+                              {column.title}
+                            </th>
+                          ))}
+                        </tr>
+                      </thead>
+                      <tbody className='divide-y divide-border'>
+                        {topups.map((record) => (
+                          <tr
+                            key={record.id}
+                            className='bg-background transition hover:bg-surface-secondary/60'
+                          >
+                            {columns.map((column) => (
+                              <td key={column.key} className='px-4 py-3 text-foreground'>
+                                {renderCell(record, column) || '-'}
+                              </td>
+                            ))}
+                          </tr>
+                        ))}
+                      </tbody>
+                    </table>
+                  </div>
+                )}
+
+                <div className='mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between'>
+                  <select
+                    aria-label={t('每页数量')}
+                    value={String(pageSize)}
+                    onChange={(event) =>
+                      handlePageSizeChange(Number(event.target.value || 10))
+                    }
+                    className='h-9 w-32 rounded-xl border border-border bg-background px-3 text-sm outline-none transition focus:border-primary'
+                  >
+                    {pageSizeOptions.map((option) => (
+                      <option key={option.value} value={option.value}>
+                        {option.label}
+                      </option>
+                    ))}
+                  </select>
+                  <Pagination
+                    showControls
+                    page={page}
+                    total={totalPages}
+                    onChange={handlePageChange}
+                    size='sm'
+                  />
+                </div>
+              </ModalBody>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
+
+      <ConfirmDialog
+        visible={!!pendingTradeNo}
+        title={t('确认补单')}
+        onCancel={() => setPendingTradeNo('')}
+        onConfirm={async () => {
+          const tradeNo = pendingTradeNo;
+          setPendingTradeNo('');
+          await handleAdminComplete(tradeNo);
         }}
-        size='small'
-        empty={
-          <Empty
-            image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-            darkModeImage={
-              <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-            }
-            description={t('暂无充值记录')}
-            style={{ padding: 30 }}
-          />
-        }
-      />
-    </Modal>
+        cancelText={t('取消')}
+        confirmText={t('确定')}
+      >
+        {t('是否将该订单标记为成功并为用户入账？')}
+      </ConfirmDialog>
+    </>
   );
 };
 
diff --git a/web/src/components/topup/modals/TransferModal.jsx b/web/src/components/topup/modals/TransferModal.jsx
index d364b678f48..eb316d62357 100644
--- a/web/src/components/topup/modals/TransferModal.jsx
+++ b/web/src/components/topup/modals/TransferModal.jsx
@@ -18,7 +18,18 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Modal, Typography, Input, InputNumber } from '@douyinfe/semi-ui';
+import {
+  Button,
+  Input,
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  useOverlayState,
+} from '@heroui/react';
 import { CreditCard } from 'lucide-react';
 
 const TransferModal = ({
@@ -32,44 +43,54 @@ const TransferModal = ({
   transferAmount,
   setTransferAmount,
 }) => {
+  const modalState = useOverlayState({
+    isOpen: openTransfer,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleTransferCancel();
+    },
+  });
+
   return (
-    <Modal
-      title={
-        <div className='flex items-center'>
-          <CreditCard className='mr-2' size={18} />
-          {t('划转邀请额度')}
-        </div>
-      }
-      visible={openTransfer}
-      onOk={transfer}
-      onCancel={handleTransferCancel}
-      maskClosable={false}
-      centered
-    >
-      <div className='space-y-4'>
-        <div>
-          <Typography.Text strong className='block mb-2'>
-            {t('可用邀请额度')}
-          </Typography.Text>
-          <Input
-            value={renderQuota(userState?.user?.aff_quota)}
-            disabled
-            className='!rounded-lg'
-          />
-        </div>
-        <div>
-          <Typography.Text strong className='block mb-2'>
-            {t('划转额度')} · {t('最低') + renderQuota(getQuotaPerUnit())}
-          </Typography.Text>
-          <InputNumber
-            min={getQuotaPerUnit()}
-            max={userState?.user?.aff_quota || 0}
-            value={transferAmount}
-            onChange={(value) => setTransferAmount(value)}
-            className='w-full !rounded-lg'
-          />
-        </div>
-      </div>
+    <Modal state={modalState}>
+      <ModalBackdrop isDismissable={false} variant='blur'>
+        <ModalContainer size='sm' placement='center'>
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <div className='flex items-center gap-2'>
+                <CreditCard size={18} />
+                {t('划转邀请额度')}
+              </div>
+            </ModalHeader>
+            <ModalBody className='px-6 py-5'>
+              <div className='space-y-4'>
+                <Input
+                  label={t('可用邀请额度')}
+                  value={renderQuota(userState?.user?.aff_quota)}
+                  isDisabled
+                  className='w-full'
+                />
+                <Input
+                  label={`${t('划转额度')} · ${t('最低')}${renderQuota(getQuotaPerUnit())}`}
+                  type='number'
+                  min={getQuotaPerUnit()}
+                  max={userState?.user?.aff_quota || 0}
+                  value={String(transferAmount ?? '')}
+                  onChange={(event) => setTransferAmount(Number(event.target.value || 0))}
+                  className='w-full'
+                />
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='ghost' onPress={handleTransferCancel}>
+                {t('取消')}
+              </Button>
+              <Button variant='primary' onPress={transfer}>
+                {t('确定')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 };
diff --git a/web/src/components/ui/ToastViewport.jsx b/web/src/components/ui/ToastViewport.jsx
new file mode 100644
index 00000000000..c3bcb672342
--- /dev/null
+++ b/web/src/components/ui/ToastViewport.jsx
@@ -0,0 +1,100 @@
+/*
+Copyright (C) 2025 QuantumNous
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+For commercial licensing, please contact support@quantumnous.com
+*/
+
+import React, { useEffect, useState } from 'react';
+import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from 'lucide-react';
+
+const toastStyles = {
+  info: {
+    icon: Info,
+    className: 'border-sky-200 bg-sky-50 text-sky-900 dark:border-sky-900/60 dark:bg-sky-950 dark:text-sky-100',
+  },
+  success: {
+    icon: CheckCircle2,
+    className: 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900/60 dark:bg-emerald-950 dark:text-emerald-100',
+  },
+  warning: {
+    icon: TriangleAlert,
+    className: 'border-amber-200 bg-amber-50 text-amber-900 dark:border-amber-900/60 dark:bg-amber-950 dark:text-amber-100',
+  },
+  error: {
+    icon: AlertCircle,
+    className: 'border-rose-200 bg-rose-50 text-rose-900 dark:border-rose-900/60 dark:bg-rose-950 dark:text-rose-100',
+  },
+};
+
+const normalizeMessage = (detail) => ({
+  id: detail?.id || `${Date.now()}-${Math.random().toString(16).slice(2)}`,
+  type: detail?.type || 'info',
+  message: detail?.message || '',
+  duration: detail?.duration ?? 4000,
+});
+
+const ToastViewport = () => {
+  const [items, setItems] = useState([]);
+
+  useEffect(() => {
+    const handleToast = (event) => {
+      const item = normalizeMessage(event.detail);
+      setItems((prev) => [...prev.slice(-4), item]);
+
+      if (item.duration !== false) {
+        window.setTimeout(() => {
+          setItems((prev) => prev.filter((toast) => toast.id !== item.id));
+        }, item.duration);
+      }
+    };
+
+    window.addEventListener('app-toast', handleToast);
+    return () => window.removeEventListener('app-toast', handleToast);
+  }, []);
+
+  if (items.length === 0) return null;
+
+  return (
+    <div className='pointer-events-none fixed right-4 top-20 z-[9999] flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-3'>
+      {items.map((item) => {
+        const style = toastStyles[item.type] || toastStyles.info;
+        const Icon = style.icon;
+
+        return (
+          <div
+            key={item.id}
+            className={`pointer-events-auto flex items-start gap-3 rounded-2xl border px-4 py-3 text-sm shadow-xl backdrop-blur ${style.className}`}
+          >
+            <Icon className='mt-0.5 shrink-0' size={18} />
+            <div className='min-w-0 flex-1 break-words'>{item.message}</div>
+            <button
+              type='button'
+              className='rounded-full p-1 opacity-70 transition hover:bg-black/5 hover:opacity-100 dark:hover:bg-white/10'
+              onClick={() =>
+                setItems((prev) => prev.filter((toast) => toast.id !== item.id))
+              }
+              aria-label='Close'
+            >
+              <X size={14} />
+            </button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+export default ToastViewport;
diff --git a/web/src/helpers/dashboard.jsx b/web/src/helpers/dashboard.jsx
index a7a30bf6719..2fea1f30501 100644
--- a/web/src/helpers/dashboard.jsx
+++ b/web/src/helpers/dashboard.jsx
@@ -18,11 +18,6 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Progress, Divider, Empty } from '@douyinfe/semi-ui';
-import {
-  IllustrationConstruction,
-  IllustrationConstructionDark,
-} from '@douyinfe/semi-illustrations';
 import {
   timestamp2string,
   timestamp2string1,
@@ -136,10 +131,13 @@ export const getTrendSpec = (data, color) => ({
 });
 
 // ========== UI 工具函数 ==========
+// Match HeroUI Pro `Widget.Title` styling (text-sm font-semibold) so the
+// section header inside StatsCards stays visually consistent with the title
+// of every other Widget on the dashboard.
 export const createSectionTitle = (Icon, text) => (
-  <div className='flex items-center gap-2'>
-    <Icon size={16} />
-    {text}
+  <div className='flex items-center gap-2 whitespace-nowrap'>
+    <Icon className='shrink-0' size={16} />
+    <span className='text-sm font-semibold text-foreground'>{text}</span>
   </div>
 );
 
@@ -176,14 +174,14 @@ export const renderMonitorList = (
 ) => {
   if (!monitors || monitors.length === 0) {
     return (
-      <div className='flex justify-center items-center py-4'>
-        <Empty
-          image={<IllustrationConstruction style={ILLUSTRATION_SIZE} />}
-          darkModeImage={
-            <IllustrationConstructionDark style={ILLUSTRATION_SIZE} />
-          }
-          title={t('暂无监控数据')}
-        />
+      <div className='flex flex-col items-center justify-center py-8 text-center'>
+        <div
+          className='mb-3 rounded-3xl bg-surface-secondary p-5 text-muted'
+          style={ILLUSTRATION_SIZE}
+        >
+          <span className='block text-2xl'>--</span>
+        </div>
+        <div className='text-sm text-muted'>{t('暂无监控数据')}</div>
       </div>
     );
   }
@@ -196,32 +194,41 @@ export const renderMonitorList = (
   });
 
   const renderItem = (monitor, idx) => (
-    <div key={idx} className='p-2 hover:bg-white rounded-lg transition-colors'>
+    <div
+      key={idx}
+      className='p-2 hover:bg-surface-secondary rounded-lg transition-colors'
+    >
       <div className='flex items-center justify-between mb-1'>
         <div className='flex items-center gap-2'>
           <div
             className='w-2 h-2 rounded-full flex-shrink-0'
             style={{ backgroundColor: getUptimeStatusColor(monitor.status) }}
           />
-          <span className='text-sm font-medium text-gray-900'>
+          <span className='text-sm font-medium text-foreground'>
             {monitor.name}
           </span>
         </div>
-        <span className='text-xs text-gray-500'>
+        <span className='text-xs text-muted tabular-nums'>
           {((monitor.uptime || 0) * 100).toFixed(2)}%
         </span>
       </div>
       <div className='flex items-center gap-2'>
-        <span className='text-xs text-gray-500'>
+        <span className='text-xs text-muted'>
           {getUptimeStatusText(monitor.status)}
         </span>
         <div className='flex-1'>
-          <Progress
-            percent={(monitor.uptime || 0) * 100}
-            showInfo={false}
+          <div
+            className='h-1.5 overflow-hidden rounded-full bg-surface-secondary'
             aria-label={`${monitor.name} uptime`}
-            stroke={getUptimeStatusColor(monitor.status)}
-          />
+          >
+            <div
+              className='h-full rounded-full transition-all'
+              style={{
+                width: `${Math.max(0, Math.min(100, (monitor.uptime || 0) * 100))}%`,
+                backgroundColor: getUptimeStatusColor(monitor.status),
+              }}
+            />
+          </div>
         </div>
       </div>
     </div>
@@ -231,10 +238,10 @@ export const renderMonitorList = (
     <div key={gname || 'default'} className='mb-2'>
       {gname && (
         <>
-          <div className='text-md font-semibold text-gray-500 px-2 py-1'>
+          <div className='text-md font-semibold text-muted px-2 py-1'>
             {gname}
           </div>
-          <Divider />
+          <div className='my-1 h-px bg-border' />
         </>
       )}
       {list.map(renderItem)}
diff --git a/web/src/helpers/data.js b/web/src/helpers/data.js
index e45aac3e994..3be4f514806 100644
--- a/web/src/helpers/data.js
+++ b/web/src/helpers/data.js
@@ -21,7 +21,11 @@ export function setStatusData(data) {
   localStorage.setItem('status', JSON.stringify(data));
   localStorage.setItem('system_name', data.system_name);
   localStorage.setItem('logo', data.logo);
-  localStorage.setItem('footer_html', data.footer_html);
+  if (data.footer_html) {
+    localStorage.setItem('footer_html', data.footer_html);
+  } else {
+    localStorage.removeItem('footer_html');
+  }
   localStorage.setItem('quota_per_unit', data.quota_per_unit);
   // 兼容：保留旧字段，同时写入新的额度展示类型
   localStorage.setItem('display_in_currency', data.display_in_currency);
diff --git a/web/src/helpers/render.jsx b/web/src/helpers/render.jsx
index 0ad16bca130..73b149a7478 100644
--- a/web/src/helpers/render.jsx
+++ b/web/src/helpers/render.jsx
@@ -18,9 +18,136 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import i18next from 'i18next';
-import { Modal, Tag, Typography, Avatar } from '@douyinfe/semi-ui';
-import { copy, showSuccess } from './utils';
+import { copy, showSuccess, showError } from './utils';
 import { MOBILE_BREAKPOINT } from '../hooks/common/useIsMobile';
+
+// Map Semi UI Tag color names to inline backgroundColor/color values so
+// downstream callers (renderModelTag/renderGroup/etc.) keep working without
+// the HeroCompat Tag wrapper.
+const SEMI_TAG_PALETTE = {
+  white: '#ffffff',
+  grey: '#94a3b8',
+  red: '#ef4444',
+  orange: '#f97316',
+  yellow: '#eab308',
+  green: '#22c55e',
+  blue: '#3b82f6',
+  cyan: '#06b6d4',
+  teal: '#14b8a6',
+  pink: '#ec4899',
+  purple: '#a855f7',
+  violet: '#8b5cf6',
+  indigo: '#6366f1',
+  amber: '#f59e0b',
+  lime: '#84cc16',
+  'light-blue': '#0ea5e9',
+};
+
+const resolveTagColor = (color) => {
+  if (!color) return null;
+  if (typeof color === 'string' && color.startsWith('#')) return color;
+  if (typeof color === 'string' && color.startsWith('rgb')) return color;
+  return SEMI_TAG_PALETTE[color] || null;
+};
+
+function Tag({
+  children,
+  color,
+  prefixIcon,
+  suffixIcon,
+  size,
+  shape,
+  onClick,
+  className,
+}) {
+  const resolved = resolveTagColor(color);
+  const isWhite = color === 'white';
+  const baseStyle = resolved
+    ? isWhite
+      ? {
+          backgroundColor: '#ffffff',
+          color: '#475569',
+          borderColor: 'var(--app-border, #e5e7eb)',
+        }
+      : {
+          backgroundColor: `${resolved}1A`,
+          color: resolved,
+        }
+    : {};
+
+  const radiusClass = shape === 'circle' ? 'rounded-full' : 'rounded-md';
+  const sizeClass =
+    size === 'small'
+      ? 'px-2 py-0.5 text-[11px]'
+      : 'px-2.5 py-0.5 text-xs';
+  return (
+    <span
+      className={`inline-flex items-center gap-1 border border-transparent font-medium ${radiusClass} ${sizeClass} ${className || ''}`}
+      style={baseStyle}
+      onClick={onClick}
+    >
+      {prefixIcon}
+      <span>{children}</span>
+      {suffixIcon}
+    </span>
+  );
+}
+
+function Avatar({ children, size, color, className, style, ...rest }) {
+  const sizePx =
+    size === 'extra-extra-small'
+      ? 18
+      : size === 'extra-small'
+        ? 22
+        : size === 'small'
+          ? 28
+          : size === 'large'
+            ? 48
+            : size === 'extra-large'
+              ? 64
+              : 36;
+  const resolved = color ? resolveTagColor(color) : null;
+  return (
+    <span
+      className={`inline-flex items-center justify-center rounded-full text-xs font-semibold ${className || ''}`}
+      style={{
+        width: sizePx,
+        height: sizePx,
+        background: resolved ? `${resolved}26` : 'var(--app-background)',
+        color: resolved || 'var(--app-foreground)',
+        border: '1px solid var(--app-border, #e5e7eb)',
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </span>
+  );
+}
+
+const Typography = {
+  Text: ({ children, strong, type, size, className, style, ...rest }) => {
+    const colorClass =
+      type === 'tertiary' || type === 'secondary'
+        ? 'text-muted'
+        : type === 'danger'
+          ? 'text-red-600 dark:text-red-400'
+          : type === 'warning'
+            ? 'text-amber-600 dark:text-amber-300'
+            : '';
+    const sizeClass = size === 'small' ? 'text-xs' : 'text-sm';
+    const weightClass = strong ? 'font-semibold' : '';
+    return (
+      <span
+        className={`${sizeClass} ${weightClass} ${colorClass} ${className || ''}`}
+        style={style}
+        {...rest}
+      >
+        {children}
+      </span>
+    );
+  },
+};
 import { visit } from 'unist-util-visit';
 import * as LobeIcons from '@lobehub/icons';
 import {
@@ -105,13 +232,16 @@ import {
 // 获取侧边栏Lucide图标组件
 export function getLucideIcon(key, selected = false) {
   const size = 16;
+  // Plain currentColor + uniform stroke. heroui-pro's sidebar.css already
+  // deepens active icons from `--muted` to `--foreground` automatically via
+  // `.sidebar__menu-item[data-current=true] .sidebar__menu-icon`, so we
+  // don't need to manually toggle color or stroke weight here.
   const strokeWidth = 2;
-  const SELECTED_COLOR = 'var(--semi-color-primary)';
-  const iconColor = selected ? SELECTED_COLOR : 'currentColor';
+  const iconColor = 'currentColor';
   const commonProps = {
     size,
     strokeWidth,
-    className: `transition-colors duration-200 ${selected ? 'transition-transform duration-200 scale-105' : ''}`,
+    className: 'transition-colors duration-200',
   };
 
   // 根据不同的key返回不同的图标
@@ -556,7 +686,7 @@ export function getOAuthProviderIcon(iconName, size = 20) {
   const iconSize = Number(size) > 0 ? Number(size) : 20;
 
   if (!raw) {
-    return <Layers size={iconSize} color='var(--semi-color-text-2)' />;
+    return <Layers size={iconSize} color='var(--app-muted)' />;
   }
 
   if (isHttpUrl(raw)) {
@@ -807,10 +937,9 @@ export function renderGroup(group) {
             if (await copy(group)) {
               showSuccess(i18next.t('已复制：') + group);
             } else {
-              Modal.error({
-                title: i18next.t('无法复制到剪贴板，请手动复制'),
-                content: group,
-              });
+              showError(
+                `${i18next.t('无法复制到剪贴板，请手动复制')}: ${group}`,
+              );
             }
           }}
         >
@@ -937,13 +1066,13 @@ export const renderGroupOption = (item) => {
     alignItems: 'center',
     padding: '8px 16px',
     cursor: disabled ? 'not-allowed' : 'pointer',
-    backgroundColor: focused ? 'var(--semi-color-fill-0)' : 'transparent',
+    backgroundColor: focused ? 'var(--app-surface-muted)' : 'transparent',
     opacity: disabled ? 0.5 : 1,
     ...(selected && {
-      backgroundColor: 'var(--semi-color-primary-light-default)',
+      backgroundColor: 'color-mix(in srgb, var(--app-primary) 12%, transparent)',
     }),
     '&:hover': {
-      backgroundColor: !disabled && 'var(--semi-color-fill-1)',
+      backgroundColor: !disabled && 'color-mix(in srgb, var(--app-muted) 16%, transparent)',
     },
   };
 
diff --git a/web/src/helpers/utils.jsx b/web/src/helpers/utils.jsx
index 435a11ed3d1..e349dba7c08 100644
--- a/web/src/helpers/utils.jsx
+++ b/web/src/helpers/utils.jsx
@@ -17,21 +17,34 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import { Toast, Pagination } from '@douyinfe/semi-ui';
-import { toastConstants } from '../constants';
-import React from 'react';
-import { toast } from 'react-toastify';
+import { Pagination as HeroPagination } from '@heroui/react';
+
+const dispatchAppToast = (type, input) => {
+  const message =
+    typeof input === 'string'
+      ? input
+      : input?.content || input?.title || input?.message;
+  if (typeof window === 'undefined' || !message) return;
+  window.dispatchEvent(
+    new CustomEvent('app-toast', {
+      detail: { type, message },
+    }),
+  );
+};
+
+const Toast = {
+  info: (input) => dispatchAppToast('info', input),
+  success: (input) => dispatchAppToast('success', input),
+  warning: (input) => dispatchAppToast('warning', input),
+  error: (input) => dispatchAppToast('error', input),
+  close: () => {},
+};
 import {
   THINK_TAG_REGEX,
   MESSAGE_ROLES,
 } from '../constants/playground.constants';
 import { TABLE_COMPACT_MODES_KEY } from '../constants';
-import { MOBILE_BREAKPOINT } from '../hooks/common/useIsMobile';
 
-const HTMLToastContent = ({ htmlContent }) => {
-  return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
-};
-export default HTMLToastContent;
 export function isAdmin() {
   let user = localStorage.getItem('user');
   if (!user) return false;
@@ -66,7 +79,11 @@ export function getUserIdFromLocalStorage() {
 }
 
 export function getFooterHTML() {
-  return localStorage.getItem('footer_html');
+  const footer = localStorage.getItem('footer_html');
+  if (!footer || footer === 'undefined' || footer === 'null') {
+    return '';
+  }
+  return footer;
 }
 
 export async function copy(text) {
@@ -96,29 +113,6 @@ export async function copy(text) {
 
 // isMobile 函数已移除，请改用 useIsMobile Hook
 
-let showErrorOptions = { autoClose: toastConstants.ERROR_TIMEOUT };
-let showWarningOptions = { autoClose: toastConstants.WARNING_TIMEOUT };
-let showSuccessOptions = { autoClose: toastConstants.SUCCESS_TIMEOUT };
-let showInfoOptions = { autoClose: toastConstants.INFO_TIMEOUT };
-let showNoticeOptions = { autoClose: false };
-
-const isMobileScreen = window.matchMedia(
-  `(max-width: ${MOBILE_BREAKPOINT - 1}px)`,
-).matches;
-if (isMobileScreen) {
-  showErrorOptions.position = 'top-center';
-  // showErrorOptions.transition = 'flip';
-
-  showSuccessOptions.position = 'top-center';
-  // showSuccessOptions.transition = 'flip';
-
-  showInfoOptions.position = 'top-center';
-  // showInfoOptions.transition = 'flip';
-
-  showNoticeOptions.position = 'top-center';
-  // showNoticeOptions.transition = 'flip';
-}
-
 export function showError(error) {
   console.error(error);
   if (error.message) {
@@ -127,7 +121,6 @@ export function showError(error) {
         case 401:
           // 清除用户状态
           localStorage.removeItem('user');
-          // toast.error('错误：未登录或登录已过期，请重新登录！', showErrorOptions);
           window.location.href = '/login?expired=true';
           break;
         case 429:
@@ -164,12 +157,14 @@ export function showInfo(message) {
 
 export function showNotice(message, isHTML = false) {
   if (isHTML) {
-    toast(<HTMLToastContent htmlContent={message} />, showNoticeOptions);
+    Toast.info(String(message).replace(/<[^>]*>/g, ''));
   } else {
     Toast.info(message);
   }
 }
 
+export default null;
+
 export function openPage(url) {
   window.open(url);
 }
@@ -880,7 +875,7 @@ export const formatPriceInfo = (priceData, t, quotaDisplayType = 'USD') => {
   return (
     <>
       {items.map((item) => (
-        <span key={item.key} style={{ color: 'var(--semi-color-text-1)' }}>
+        <span key={item.key} style={{ color: 'var(--app-muted)' }}>
           {item.label} {item.value}
           {item.suffix}
         </span>
@@ -915,24 +910,19 @@ export const createCardProPagination = ({
       {!isMobile && (
         <span
           className='text-sm select-none'
-          style={{ color: 'var(--semi-color-text-2)' }}
+          style={{ color: 'var(--app-muted)' }}
         >
           {totalText}
         </span>
       )}
 
-      {/* 右侧分页控件 */}
-      <Pagination
-        currentPage={currentPage}
-        pageSize={pageSize}
-        total={total}
-        pageSizeOpts={pageSizeOpts}
-        showSizeChanger={showSizeChanger}
-        onPageSizeChange={onPageSizeChange}
-        onPageChange={onPageChange}
-        size={isMobile ? 'small' : 'default'}
-        showQuickJumper={isMobile}
-        showTotal
+      {/* 右侧分页控件：HeroUI v3 Pagination uses `page`/`total`(=pages)/`onChange`. */}
+      <HeroPagination
+        page={currentPage}
+        total={Math.max(1, Math.ceil(total / pageSize))}
+        size={isMobile ? 'sm' : 'md'}
+        onChange={(page) => onPageChange?.(page, pageSize)}
+        showControls
       />
     </>
   );
diff --git a/web/src/hooks/channels/useChannelsData.jsx b/web/src/hooks/channels/useChannelsData.jsx
index e0208683f7c..d8e8f8a94e6 100644
--- a/web/src/hooks/channels/useChannelsData.jsx
+++ b/web/src/hooks/channels/useChannelsData.jsx
@@ -37,8 +37,9 @@ import { useIsMobile } from '../common/useIsMobile';
 import { useTableCompactMode } from '../common/useTableCompactMode';
 import { useChannelUpstreamUpdates } from './useChannelUpstreamUpdates';
 import { parseUpstreamUpdateMeta } from './upstreamUpdateUtils';
-import { Modal, Button } from '@douyinfe/semi-ui';
-import { openCodexUsageModal } from '../../components/table/channels/modals/CodexUsageModal';
+// CodexUsageModal is now state-driven; the page renders <CodexUsageModal>
+// using the `codexUsageOpen / codexUsageRecord / closeCodexUsage` triple
+// exposed below. The modal handles its own data fetching internally.
 
 export const useChannelsData = () => {
   const { t } = useTranslation();
@@ -118,6 +119,19 @@ export const useChannelsData = () => {
   const [showMultiKeyManageModal, setShowMultiKeyManageModal] = useState(false);
   const [currentMultiKeyChannel, setCurrentMultiKeyChannel] = useState(null);
 
+  // Codex usage modal state
+  const [codexUsageOpen, setCodexUsageOpen] = useState(false);
+  const [codexUsageRecord, setCodexUsageRecord] = useState(null);
+  const closeCodexUsage = () => {
+    setCodexUsageOpen(false);
+    setCodexUsageRecord(null);
+  };
+  const onCopyCodexUsage = async (text) => {
+    const ok = await copy(text);
+    if (ok) showSuccess(t('已复制'));
+    else showError(t('复制失败'));
+  };
+
   // Refs
   const requestCounter = useRef(0);
   const allSelectingRef = useRef(false);
@@ -659,7 +673,7 @@ export const useChannelsData = () => {
     if (record.status !== 1) {
       return {
         style: {
-          background: 'var(--semi-color-disabled-border)',
+          background: 'var(--app-border)',
         },
       };
     } else {
@@ -755,15 +769,8 @@ export const useChannelsData = () => {
 
   const updateChannelBalance = async (record) => {
     if (record?.type === 57) {
-      openCodexUsageModal({
-        t,
-        record,
-        onCopy: async (text) => {
-          const ok = await copy(text);
-          if (ok) showSuccess(t('已复制'));
-          else showError(t('复制失败'));
-        },
-      });
+      setCodexUsageRecord(record);
+      setCodexUsageOpen(true);
       return;
     }
 
@@ -823,29 +830,13 @@ export const useChannelsData = () => {
           }
         };
 
-        Modal.info({
-          title: t('Ollama 版本信息'),
-          content: infoMessage,
-          centered: true,
-          footer: (
-            <div className='flex justify-end gap-2'>
-              <Button type='tertiary' onClick={handleCopyVersion}>
-                {t('复制版本号')}
-              </Button>
-              <Button
-                type='primary'
-                theme='solid'
-                onClick={() => Modal.destroyAll()}
-              >
-                {t('关闭')}
-              </Button>
-            </div>
-          ),
-          hasCancel: false,
-          hasOk: false,
-          closable: true,
-          maskClosable: true,
-        });
+        showInfo(infoMessage);
+        const shouldCopy = window.confirm(
+          `${infoMessage}\n\n${t('是否复制版本号到剪贴板？')}`,
+        );
+        if (shouldCopy) {
+          await handleCopyVersion();
+        }
       } else {
         showError(message || t('获取 Ollama 版本失败'));
       }
@@ -1203,6 +1194,13 @@ export const useChannelsData = () => {
     setShowMultiKeyManageModal,
     currentMultiKeyChannel,
     setCurrentMultiKeyChannel,
+
+    // Codex usage modal state
+    codexUsageOpen,
+    codexUsageRecord,
+    closeCodexUsage,
+    onCopyCodexUsage,
+
     ...upstreamUpdates,
 
     // Form
diff --git a/web/src/hooks/common/useHeaderBar.js b/web/src/hooks/common/useHeaderBar.js
index a4842ee6ba9..bfc37f12f81 100644
--- a/web/src/hooks/common/useHeaderBar.js
+++ b/web/src/hooks/common/useHeaderBar.js
@@ -26,15 +26,17 @@ import { useSetTheme, useTheme, useActualTheme } from '../../context/Theme';
 import { getLogo, getSystemName, API, showSuccess } from '../../helpers';
 import { normalizeLanguage } from '../../i18n/language';
 import { useIsMobile } from './useIsMobile';
-import { useSidebarCollapsed } from './useSidebarCollapsed';
 import { useMinimumLoadingTime } from './useMinimumLoadingTime';
 
-export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
+// Sidebar drawer state lives in the surrounding `Sidebar.Provider` (mounted
+// in PageLayout) — useHeaderBar no longer needs to touch the legacy
+// `useSidebarCollapsed` hook. MobileMenuButton consumes `useSidebar()`
+// directly when it needs to toggle the mobile sheet.
+export const useHeaderBar = () => {
   const { t, i18n } = useTranslation();
   const [userState, userDispatch] = useContext(UserContext);
   const [statusState] = useContext(StatusContext);
   const isMobile = useIsMobile();
-  const [collapsed, toggleCollapsed] = useSidebarCollapsed();
   const [logoLoaded, setLogoLoaded] = useState(false);
   const navigate = useNavigate();
   const [currentLang, setCurrentLang] = useState(normalizeLanguage(i18n.language));
@@ -149,47 +151,48 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
 
   const handleLanguageChange = useCallback(
     async (lang) => {
-      // Change language immediately for responsive UX
-      const previousLang = normalizeLanguage(i18n.language);
+      // Change language immediately for responsive UX. We intentionally do NOT
+      // roll back on backend failure: the user's intent is to switch the UI
+      // language; if persistence fails we still keep the local change and
+      // localStorage so it survives reloads on the same device.
       i18n.changeLanguage(lang);
       localStorage.setItem('i18nextLng', lang);
 
-      // If user is logged in, save preference to backend
+      // Mirror the language into the cached user.setting so the
+      // UserContext / PageLayout effects that re-apply user.setting.language
+      // on subsequent mounts don't override the user's choice.
+      let settings = {};
+      if (userState?.user?.setting) {
+        try {
+          settings = JSON.parse(userState.user.setting) || {};
+        } catch (e) {
+          settings = {};
+        }
+      }
+      settings.language = lang;
+
+      if (userState?.user) {
+        const nextUser = {
+          ...userState.user,
+          setting: JSON.stringify(settings),
+        };
+        userDispatch({ type: 'login', payload: nextUser });
+        localStorage.setItem('user', JSON.stringify(nextUser));
+      }
+
+      // If logged in, persist preference to backend in the background. We
+      // don't roll back on failure - the local change has already taken
+      // effect and the user gets a console warning if persistence fails.
       if (userState?.user?.id) {
         try {
-          const res = await API.put('/api/user/self', {
-            language: lang,
-          });
-          if (res.data.success) {
-            // Keep user preference and local cache in sync so route changes
-            // don't reapply an older remembered language.
-            let settings = {};
-            if (userState?.user?.setting) {
-              try {
-                settings = JSON.parse(userState.user.setting) || {};
-              } catch (e) {
-                settings = {};
-              }
-            }
-
-            settings.language = lang;
-            const nextUser = {
-              ...userState.user,
-              setting: JSON.stringify(settings),
-            };
-
-            userDispatch({
-              type: 'login',
-              payload: nextUser,
-            });
-            localStorage.setItem('user', JSON.stringify(nextUser));
-          }
+          await API.put(
+            '/api/user/self',
+            { language: lang },
+            { skipErrorHandler: true },
+          );
         } catch (error) {
-          if (previousLang) {
-            i18n.changeLanguage(previousLang);
-            localStorage.setItem('i18nextLng', previousLang);
-          }
-          console.error('Failed to save language preference:', error);
+          // eslint-disable-next-line no-console
+          console.warn('Failed to save language preference:', error);
         }
       }
     },
@@ -209,20 +212,11 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
     [setTheme],
   );
 
-  const handleMobileMenuToggle = useCallback(() => {
-    if (isMobile) {
-      onMobileMenuToggle();
-    } else {
-      toggleCollapsed();
-    }
-  }, [isMobile, onMobileMenuToggle, toggleCollapsed]);
-
   return {
     // State
     userState,
     statusState,
     isMobile,
-    collapsed,
     logoLoaded,
     currentLang,
     location,
@@ -235,7 +229,6 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
     isDemoSiteMode,
     isConsoleRoute,
     theme,
-    drawerOpen,
     headerNavModules,
     pricingRequireAuth,
 
@@ -243,7 +236,6 @@ export const useHeaderBar = ({ onMobileMenuToggle, drawerOpen }) => {
     logout,
     handleLanguageChange,
     handleThemeToggle,
-    handleMobileMenuToggle,
     navigate,
     t,
   };
diff --git a/web/src/hooks/common/useSidebar.js b/web/src/hooks/common/useSidebar.js
index cd74ada2028..b6c1c1a3f1d 100644
--- a/web/src/hooks/common/useSidebar.js
+++ b/web/src/hooks/common/useSidebar.js
@@ -113,7 +113,9 @@ export const useSidebar = () => {
         setLoading(true);
       }
 
-      const res = await API.get('/api/user/self');
+      // skipErrorHandler so a 5xx here doesn't surface as a global toast on
+      // every console mount; we still gracefully fall back below.
+      const res = await API.get('/api/user/self', { skipErrorHandler: true });
       if (res.data.success && res.data.data.sidebar_modules) {
         let config;
         // 检查sidebar_modules是字符串还是对象
diff --git a/web/src/hooks/common/useUserPermissions.js b/web/src/hooks/common/useUserPermissions.js
index 8d57f972ef4..95476832e9b 100644
--- a/web/src/hooks/common/useUserPermissions.js
+++ b/web/src/hooks/common/useUserPermissions.js
@@ -28,23 +28,23 @@ export const useUserPermissions = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
-  // 加载用户权限（从用户信息接口获取）
+  // Load user permissions from user/self. Skip global error handler so an
+  // unavailable backend doesn't spam toast popups; surface error via local state.
   const loadPermissions = async () => {
     try {
       setLoading(true);
       setError(null);
-      const res = await API.get('/api/user/self');
-      if (res.data.success) {
-        const userPermissions = res.data.data.permissions;
+      const res = await API.get('/api/user/self', { skipErrorHandler: true });
+      if (res.data?.success) {
+        const userPermissions = res.data.data?.permissions;
         setPermissions(userPermissions);
-        console.log('用户权限加载成功:', userPermissions);
       } else {
-        setError(res.data.message || '获取权限失败');
-        console.error('获取权限失败:', res.data.message);
+        setError(res.data?.message || '获取权限失败');
       }
     } catch (error) {
       setError('网络错误，请重试');
-      console.error('加载用户权限异常:', error);
+      // eslint-disable-next-line no-console
+      console.warn('加载用户权限异常:', error);
     } finally {
       setLoading(false);
     }
diff --git a/web/src/hooks/dashboard/useDashboardCharts.jsx b/web/src/hooks/dashboard/useDashboardCharts.jsx
index ef0d47b0cd2..869ce56cf88 100644
--- a/web/src/hooks/dashboard/useDashboardCharts.jsx
+++ b/web/src/hooks/dashboard/useDashboardCharts.jsx
@@ -18,7 +18,6 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import { useState, useCallback, useEffect } from 'react';
-import { initVChartSemiTheme } from '@visactor/vchart-semi-theme';
 import {
   modelColorMap,
   renderNumber,
@@ -609,9 +608,7 @@ export const useDashboardCharts = (
 
   // ========== 初始化图表主题 ==========
   useEffect(() => {
-    initVChartSemiTheme({
-      isWatchingThemeSwitch: true,
-    });
+    // Charts now inherit the app theme directly from CSS variables.
   }, []);
 
   return {
diff --git a/web/src/hooks/dashboard/useDashboardData.js b/web/src/hooks/dashboard/useDashboardData.js
index e9b2cad83e7..984fb7233d3 100644
--- a/web/src/hooks/dashboard/useDashboardData.js
+++ b/web/src/hooks/dashboard/useDashboardData.js
@@ -235,12 +235,20 @@ export const useDashboardData = (userState, userDispatch, statusState) => {
   }, [inputs, isAdminUser]);
 
   const getUserData = useCallback(async () => {
-    let res = await API.get(`/api/user/self`);
-    const { success, message, data } = res.data;
-    if (success) {
-      userDispatch({ type: 'login', payload: data });
-    } else {
-      showError(message);
+    try {
+      // Use skipErrorHandler so dashboard load doesn't trigger global 500 toast
+      // when backend is unavailable; we still log so we can debug if needed.
+      const res = await API.get(`/api/user/self`, { skipErrorHandler: true });
+      const { success, message, data } = res.data || {};
+      if (success && data) {
+        userDispatch({ type: 'login', payload: data });
+      } else if (message) {
+        // eslint-disable-next-line no-console
+        console.warn('Failed to refresh user info:', message);
+      }
+    } catch (err) {
+      // eslint-disable-next-line no-console
+      console.warn('Failed to refresh user info', err);
     }
   }, [userDispatch]);
 
diff --git a/web/src/hooks/dashboard/useDashboardStats.jsx b/web/src/hooks/dashboard/useDashboardStats.jsx
index dbf3b67e7b3..b24c6e4d4a8 100644
--- a/web/src/hooks/dashboard/useDashboardStats.jsx
+++ b/web/src/hooks/dashboard/useDashboardStats.jsx
@@ -18,17 +18,19 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import { useMemo } from 'react';
-import { Wallet, Activity, Zap, Gauge } from 'lucide-react';
 import {
-  IconMoneyExchangeStroked,
-  IconHistogram,
-  IconCoinMoneyStroked,
-  IconTextStroked,
-  IconPulse,
-  IconStopwatchStroked,
-  IconTypograph,
-  IconSend,
-} from '@douyinfe/semi-icons';
+  Activity,
+  BarChart3,
+  CircleDollarSign,
+  Coins,
+  Gauge,
+  Send,
+  Timer,
+  Type,
+  Wallet,
+  Waves,
+  Zap,
+} from 'lucide-react';
 import { renderQuota } from '../../helpers';
 import { createSectionTitle } from '../../helpers/dashboard';
 
@@ -46,12 +48,12 @@ export const useDashboardStats = (
     () => [
       {
         title: createSectionTitle(Wallet, t('账户数据')),
-        color: 'bg-blue-50',
+        color: '',
         items: [
           {
             title: t('当前余额'),
             value: renderQuota(userState?.user?.quota),
-            icon: <IconMoneyExchangeStroked />,
+            icon: <CircleDollarSign size={16} />,
             avatarColor: 'blue',
             trendData: [],
             trendColor: '#3b82f6',
@@ -59,7 +61,7 @@ export const useDashboardStats = (
           {
             title: t('历史消耗'),
             value: renderQuota(userState?.user?.used_quota),
-            icon: <IconHistogram />,
+            icon: <BarChart3 size={16} />,
             avatarColor: 'purple',
             trendData: [],
             trendColor: '#8b5cf6',
@@ -68,12 +70,12 @@ export const useDashboardStats = (
       },
       {
         title: createSectionTitle(Activity, t('使用统计')),
-        color: 'bg-green-50',
+        color: '',
         items: [
           {
             title: t('请求次数'),
             value: userState.user?.request_count,
-            icon: <IconSend />,
+            icon: <Send size={16} />,
             avatarColor: 'green',
             trendData: [],
             trendColor: '#10b981',
@@ -81,7 +83,7 @@ export const useDashboardStats = (
           {
             title: t('统计次数'),
             value: times,
-            icon: <IconPulse />,
+            icon: <Waves size={16} />,
             avatarColor: 'cyan',
             trendData: trendData.times,
             trendColor: '#06b6d4',
@@ -90,12 +92,12 @@ export const useDashboardStats = (
       },
       {
         title: createSectionTitle(Zap, t('资源消耗')),
-        color: 'bg-yellow-50',
+        color: '',
         items: [
           {
             title: t('统计额度'),
             value: renderQuota(consumeQuota),
-            icon: <IconCoinMoneyStroked />,
+            icon: <Coins size={16} />,
             avatarColor: 'yellow',
             trendData: trendData.consumeQuota,
             trendColor: '#f59e0b',
@@ -103,7 +105,7 @@ export const useDashboardStats = (
           {
             title: t('统计Tokens'),
             value: isNaN(consumeTokens) ? 0 : consumeTokens.toLocaleString(),
-            icon: <IconTextStroked />,
+            icon: <Type size={16} />,
             avatarColor: 'pink',
             trendData: trendData.tokens,
             trendColor: '#ec4899',
@@ -112,12 +114,12 @@ export const useDashboardStats = (
       },
       {
         title: createSectionTitle(Gauge, t('性能指标')),
-        color: 'bg-indigo-50',
+        color: '',
         items: [
           {
             title: t('平均RPM'),
             value: performanceMetrics.avgRPM,
-            icon: <IconStopwatchStroked />,
+            icon: <Timer size={16} />,
             avatarColor: 'indigo',
             trendData: trendData.rpm,
             trendColor: '#6366f1',
@@ -125,7 +127,7 @@ export const useDashboardStats = (
           {
             title: t('平均TPM'),
             value: performanceMetrics.avgTPM,
-            icon: <IconTypograph />,
+            icon: <Gauge size={16} />,
             avatarColor: 'orange',
             trendData: trendData.tpm,
             trendColor: '#f97316',
diff --git a/web/src/hooks/mj-logs/useMjLogsData.js b/web/src/hooks/mj-logs/useMjLogsData.js
index 66f4e4f7728..6a12ab5a025 100644
--- a/web/src/hooks/mj-logs/useMjLogsData.js
+++ b/web/src/hooks/mj-logs/useMjLogsData.js
@@ -19,7 +19,6 @@ For commercial licensing, please contact support@quantumnous.com
 
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Modal } from '@douyinfe/semi-ui';
 import {
   API,
   copy,
@@ -261,7 +260,7 @@ export const useMjLogsData = () => {
     if (await copy(text)) {
       showSuccess(t('已复制：') + text);
     } else {
-      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
+      showError(`${t('无法复制到剪贴板，请手动复制')}：${text}`);
     }
   };
 
diff --git a/web/src/hooks/model-pricing/useModelPricingData.jsx b/web/src/hooks/model-pricing/useModelPricingData.jsx
index 1fc0f583c76..53bac95b9d6 100644
--- a/web/src/hooks/model-pricing/useModelPricingData.jsx
+++ b/web/src/hooks/model-pricing/useModelPricingData.jsx
@@ -20,7 +20,6 @@ For commercial licensing, please contact support@quantumnous.com
 import { useState, useEffect, useContext, useRef, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { API, copy, showError, showInfo, showSuccess } from '../../helpers';
-import { Modal } from '@douyinfe/semi-ui';
 import { UserContext } from '../../context/User';
 import { StatusContext } from '../../context/Status';
 
@@ -51,6 +50,7 @@ export const useModelPricingData = () => {
   const [usableGroup, setUsableGroup] = useState({});
   const [endpointMap, setEndpointMap] = useState({});
   const [autoGroups, setAutoGroups] = useState([]);
+  const [pricingError, setPricingError] = useState('');
 
   const [statusState] = useContext(StatusContext);
   const [userState] = useContext(UserContext);
@@ -227,37 +227,48 @@ export const useModelPricingData = () => {
 
   const loadPricing = async () => {
     setLoading(true);
-    let url = '/api/pricing';
-    const res = await API.get(url);
-    const {
-      success,
-      message,
-      data,
-      vendors,
-      group_ratio,
-      usable_group,
-      supported_endpoint,
-      auto_groups,
-    } = res.data;
-    if (success) {
-      setGroupRatio(group_ratio);
-      setUsableGroup(usable_group);
-      setSelectedGroup('all');
-      // 构建供应商 Map 方便查找
-      const vendorMap = {};
-      if (Array.isArray(vendors)) {
-        vendors.forEach((v) => {
-          vendorMap[v.id] = v;
-        });
+    setPricingError('');
+    try {
+      let url = '/api/pricing';
+      const res = await API.get(url, { skipErrorHandler: true });
+      const {
+        success,
+        message,
+        data,
+        vendors,
+        group_ratio,
+        usable_group,
+        supported_endpoint,
+        auto_groups,
+      } = res.data;
+      if (success) {
+        const nextModels = Array.isArray(data) ? data : [];
+        const nextGroupRatio = group_ratio || {};
+        setGroupRatio(nextGroupRatio);
+        setUsableGroup(usable_group || {});
+        setSelectedGroup('all');
+        // Build vendor map for quick lookup.
+        const vendorMap = {};
+        if (Array.isArray(vendors)) {
+          vendors.forEach((v) => {
+            vendorMap[v.id] = v;
+          });
+        }
+        setVendorsMap(vendorMap);
+        setEndpointMap(supported_endpoint || {});
+        setAutoGroups(auto_groups || []);
+        setModelsFormat(nextModels, nextGroupRatio, vendorMap);
+      } else {
+        setModels([]);
+        setPricingError(message || t('模型价格加载失败'));
       }
-      setVendorsMap(vendorMap);
-      setEndpointMap(supported_endpoint || {});
-      setAutoGroups(auto_groups || []);
-      setModelsFormat(data, group_ratio, vendorMap);
-    } else {
-      showError(message);
+    } catch (error) {
+      console.error('Failed to load pricing data:', error);
+      setModels([]);
+      setPricingError(t('模型价格加载失败，请稍后重试'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   const refresh = async () => {
@@ -268,7 +279,7 @@ export const useModelPricingData = () => {
     if (await copy(text)) {
       showSuccess(t('已复制：') + text);
     } else {
-      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
+      showError(`${t('无法复制到剪贴板，请手动复制')}：${text}`);
     }
   };
 
@@ -374,6 +385,7 @@ export const useModelPricingData = () => {
     usableGroup,
     endpointMap,
     autoGroups,
+    pricingError,
 
     // 计算属性
     priceRate,
diff --git a/web/src/hooks/models/useModelsData.jsx b/web/src/hooks/models/useModelsData.jsx
index b1bd8b65d6a..f596a1d1c5e 100644
--- a/web/src/hooks/models/useModelsData.jsx
+++ b/web/src/hooks/models/useModelsData.jsx
@@ -351,7 +351,7 @@ export const useModelsData = () => {
       record.status !== 1
         ? {
             style: {
-              background: 'var(--semi-color-disabled-border)',
+              background: 'var(--app-border)',
             },
           }
         : {};
diff --git a/web/src/hooks/playground/useDataLoader.js b/web/src/hooks/playground/useDataLoader.js
index e5dbfeb2a7b..85ad9ddcd68 100644
--- a/web/src/hooks/playground/useDataLoader.js
+++ b/web/src/hooks/playground/useDataLoader.js
@@ -19,7 +19,12 @@ For commercial licensing, please contact support@quantumnous.com
 
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { API, processModelsData, processGroupsData } from '../../helpers';
+import {
+  API,
+  processModelsData,
+  processGroupsData,
+  showError,
+} from '../../helpers';
 import { API_ENDPOINTS } from '../../constants/playground.constants';
 
 export const useDataLoader = (
diff --git a/web/src/hooks/playground/useMessageActions.jsx b/web/src/hooks/playground/useMessageActions.jsx
index 02b5796b28c..1949752f252 100644
--- a/web/src/hooks/playground/useMessageActions.jsx
+++ b/web/src/hooks/playground/useMessageActions.jsx
@@ -18,9 +18,13 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import { useCallback } from 'react';
-import { Toast, Modal } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
-import { getTextContent } from '../../helpers';
+import {
+  getTextContent,
+  showError,
+  showSuccess,
+  showWarning,
+} from '../../helpers';
 import { ERROR_MESSAGES } from '../../constants/playground.constants';
 
 export const useMessageActions = (
@@ -37,10 +41,7 @@ export const useMessageActions = (
       const textToCopy = getTextContent(targetMessage);
 
       if (!textToCopy) {
-        Toast.warning({
-          content: t(ERROR_MESSAGES.NO_TEXT_CONTENT),
-          duration: 2,
-        });
+        showWarning(t(ERROR_MESSAGES.NO_TEXT_CONTENT));
         return;
       }
 
@@ -48,10 +49,7 @@ export const useMessageActions = (
         if (navigator.clipboard?.writeText) {
           try {
             await navigator.clipboard.writeText(text);
-            Toast.success({
-              content: t('消息已复制到剪贴板'),
-              duration: 2,
-            });
+            showSuccess(t('消息已复制到剪贴板'));
           } catch (err) {
             console.error('Clipboard API 复制失败:', err);
             fallbackCopy(text);
@@ -83,10 +81,7 @@ export const useMessageActions = (
           document.body.removeChild(textArea);
 
           if (successful) {
-            Toast.success({
-              content: t('消息已复制到剪贴板'),
-              duration: 2,
-            });
+            showSuccess(t('消息已复制到剪贴板'));
           } else {
             throw new Error('execCommand copy failed');
           }
@@ -103,10 +98,7 @@ export const useMessageActions = (
             errorMessage = t(ERROR_MESSAGES.BROWSER_NOT_SUPPORTED);
           }
 
-          Toast.error({
-            content: errorMessage,
-            duration: 4,
-          });
+          showError(errorMessage);
         }
       };
 
@@ -176,69 +168,48 @@ export const useMessageActions = (
   // 删除消息
   const handleMessageDelete = useCallback(
     (targetMessage) => {
-      Modal.confirm({
-        title: t('确认删除'),
-        content: t('确定要删除这条消息吗？'),
-        okText: t('确定'),
-        cancelText: t('取消'),
-        okButtonProps: {
-          type: 'danger',
-        },
-        onOk: () => {
-          setMessage((prevMessages) => {
-            // 使用引用查找索引，防止重复 id 造成误匹配
-            let messageIndex = prevMessages.findIndex(
-              (msg) => msg === targetMessage,
+      const shouldDelete = window.confirm(t('确定要删除这条消息吗？'));
+      if (!shouldDelete) return;
+      setMessage((prevMessages) => {
+        // 使用引用查找索引，防止重复 id 造成误匹配
+        let messageIndex = prevMessages.findIndex((msg) => msg === targetMessage);
+
+        // 回退到 id 匹配（兼容不同引用场景）
+        if (messageIndex === -1) {
+          messageIndex = prevMessages.findIndex(
+            (msg) => msg.id === targetMessage.id,
+          );
+        }
+
+        if (messageIndex === -1) return prevMessages;
+
+        let updatedMessages;
+        if (
+          targetMessage.role === 'user' &&
+          messageIndex < prevMessages.length - 1
+        ) {
+          const nextMessage = prevMessages[messageIndex + 1];
+          if (nextMessage.role === 'assistant') {
+            showSuccess(t('已删除消息及其回复'));
+            updatedMessages = prevMessages.filter(
+              (_, index) => index !== messageIndex && index !== messageIndex + 1,
+            );
+          } else {
+            showSuccess(t('消息已删除'));
+            updatedMessages = prevMessages.filter(
+              (msg) => msg.id !== targetMessage.id,
             );
+          }
+        } else {
+          showSuccess(t('消息已删除'));
+          updatedMessages = prevMessages.filter(
+            (msg) => msg.id !== targetMessage.id,
+          );
+        }
 
-            // 回退到 id 匹配（兼容不同引用场景）
-            if (messageIndex === -1) {
-              messageIndex = prevMessages.findIndex(
-                (msg) => msg.id === targetMessage.id,
-              );
-            }
-
-            if (messageIndex === -1) return prevMessages;
-
-            let updatedMessages;
-            if (
-              targetMessage.role === 'user' &&
-              messageIndex < prevMessages.length - 1
-            ) {
-              const nextMessage = prevMessages[messageIndex + 1];
-              if (nextMessage.role === 'assistant') {
-                Toast.success({
-                  content: t('已删除消息及其回复'),
-                  duration: 2,
-                });
-                updatedMessages = prevMessages.filter(
-                  (_, index) =>
-                    index !== messageIndex && index !== messageIndex + 1,
-                );
-              } else {
-                Toast.success({
-                  content: t('消息已删除'),
-                  duration: 2,
-                });
-                updatedMessages = prevMessages.filter(
-                  (msg) => msg.id !== targetMessage.id,
-                );
-              }
-            } else {
-              Toast.success({
-                content: t('消息已删除'),
-                duration: 2,
-              });
-              updatedMessages = prevMessages.filter(
-                (msg) => msg.id !== targetMessage.id,
-              );
-            }
-
-            // 删除消息后保存，传入更新后的消息列表
-            setTimeout(() => saveMessages(updatedMessages), 0);
-            return updatedMessages;
-          });
-        },
+        // 删除消息后保存，传入更新后的消息列表
+        setTimeout(() => saveMessages(updatedMessages), 0);
+        return updatedMessages;
       });
     },
     [setMessage, t, saveMessages],
@@ -272,12 +243,9 @@ export const useMessageActions = (
         return updatedMessages;
       });
 
-      Toast.success({
-        content: t(
-          `已切换为${newRole === 'system' ? 'System' : 'Assistant'}角色`,
-        ),
-        duration: 2,
-      });
+      showSuccess(
+        t(`已切换为${newRole === 'system' ? 'System' : 'Assistant'}角色`),
+      );
     },
     [setMessage, t, saveMessages],
   );
diff --git a/web/src/hooks/playground/useMessageEdit.jsx b/web/src/hooks/playground/useMessageEdit.jsx
index b0429188afb..5497f7c2f06 100644
--- a/web/src/hooks/playground/useMessageEdit.jsx
+++ b/web/src/hooks/playground/useMessageEdit.jsx
@@ -18,12 +18,12 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import { useCallback, useState, useRef } from 'react';
-import { Toast, Modal } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 import {
   getTextContent,
   buildApiPayload,
   createLoadingAssistantMessage,
+  showSuccess,
 } from '../../helpers';
 import { MESSAGE_ROLES } from '../../constants/playground.constants';
 
@@ -82,40 +82,33 @@ export const useMessageEdit = (
           prevMessages[messageIndex + 1].role === MESSAGE_ROLES.ASSISTANT;
 
         if (hasSubsequentAssistantReply) {
-          Modal.confirm({
-            title: t('消息已编辑'),
-            content: t('检测到该消息后有AI回复，是否删除后续回复并重新生成？'),
-            okText: t('重新生成'),
-            cancelText: t('仅保存'),
-            onOk: () => {
-              const messagesUntilUser = updatedMessages.slice(
-                0,
-                messageIndex + 1,
+          const shouldRegenerate = window.confirm(
+            t('检测到该消息后有AI回复，是否删除后续回复并重新生成？'),
+          );
+          if (shouldRegenerate) {
+            const messagesUntilUser = updatedMessages.slice(0, messageIndex + 1);
+            setMessage(messagesUntilUser);
+            // 编辑后保存（重新生成的情况），传入更新后的消息列表
+            setTimeout(() => saveMessages(messagesUntilUser), 0);
+
+            setTimeout(() => {
+              const payload = buildApiPayload(
+                messagesUntilUser,
+                null,
+                inputs,
+                parameterEnabled,
               );
-              setMessage(messagesUntilUser);
-              // 编辑后保存（重新生成的情况），传入更新后的消息列表
-              setTimeout(() => saveMessages(messagesUntilUser), 0);
-
-              setTimeout(() => {
-                const payload = buildApiPayload(
-                  messagesUntilUser,
-                  null,
-                  inputs,
-                  parameterEnabled,
-                );
-                setMessage((prevMsg) => [
-                  ...prevMsg,
-                  createLoadingAssistantMessage(),
-                ]);
-                sendRequest(payload, inputs.stream);
-              }, 100);
-            },
-            onCancel: () => {
-              setMessage(updatedMessages);
-              // 编辑后保存（仅保存的情况），传入更新后的消息列表
-              setTimeout(() => saveMessages(updatedMessages), 0);
-            },
-          });
+              setMessage((prevMsg) => [
+                ...prevMsg,
+                createLoadingAssistantMessage(),
+              ]);
+              sendRequest(payload, inputs.stream);
+            }, 100);
+          } else {
+            setMessage(updatedMessages);
+            // 编辑后保存（仅保存的情况），传入更新后的消息列表
+            setTimeout(() => saveMessages(updatedMessages), 0);
+          }
           return prevMessages;
         }
       }
@@ -128,7 +121,7 @@ export const useMessageEdit = (
     setEditingMessageId(null);
     editingMessageRef.current = null;
     setEditValue('');
-    Toast.success({ content: t('消息已更新'), duration: 2 });
+    showSuccess(t('消息已更新'));
   }, [
     editingMessageId,
     editValue,
diff --git a/web/src/hooks/redemptions/useRedemptionsData.jsx b/web/src/hooks/redemptions/useRedemptionsData.jsx
index 26b0f3a1097..eea5e3203a6 100644
--- a/web/src/hooks/redemptions/useRedemptionsData.jsx
+++ b/web/src/hooks/redemptions/useRedemptionsData.jsx
@@ -18,13 +18,12 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import { useState, useEffect } from 'react';
-import { API, showError, showSuccess, copy } from '../../helpers';
+import { API, showError, showSuccess, copy, showInfo } from '../../helpers';
 import { ITEMS_PER_PAGE } from '../../constants';
 import {
   REDEMPTION_ACTIONS,
   REDEMPTION_STATUS,
 } from '../../constants/redemption.constants';
-import { Modal } from '@douyinfe/semi-ui';
 import { useTranslation } from 'react-i18next';
 import { useTableCompactMode } from '../common/useTableCompactMode';
 
@@ -217,7 +216,7 @@ export const useRedemptionsData = () => {
     if (record.status !== REDEMPTION_STATUS.UNUSED || isExpired(record)) {
       return {
         style: {
-          background: 'var(--semi-color-disabled-border)',
+          background: 'var(--app-border)',
         },
       };
     } else {
@@ -230,11 +229,7 @@ export const useRedemptionsData = () => {
     if (await copy(text)) {
       showSuccess('已复制到剪贴板！');
     } else {
-      Modal.error({
-        title: '无法复制到剪贴板，请手动复制',
-        content: text,
-        size: 'large',
-      });
+      showError(`${t('无法复制到剪贴板，请手动复制')}：${text}`);
     }
   };
 
@@ -254,22 +249,23 @@ export const useRedemptionsData = () => {
 
   // Batch delete redemption codes (clear invalid)
   const batchDeleteRedemptions = async () => {
-    Modal.confirm({
-      title: t('确定清除所有失效兑换码？'),
-      content: t('将删除已使用、已禁用及过期的兑换码，此操作不可撤销。'),
-      onOk: async () => {
-        setLoading(true);
-        const res = await API.delete('/api/redemption/invalid');
-        const { success, message, data } = res.data;
-        if (success) {
-          showSuccess(t('已删除 {{count}} 条失效兑换码', { count: data }));
-          await refresh();
-        } else {
-          showError(message);
-        }
-        setLoading(false);
-      },
-    });
+    const shouldDelete = window.confirm(
+      t('将删除已使用、已禁用及过期的兑换码，此操作不可撤销。'),
+    );
+    if (!shouldDelete) {
+      showInfo(t('已取消清除操作'));
+      return;
+    }
+    setLoading(true);
+    const res = await API.delete('/api/redemption/invalid');
+    const { success, message, data } = res.data;
+    if (success) {
+      showSuccess(t('已删除 {{count}} 条失效兑换码', { count: data }));
+      await refresh();
+    } else {
+      showError(message);
+    }
+    setLoading(false);
   };
 
   // Close edit modal
diff --git a/web/src/hooks/task-logs/useTaskLogsData.js b/web/src/hooks/task-logs/useTaskLogsData.js
index 6ba3de3882f..8d2a7cfa8e5 100644
--- a/web/src/hooks/task-logs/useTaskLogsData.js
+++ b/web/src/hooks/task-logs/useTaskLogsData.js
@@ -19,7 +19,6 @@ For commercial licensing, please contact support@quantumnous.com
 
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Modal } from '@douyinfe/semi-ui';
 import {
   API,
   copy,
@@ -265,7 +264,7 @@ export const useTaskLogsData = () => {
     if (await copy(text)) {
       showSuccess(t('已复制：') + text);
     } else {
-      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
+      showError(`${t('无法复制到剪贴板，请手动复制')}：${text}`);
     }
   };
 
diff --git a/web/src/hooks/tokens/useTokensData.jsx b/web/src/hooks/tokens/useTokensData.jsx
index abee82b3977..fb15faa8d47 100644
--- a/web/src/hooks/tokens/useTokensData.jsx
+++ b/web/src/hooks/tokens/useTokensData.jsx
@@ -19,7 +19,6 @@ For commercial licensing, please contact support@quantumnous.com
 
 import { useState, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Modal } from '@douyinfe/semi-ui';
 import {
   API,
   copy,
@@ -125,11 +124,7 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
     if (await copy(text)) {
       showSuccess(t('已复制到剪贴板！'));
     } else {
-      Modal.error({
-        title: t('无法复制到剪贴板，请手动复制'),
-        content: text,
-        size: 'large',
-      });
+      showError(`${t('无法复制到剪贴板，请手动复制')}：${text}`);
     }
   };
 
@@ -366,7 +361,7 @@ export const useTokensData = (openFluentNotification, openCCSwitchModal) => {
     if (record.status !== 1) {
       return {
         style: {
-          background: 'var(--semi-color-disabled-border)',
+          background: 'var(--app-border)',
         },
       };
     } else {
diff --git a/web/src/hooks/usage-logs/useUsageLogsData.jsx b/web/src/hooks/usage-logs/useUsageLogsData.jsx
index fcb7e39f66e..3b97e9e0d9f 100644
--- a/web/src/hooks/usage-logs/useUsageLogsData.jsx
+++ b/web/src/hooks/usage-logs/useUsageLogsData.jsx
@@ -19,7 +19,6 @@ For commercial licensing, please contact support@quantumnous.com
 
 import { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Modal } from '@douyinfe/semi-ui';
 import {
   API,
   getTodayStartTimestamp,
@@ -756,7 +755,7 @@ export const useLogsData = () => {
           expandDataLocal.push({
             key: t('审计信息'),
             value: (
-              <span style={{ color: 'var(--semi-color-warning)' }}>
+              <span style={{ color: 'var(--app-warning)' }}>
                 {t(
                   '该记录由旧版本实例写入，缺少审计信息，建议将实例升级至最新版本以便记录服务器IP、回调IP、支付方式与系统版本等审计字段。',
                 )}
@@ -874,7 +873,7 @@ export const useLogsData = () => {
     if (await copy(text)) {
       showSuccess('已复制：' + text);
     } else {
-      Modal.error({ title: t('无法复制到剪贴板，请手动复制'), content: text });
+      showError(`${t('无法复制到剪贴板，请手动复制')}：${text}`);
     }
   };
 
diff --git a/web/src/hooks/users/useUsersData.jsx b/web/src/hooks/users/useUsersData.jsx
index 96e1a194de0..d4e2bbd0138 100644
--- a/web/src/hooks/users/useUsersData.jsx
+++ b/web/src/hooks/users/useUsersData.jsx
@@ -63,10 +63,11 @@ export const useUsersData = () => {
 
   // Set user format with key field
   const setUserFormat = (users) => {
-    for (let i = 0; i < users.length; i++) {
-      users[i].key = users[i].id;
+    const nextUsers = Array.isArray(users) ? users : [];
+    for (let i = 0; i < nextUsers.length; i++) {
+      nextUsers[i].key = nextUsers[i].id;
     }
-    setUsers(users);
+    setUsers(nextUsers);
   };
 
   // Load users data
@@ -75,9 +76,10 @@ export const useUsersData = () => {
     const res = await API.get(`/api/user/?p=${startIdx}&page_size=${pageSize}`);
     const { success, message, data } = res.data;
     if (success) {
-      const newPageData = data.items;
-      setActivePage(data.page);
-      setUserCount(data.total);
+      const pageData = Array.isArray(data) ? { items: data, page: startIdx, total: data.length } : data || {};
+      const newPageData = pageData.items || [];
+      setActivePage(pageData.page || startIdx);
+      setUserCount(pageData.total || newPageData.length);
       setUserFormat(newPageData);
     } else {
       showError(message);
@@ -110,9 +112,10 @@ export const useUsersData = () => {
     );
     const { success, message, data } = res.data;
     if (success) {
-      const newPageData = data.items;
-      setActivePage(data.page);
-      setUserCount(data.total);
+      const pageData = Array.isArray(data) ? { items: data, page: startIdx, total: data.length } : data || {};
+      const newPageData = pageData.items || [];
+      setActivePage(pageData.page || startIdx);
+      setUserCount(pageData.total || newPageData.length);
       setUserFormat(newPageData);
     } else {
       showError(message);
@@ -216,7 +219,7 @@ export const useUsersData = () => {
     if (record.DeletedAt !== null || record.status !== 1) {
       return {
         style: {
-          background: 'var(--semi-color-disabled-border)',
+          background: 'var(--app-border)',
         },
       };
     } else {
diff --git a/web/src/i18n/locales/en.json b/web/src/i18n/locales/en.json
index 7e4db5f3656..4662e1c7711 100644
--- a/web/src/i18n/locales/en.json
+++ b/web/src/i18n/locales/en.json
@@ -1593,6 +1593,8 @@
     "手动输入": "Manual input",
     "打开 CC Switch": "Open CC Switch",
     "打开侧边栏": "Open sidebar",
+    "打开菜单": "Open menu",
+    "主导航": "Main navigation",
     "打开授权页面": "Open Authorization Page",
     "扣费": "Charge",
     "执行 GC": "Run GC",
diff --git a/web/src/i18n/locales/fr.json b/web/src/i18n/locales/fr.json
index 8e7d143d095..b053a213e53 100644
--- a/web/src/i18n/locales/fr.json
+++ b/web/src/i18n/locales/fr.json
@@ -1597,6 +1597,8 @@
     "手动输入": "Saisie manuelle",
     "打开 CC Switch": "Ouvrir CC Switch",
     "打开侧边栏": "Ouvrir la barre latérale",
+    "打开菜单": "Ouvrir le menu",
+    "主导航": "Navigation principale",
     "打开授权页面": "Ouvrir la page d'autorisation",
     "扣费": "Déduction",
     "执行 GC": "Exécuter le GC",
diff --git a/web/src/i18n/locales/ja.json b/web/src/i18n/locales/ja.json
index 88d2899e17c..2433d2e7819 100644
--- a/web/src/i18n/locales/ja.json
+++ b/web/src/i18n/locales/ja.json
@@ -113,7 +113,7 @@
     "Client Secret": "Client Secret",
     "Codex 授权": "Codex 認可",
     "Codex 渠道不支持批量创建": "Codexチャネルはバッチ作成をサポートしていません",
-    "common.changeLanguage": "common.changeLanguage",
+    "common.changeLanguage": "言語を切り替え",
     "Completion tokens": "Completion tokens",
     "Configuration": "Configuration",
     "context_int/context_string 从请求上下文读取；gjson 从入口请求的 JSON body 按 gjson path 读取。": "context_int/context_stringはリクエストコンテキストから読み取り、gjsonはエントリリクエストのJSON bodyからgjsonパスで読み取ります。",
@@ -1568,6 +1568,8 @@
     "手动输入": "手動入力",
     "打开 CC Switch": "CC Switchを開く",
     "打开侧边栏": "サイドバーを展開",
+    "打开菜单": "メニューを開く",
+    "主导航": "メインナビゲーション",
     "打开授权页面": "認可ページを開く",
     "扣费": "課金",
     "执行 GC": "GCを実行",
diff --git a/web/src/i18n/locales/ru.json b/web/src/i18n/locales/ru.json
index 2980af179f6..328afb31bce 100644
--- a/web/src/i18n/locales/ru.json
+++ b/web/src/i18n/locales/ru.json
@@ -123,7 +123,7 @@
     "Client Secret": "Секрет клиента",
     "Codex 授权": "Авторизация Codex",
     "Codex 渠道不支持批量创建": "Канал Codex не поддерживает пакетное создание",
-    "common.changeLanguage": "common.changeLanguage",
+    "common.changeLanguage": "Сменить язык",
     "Completion tokens": "Completion tokens",
     "Configuration": "Конфигурация",
     "context_int/context_string 从请求上下文读取；gjson 从入口请求的 JSON body 按 gjson path 读取。": "context_int/context_string читаются из контекста запроса; gjson читает из JSON body входящего запроса по gjson path.",
@@ -1615,6 +1615,8 @@
     "手动输入": "Ввести вручную",
     "打开 CC Switch": "Открыть CC Switch",
     "打开侧边栏": "Открыть боковую панель",
+    "打开菜单": "Открыть меню",
+    "主导航": "Главное меню",
     "打开授权页面": "Открыть страницу авторизации",
     "扣费": "Списание",
     "执行 GC": "Выполнить GC",
diff --git a/web/src/i18n/locales/vi.json b/web/src/i18n/locales/vi.json
index 4ca1a77f312..c08176c8b64 100644
--- a/web/src/i18n/locales/vi.json
+++ b/web/src/i18n/locales/vi.json
@@ -1569,6 +1569,8 @@
     "手动输入": "Nhập thủ công",
     "打开 CC Switch": "Mở CC Switch",
     "打开侧边栏": "Mở thanh bên",
+    "打开菜单": "Mở menu",
+    "主导航": "Điều hướng chính",
     "打开授权页面": "Mở trang xác thực",
     "扣费": "Khấu phí",
     "执行 GC": "Thực thi GC",
diff --git a/web/src/i18n/locales/zh-CN.json b/web/src/i18n/locales/zh-CN.json
index 8c52cdfbba7..89eaeb52c53 100644
--- a/web/src/i18n/locales/zh-CN.json
+++ b/web/src/i18n/locales/zh-CN.json
@@ -106,7 +106,7 @@
     "Client Secret": "Client Secret",
     "Codex 授权": "Codex 授权",
     "Codex 渠道不支持批量创建": "Codex 渠道不支持批量创建",
-    "common.changeLanguage": "common.changeLanguage",
+    "common.changeLanguage": "切换语言",
     "Completion tokens": "Completion tokens",
     "Configuration": "Configuration",
     "context_int/context_string 从请求上下文读取；gjson 从入口请求的 JSON body 按 gjson path 读取。": "context_int/context_string 从请求上下文读取；gjson 从入口请求的 JSON body 按 gjson path 读取。",
@@ -1555,6 +1555,8 @@
     "手动输入": "手动输入",
     "打开 CC Switch": "打开 CC Switch",
     "打开侧边栏": "打开侧边栏",
+    "打开菜单": "打开菜单",
+    "主导航": "主导航",
     "打开授权页面": "打开授权页面",
     "扣费": "扣费",
     "执行 GC": "执行 GC",
diff --git a/web/src/i18n/locales/zh-TW.json b/web/src/i18n/locales/zh-TW.json
index b31c9e1e0ea..d52d8d2d573 100644
--- a/web/src/i18n/locales/zh-TW.json
+++ b/web/src/i18n/locales/zh-TW.json
@@ -112,7 +112,7 @@
     "Client Secret": "Client Secret",
     "Codex 授权": "",
     "Codex 渠道不支持批量创建": "",
-    "common.changeLanguage": "common.changeLanguage",
+    "common.changeLanguage": "切換語言",
     "Completion tokens": "",
     "Configuration": "",
     "context_int/context_string 从请求上下文读取；gjson 从入口请求的 JSON body 按 gjson path 读取。": "",
@@ -1565,6 +1565,8 @@
     "手动输入": "手動輸入",
     "打开 CC Switch": "",
     "打开侧边栏": "打開側邊欄",
+    "打开菜单": "開啟選單",
+    "主导航": "主導航",
     "打开授权页面": "",
     "扣费": "扣費",
     "执行 GC": "執行 GC",
diff --git a/web/src/index.css b/web/src/index.css
index 63808fbb50b..9b40adbf0fe 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -1,1008 +1,226 @@
-/* ==================== Tailwind CSS 配置 ==================== */
-@layer tailwind-base, semi, tailwind-components, tailwind-utils;
-
-@layer tailwind-base {
-  @tailwind base;
+@import 'tailwindcss';
+@import '@heroui/styles';
+/* MUST import heroui-pro stylesheet alongside @heroui/styles, otherwise the
+   <Sidebar> / <AppLayout> / <KPI> / etc. components from @heroui-pro/react
+   render with no flexbox layout — sidebar menu icons stack on top of labels
+   instead of sitting beside them, group labels disappear, etc. Mirrors the
+   template-dashboard's globals.css which imports both. */
+@import '@heroui-pro/react/css';
+
+@font-face {
+  font-family: 'Geist Sans';
+  src: url('../node_modules/geist/dist/fonts/geist-sans/Geist-Variable.woff2')
+    format('woff2');
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Geist Sans';
+  src: url('../node_modules/geist/dist/fonts/geist-sans/Geist-Italic[wght].woff2')
+    format('woff2');
+  font-style: italic;
+  font-weight: 100 900;
+  font-display: swap;
 }
 
-@layer tailwind-components {
-  @tailwind components;
+:root {
+  --font-geist: 'Geist Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
+  --app-font-sans: var(--font-sans);
+}
+
+/* The previous custom sidebar tracked its own collapsed state via
+   `body.sidebar-collapsed` + a CSS-driven `--sidebar-current-width`. Since
+   the sidebar now uses heroui-pro's <Sidebar.Provider> (which manages width
+   via its own --sidebar-width / --sidebar-width-icon vars internally),
+   those overrides have been removed. Don't reintroduce them or they'll
+   collide with heroui-pro's collapse animation. */
+
+/* heroui-pro's <Sidebar> hard-codes height: 100svh, which is correct in
+   the template-dashboard's <AppLayout> (where the navbar sits ABOVE the
+   provider). Our PageLayout puts the navbar *inside* Sidebar.Provider, so
+   the sidebar starts ~64px below the viewport top and its 100svh height
+   pushes the bottom (Sidebar.Footer with the user avatar) ~64px below the
+   visible viewport. Override to fit the parent's available height. */
+[data-slot='sidebar'] {
+  height: 100%;
 }
 
-@layer tailwind-utils {
-  @tailwind utilities;
+:root,
+.light,
+.default,
+[data-theme='light'],
+[data-theme='default'] {
+  --background: oklch(97.02% 0.0015 196.96);
+  --foreground: var(--eclipse);
+  --muted: oklch(55.17% 0.003 196.96);
+  --scrollbar: oklch(87.1% 0.0015 196.96);
+  --surface-secondary: oklch(95.24% 0.0023 196.96);
+  --surface-tertiary: oklch(93.73% 0.0023 196.96);
+  --default: oklch(94% 0.0015 196.96);
+  --accent: oklch(88.32% 0.1488 196.96);
+  --accent-foreground: var(--eclipse);
+  --success: oklch(73.29% 0.194 144.01);
+  --warning: oklch(78.19% 0.1589 65.5);
+  --danger: oklch(65.32% 0.2335 18.91);
+  --field-border: oklch(90% 0.0015 196.96);
+  --border: oklch(90% 0.0015 196.96);
+  --separator: oklch(92% 0.0015 196.96);
+  --focus: var(--accent);
+  --font-sans: var(--font-geist);
+
+  --app-background: var(--background);
+  --app-background-elevated: color-mix(
+    in oklch,
+    var(--surface) 82%,
+    transparent
+  );
+  --app-foreground: var(--foreground);
+  --app-text: var(--app-foreground);
+  --app-muted: var(--muted);
+  --app-surface: var(--surface);
+  --app-surface-muted: color-mix(
+    in oklch,
+    var(--surface-secondary) 72%,
+    transparent
+  );
+  --app-border: var(--border);
+  --app-primary: var(--accent);
+  --app-success: var(--success);
+  --app-warning: var(--warning);
+  --app-danger: var(--danger);
+}
+
+.dark,
+[data-theme='dark'] {
+  color-scheme: dark;
+  --background: oklch(12% 0.0015 196.96);
+  --muted: oklch(70.5% 0.003 196.96);
+  --scrollbar: oklch(70.5% 0.0015 196.96);
+  --surface: oklch(21.03% 0.003 196.96);
+  --surface-secondary: oklch(25.7% 0.0023 196.96);
+  --surface-secondary-foreground: oklch(25.7% 0 196.96);
+  --surface-tertiary: oklch(27.21% 0.0023 196.96);
+  --surface-tertiary-foreground: oklch(27.21% 0 196.96);
+  --overlay: oklch(21.03% 0.003 196.96);
+  --default: oklch(27.4% 0.0015 196.96);
+  --accent: oklch(88.32% 0.1488 196.96);
+  --accent-foreground: var(--eclipse);
+  --success: oklch(73.29% 0.194 144.01);
+  --warning: oklch(78.19% 0.1589 65.5);
+  --danger: oklch(65.32% 0.2335 18.91);
+  --field-background: oklch(21.03% 0.003 196.96);
+  --field-placeholder: oklch(70.5% 0 196.96);
+  --field-border: oklch(28% 0.0015 196.96);
+  --segment: oklch(39.64% 0.0015 196.96);
+  --border: oklch(28% 0.0015 196.96);
+  --separator: oklch(25% 0.0015 196.96);
+
+  --app-background: var(--background);
+  --app-background-elevated: color-mix(
+    in oklch,
+    var(--surface) 78%,
+    transparent
+  );
+  --app-foreground: var(--foreground);
+  --app-text: var(--app-foreground);
+  --app-muted: var(--muted);
+  --app-surface: var(--surface);
+  --app-surface-muted: color-mix(
+    in oklch,
+    var(--surface-secondary) 68%,
+    transparent
+  );
+  --app-border: var(--border);
+  --app-primary: var(--accent);
+  --app-success: var(--success);
+  --app-warning: var(--warning);
+  --app-danger: var(--danger);
 }
 
-/* ==================== 全局基础样式 ==================== */
-:root {
-  --sidebar-width: 180px;
-  --sidebar-width-collapsed: 60px;
-  --sidebar-current-width: var(--sidebar-width);
+* {
+  box-sizing: border-box;
 }
 
-body.sidebar-collapsed {
-  --sidebar-current-width: var(--sidebar-width-collapsed);
+html,
+body,
+#root {
+  min-height: 100%;
 }
 
 body {
-  font-family: Lato, 'Helvetica Neue', Arial, Helvetica, 'Microsoft YaHei',
-    sans-serif;
-  color: var(--semi-color-text-0);
-  background-color: var(--semi-color-bg-0);
+  margin: 0;
+  font-family: var(--app-font-sans);
+  color: var(--app-foreground);
+  /* Match template-dashboard: flat solid background sourced from --background. */
+  background-color: var(--app-background);
 }
 
-/* 桌面端禁止 body 纵向滚动 - 防止 VChart tooltip 触发页面滚动条 */
 @media (min-width: 768px) {
   body {
     overflow-y: hidden;
   }
 }
 
-.app-layout {
-  height: 100vh;
-  height: 100dvh;
-}
-
-.app-sider {
-  height: calc(100vh - 64px);
-  height: calc(100dvh - 64px);
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
-
-/* ==================== 布局相关样式 ==================== */
-.semi-layout::-webkit-scrollbar,
-.semi-layout-content::-webkit-scrollbar,
-.semi-sider::-webkit-scrollbar {
-  display: none;
-  width: 0;
-  height: 0;
-}
-
-.semi-layout,
-.semi-layout-content,
-.semi-sider {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-/* ==================== 导航和侧边栏样式 ==================== */
-.semi-navigation-item {
-  margin-bottom: 4px !important;
-  padding: 4px 12px !important;
-}
-
-.semi-navigation-sub-title {
-  padding: 0 !important;
-}
-
-.semi-navigation-item-icon {
-  justify-items: center;
-  align-items: center;
-}
-
-.semi-navigation-item-icon-info {
-  margin-right: 0;
-}
-
-.sidebar-nav .semi-navigation-item-text {
-  flex: 1;
-  min-width: 0;
-}
-
-.semi-navigation-item,
-.semi-navigation-sub-title {
-  height: 100% !important;
-}
-
-.semi-navigation-item-collapsed {
-  height: 44px !important;
-}
-
-#root
-  > section
-  > header
-  > section
-  > div
-  > div
-  > div
-  > div.semi-navigation-header-list-outer
-  > div.semi-navigation-list-wrapper
-  > ul
-  > div
-  > a
-  > li
-  > span {
-  font-weight: 600 !important;
-}
-
-/* 自定义侧边栏样式 */
-.sidebar-container {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  transition: width 0.3s ease;
-  background: var(--semi-color-bg-0);
-}
-
-.sidebar-nav {
-  flex: 1;
-  width: 100%;
-  background: var(--semi-color-bg-0);
-  height: 100%;
-  overflow-x: hidden;
-  border-right: none;
-  overflow-y: auto;
-  min-height: 0;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.sidebar-nav::-webkit-scrollbar {
-  display: none;
-}
-
-/* 侧边栏导航项样式 */
-.sidebar-nav-item {
-  border-radius: 6px;
-  margin: 3px 8px;
-  transition: all 0.15s ease;
-  padding: 8px 12px;
-}
-
-.sidebar-nav-item:hover {
-  background-color: rgba(var(--semi-blue-0), 0.08);
-  color: var(--semi-color-primary);
-}
-
-.sidebar-nav-item-selected {
-  background-color: rgba(var(--semi-blue-0), 0.12);
-  color: var(--semi-color-primary);
-  font-weight: 500;
-}
-
-/* 图标容器样式 */
-.sidebar-icon-container {
-  width: 22px;
-  height: 22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 10px;
-  transition: all 0.2s ease;
-}
-
-.sidebar-sub-icon-container {
-  width: 18px;
-  height: 18px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 10px;
-  margin-left: 1px;
-  transition: all 0.2s ease;
-}
-
-/* 分割线样式 */
-.sidebar-divider {
-  margin: 4px 8px;
-  opacity: 0.15;
-}
-
-/* 分组标签样式 */
-.sidebar-group-label {
-  padding: 4px 15px 8px;
-  color: var(--semi-color-text-2);
-  font-size: 12px;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  opacity: 0.8;
-}
-
-/* 底部折叠按钮 */
-.sidebar-collapse-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 12px;
-  margin-top: auto;
-  cursor: pointer;
-  background-color: var(--semi-color-bg-0);
-  position: sticky;
-  bottom: 0;
-  z-index: 10;
-  box-shadow: 0 -10px 10px -5px var(--semi-color-bg-0);
-  backdrop-filter: blur(4px);
-  border-top: 1px solid rgba(var(--semi-grey-0), 0.08);
-}
-
-.sidebar-collapse-button-inner {
-  width: 28px;
-  height: 28px;
-  border-radius: 9999px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--semi-color-fill-0);
-  transition: all 0.2s ease;
-}
-
-.sidebar-collapse-icon-container {
-  display: inline-block;
-  transition: transform 0.3s ease;
-}
-
-/* 侧边栏区域容器 */
-.sidebar-section {
-  padding-top: 12px;
-}
-
-@media (max-width: 767px) {
-  .sidebar-container {
-    background: var(--semi-color-bg-1);
-    border-right: 1px solid var(--semi-color-border);
+/* This block is layered into `base` so it sits at the same priority as
+   Tailwind's preflight reset and *below* component-level styles from
+   @heroui/styles / @heroui-pro/react. Without the @layer wrapper this rule
+   becomes unlayered and silently overrides .button { font-size: 0.875rem }
+   from HeroUI, making every button render with the body's 16px instead of
+   the design system's 14px. */
+@layer base {
+  button,
+  input,
+  textarea,
+  select {
+    font: inherit;
   }
-
-  .sidebar-nav {
-    background: var(--semi-color-bg-1);
-  }
-
-  .sidebar-collapse-button {
-    background-color: var(--semi-color-bg-1);
-    box-shadow: 0 -10px 10px -5px var(--semi-color-bg-1);
-  }
-}
-
-/* ==================== 聊天界面样式 ==================== */
-.semi-chat {
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  height: 100%;
-  max-width: 100% !important;
-  width: 100% !important;
-  overflow: hidden !important;
-}
-
-.semi-chat-chatBox {
-  max-width: 100% !important;
-  overflow: hidden !important;
-}
-
-.semi-chat-chatBox-wrap {
-  max-width: 100% !important;
-  overflow: hidden !important;
-}
-
-.semi-chat-chatBox-content {
-  min-width: auto;
-  word-break: break-word;
-  max-width: 100% !important;
-  overflow-wrap: break-word !important;
-}
-
-.semi-chat-content {
-  max-width: 100% !important;
-  overflow: hidden !important;
-}
-
-.semi-chat-list {
-  max-width: 100% !important;
-  overflow-x: hidden !important;
-}
-
-.semi-chat-container {
-  overflow-x: hidden !important;
-}
-
-.semi-chat-chatBox-action {
-  column-gap: 0 !important;
-}
-
-.semi-chat-inputBox-clearButton.semi-button .semi-icon {
-  font-size: 20px !important;
-}
-
-/* 隐藏所有聊天相关区域的滚动条 */
-.semi-chat::-webkit-scrollbar,
-.semi-chat-chatBox::-webkit-scrollbar,
-.semi-chat-chatBox-wrap::-webkit-scrollbar,
-.semi-chat-chatBox-content::-webkit-scrollbar,
-.semi-chat-content::-webkit-scrollbar,
-.semi-chat-list::-webkit-scrollbar,
-.semi-chat-container::-webkit-scrollbar {
-  display: none;
-}
-
-.semi-chat,
-.semi-chat-chatBox,
-.semi-chat-chatBox-wrap,
-.semi-chat-chatBox-content,
-.semi-chat-content,
-.semi-chat-list,
-.semi-chat-container {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-/* ==================== 组件特定样式 ==================== */
-/* SelectableButtonGroup */
-.sbg-button .semi-button-content {
-  min-width: 0 !important;
-}
-
-.sbg-content {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  min-width: 0;
-}
-
-.sbg-ellipsis {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* Badge for count/multiplier in filter buttons */
-.sbg-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  min-width: 18px;
-  height: 18px;
-  padding: 0 6px;
-  border-radius: 9px;
-  font-size: 11px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  line-height: 1;
-  background-color: var(--semi-color-fill-0);
-  color: var(--semi-color-text-2);
-  transition: background-color 0.15s ease, color 0.15s ease;
-}
-
-.sbg-badge-active {
-  background-color: var(--semi-color-primary-light-active);
-  color: var(--semi-color-primary);
-}
-
-/* ---- SelectableButtonGroup color variants ---- */
-.sbg-variant-violet {
-  --semi-color-primary: #6d28d9;
-  --semi-color-primary-light-default: rgba(124, 58, 237, 0.08);
-  --semi-color-primary-light-hover: rgba(124, 58, 237, 0.15);
-  --semi-color-primary-light-active: rgba(124, 58, 237, 0.22);
-}
-
-.sbg-variant-teal {
-  --semi-color-primary: #0f766e;
-  --semi-color-primary-light-default: rgba(20, 184, 166, 0.08);
-  --semi-color-primary-light-hover: rgba(20, 184, 166, 0.15);
-  --semi-color-primary-light-active: rgba(20, 184, 166, 0.22);
-}
-
-.sbg-variant-amber {
-  --semi-color-primary: #b45309;
-  --semi-color-primary-light-default: rgba(245, 158, 11, 0.08);
-  --semi-color-primary-light-hover: rgba(245, 158, 11, 0.15);
-  --semi-color-primary-light-active: rgba(245, 158, 11, 0.22);
-}
-
-.sbg-variant-rose {
-  --semi-color-primary: #be123c;
-  --semi-color-primary-light-default: rgba(244, 63, 94, 0.08);
-  --semi-color-primary-light-hover: rgba(244, 63, 94, 0.15);
-  --semi-color-primary-light-active: rgba(244, 63, 94, 0.22);
-}
-
-.sbg-variant-green {
-  --semi-color-primary: #047857;
-  --semi-color-primary-light-default: rgba(16, 185, 129, 0.08);
-  --semi-color-primary-light-hover: rgba(16, 185, 129, 0.15);
-  --semi-color-primary-light-active: rgba(16, 185, 129, 0.22);
-}
-
-/* Dark mode: lighter text, slightly stronger backgrounds */
-html.dark .sbg-variant-violet {
-  --semi-color-primary: #a78bfa;
-  --semi-color-primary-light-default: rgba(139, 92, 246, 0.14);
-  --semi-color-primary-light-hover: rgba(139, 92, 246, 0.22);
-  --semi-color-primary-light-active: rgba(139, 92, 246, 0.3);
-}
-
-html.dark .sbg-variant-teal {
-  --semi-color-primary: #2dd4bf;
-  --semi-color-primary-light-default: rgba(45, 212, 191, 0.14);
-  --semi-color-primary-light-hover: rgba(45, 212, 191, 0.22);
-  --semi-color-primary-light-active: rgba(45, 212, 191, 0.3);
-}
-
-html.dark .sbg-variant-amber {
-  --semi-color-primary: #fbbf24;
-  --semi-color-primary-light-default: rgba(251, 191, 36, 0.14);
-  --semi-color-primary-light-hover: rgba(251, 191, 36, 0.22);
-  --semi-color-primary-light-active: rgba(251, 191, 36, 0.3);
-}
-
-html.dark .sbg-variant-rose {
-  --semi-color-primary: #fb7185;
-  --semi-color-primary-light-default: rgba(251, 113, 133, 0.14);
-  --semi-color-primary-light-hover: rgba(251, 113, 133, 0.22);
-  --semi-color-primary-light-active: rgba(251, 113, 133, 0.3);
-}
-
-html.dark .sbg-variant-green {
-  --semi-color-primary: #34d399;
-  --semi-color-primary-light-default: rgba(52, 211, 153, 0.14);
-  --semi-color-primary-light-hover: rgba(52, 211, 153, 0.22);
-  --semi-color-primary-light-active: rgba(52, 211, 153, 0.3);
-}
-
-/* Tabs组件样式 */
-.semi-tabs-content {
-  padding: 0 !important;
-  height: calc(100% - 40px) !important;
-  flex: 1 !important;
-}
-
-.semi-tabs-content .semi-tabs-pane {
-  height: 100% !important;
-  overflow: hidden !important;
-}
-
-.semi-tabs-content .semi-tabs-pane > div {
-  height: 100% !important;
-}
-
-/* 表格样式 */
-.tableShow {
-  display: revert;
-}
-
-.tableHiddle {
-  display: none !important;
-}
-
-/* 页脚样式 */
-.custom-footer {
-  font-size: 1.1em;
-}
-.custom-footer.na-cb6feafeb3990c78 {
-  position: relative;
 }
 
-/* 卡片内容容器通用样式 */
-.card-content-container {
-  position: relative;
+code,
+pre {
+  font-family: 'SFMono-Regular', 'JetBrains Mono', 'Fira Code', monospace;
 }
 
-.card-content-fade-indicator {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  height: 30px;
-  background: linear-gradient(transparent, var(--semi-color-bg-1));
-  pointer-events: none;
-  z-index: 1;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-}
-
-/* ==================== 调试面板特定样式 ==================== */
-.debug-panel .semi-tabs {
-  height: 100% !important;
-  display: flex !important;
-  flex-direction: column !important;
-}
-
-.debug-panel .semi-tabs-bar {
-  flex-shrink: 0 !important;
-}
-
-.debug-panel .semi-tabs-content {
-  flex: 1 !important;
-  overflow: hidden !important;
-}
-
-/* ==================== 滚动条样式统一管理 ==================== */
-/* 通用隐藏滚动条工具类 */
-.scrollbar-hide {
-  -ms-overflow-style: none;
-  /* IE and Edge */
-  scrollbar-width: none;
-  /* Firefox */
-}
-
-.scrollbar-hide::-webkit-scrollbar {
-  width: 0 !important;
-  height: 0 !important;
-  display: none !important;
-  /* Chrome, Safari, Opera */
-}
-
-/* 表格滚动条样式 */
-.semi-table-body::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.semi-table-body::-webkit-scrollbar-thumb {
-  background: rgba(var(--semi-grey-2), 0.3);
-  border-radius: 2px;
-}
-
-.semi-table-body::-webkit-scrollbar-thumb:hover {
-  background: rgba(var(--semi-grey-2), 0.5);
-}
-
-.semi-table-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* 侧边抽屉滚动条样式 */
-.semi-sidesheet-body::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.semi-sidesheet-body::-webkit-scrollbar-thumb {
-  background: rgba(var(--semi-grey-2), 0.3);
-  border-radius: 2px;
-}
-
-.semi-sidesheet-body::-webkit-scrollbar-thumb:hover {
-  background: rgba(var(--semi-grey-2), 0.5);
-}
-
-.semi-sidesheet-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-/* 隐藏内容区域滚动条 */
-.pricing-scroll-hide,
-.model-test-scroll,
-.card-content-scroll,
-.model-settings-scroll,
-.thinking-content-scroll,
-.custom-request-textarea .semi-input,
-.custom-request-textarea textarea,
-.notice-content-scroll {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.pricing-scroll-hide::-webkit-scrollbar,
-.model-test-scroll::-webkit-scrollbar,
-.card-content-scroll::-webkit-scrollbar,
-.model-settings-scroll::-webkit-scrollbar,
-.thinking-content-scroll::-webkit-scrollbar,
-.custom-request-textarea .semi-input::-webkit-scrollbar,
-.custom-request-textarea textarea::-webkit-scrollbar,
-.notice-content-scroll::-webkit-scrollbar {
-  display: none;
-}
-
-/* 图片列表滚动条样式 */
-.image-list-scroll::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
-}
-
-.image-list-scroll::-webkit-scrollbar-thumb {
-  background: var(--semi-color-tertiary-light-default);
-  border-radius: 3px;
-}
-
-.image-list-scroll::-webkit-scrollbar-thumb:hover {
-  background: var(--semi-color-tertiary);
-}
-
-.image-list-scroll::-webkit-scrollbar-track {
-  background: transparent;
+.app-layout {
+  min-height: 100vh;
+  min-height: 100dvh;
 }
 
-/* ==================== 同步倍率 - 渠道选择器 ==================== */
-
-.components-transfer-source-item,
-.components-transfer-selected-item {
-  display: flex;
-  align-items: center;
-  padding: 8px;
+.app-sider {
+  height: calc(100vh - 4rem);
+  height: calc(100dvh - 4rem);
 }
 
-.semi-transfer-left-list,
-.semi-transfer-right-list {
+.scrollbar-none {
   -ms-overflow-style: none;
   scrollbar-width: none;
 }
 
-.semi-transfer-left-list::-webkit-scrollbar,
-.semi-transfer-right-list::-webkit-scrollbar {
+.scrollbar-none::-webkit-scrollbar {
   display: none;
 }
 
-.components-transfer-source-item .semi-checkbox,
-.components-transfer-selected-item .semi-checkbox {
-  display: flex;
-  align-items: center;
-  width: 100%;
-}
-
-.components-transfer-source-item .semi-avatar,
-.components-transfer-selected-item .semi-avatar {
-  margin-right: 12px;
-  flex-shrink: 0;
-}
-
-.components-transfer-source-item .info,
-.components-transfer-selected-item .info {
-  flex: 1;
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-
-.components-transfer-source-item .name,
-.components-transfer-selected-item .name {
-  font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.components-transfer-source-item .email,
-.components-transfer-selected-item .email {
-  font-size: 12px;
-  color: var(--semi-color-text-2);
-  display: flex;
-  align-items: center;
+.glass-panel {
+  background: var(--app-background-elevated);
+  backdrop-filter: blur(18px);
+  border: 1px solid var(--app-border);
+  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.12);
 }
 
-.components-transfer-selected-item .semi-icon-close {
-  margin-left: 8px;
-  cursor: pointer;
-  color: var(--semi-color-text-2);
-}
-
-.components-transfer-selected-item .semi-icon-close:hover {
-  color: var(--semi-color-text-0);
-}
-
-/* ==================== 未读通知闪光效果 ==================== */
-@keyframes sweep-shine {
-  0% {
-    background-position: 200% 0;
-  }
-
-  100% {
-    background-position: -200% 0;
-  }
-}
-
-.shine-text {
+.sidebar-shell {
   background: linear-gradient(
-    90deg,
-    currentColor 0%,
-    currentColor 40%,
-    rgba(255, 255, 255, 0.9) 50%,
-    currentColor 60%,
-    currentColor 100%
+    180deg,
+    rgba(255, 255, 255, 0.88),
+    rgba(255, 255, 255, 0.72)
   );
-  background-size: 200% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-  animation: sweep-shine 4s linear infinite;
 }
 
-.dark .shine-text {
+.dark .sidebar-shell {
   background: linear-gradient(
-    90deg,
-    currentColor 0%,
-    currentColor 40%,
-    #facc15 50%,
-    currentColor 60%,
-    currentColor 100%
+    180deg,
+    rgba(15, 23, 42, 0.92),
+    rgba(15, 23, 42, 0.82)
   );
-  background-size: 200% 100%;
-  -webkit-background-clip: text;
-  background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-/* ==================== ScrollList 定制样式 ==================== */
-.semi-scrolllist,
-.semi-scrolllist * {
-  -ms-overflow-style: none;
-  /* IE, Edge */
-  scrollbar-width: none;
-  /* Firefox */
-  background: transparent !important;
-}
-
-.semi-scrolllist::-webkit-scrollbar,
-.semi-scrolllist *::-webkit-scrollbar {
-  width: 0 !important;
-  height: 0 !important;
-  display: none !important;
-}
-
-.semi-scrolllist-body {
-  padding: 1px !important;
-}
-
-.semi-scrolllist-list-outer {
-  padding-right: 0 !important;
-}
-
-/* ==================== Banner 背景模糊球 ==================== */
-.blur-ball {
-  position: absolute;
-  width: 360px;
-  height: 360px;
-  border-radius: 50%;
-  filter: blur(120px);
-  pointer-events: none;
-  z-index: -1;
-}
-
-.blur-ball-indigo {
-  background: #6366f1;
-  /* indigo-500 */
-  top: 40px;
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0.5;
-}
-
-.blur-ball-teal {
-  background: #14b8a6;
-  /* teal-400 */
-  top: 200px;
-  left: 30%;
-  opacity: 0.4;
-}
-
-/* 浅色主题下让模糊球更柔和 */
-html:not(.dark) .blur-ball-indigo {
-  opacity: 0.25;
-}
-
-html:not(.dark) .blur-ball-teal {
-  opacity: 0.2;
-}
-
-/* ==================== 卡片马卡龙模糊球（类封装） ==================== */
-/* 使用方式：给容器加上 with-pastel-balls 类即可，无需在 JSX 中插入额外节点 */
-.with-pastel-balls {
-  position: relative;
-  overflow: hidden;
-  /* 默认变量（明亮模式） */
-  --pb1: #ffd1dc;
-  /* 粉 */
-  --pb2: #e5d4ff;
-  /* 薰衣草 */
-  --pb3: #d1fff6;
-  /* 薄荷 */
-  --pb4: #ffe5d9;
-  /* 桃 */
-  --pb-opacity: 0.55;
-  --pb-blur: 60px;
-}
-
-.with-pastel-balls::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-  background: radial-gradient(
-      circle at -5% -10%,
-      var(--pb1) 0%,
-      transparent 60%
-    ),
-    radial-gradient(circle at 105% -10%, var(--pb2) 0%, transparent 55%),
-    radial-gradient(circle at 5% 110%, var(--pb3) 0%, transparent 55%),
-    radial-gradient(circle at 105% 110%, var(--pb4) 0%, transparent 50%);
-  filter: blur(var(--pb-blur));
-  opacity: var(--pb-opacity);
-  transform: translateZ(0);
-}
-
-/* 暗黑模式下更柔和的色彩和透明度 */
-html.dark .with-pastel-balls {
-  /* 使用与明亮模式一致的“刚才那组”马卡龙色，但整体更柔和 */
-  --pb1: #ffd1dc;
-  /* 粉 */
-  --pb2: #e5d4ff;
-  /* 薰衣草 */
-  --pb3: #d1fff6;
-  /* 薄荷 */
-  --pb4: #ffe5d9;
-  /* 桃 */
-  --pb-opacity: 0.36;
-  --pb-blur: 65px;
-}
-
-/* 暗黑模式下用更柔和的混合模式避免突兀的高亮 */
-html.dark .with-pastel-balls::before {
-  mix-blend-mode: screen;
-}
-
-/* ==================== 表格卡片滚动设置 ==================== */
-.table-scroll-card {
-  display: flex;
-  flex-direction: column;
-  height: calc(100vh - 110px);
-  max-height: calc(100vh - 110px);
-}
-
-.table-scroll-card .semi-card-body {
-  flex: 1 1 auto;
-  overflow-y: auto;
-}
-
-.table-scroll-card .semi-card-body::-webkit-scrollbar {
-  width: 6px;
-}
-
-.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb {
-  background: rgba(var(--semi-grey-2), 0.3);
-  border-radius: 2px;
-}
-
-.table-scroll-card .semi-card-body::-webkit-scrollbar-thumb:hover {
-  background: rgba(var(--semi-grey-2), 0.5);
-}
-
-.table-scroll-card .semi-card-body::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-@media (max-width: 767px) {
-  .table-scroll-card {
-    height: calc(100vh - 77px);
-    max-height: calc(100vh - 77px);
-  }
-}
-
-/* ==================== 模型定价页面布局 ==================== */
-.pricing-layout {
-  height: calc(100vh - 60px);
-  overflow: hidden;
-  margin-top: 60px;
 }
-
-.pricing-sidebar {
-  width: clamp(280px, 24vw, 520px) !important;
-  min-width: clamp(280px, 24vw, 520px) !important;
-  max-width: clamp(280px, 24vw, 520px) !important;
-  height: calc(100vh - 60px);
-  background-color: var(--semi-color-bg-0);
-  overflow: auto;
-}
-
-.pricing-content {
-  height: calc(100vh - 60px);
-  background-color: var(--semi-color-bg-0);
-  display: flex;
-  flex-direction: column;
-}
-
-.pricing-pagination-divider {
-  border-color: var(--semi-color-border);
-}
-
-.pricing-content-mobile {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-}
-
-.pricing-search-header {
-  padding: 0.5rem;
-  background-color: var(--semi-color-bg-0);
-  flex-shrink: 0;
-  position: sticky;
-  top: 0;
-  z-index: 5;
-}
-
-.pricing-view-container {
-  flex: 1;
-  overflow: auto;
-}
-
-.pricing-view-container-mobile {
-  flex: 1;
-  overflow: auto;
-  min-height: 0;
-}
-
-/* ==================== semi-ui 组件自定义样式 ==================== */
-.semi-card-header,
-.semi-card-body {
-  padding: 10px !important;
-}
-
-/* ==================== 使用日志: channel affinity tag ==================== */
-.semi-tag.channel-affinity-tag {
-  border: 1px solid rgba(var(--semi-cyan-5), 0.35);
-  background-color: rgba(var(--semi-cyan-5), 0.15);
-  color: rgba(var(--semi-cyan-9), 1);
-  cursor: help;
-  transition:
-    background-color 120ms ease,
-    border-color 120ms ease,
-    box-shadow 120ms ease;
-}
-
-.semi-tag.channel-affinity-tag:hover {
-  background-color: rgba(var(--semi-cyan-5), 0.22);
-  border-color: rgba(var(--semi-cyan-5), 0.6);
-  box-shadow: 0 0 0 2px rgba(var(--semi-cyan-5), 0.18);
-}
-
-.semi-tag.channel-affinity-tag:active {
-  background-color: rgba(var(--semi-cyan-5), 0.28);
-}
-
-.semi-tag.channel-affinity-tag .channel-affinity-tag-content {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-}
-
-/* ==================== 自定义圆角样式 ==================== */
-.semi-radio,
-.semi-tagInput,
-.semi-input-textarea-wrapper,
-.semi-navigation-sub-title,
-.semi-chat-inputBox-sendButton,
-.semi-page-item,
-.semi-navigation-item,
-.semi-tag-closable,
-.semi-input-wrapper,
-.semi-tabs-tab-button,
-.semi-select,
-.semi-button,
-.semi-datepicker-range-input {
-  border-radius: 10px !important;
-}
-
-@keyframes slideInLeft {
-  from {
-    transform: translateX(-100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-/* Channel advanced settings side panel animations */
-@keyframes slideInRight {
-  from {
-    transform: translateX(100%);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.ec-dbcd0a3c01b55203 { forced-color-adjust: auto; }
diff --git a/web/src/index.jsx b/web/src/index.jsx
index 5162b0cbdd2..afce541e1ca 100644
--- a/web/src/index.jsx
+++ b/web/src/index.jsx
@@ -20,21 +20,13 @@ For commercial licensing, please contact support@quantumnous.com
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
-import '@douyinfe/semi-ui/dist/css/semi.css';
 import { UserProvider } from './context/User';
-import 'react-toastify/dist/ReactToastify.css';
 import { StatusProvider } from './context/Status';
 import { ThemeProvider } from './context/Theme';
 import PageLayout from './components/layout/PageLayout';
 import './i18n/i18n';
 import './index.css';
-import { LocaleProvider } from '@douyinfe/semi-ui';
-import { useTranslation } from 'react-i18next';
-import zh_CN from '@douyinfe/semi-ui/lib/es/locale/source/zh_CN';
-import en_GB from '@douyinfe/semi-ui/lib/es/locale/source/en_GB';
 
-// 欢迎信息（二次开发者未经允许不准将此移除）
-// Welcome message (Do not remove this without permission from the original developer)
 if (typeof window !== 'undefined') {
   console.log(
     '%cWE ❤ NEWAPI%c Github: https://github.com/QuantumNous/new-api',
@@ -43,17 +35,6 @@ if (typeof window !== 'undefined') {
   );
 }
 
-function SemiLocaleWrapper({ children }) {
-  const { i18n } = useTranslation();
-  const semiLocale = React.useMemo(
-    () => ({ zh: zh_CN, en: en_GB })[i18n.language] || zh_CN,
-    [i18n.language],
-  );
-  return <LocaleProvider locale={semiLocale}>{children}</LocaleProvider>;
-}
-
-// initialization
-
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
@@ -66,9 +47,7 @@ root.render(
           }}
         >
           <ThemeProvider>
-            <SemiLocaleWrapper>
-              <PageLayout />
-            </SemiLocaleWrapper>
+            <PageLayout />
           </ThemeProvider>
         </BrowserRouter>
       </UserProvider>
diff --git a/web/src/pages/About/index.jsx b/web/src/pages/About/index.jsx
index cd4ad8f1e71..04cfbd8dd12 100644
--- a/web/src/pages/About/index.jsx
+++ b/web/src/pages/About/index.jsx
@@ -20,12 +20,8 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useEffect, useState } from 'react';
 import { API, showError } from '../../helpers';
 import { marked } from 'marked';
-import { Empty } from '@douyinfe/semi-ui';
-import {
-  IllustrationConstruction,
-  IllustrationConstructionDark,
-} from '@douyinfe/semi-illustrations';
 import { useTranslation } from 'react-i18next';
+import { Construction } from 'lucide-react';
 
 const About = () => {
   const { t } = useTranslation();
@@ -34,31 +30,36 @@ const About = () => {
   const currentYear = new Date().getFullYear();
 
   const displayAbout = async () => {
-    setAbout(localStorage.getItem('about') || '');
-    const res = await API.get('/api/about');
-    const { success, message, data } = res.data;
-    if (success) {
-      let aboutContent = data;
-      if (!data.startsWith('https://')) {
-        aboutContent = marked.parse(data);
+    const cachedAbout = localStorage.getItem('about') || '';
+    setAbout(cachedAbout);
+    try {
+      const res = await API.get('/api/about');
+      const { success, message, data } = res.data;
+      if (success) {
+        let aboutContent = data || '';
+        if (aboutContent && !aboutContent.startsWith('https://')) {
+          aboutContent = marked.parse(aboutContent);
+        }
+        setAbout(aboutContent);
+        localStorage.setItem('about', aboutContent);
+      } else {
+        showError(message);
+        setAbout(cachedAbout || '');
       }
-      setAbout(aboutContent);
-      localStorage.setItem('about', aboutContent);
-    } else {
-      showError(message);
-      setAbout(t('加载关于内容失败...'));
+    } catch (error) {
+      console.error('Failed to load about content', error);
+      if (!cachedAbout) {
+        setAbout('');
+      }
+    } finally {
+      setAboutLoaded(true);
     }
-    setAboutLoaded(true);
   };
 
   useEffect(() => {
     displayAbout().then();
   }, []);
 
-  const emptyStyle = {
-    padding: '24px',
-  };
-
   const customDescription = (
     <div style={{ textAlign: 'center' }}>
       <p>{t('可在设置页面设置关于内容，支持 HTML & Markdown')}</p>
@@ -67,7 +68,7 @@ const About = () => {
         href='https://github.com/QuantumNous/new-api'
         target='_blank'
         rel='noopener noreferrer'
-        className='!text-semi-color-primary'
+        className='text-primary'
       >
         https://github.com/QuantumNous/new-api
       </a>
@@ -76,7 +77,7 @@ const About = () => {
           href='https://github.com/QuantumNous/new-api'
           target='_blank'
           rel='noopener noreferrer'
-          className='!text-semi-color-primary'
+          className='text-primary'
         >
           NewAPI
         </a>{' '}
@@ -85,7 +86,7 @@ const About = () => {
           href='https://github.com/QuantumNous'
           target='_blank'
           rel='noopener noreferrer'
-          className='!text-semi-color-primary'
+          className='text-primary'
         >
           QuantumNous
         </a>{' '}
@@ -94,7 +95,7 @@ const About = () => {
           href='https://github.com/songquanpeng/one-api/releases/tag/v0.5.4'
           target='_blank'
           rel='noopener noreferrer'
-          className='!text-semi-color-primary'
+          className='text-primary'
         >
           One API v0.5.4
         </a>{' '}
@@ -103,7 +104,7 @@ const About = () => {
           href='https://github.com/songquanpeng'
           target='_blank'
           rel='noopener noreferrer'
-          className='!text-semi-color-primary'
+          className='text-primary'
         >
           JustSong
         </a>
@@ -114,7 +115,7 @@ const About = () => {
           href='https://github.com/songquanpeng/one-api/blob/v0.5.4/LICENSE'
           target='_blank'
           rel='noopener noreferrer'
-          className='!text-semi-color-primary'
+          className='text-primary'
         >
           {t('MIT许可证')}
         </a>
@@ -123,7 +124,7 @@ const About = () => {
           href='https://www.gnu.org/licenses/agpl-3.0.html'
           target='_blank'
           rel='noopener noreferrer'
-          className='!text-semi-color-primary'
+          className='text-primary'
         >
           {t('AGPL v3.0协议')}
         </a>
@@ -136,20 +137,15 @@ const About = () => {
     <div className='mt-[60px] px-2'>
       {aboutLoaded && about === '' ? (
         <div className='flex justify-center items-center h-screen p-8'>
-          <Empty
-            image={
-              <IllustrationConstruction style={{ width: 150, height: 150 }} />
-            }
-            darkModeImage={
-              <IllustrationConstructionDark
-                style={{ width: 150, height: 150 }}
-              />
-            }
-            description={t('管理员暂时未设置任何关于内容')}
-            style={emptyStyle}
-          >
+          <div className='glass-panel flex max-w-2xl flex-col items-center gap-5 rounded-[2rem] p-8 text-center'>
+            <div className='flex h-24 w-24 items-center justify-center rounded-[2rem] bg-primary/10 text-primary'>
+              <Construction size={44} />
+            </div>
+            <p className='text-base font-semibold text-foreground'>
+              {t('管理员暂时未设置任何关于内容')}
+            </p>
             {customDescription}
-          </Empty>
+          </div>
         </div>
       ) : (
         <>
diff --git a/web/src/pages/Chat/index.jsx b/web/src/pages/Chat/index.jsx
index 26f5570b98b..40b5767131a 100644
--- a/web/src/pages/Chat/index.jsx
+++ b/web/src/pages/Chat/index.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React from 'react';
 import { useTokenKeys } from '../../hooks/chat/useTokenKeys';
-import { Spin } from '@douyinfe/semi-ui';
+import { Spinner } from '@heroui/react';
 import { useParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -66,13 +66,10 @@ const ChatPage = () => {
       allow='camera;microphone'
     />
   ) : (
-    <div className='fixed inset-0 w-screen h-screen flex items-center justify-center bg-white/80 z-[1000] mt-[60px]'>
+    <div className='fixed inset-0 z-[1000] mt-[60px] flex h-screen w-screen items-center justify-center bg-background/80 backdrop-blur-sm'>
       <div className='flex flex-col items-center'>
-        <Spin size='large' spinning={true} tip={null} />
-        <span
-          className='whitespace-nowrap mt-2 text-center'
-          style={{ color: 'var(--semi-color-primary)' }}
-        >
+        <Spinner size='lg' />
+        <span className='mt-3 whitespace-nowrap text-center text-sm font-medium text-sky-600 dark:text-sky-300'>
           {t('正在跳转...')}
         </span>
       </div>
diff --git a/web/src/pages/Forbidden/index.jsx b/web/src/pages/Forbidden/index.jsx
index f36f12bfe29..daba0106961 100644
--- a/web/src/pages/Forbidden/index.jsx
+++ b/web/src/pages/Forbidden/index.jsx
@@ -18,24 +18,22 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Empty } from '@douyinfe/semi-ui';
-import {
-  IllustrationNoAccess,
-  IllustrationNoAccessDark,
-} from '@douyinfe/semi-illustrations';
 import { useTranslation } from 'react-i18next';
+import { ShieldAlert } from 'lucide-react';
 
 const Forbidden = () => {
   const { t } = useTranslation();
   return (
     <div className='flex justify-center items-center h-screen p-8'>
-      <Empty
-        image={<IllustrationNoAccess style={{ width: 250, height: 250 }} />}
-        darkModeImage={
-          <IllustrationNoAccessDark style={{ width: 250, height: 250 }} />
-        }
-        description={t('您无权访问此页面，请联系管理员')}
-      />
+      <div className='glass-panel flex max-w-md flex-col items-center gap-4 rounded-[2rem] p-8 text-center'>
+        <div className='flex h-24 w-24 items-center justify-center rounded-[2rem] bg-danger/10 text-danger'>
+          <ShieldAlert size={44} />
+        </div>
+        <h1 className='text-2xl font-bold text-foreground'>403</h1>
+        <p className='text-sm text-muted'>
+          {t('您无权访问此页面，请联系管理员')}
+        </p>
+      </div>
     </div>
   );
 };
diff --git a/web/src/pages/Home/index.jsx b/web/src/pages/Home/index.jsx
index c153c1b3da9..8c49275d648 100644
--- a/web/src/pages/Home/index.jsx
+++ b/web/src/pages/Home/index.jsx
@@ -18,13 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useContext, useEffect, useState } from 'react';
-import {
-  Button,
-  Typography,
-  Input,
-  ScrollList,
-  ScrollItem,
-} from '@douyinfe/semi-ui';
+import { Button } from '@heroui/react';
 import { API, showError, copy, showSuccess } from '../../helpers';
 import { useIsMobile } from '../../hooks/common/useIsMobile';
 import { API_ENDPOINTS } from '../../constants/common.constant';
@@ -32,12 +26,7 @@ import { StatusContext } from '../../context/Status';
 import { useActualTheme } from '../../context/Theme';
 import { marked } from 'marked';
 import { useTranslation } from 'react-i18next';
-import {
-  IconGithubLogo,
-  IconPlay,
-  IconFile,
-  IconCopy,
-} from '@douyinfe/semi-icons';
+import { CopyIcon, FileText, Github, Play } from 'lucide-react';
 import { Link } from 'react-router-dom';
 import NoticeModal from '../../components/layout/NoticeModal';
 import {
@@ -63,8 +52,6 @@ import {
   Xinference,
 } from '@lobehub/icons';
 
-const { Text } = Typography;
-
 const Home = () => {
   const { t, i18n } = useTranslation();
   const [statusState] = useContext(StatusContext);
@@ -83,31 +70,39 @@ const Home = () => {
 
   const displayHomePageContent = async () => {
     setHomePageContent(localStorage.getItem('home_page_content') || '');
-    const res = await API.get('/api/home_page_content');
-    const { success, message, data } = res.data;
-    if (success) {
-      let content = data;
-      if (!data.startsWith('https://')) {
-        content = marked.parse(data);
-      }
-      setHomePageContent(content);
-      localStorage.setItem('home_page_content', content);
+    try {
+      const res = await API.get('/api/home_page_content', {
+        skipErrorHandler: true,
+      });
+      const { success, message, data } = res.data;
+      if (success) {
+        let content = data;
+        if (!data.startsWith('https://')) {
+          content = marked.parse(data);
+        }
+        setHomePageContent(content);
+        localStorage.setItem('home_page_content', content);
 
-      // 如果内容是 URL，则发送主题模式
-      if (data.startsWith('https://')) {
-        const iframe = document.querySelector('iframe');
-        if (iframe) {
-          iframe.onload = () => {
-            iframe.contentWindow.postMessage({ themeMode: actualTheme }, '*');
-            iframe.contentWindow.postMessage({ lang: i18n.language }, '*');
-          };
+        // 如果内容是 URL，则发送主题模式
+        if (data.startsWith('https://')) {
+          const iframe = document.querySelector('iframe');
+          if (iframe) {
+            iframe.onload = () => {
+              iframe.contentWindow.postMessage({ themeMode: actualTheme }, '*');
+              iframe.contentWindow.postMessage({ lang: i18n.language }, '*');
+            };
+          }
         }
+      } else {
+        showError(message);
+        setHomePageContent('加载首页内容失败...');
       }
-    } else {
-      showError(message);
-      setHomePageContent('加载首页内容失败...');
+    } catch (error) {
+      console.error('加载首页内容失败:', error);
+      setHomePageContent('');
+    } finally {
+      setHomePageContentLoaded(true);
     }
-    setHomePageContentLoaded(true);
   };
 
   const handleCopyBaseURL = async () => {
@@ -123,7 +118,7 @@ const Home = () => {
       const today = new Date().toDateString();
       if (lastCloseDate !== today) {
         try {
-          const res = await API.get('/api/notice');
+          const res = await API.get('/api/notice', { skipErrorHandler: true });
           const { success, data } = res.data;
           if (success && data && data.trim() !== '') {
             setNoticeVisible(true);
@@ -158,7 +153,7 @@ const Home = () => {
       {homePageContentLoaded && homePageContent === '' ? (
         <div className='w-full overflow-x-hidden'>
           {/* Banner 部分 */}
-          <div className='w-full border-b border-semi-color-border min-h-[500px] md:min-h-[600px] lg:min-h-[700px] relative overflow-x-hidden'>
+          <div className='relative min-h-[500px] w-full overflow-x-hidden border-b border-border md:min-h-[600px] lg:min-h-[700px]'>
             {/* 背景模糊晕染球 */}
             <div className='blur-ball blur-ball-indigo' />
             <div className='blur-ball blur-ball-teal' />
@@ -167,7 +162,7 @@ const Home = () => {
               <div className='flex flex-col items-center justify-center text-center max-w-4xl mx-auto'>
                 <div className='flex flex-col items-center justify-center mb-6 md:mb-8'>
                   <h1
-                    className={`text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-semi-color-text-0 leading-tight ${isChinese ? 'tracking-wide md:tracking-wider' : ''}`}
+                    className={`text-4xl md:text-5xl lg:text-6xl xl:text-7xl font-bold text-foreground leading-tight ${isChinese ? 'tracking-wide md:tracking-wider' : ''}`}
                   >
                     <>
                       {t('统一的')}
@@ -175,61 +170,50 @@ const Home = () => {
                       <span className='shine-text'>{t('大模型接口网关')}</span>
                     </>
                   </h1>
-                  <p className='text-base md:text-lg lg:text-xl text-semi-color-text-1 mt-4 md:mt-6 max-w-xl'>
+                  <p className='mt-4 max-w-xl text-base text-muted md:mt-6 md:text-lg lg:text-xl'>
                     {t('更好的价格，更好的稳定性，只需要将模型基址替换为：')}
                   </p>
                   {/* BASE URL 与端点选择 */}
                   <div className='flex flex-col md:flex-row items-center justify-center gap-4 w-full mt-4 md:mt-6 max-w-md'>
-                    <Input
-                      readonly
-                      value={serverAddress}
-                      className='flex-1 !rounded-full'
-                      size={isMobile ? 'default' : 'large'}
-                      suffix={
-                        <div className='flex items-center gap-2'>
-                          <ScrollList
-                            bodyHeight={32}
-                            style={{ border: 'unset', boxShadow: 'unset' }}
-                          >
-                            <ScrollItem
-                              mode='wheel'
-                              cycled={true}
-                              list={endpointItems}
-                              selectedIndex={endpointIndex}
-                              onSelect={({ index }) => setEndpointIndex(index)}
-                            />
-                          </ScrollList>
-                          <Button
-                            type='primary'
-                            onClick={handleCopyBaseURL}
-                            icon={<IconCopy />}
-                            className='!rounded-full'
-                          />
-                        </div>
-                      }
-                    />
+                    <div className='flex min-h-12 flex-1 items-center gap-2 rounded-full border border-border bg-background/80 px-4 py-1 shadow-sm backdrop-blur'>
+                      <input
+                        readOnly
+                        value={serverAddress}
+                        className='min-w-0 flex-1 bg-transparent text-sm font-medium text-foreground outline-none'
+                      />
+                      <span className='hidden rounded-full bg-surface-secondary px-2 py-1 text-xs font-medium text-muted sm:inline-flex'>
+                        {endpointItems[endpointIndex]?.value}
+                      </span>
+                      <Button
+                        isIconOnly
+                        color='primary'
+                        size='sm'
+                        radius='full'
+                        onPress={handleCopyBaseURL}
+                        aria-label={t('复制')}
+                      >
+                        <CopyIcon size={16} />
+                      </Button>
+                    </div>
                   </div>
                 </div>
 
                 {/* 操作按钮 */}
                 <div className='flex flex-row gap-4 justify-center items-center'>
                   <Link to='/console'>
-                    <Button
-                      theme='solid'
-                      type='primary'
-                      size={isMobile ? 'default' : 'large'}
-                      className='!rounded-3xl px-8 py-2'
-                      icon={<IconPlay />}
-                    >
+                    <span className='inline-flex items-center gap-2 rounded-full bg-primary px-8 py-3 font-semibold text-white shadow-lg shadow-primary/20 transition hover:opacity-90'>
+                      <Play size={18} />
                       {t('获取密钥')}
-                    </Button>
+                    </span>
                   </Link>
                   {isDemoSiteMode && statusState?.status?.version ? (
                     <Button
-                      size={isMobile ? 'default' : 'large'}
-                      className='flex items-center !rounded-3xl px-6 py-2'
-                      icon={<IconGithubLogo />}
-                      onClick={() =>
+                      size={isMobile ? 'md' : 'lg'}
+                      radius='full'
+                      variant='flat'
+                      className='px-6 py-2 font-semibold'
+                      startContent={<Github size={18} />}
+                      onPress={() =>
                         window.open(
                           'https://github.com/QuantumNous/new-api',
                           '_blank',
@@ -241,10 +225,12 @@ const Home = () => {
                   ) : (
                     docsLink && (
                       <Button
-                        size={isMobile ? 'default' : 'large'}
-                        className='flex items-center !rounded-3xl px-6 py-2'
-                        icon={<IconFile />}
-                        onClick={() => window.open(docsLink, '_blank')}
+                        size={isMobile ? 'md' : 'lg'}
+                        radius='full'
+                        variant='flat'
+                        className='px-6 py-2 font-semibold'
+                        startContent={<FileText size={18} />}
+                        onPress={() => window.open(docsLink, '_blank')}
                       >
                         {t('文档')}
                       </Button>
@@ -255,12 +241,9 @@ const Home = () => {
                 {/* 框架兼容性图标 */}
                 <div className='mt-12 md:mt-16 lg:mt-20 w-full'>
                   <div className='flex items-center mb-6 md:mb-8 justify-center'>
-                    <Text
-                      type='tertiary'
-                      className='text-lg md:text-xl lg:text-2xl font-light'
-                    >
+                    <span className='text-lg font-light text-muted md:text-xl lg:text-2xl'>
                       {t('支持众多的大模型供应商')}
-                    </Text>
+                    </span>
                   </div>
                   <div className='flex flex-wrap items-center justify-center gap-3 sm:gap-4 md:gap-6 lg:gap-8 max-w-5xl mx-auto px-4'>
                     <div className='w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center'>
@@ -324,9 +307,9 @@ const Home = () => {
                       <Xinference.Color size={40} />
                     </div>
                     <div className='w-8 h-8 sm:w-10 sm:h-10 md:w-12 md:h-12 flex items-center justify-center'>
-                      <Typography.Text className='!text-lg sm:!text-xl md:!text-2xl lg:!text-3xl font-bold'>
+                      <span className='text-lg font-bold sm:text-xl md:text-2xl lg:text-3xl'>
                         30+
-                      </Typography.Text>
+                      </span>
                     </div>
                   </div>
                 </div>
diff --git a/web/src/pages/NotFound/index.jsx b/web/src/pages/NotFound/index.jsx
index d15ab2dfe35..f9a4137666d 100644
--- a/web/src/pages/NotFound/index.jsx
+++ b/web/src/pages/NotFound/index.jsx
@@ -18,24 +18,22 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React from 'react';
-import { Empty } from '@douyinfe/semi-ui';
-import {
-  IllustrationNotFound,
-  IllustrationNotFoundDark,
-} from '@douyinfe/semi-illustrations';
 import { useTranslation } from 'react-i18next';
+import { SearchX } from 'lucide-react';
 
 const NotFound = () => {
   const { t } = useTranslation();
   return (
     <div className='flex justify-center items-center h-screen p-8'>
-      <Empty
-        image={<IllustrationNotFound style={{ width: 250, height: 250 }} />}
-        darkModeImage={
-          <IllustrationNotFoundDark style={{ width: 250, height: 250 }} />
-        }
-        description={t('页面未找到，请检查您的浏览器地址是否正确')}
-      />
+      <div className='glass-panel flex max-w-md flex-col items-center gap-4 rounded-[2rem] p-8 text-center'>
+        <div className='flex h-24 w-24 items-center justify-center rounded-[2rem] bg-warning/10 text-warning'>
+          <SearchX size={44} />
+        </div>
+        <h1 className='text-2xl font-bold text-foreground'>404</h1>
+        <p className='text-sm text-muted'>
+          {t('页面未找到，请检查您的浏览器地址是否正确')}
+        </p>
+      </div>
     </div>
   );
 };
diff --git a/web/src/pages/Playground/index.jsx b/web/src/pages/Playground/index.jsx
index 68a97c335bd..d4371cdd56e 100644
--- a/web/src/pages/Playground/index.jsx
+++ b/web/src/pages/Playground/index.jsx
@@ -20,7 +20,6 @@ For commercial licensing, please contact support@quantumnous.com
 import React, { useContext, useEffect, useCallback, useRef } from 'react';
 import { useSearchParams } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
-import { Layout, Toast, Modal } from '@douyinfe/semi-ui';
 
 // Context
 import { UserContext } from '../../context/User';
@@ -48,6 +47,8 @@ import {
   getTextContent,
   buildApiPayload,
   encodeToBase64,
+  showError,
+  showWarning,
 } from '../../helpers';
 
 // Components
@@ -61,7 +62,7 @@ import ChatArea from '../../components/playground/ChatArea';
 import FloatingButtons from '../../components/playground/FloatingButtons';
 import { PlaygroundProvider } from '../../contexts/PlaygroundContext';
 
-// 生成头像
+// Generate avatar.
 const generateAvatarDataUrl = (username) => {
   if (!username) {
     return 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/docs-icon.png';
@@ -120,7 +121,7 @@ const Playground = () => {
     setCustomRequestBody,
   } = state;
 
-  // API 请求相关
+  // API request handling.
   const { sendRequest, onStopGenerator } = useApiRequest(
     setMessage,
     setDebugData,
@@ -129,10 +130,10 @@ const Playground = () => {
     saveMessagesImmediately,
   );
 
-  // 数据加载
+  // Data loading.
   useDataLoader(userState, inputs, handleInputChange, setModels, setGroups);
 
-  // 消息编辑
+  // Message editing.
   const {
     editingMessageId,
     editValue,
@@ -148,7 +149,7 @@ const Playground = () => {
     saveMessagesImmediately,
   );
 
-  // 消息和自定义请求体同步
+  // Sync messages and custom request body.
   const { syncMessageToCustomBody, syncCustomBodyToMessage } =
     useSyncMessageAndCustomBody(
       customRequestMode,
@@ -160,7 +161,7 @@ const Playground = () => {
       debouncedSaveConfig,
     );
 
-  // 角色信息
+  // Role metadata.
   const roleInfo = {
     user: {
       name: userState?.user?.username || 'User',
@@ -176,7 +177,7 @@ const Playground = () => {
     },
   };
 
-  // 消息操作
+  // Message actions.
   const messageActions = useMessageActions(
     message,
     setMessage,
@@ -184,29 +185,29 @@ const Playground = () => {
     saveMessagesImmediately,
   );
 
-  // 构建预览请求体
+  // Build preview request body.
   const constructPreviewPayload = useCallback(() => {
     try {
-      // 如果是自定义请求体模式且有自定义内容，直接返回解析后的自定义请求体
+      // Use parsed custom body directly when custom request mode is enabled.
       if (customRequestMode && customRequestBody && customRequestBody.trim()) {
         try {
           return JSON.parse(customRequestBody);
         } catch (parseError) {
-          console.warn('自定义请求体JSON解析失败，回退到默认预览:', parseError);
+          console.warn('Failed to parse custom request body, fallback to preview:', parseError);
         }
       }
 
-      // 默认预览逻辑
+      // Default preview logic.
       let messages = [...message];
 
-      // 如果存在用户消息
+      // Handle images on the latest user message when present.
       if (
         !(
           messages.length === 0 ||
           messages.every((msg) => msg.role !== MESSAGE_ROLES.USER)
         )
       ) {
-        // 处理最后一个用户消息的图片
+                // Process images on the latest user message.
         for (let i = messages.length - 1; i >= 0; i--) {
           if (messages[i].role === MESSAGE_ROLES.USER) {
             if (inputs.imageEnabled && inputs.imageUrls) {
@@ -230,20 +231,20 @@ const Playground = () => {
 
       return buildApiPayload(messages, null, inputs, parameterEnabled);
     } catch (error) {
-      console.error('构造预览请求体失败:', error);
+      console.error('Failed to build preview request body:', error);
       return null;
     }
   }, [inputs, parameterEnabled, message, customRequestMode, customRequestBody]);
 
-  // 发送消息
+  // Send message.
   function onMessageSend(content, attachment) {
     console.log('attachment: ', attachment);
 
-    // 创建用户消息和加载消息
+    // Create user and loading messages.
     const userMessage = createMessage(MESSAGE_ROLES.USER, content);
     const loadingMessage = createLoadingAssistantMessage();
 
-    // 如果是自定义请求体模式
+    // Custom request body mode.
     if (customRequestMode && customRequestBody) {
       try {
         const customPayload = JSON.parse(customRequestBody);
@@ -251,23 +252,23 @@ const Playground = () => {
         setMessage((prevMessage) => {
           const newMessages = [...prevMessage, userMessage, loadingMessage];
 
-          // 发送自定义请求体
+          // Send custom request body.
           sendRequest(customPayload, customPayload.stream !== false);
 
-          // 发送消息后保存，传入新消息列表
+          // Save the new message list after sending.
           setTimeout(() => saveMessagesImmediately(newMessages), 0);
 
           return newMessages;
         });
         return;
       } catch (error) {
-        console.error('自定义请求体JSON解析失败:', error);
-        Toast.error(ERROR_MESSAGES.JSON_PARSE_ERROR);
+        console.error('Failed to parse custom request body:', error);
+        showError(ERROR_MESSAGES.JSON_PARSE_ERROR);
         return;
       }
     }
 
-    // 默认模式
+    // Default mode.
     const validImageUrls = inputs.imageUrls.filter((url) => url.trim() !== '');
     const messageContent = buildMessageContent(
       content,
@@ -290,14 +291,14 @@ const Playground = () => {
       );
       sendRequest(payload, inputs.stream);
 
-      // 禁用图片模式
+      // Disable image mode after sending.
       if (inputs.imageEnabled) {
         setTimeout(() => {
           handleInputChange('imageEnabled', false);
         }, 100);
       }
 
-      // 发送消息后保存，传入新消息列表（包含用户消息和加载消息）
+      // Save after sending with user and loading messages.
       const messagesWithLoading = [...newMessages, loadingMessage];
       setTimeout(() => saveMessagesImmediately(messagesWithLoading), 0);
 
@@ -305,7 +306,7 @@ const Playground = () => {
     });
   }
 
-  // 切换推理展开状态
+  // Toggle reasoning expansion state.
   const toggleReasoningExpansion = useCallback(
     (messageId) => {
       setMessage((prevMessages) =>
@@ -319,7 +320,7 @@ const Playground = () => {
     [setMessage],
   );
 
-  // 渲染函数
+  // Render helpers.
   const renderCustomChatContent = useCallback(
     ({ message, className }) => {
       const isCurrentlyEditing = editingMessageId === message.id;
@@ -374,9 +375,9 @@ const Playground = () => {
     [messageActions, styleState, message, editingMessageId, handleMessageEdit],
   );
 
-  // Effects
+  // Effects.
 
-  // 同步消息和自定义请求体
+  // Sync messages and custom request body.
   useEffect(() => {
     syncMessageToCustomBody();
   }, [message, syncMessageToCustomBody]);
@@ -385,16 +386,16 @@ const Playground = () => {
     syncCustomBodyToMessage();
   }, [customRequestBody, syncCustomBodyToMessage]);
 
-  // 处理URL参数
+  // Handle URL params.
   useEffect(() => {
     if (searchParams.get('expired')) {
-      Toast.warning(t('登录过期，请重新登录！'));
+      showWarning(t('登录过期，请重新登录！'));
     }
   }, [searchParams, t]);
 
-  // Playground 组件无需再监听窗口变化，isMobile 由 useIsMobile Hook 自动更新
+  // useIsMobile keeps viewport state updated automatically.
 
-  // 构建预览payload
+  // Build preview payload.
   useEffect(() => {
     const timer = setTimeout(() => {
       const preview = constructPreviewPayload();
@@ -418,7 +419,7 @@ const Playground = () => {
     setDebugData,
   ]);
 
-  // 自动保存配置
+  // Autosave config.
   useEffect(() => {
     debouncedSaveConfig();
   }, [
@@ -430,27 +431,27 @@ const Playground = () => {
     debouncedSaveConfig,
   ]);
 
-  // 清空对话的处理函数
+  // Clear messages.
   const handleClearMessages = useCallback(() => {
     setMessage([]);
-    // 清空对话后保存，传入空数组
+    // Persist the empty message list after clearing.
     setTimeout(() => saveMessagesImmediately([]), 0);
   }, [setMessage, saveMessagesImmediately]);
 
-  // 处理粘贴图片
+  // Handle pasted images.
   const handlePasteImage = useCallback(
     (base64Data) => {
       if (!inputs.imageEnabled) {
         return;
       }
-      // 添加图片到 imageUrls 数组
+      // Add pasted image to imageUrls.
       const newUrls = [...(inputs.imageUrls || []), base64Data];
       handleInputChange('imageUrls', newUrls);
     },
     [inputs.imageEnabled, inputs.imageUrls, handleInputChange],
   );
 
-  // Playground Context 值
+  // Playground context value.
   const playgroundContextValue = {
     onPasteImage: handlePasteImage,
     imageUrls: inputs.imageUrls || [],
@@ -460,9 +461,9 @@ const Playground = () => {
   return (
     <PlaygroundProvider value={playgroundContextValue}>
       <div className='h-full'>
-        <Layout className='h-full bg-transparent flex flex-col md:flex-row'>
+        <div className='flex h-full flex-col bg-transparent md:flex-row'>
           {(showSettings || !isMobile) && (
-            <Layout.Sider
+            <aside
               className={`
               bg-transparent border-r-0 flex-shrink-0 overflow-auto mt-[60px]
               ${
@@ -471,7 +472,6 @@ const Playground = () => {
                   : 'relative z-[1] w-80 h-[calc(100vh-66px)]'
               }
             `}
-              width={isMobile ? '100%' : 320}
             >
               <OptimizedSettingsPanel
                 inputs={inputs}
@@ -493,10 +493,10 @@ const Playground = () => {
                 previewPayload={previewPayload}
                 messages={message}
               />
-            </Layout.Sider>
+            </aside>
           )}
 
-          <Layout.Content className='relative flex-1 overflow-hidden'>
+          <main className='relative flex-1 overflow-hidden'>
             <div className='overflow-hidden flex flex-col lg:flex-row h-[calc(100vh-66px)] mt-[60px]'>
               <div className='flex-1 flex flex-col'>
                 <ChatArea
@@ -518,7 +518,7 @@ const Playground = () => {
                 />
               </div>
 
-              {/* 调试面板 - 桌面端 */}
+              {/* Desktop debug panel */}
               {showDebugPanel && !isMobile && (
                 <div className='w-96 flex-shrink-0 h-full'>
                   <OptimizedDebugPanel
@@ -532,7 +532,7 @@ const Playground = () => {
               )}
             </div>
 
-            {/* 调试面板 - 移动端覆盖层 */}
+            {/* Mobile debug panel overlay */}
             {showDebugPanel && isMobile && (
               <div className='fixed top-0 left-0 right-0 bottom-0 z-[1000] bg-white overflow-auto shadow-lg'>
                 <OptimizedDebugPanel
@@ -547,7 +547,7 @@ const Playground = () => {
               </div>
             )}
 
-            {/* 浮动按钮 */}
+            {/* Floating buttons */}
             <FloatingButtons
               styleState={styleState}
               showSettings={showSettings}
@@ -555,8 +555,8 @@ const Playground = () => {
               onToggleSettings={() => setShowSettings(!showSettings)}
               onToggleDebugPanel={() => setShowDebugPanel(!showDebugPanel)}
             />
-          </Layout.Content>
-        </Layout>
+          </main>
+        </div>
       </div>
     </PlaygroundProvider>
   );
diff --git a/web/src/pages/Setting/Chat/SettingsChats.jsx b/web/src/pages/Setting/Chat/SettingsChats.jsx
index 9744d161678..0a8e1758715 100644
--- a/web/src/pages/Setting/Chat/SettingsChats.jsx
+++ b/web/src/pages/Setting/Chat/SettingsChats.jsx
@@ -6,40 +6,36 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
-  Banner,
   Button,
-  Dropdown,
-  Form,
-  Space,
-  Spin,
-  RadioGroup,
-  Radio,
-  Table,
   Modal,
-  Input,
-  Divider,
-} from '@douyinfe/semi-ui';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  useOverlayState,
+} from '@heroui/react';
 import {
-  IconPlus,
-  IconEdit,
-  IconDelete,
-  IconSearch,
-  IconSaveStroked,
-  IconBolt,
-} from '@douyinfe/semi-icons';
+  ChevronDown,
+  Edit3,
+  Info,
+  Plus,
+  Save,
+  Search,
+  Trash2,
+  Zap,
+} from 'lucide-react';
 import {
   compareObjects,
   API,
@@ -48,34 +44,111 @@ import {
   showWarning,
   verifyJSON,
 } from '../../../helpers';
-import { useTranslation } from 'react-i18next';
+import ClickMenu from '../../../components/common/ui/ClickMenu';
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 font-mono text-xs text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldError({ children }) {
+  if (!children) return null;
+  return <div className='mt-1 text-xs text-danger'>{children}</div>;
+}
+
+function InfoBanner({ children }) {
+  return (
+    <div className='flex items-start gap-2 rounded-xl border border-primary/20 bg-primary/5 px-3 py-2 text-xs text-foreground'>
+      <Info size={14} className='mt-0.5 shrink-0 text-primary' />
+      <span>{children}</span>
+    </div>
+  );
+}
+
+const BUILTIN_TEMPLATES = [
+  {
+    name: 'Cherry Studio',
+    url: 'cherrystudio://providers/api-keys?v=1&data={cherryConfig}',
+  },
+  { name: 'AionUI', url: 'aionui://provider/add?v=1&data={aionuiConfig}' },
+  { name: '流畅阅读', url: 'fluentread' },
+  { name: 'CC Switch', url: 'ccswitch' },
+  {
+    name: 'Lobe Chat',
+    url: 'https://chat-preview.lobehub.com/?settings={"keyVaults":{"openai":{"apiKey":"{key}","baseURL":"{address}/v1"}}}',
+  },
+  {
+    name: 'AI as Workspace',
+    url: 'https://aiaw.app/set-provider?provider={"type":"openai","settings":{"apiKey":"{key}","baseURL":"{address}/v1","compatibility":"strict"}}',
+  },
+  { name: 'AMA 问天', url: 'ama://set-api-key?server={address}&key={key}' },
+  { name: 'OpenCat', url: 'opencat://team/join?domain={address}&token={key}' },
+];
+
+const PAGE_SIZE = 10;
+
+const jsonToConfigs = (jsonString) => {
+  try {
+    const configs = JSON.parse(jsonString);
+    return Array.isArray(configs)
+      ? configs.map((config, index) => ({
+          id: index,
+          name: Object.keys(config)[0] || '',
+          url: Object.values(config)[0] || '',
+        }))
+      : [];
+  } catch (error) {
+    console.error('JSON parse error:', error);
+    return [];
+  }
+};
+
+const configsToJson = (configs) => {
+  const jsonArray = configs.map((config) => ({
+    [config.name]: config.url,
+  }));
+  return JSON.stringify(jsonArray, null, 2);
+};
 
 export default function SettingsChats(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    Chats: '[]',
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
+  const [inputs, setInputs] = useState({ Chats: '[]' });
+  const [inputsRow, setInputsRow] = useState({ Chats: '[]' });
   const [editMode, setEditMode] = useState('visual');
   const [chatConfigs, setChatConfigs] = useState([]);
+  const [searchText, setSearchText] = useState('');
+  const [page, setPage] = useState(1);
+  const [jsonError, setJsonError] = useState('');
+
+  // Edit modal state
   const [modalVisible, setModalVisible] = useState(false);
-  const [editingConfig, setEditingConfig] = useState(null);
   const [isEdit, setIsEdit] = useState(false);
-  const [searchText, setSearchText] = useState('');
-  const modalFormRef = useRef();
-
-  const BUILTIN_TEMPLATES = [
-    { name: 'Cherry Studio', url: 'cherrystudio://providers/api-keys?v=1&data={cherryConfig}' },
-    { name: 'AionUI', url: 'aionui://provider/add?v=1&data={aionuiConfig}' },
-    { name: '流畅阅读', url: 'fluentread' },
-    { name: 'CC Switch', url: 'ccswitch' },
-    { name: 'Lobe Chat', url: 'https://chat-preview.lobehub.com/?settings={"keyVaults":{"openai":{"apiKey":"{key}","baseURL":"{address}/v1"}}}' },
-    { name: 'AI as Workspace', url: 'https://aiaw.app/set-provider?provider={"type":"openai","settings":{"apiKey":"{key}","baseURL":"{address}/v1","compatibility":"strict"}}' },
-    { name: 'AMA 问天', url: 'ama://set-api-key?server={address}&key={key}' },
-    { name: 'OpenCat', url: 'opencat://team/join?domain={address}&token={key}' },
-  ];
+  const [editingConfig, setEditingConfig] = useState(null);
+  const [modalForm, setModalForm] = useState({ name: '', url: '' });
+  const [modalErrors, setModalErrors] = useState({});
+
+  const modalState = useOverlayState({
+    isOpen: modalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) handleModalCancel();
+    },
+  });
+
+  const syncConfigsToJson = (configs) => {
+    const jsonString = configsToJson(configs);
+    setInputs((prev) => ({ ...prev, Chats: jsonString }));
+  };
 
   const addTemplates = (templates) => {
     const existingNames = new Set(chatConfigs.map((c) => c.name));
@@ -84,9 +157,8 @@ export default function SettingsChats(props) {
       showWarning(t('所选模板已存在'));
       return;
     }
-    let maxId = chatConfigs.length > 0
-      ? Math.max(...chatConfigs.map((c) => c.id))
-      : -1;
+    let maxId =
+      chatConfigs.length > 0 ? Math.max(...chatConfigs.map((c) => c.id)) : -1;
     const newItems = toAdd.map((tpl) => ({
       id: ++maxId,
       name: tpl.name,
@@ -98,91 +170,41 @@ export default function SettingsChats(props) {
     showSuccess(t('已添加 {{count}} 个模板', { count: toAdd.length }));
   };
 
-  const jsonToConfigs = (jsonString) => {
-    try {
-      const configs = JSON.parse(jsonString);
-      return Array.isArray(configs)
-        ? configs.map((config, index) => ({
-            id: index,
-            name: Object.keys(config)[0] || '',
-            url: Object.values(config)[0] || '',
-          }))
-        : [];
-    } catch (error) {
-      console.error('JSON parse error:', error);
-      return [];
-    }
-  };
-
-  const configsToJson = (configs) => {
-    const jsonArray = configs.map((config) => ({
-      [config.name]: config.url,
-    }));
-    return JSON.stringify(jsonArray, null, 2);
-  };
-
-  const syncJsonToConfigs = () => {
-    const configs = jsonToConfigs(inputs.Chats);
-    setChatConfigs(configs);
-  };
-
-  const syncConfigsToJson = (configs) => {
-    const jsonString = configsToJson(configs);
-    setInputs((prev) => ({
-      ...prev,
-      Chats: jsonString,
-    }));
-    if (refForm.current && editMode === 'json') {
-      refForm.current.setValues({ Chats: jsonString });
-    }
-  };
-
   async function onSubmit() {
-    try {
-      if (editMode === 'json' && refForm.current) {
-        try {
-          await refForm.current.validate();
-        } catch (error) {
-          console.error('Validation failed:', error);
-          showError(t('请检查输入'));
-          return;
-        }
+    if (editMode === 'json' && jsonError) {
+      showError(t('请检查输入'));
+      return;
+    }
+    const updateArray = compareObjects(inputs, inputsRow);
+    if (!updateArray.length)
+      return showWarning(t('你似乎并没有修改什么'));
+    const requestQueue = updateArray.map((item) => {
+      let value = '';
+      if (typeof inputs[item.key] === 'boolean') {
+        value = String(inputs[item.key]);
+      } else {
+        value = inputs[item.key];
       }
-
-      const updateArray = compareObjects(inputs, inputsRow);
-      if (!updateArray.length)
-        return showWarning(t('你似乎并没有修改什么'));
-      const requestQueue = updateArray.map((item) => {
-        let value = '';
-        if (typeof inputs[item.key] === 'boolean') {
-          value = String(inputs[item.key]);
-        } else {
-          value = inputs[item.key];
-        }
-        return API.put('/api/option/', {
-          key: item.key,
-          value,
-        });
+      return API.put('/api/option/', {
+        key: item.key,
+        value,
       });
-      setLoading(true);
-      try {
-        const res = await Promise.all(requestQueue);
-        if (res.includes(undefined)) {
-          if (requestQueue.length > 1) {
-            showError(t('部分保存失败，请重试'));
-          }
-          return;
+    });
+    setLoading(true);
+    try {
+      const res = await Promise.all(requestQueue);
+      if (res.includes(undefined)) {
+        if (requestQueue.length > 1) {
+          showError(t('部分保存失败，请重试'));
         }
-        showSuccess(t('保存成功'));
-        props.refresh();
-      } catch {
-        showError(t('保存失败，请重试'));
-      } finally {
-        setLoading(false);
+        return;
       }
-    } catch (error) {
-      showError(t('请检查输入'));
-      console.error(error);
+      showSuccess(t('保存成功'));
+      props.refresh();
+    } catch {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
     }
   }
 
@@ -191,8 +213,12 @@ export default function SettingsChats(props) {
     for (let key in props.options) {
       if (Object.keys(inputs).includes(key)) {
         if (key === 'Chats') {
-          const obj = JSON.parse(props.options[key]);
-          currentInputs[key] = JSON.stringify(obj, null, 2);
+          try {
+            const obj = JSON.parse(props.options[key]);
+            currentInputs[key] = JSON.stringify(obj, null, 2);
+          } catch (error) {
+            currentInputs[key] = props.options[key];
+          }
         } else {
           currentInputs[key] = props.options[key];
         }
@@ -200,47 +226,36 @@ export default function SettingsChats(props) {
     }
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    if (refForm.current) {
-      refForm.current.setValues(currentInputs);
-    }
 
-    // 同步到可视化配置
     const configs = jsonToConfigs(currentInputs.Chats || '[]');
     setChatConfigs(configs);
+    setJsonError('');
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.options]);
 
+  // Re-sync visual configs whenever the JSON changes (e.g. after a
+  // template fill or an edit modal save).
   useEffect(() => {
     if (editMode === 'visual') {
-      syncJsonToConfigs();
+      const configs = jsonToConfigs(inputs.Chats || '[]');
+      setChatConfigs(configs);
     }
   }, [inputs.Chats, editMode]);
 
-  useEffect(() => {
-    if (refForm.current && editMode === 'json') {
-      refForm.current.setValues(inputs);
-    }
-  }, [editMode, inputs]);
-
   const handleAddConfig = () => {
     setEditingConfig({ name: '', url: '' });
     setIsEdit(false);
+    setModalForm({ name: '', url: '' });
+    setModalErrors({});
     setModalVisible(true);
-    setTimeout(() => {
-      if (modalFormRef.current) {
-        modalFormRef.current.setValues({ name: '', url: '' });
-      }
-    }, 100);
   };
 
   const handleEditConfig = (config) => {
     setEditingConfig({ ...config });
     setIsEdit(true);
+    setModalForm({ name: config.name || '', url: config.url || '' });
+    setModalErrors({});
     setModalVisible(true);
-    setTimeout(() => {
-      if (modalFormRef.current) {
-        modalFormRef.current.setValues(config);
-      }
-    }, 100);
   };
 
   const handleDeleteConfig = (id) => {
@@ -250,64 +265,79 @@ export default function SettingsChats(props) {
     showSuccess(t('删除成功'));
   };
 
+  const validateModalForm = () => {
+    const next = {};
+    if (!modalForm.name?.trim()) next.name = t('请输入聊天应用名称');
+    if (!modalForm.url?.trim()) next.url = t('请输入URL链接');
+    setModalErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
   const handleModalOk = () => {
-    if (modalFormRef.current) {
-      modalFormRef.current
-        .validate()
-        .then((values) => {
-          // 检查名称是否重复
-          const isDuplicate = chatConfigs.some(
-            (config) =>
-              config.name === values.name &&
-              (!isEdit || config.id !== editingConfig.id),
-          );
-
-          if (isDuplicate) {
-            showError(t('聊天应用名称已存在，请使用其他名称'));
-            return;
-          }
+    if (!validateModalForm()) return;
+    const values = { name: modalForm.name.trim(), url: modalForm.url.trim() };
+
+    const isDuplicate = chatConfigs.some(
+      (config) =>
+        config.name === values.name &&
+        (!isEdit || config.id !== editingConfig.id),
+    );
+    if (isDuplicate) {
+      showError(t('聊天应用名称已存在，请使用其他名称'));
+      return;
+    }
 
-          if (isEdit) {
-            const newConfigs = chatConfigs.map((config) =>
-              config.id === editingConfig.id
-                ? { ...editingConfig, name: values.name, url: values.url }
-                : config,
-            );
-            setChatConfigs(newConfigs);
-            syncConfigsToJson(newConfigs);
-          } else {
-            const maxId =
-              chatConfigs.length > 0
-                ? Math.max(...chatConfigs.map((c) => c.id))
-                : -1;
-            const newConfig = {
-              id: maxId + 1,
-              name: values.name,
-              url: values.url,
-            };
-            const newConfigs = [...chatConfigs, newConfig];
-            setChatConfigs(newConfigs);
-            syncConfigsToJson(newConfigs);
-          }
-          setModalVisible(false);
-          setEditingConfig(null);
-          showSuccess(isEdit ? t('编辑成功') : t('添加成功'));
-        })
-        .catch((error) => {
-          console.error('Modal form validation error:', error);
-        });
+    if (isEdit) {
+      const newConfigs = chatConfigs.map((config) =>
+        config.id === editingConfig.id
+          ? { ...editingConfig, ...values }
+          : config,
+      );
+      setChatConfigs(newConfigs);
+      syncConfigsToJson(newConfigs);
+    } else {
+      const maxId =
+        chatConfigs.length > 0
+          ? Math.max(...chatConfigs.map((c) => c.id))
+          : -1;
+      const newConfig = { id: maxId + 1, ...values };
+      const newConfigs = [...chatConfigs, newConfig];
+      setChatConfigs(newConfigs);
+      syncConfigsToJson(newConfigs);
     }
-  };
 
-  const handleModalCancel = () => {
     setModalVisible(false);
     setEditingConfig(null);
+    showSuccess(isEdit ? t('编辑成功') : t('添加成功'));
   };
 
-  const filteredConfigs = chatConfigs.filter(
-    (config) =>
-      !searchText ||
-      config.name.toLowerCase().includes(searchText.toLowerCase()),
+  function handleModalCancel() {
+    setModalVisible(false);
+    setEditingConfig(null);
+  }
+
+  const filteredConfigs = useMemo(() => {
+    return chatConfigs.filter(
+      (config) =>
+        !searchText ||
+        config.name.toLowerCase().includes(searchText.toLowerCase()),
+    );
+  }, [chatConfigs, searchText]);
+
+  // Reset to first page whenever the filter changes the page-1 set.
+  useEffect(() => {
+    const pageCount = Math.max(
+      1,
+      Math.ceil(filteredConfigs.length / PAGE_SIZE),
+    );
+    if (page > pageCount) setPage(pageCount);
+  }, [filteredConfigs.length, page]);
+
+  const pageStart = (page - 1) * PAGE_SIZE;
+  const pageItems = filteredConfigs.slice(pageStart, pageStart + PAGE_SIZE);
+  const pageCount = Math.max(
+    1,
+    Math.ceil(filteredConfigs.length / PAGE_SIZE),
   );
 
   const highlightKeywords = (text) => {
@@ -317,13 +347,13 @@ export default function SettingsChats(props) {
     return parts.map((part, index) => {
       if (part === '{address}') {
         return (
-          <span key={index} style={{ color: '#0077cc', fontWeight: 600 }}>
+          <span key={index} className='font-semibold text-primary'>
             {part}
           </span>
         );
       } else if (part === '{key}') {
         return (
-          <span key={index} style={{ color: '#ff6b35', fontWeight: 600 }}>
+          <span key={index} className='font-semibold text-warning'>
             {part}
           </span>
         );
@@ -332,231 +362,334 @@ export default function SettingsChats(props) {
     });
   };
 
-  const columns = [
-    {
-      title: t('聊天应用名称'),
-      dataIndex: 'name',
-      key: 'name',
-      render: (text) => text || t('未命名'),
-    },
-    {
-      title: t('URL链接'),
-      dataIndex: 'url',
-      key: 'url',
-      render: (text) => (
-        <div style={{ maxWidth: 300, wordBreak: 'break-all' }}>
-          {highlightKeywords(text)}
-        </div>
-      ),
-    },
-    {
-      title: t('操作'),
-      key: 'action',
-      render: (_, record) => (
-        <Space>
-          <Button
-            type='primary'
-            icon={<IconEdit />}
-            size='small'
-            onClick={() => handleEditConfig(record)}
-          >
-            {t('编辑')}
-          </Button>
-          <Button
-            type='danger'
-            icon={<IconDelete />}
-            size='small'
-            onClick={() => handleDeleteConfig(record.id)}
-          >
-            {t('删除')}
-          </Button>
-        </Space>
-      ),
-    },
-  ];
+  const dropdownItems = useMemo(
+    () => [
+      ...BUILTIN_TEMPLATES.map((tpl) => ({
+        label: tpl.name,
+        onClick: () => addTemplates([tpl]),
+      })),
+      { divider: true },
+      {
+        label: t('全部填入'),
+        onClick: () => addTemplates(BUILTIN_TEMPLATES),
+      },
+    ],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [chatConfigs],
+  );
 
   return (
-    <Spin spinning={loading}>
-      <Space vertical style={{ width: '100%' }}>
-        <Form.Section text={t('聊天设置')}>
-          <Banner
-            type='info'
-            description={t(
-              '链接中的{key}将自动替换为sk-xxxx，{address}将自动替换为系统设置的服务器地址，末尾不带/和/v1',
-            )}
-          />
-
-          <Divider />
-
-          <div style={{ marginBottom: 16 }}>
-            <span style={{ marginRight: 16, fontWeight: 600 }}>
-              {t('编辑模式')}:
-            </span>
-            <RadioGroup
-              type='button'
-              value={editMode}
-              onChange={(e) => {
-                const newMode = e.target.value;
-                setEditMode(newMode);
-
-                // 确保模式切换时数据正确同步
-                setTimeout(() => {
-                  if (newMode === 'json' && refForm.current) {
-                    refForm.current.setValues(inputs);
-                  }
-                }, 100);
-              }}
-            >
-              <Radio value='visual'>{t('可视化编辑')}</Radio>
-              <Radio value='json'>{t('JSON编辑')}</Radio>
-            </RadioGroup>
-          </div>
+    <div className='relative space-y-4'>
+      {loading && (
+        <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+          <Spinner color='primary' />
+        </div>
+      )}
 
-          {editMode === 'visual' ? (
-            <div>
-              <Space style={{ marginBottom: 16 }}>
-                <Button
-                  type='primary'
-                  icon={<IconPlus />}
-                  onClick={handleAddConfig}
-                >
-                  {t('添加聊天配置')}
-                </Button>
-                <Dropdown
-                  trigger='click'
-                  position='bottomLeft'
-                  menu={[
-                    ...BUILTIN_TEMPLATES.map((tpl, idx) => ({
-                      node: 'item',
-                      key: String(idx),
-                      name: tpl.name,
-                      onClick: () => addTemplates([tpl]),
-                    })),
-                    { node: 'divider', key: 'divider' },
-                    {
-                      node: 'item',
-                      key: 'all',
-                      name: t('全部填入'),
-                      onClick: () => addTemplates(BUILTIN_TEMPLATES),
-                    },
-                  ]}
+      <div className='space-y-3'>
+        <div className='text-base font-semibold text-foreground'>
+          {t('聊天设置')}
+        </div>
+        <InfoBanner>
+          {t(
+            '链接中的{key}将自动替换为sk-xxxx，{address}将自动替换为系统设置的服务器地址，末尾不带/和/v1',
+          )}
+        </InfoBanner>
+
+        <div className='border-t border-border' />
+
+        <div className='flex items-center gap-3'>
+          <span className='text-sm font-semibold text-foreground'>
+            {t('编辑模式')}:
+          </span>
+          <div className='inline-flex overflow-hidden rounded-xl border border-border'>
+            {[
+              { value: 'visual', label: t('可视化编辑') },
+              { value: 'json', label: t('JSON编辑') },
+            ].map((mode) => {
+              const active = mode.value === editMode;
+              return (
+                <button
+                  key={mode.value}
+                  type='button'
+                  onClick={() => setEditMode(mode.value)}
+                  className={`px-4 py-1.5 text-sm font-medium transition-colors ${
+                    active
+                      ? 'bg-foreground text-background'
+                      : 'bg-background text-muted hover:bg-surface-secondary'
+                  }`}
                 >
-                  <Button icon={<IconBolt />}>
+                  {mode.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+
+        {editMode === 'visual' ? (
+          <div className='space-y-3'>
+            <div className='flex flex-wrap items-center gap-2'>
+              <Button
+                color='primary'
+                startContent={<Plus size={14} />}
+                onPress={handleAddConfig}
+              >
+                {t('添加聊天配置')}
+              </Button>
+              <ClickMenu
+                placement='bottomLeft'
+                items={dropdownItems}
+                trigger={
+                  <Button
+                    variant='flat'
+                    startContent={<Zap size={14} />}
+                    endContent={<ChevronDown size={14} />}
+                  >
                     {t('填入模板')}
                   </Button>
-                </Dropdown>
-                <Button
-                  type='primary'
-                  theme='solid'
-                  icon={<IconSaveStroked />}
-                  onClick={onSubmit}
-                >
-                  {t('保存聊天设置')}
-                </Button>
-                <Input
-                  prefix={<IconSearch />}
-                  placeholder={t('搜索聊天应用名称')}
+                }
+              />
+              <Button
+                color='primary'
+                variant='solid'
+                startContent={<Save size={14} />}
+                onPress={onSubmit}
+              >
+                {t('保存聊天设置')}
+              </Button>
+              <div className='relative ml-auto w-[250px]'>
+                <Search
+                  size={14}
+                  className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+                />
+                <input
+                  type='text'
                   value={searchText}
-                  onChange={(value) => setSearchText(value)}
-                  style={{ width: 250 }}
-                  showClear
+                  onChange={(event) => setSearchText(event.target.value)}
+                  placeholder={t('搜索聊天应用名称')}
+                  className={`${inputClass} pl-8`}
                 />
-              </Space>
-
-              <Table
-                columns={columns}
-                dataSource={filteredConfigs}
-                rowKey='id'
-                pagination={{
-                  pageSize: 10,
-                  showSizeChanger: false,
-                  showQuickJumper: true,
-                  showTotal: (total, range) =>
-                    t('共 {{total}} 项，当前显示 {{start}}-{{end}} 项', {
-                      total,
-                      start: range[0],
-                      end: range[1],
-                    }),
-                }}
-              />
+              </div>
             </div>
-          ) : (
-            <Form
-              values={inputs}
-              getFormApi={(formAPI) => (refForm.current = formAPI)}
-            >
-              <Form.TextArea
-                label={t('聊天配置')}
-                extraText={''}
-                placeholder={t('为一个 JSON 文本')}
-                field={'Chats'}
-                autosize={{ minRows: 6, maxRows: 12 }}
-                trigger='blur'
-                stopValidateWithError
-                rules={[
-                  {
-                    validator: (rule, value) => {
-                      return verifyJSON(value);
-                    },
-                    message: t('不是合法的 JSON 字符串'),
-                  },
-                ]}
-                onChange={(value) =>
-                  setInputs({
-                    ...inputs,
-                    Chats: value,
-                  })
+
+            <div className='overflow-x-auto rounded-xl border border-border'>
+              <table className='w-full text-sm'>
+                <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+                  <tr>
+                    <th className='px-4 py-2 text-left font-medium'>
+                      {t('聊天应用名称')}
+                    </th>
+                    <th className='px-4 py-2 text-left font-medium'>
+                      {t('URL链接')}
+                    </th>
+                    <th className='w-[180px] px-4 py-2 text-left font-medium'>
+                      {t('操作')}
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className='divide-y divide-border'>
+                  {pageItems.length === 0 ? (
+                    <tr>
+                      <td
+                        colSpan={3}
+                        className='px-4 py-10 text-center text-sm text-muted'
+                      >
+                        {t('暂无数据')}
+                      </td>
+                    </tr>
+                  ) : (
+                    pageItems.map((record) => (
+                      <tr
+                        key={record.id}
+                        className='bg-background hover:bg-surface-secondary/60'
+                      >
+                        <td className='px-4 py-3 align-top text-foreground'>
+                          {record.name || t('未命名')}
+                        </td>
+                        <td className='px-4 py-3 align-top text-foreground'>
+                          <div className='max-w-[420px] break-all'>
+                            {highlightKeywords(record.url)}
+                          </div>
+                        </td>
+                        <td className='px-4 py-3 align-top'>
+                          <div className='flex flex-wrap gap-2'>
+                            <Button
+                              size='sm'
+                              variant='flat'
+                              color='primary'
+                              startContent={<Edit3 size={14} />}
+                              onPress={() => handleEditConfig(record)}
+                            >
+                              {t('编辑')}
+                            </Button>
+                            <Button
+                              size='sm'
+                              variant='flat'
+                              color='danger'
+                              startContent={<Trash2 size={14} />}
+                              onPress={() => handleDeleteConfig(record.id)}
+                            >
+                              {t('删除')}
+                            </Button>
+                          </div>
+                        </td>
+                      </tr>
+                    ))
+                  )}
+                </tbody>
+              </table>
+            </div>
+
+            {filteredConfigs.length > PAGE_SIZE && (
+              <div className='flex items-center justify-between text-xs text-muted'>
+                <span>
+                  {t('共 {{total}} 项，当前显示 {{start}}-{{end}} 项', {
+                    total: filteredConfigs.length,
+                    start: pageStart + 1,
+                    end: Math.min(
+                      filteredConfigs.length,
+                      pageStart + pageItems.length,
+                    ),
+                  })}
+                </span>
+                <div className='flex items-center gap-2'>
+                  <Button
+                    size='sm'
+                    variant='light'
+                    isDisabled={page <= 1}
+                    onPress={() => setPage((p) => Math.max(1, p - 1))}
+                  >
+                    {t('上一页')}
+                  </Button>
+                  <span>
+                    {page} / {pageCount}
+                  </span>
+                  <Button
+                    size='sm'
+                    variant='light'
+                    isDisabled={page >= pageCount}
+                    onPress={() =>
+                      setPage((p) => Math.min(pageCount, p + 1))
+                    }
+                  >
+                    {t('下一页')}
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className='space-y-2'>
+            <FieldLabel>{t('聊天配置')}</FieldLabel>
+            <textarea
+              rows={10}
+              value={inputs.Chats || ''}
+              onChange={(event) => {
+                const value = event.target.value;
+                setInputs((prev) => ({ ...prev, Chats: value }));
+              }}
+              onBlur={(event) => {
+                const value = event.target.value;
+                if (value && !verifyJSON(value)) {
+                  setJsonError(t('不是合法的 JSON 字符串'));
+                } else {
+                  setJsonError('');
                 }
-              />
-            </Form>
-          )}
-        </Form.Section>
-
-        {editMode === 'json' && (
-          <Space>
-            <Button
-              type='primary'
-              icon={<IconSaveStroked />}
-              onClick={onSubmit}
-            >
-              {t('保存聊天设置')}
-            </Button>
-          </Space>
+              }}
+              placeholder={t('为一个 JSON 文本')}
+              className={textareaClass}
+            />
+            <FieldError>{jsonError}</FieldError>
+          </div>
         )}
-      </Space>
-
-      <Modal
-        title={isEdit ? t('编辑聊天配置') : t('添加聊天配置')}
-        visible={modalVisible}
-        onOk={handleModalOk}
-        onCancel={handleModalCancel}
-        width={600}
-      >
-        <Form getFormApi={(api) => (modalFormRef.current = api)}>
-          <Form.Input
-            field='name'
-            label={t('聊天应用名称')}
-            placeholder={t('请输入聊天应用名称')}
-            rules={[
-              { required: true, message: t('请输入聊天应用名称') },
-              { min: 1, message: t('名称不能为空') },
-            ]}
-          />
-          <Form.Input
-            field='url'
-            label={t('URL链接')}
-            placeholder={t('请输入完整的URL链接')}
-            rules={[{ required: true, message: t('请输入URL链接') }]}
-          />
-          <Banner
-            type='info'
-            description={t(
-              '提示：链接中的{key}将被替换为API密钥，{address}将被替换为服务器地址',
-            )}
-            style={{ marginTop: 16 }}
-          />
-        </Form>
+      </div>
+
+      {editMode === 'json' && (
+        <div>
+          <Button
+            color='primary'
+            startContent={<Save size={14} />}
+            onPress={onSubmit}
+          >
+            {t('保存聊天设置')}
+          </Button>
+        </div>
+      )}
+
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='lg' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <span>
+                  {isEdit ? t('编辑聊天配置') : t('添加聊天配置')}
+                </span>
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='space-y-2'>
+                  <FieldLabel required>{t('聊天应用名称')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={modalForm.name}
+                    onChange={(event) => {
+                      setModalForm((prev) => ({
+                        ...prev,
+                        name: event.target.value,
+                      }));
+                      if (modalErrors.name) {
+                        setModalErrors((prev) => ({
+                          ...prev,
+                          name: undefined,
+                        }));
+                      }
+                    }}
+                    placeholder={t('请输入聊天应用名称')}
+                    className={inputClass}
+                  />
+                  <FieldError>{modalErrors.name}</FieldError>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel required>{t('URL链接')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={modalForm.url}
+                    onChange={(event) => {
+                      setModalForm((prev) => ({
+                        ...prev,
+                        url: event.target.value,
+                      }));
+                      if (modalErrors.url) {
+                        setModalErrors((prev) => ({
+                          ...prev,
+                          url: undefined,
+                        }));
+                      }
+                    }}
+                    placeholder={t('请输入完整的URL链接')}
+                    className={inputClass}
+                  />
+                  <FieldError>{modalErrors.url}</FieldError>
+                </div>
+
+                <InfoBanner>
+                  {t(
+                    '提示：链接中的{key}将被替换为API密钥，{address}将被替换为服务器地址',
+                  )}
+                </InfoBanner>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={handleModalCancel}>
+                  {t('取消')}
+                </Button>
+                <Button color='primary' onPress={handleModalOk}>
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
-    </Spin>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Dashboard/SettingsAPIInfo.jsx b/web/src/pages/Setting/Dashboard/SettingsAPIInfo.jsx
index 8116cfc0fa5..4e7ab32a8f4 100644
--- a/web/src/pages/Setting/Dashboard/SettingsAPIInfo.jsx
+++ b/web/src/pages/Setting/Dashboard/SettingsAPIInfo.jsx
@@ -17,37 +17,121 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Button,
-  Space,
-  Table,
-  Form,
-  Typography,
-  Empty,
-  Divider,
-  Avatar,
+  Input,
   Modal,
-  Tag,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
   Switch,
-} from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { Plus, Edit, Trash2, Save, Settings } from 'lucide-react';
+  useOverlayState,
+} from '@heroui/react';
+import { Edit, Inbox, Plus, Save, Settings, Trash2 } from 'lucide-react';
 import { API, showError, showSuccess } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+const selectClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+const COLOR_OPTIONS = [
+  'blue',
+  'green',
+  'cyan',
+  'purple',
+  'pink',
+  'red',
+  'orange',
+  'amber',
+  'yellow',
+  'lime',
+  'light-green',
+  'teal',
+  'light-blue',
+  'indigo',
+  'violet',
+  'grey',
+];
+
+const TONE_TO_HEX = {
+  blue: '#3b82f6',
+  green: '#22c55e',
+  cyan: '#06b6d4',
+  purple: '#a855f7',
+  pink: '#ec4899',
+  red: '#ef4444',
+  orange: '#f97316',
+  amber: '#f59e0b',
+  yellow: '#eab308',
+  lime: '#84cc16',
+  'light-green': '#4ade80',
+  teal: '#14b8a6',
+  'light-blue': '#0ea5e9',
+  indigo: '#6366f1',
+  violet: '#8b5cf6',
+  grey: '#94a3b8',
+};
+
+function ColorChip({ color, children }) {
+  const hex = TONE_TO_HEX[color] || '#94a3b8';
+  return (
+    <span
+      className='inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium'
+      style={{
+        backgroundColor: `${hex}1A`,
+        color: hex,
+        maxWidth: 280,
+      }}
+    >
+      <span className='truncate'>{children}</span>
+    </span>
+  );
+}
 
-const { Text } = Typography;
+function ColorDot({ color, size = 18 }) {
+  const hex = TONE_TO_HEX[color] || '#94a3b8';
+  return (
+    <span
+      style={{
+        width: size,
+        height: size,
+        borderRadius: '50%',
+        background: hex,
+        display: 'inline-block',
+      }}
+    />
+  );
+}
+
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
 
 const SettingsAPIInfo = ({ options, refresh }) => {
   const { t } = useTranslation();
 
   const [apiInfoList, setApiInfoList] = useState([]);
   const [showApiModal, setShowApiModal] = useState(false);
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [deletingApi, setDeletingApi] = useState(null);
   const [editingApi, setEditingApi] = useState(null);
   const [modalLoading, setModalLoading] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -58,41 +142,21 @@ const SettingsAPIInfo = ({ options, refresh }) => {
     route: '',
     color: 'blue',
   });
+  const [formErrors, setFormErrors] = useState({});
+
+  const [pendingDelete, setPendingDelete] = useState(null);
+
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-
-  // 面板启用状态 state
   const [panelEnabled, setPanelEnabled] = useState(true);
 
-  const colorOptions = [
-    { value: 'blue', label: 'blue' },
-    { value: 'green', label: 'green' },
-    { value: 'cyan', label: 'cyan' },
-    { value: 'purple', label: 'purple' },
-    { value: 'pink', label: 'pink' },
-    { value: 'red', label: 'red' },
-    { value: 'orange', label: 'orange' },
-    { value: 'amber', label: 'amber' },
-    { value: 'yellow', label: 'yellow' },
-    { value: 'lime', label: 'lime' },
-    { value: 'light-green', label: 'light-green' },
-    { value: 'teal', label: 'teal' },
-    { value: 'light-blue', label: 'light-blue' },
-    { value: 'indigo', label: 'indigo' },
-    { value: 'violet', label: 'violet' },
-    { value: 'grey', label: 'grey' },
-  ];
-
   const updateOption = async (key, value) => {
-    const res = await API.put('/api/option/', {
-      key,
-      value,
-    });
-    const { success, message } = res.data;
+    const res = await API.put('/api/option/', { key, value });
+    const { success, message } = res.data || {};
     if (success) {
-      showSuccess('API信息已更新');
-      if (refresh) refresh();
+      showSuccess(t('API信息已更新'));
+      refresh?.();
     } else {
       showError(message);
     }
@@ -105,8 +169,9 @@ const SettingsAPIInfo = ({ options, refresh }) => {
       await updateOption('console_setting.api_info', apiInfoJson);
       setHasChanges(false);
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('API信息更新失败', error);
-      showError('API信息更新失败');
+      showError(t('API信息更新失败'));
     } finally {
       setLoading(false);
     }
@@ -114,12 +179,8 @@ const SettingsAPIInfo = ({ options, refresh }) => {
 
   const handleAddApi = () => {
     setEditingApi(null);
-    setApiForm({
-      url: '',
-      description: '',
-      route: '',
-      color: 'blue',
-    });
+    setApiForm({ url: '', description: '', route: '', color: 'blue' });
+    setFormErrors({});
     setShowApiModal(true);
   };
 
@@ -131,34 +192,28 @@ const SettingsAPIInfo = ({ options, refresh }) => {
       route: api.route,
       color: api.color,
     });
+    setFormErrors({});
     setShowApiModal(true);
   };
 
-  const handleDeleteApi = (api) => {
-    setDeletingApi(api);
-    setShowDeleteModal(true);
-  };
-
-  const confirmDeleteApi = () => {
-    if (deletingApi) {
-      const newList = apiInfoList.filter((api) => api.id !== deletingApi.id);
-      setApiInfoList(newList);
-      setHasChanges(true);
-      showSuccess('API信息已删除，请及时点击“保存设置”进行保存');
-    }
-    setShowDeleteModal(false);
-    setDeletingApi(null);
+  const performDeleteApi = (api) => {
+    if (!api) return;
+    const newList = apiInfoList.filter((item) => item.id !== api.id);
+    setApiInfoList(newList);
+    setHasChanges(true);
+    showSuccess(t('API信息已删除，请及时点击"保存设置"进行保存'));
   };
 
   const handleSaveApi = async () => {
-    if (!apiForm.url || !apiForm.route || !apiForm.description) {
-      showError('请填写完整的API信息');
-      return;
-    }
+    const next = {};
+    if (!apiForm.url?.trim()) next.url = t('请输入API地址');
+    if (!apiForm.route?.trim()) next.route = t('请输入线路描述');
+    if (!apiForm.description?.trim()) next.description = t('请输入说明');
+    setFormErrors(next);
+    if (Object.keys(next).length > 0) return;
 
     try {
       setModalLoading(true);
-
       let newList;
       if (editingApi) {
         newList = apiInfoList.map((api) =>
@@ -166,23 +221,18 @@ const SettingsAPIInfo = ({ options, refresh }) => {
         );
       } else {
         const newId = Math.max(...apiInfoList.map((api) => api.id), 0) + 1;
-        const newApi = {
-          id: newId,
-          ...apiForm,
-        };
-        newList = [...apiInfoList, newApi];
+        newList = [...apiInfoList, { id: newId, ...apiForm }];
       }
-
       setApiInfoList(newList);
       setHasChanges(true);
       setShowApiModal(false);
       showSuccess(
         editingApi
-          ? 'API信息已更新，请及时点击“保存设置”进行保存'
-          : 'API信息已添加，请及时点击“保存设置”进行保存',
+          ? t('API信息已更新，请及时点击"保存设置"进行保存')
+          : t('API信息已添加，请及时点击"保存设置"进行保存'),
       );
     } catch (error) {
-      showError('操作失败: ' + error.message);
+      showError(t('操作失败') + ': ' + error.message);
     } finally {
       setModalLoading(false);
     }
@@ -193,11 +243,11 @@ const SettingsAPIInfo = ({ options, refresh }) => {
       setApiInfoList([]);
       return;
     }
-
     try {
       const parsed = JSON.parse(apiInfoStr);
       setApiInfoList(Array.isArray(parsed) ? parsed : []);
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('解析API信息失败:', error);
       setApiInfoList([]);
     }
@@ -205,9 +255,8 @@ const SettingsAPIInfo = ({ options, refresh }) => {
 
   useEffect(() => {
     const apiInfoStr = options['console_setting.api_info'] ?? options.ApiInfo;
-    if (apiInfoStr !== undefined) {
-      parseApiInfo(apiInfoStr);
-    }
+    if (apiInfoStr !== undefined) parseApiInfo(apiInfoStr);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options['console_setting.api_info'], options.ApiInfo]);
 
   useEffect(() => {
@@ -217,7 +266,7 @@ const SettingsAPIInfo = ({ options, refresh }) => {
         ? true
         : enabledStr === 'true' || enabledStr === true,
     );
-  }, [options['console_setting.api_info_enabled']]);
+  }, [options]);
 
   const handleToggleEnabled = async (checked) => {
     const newValue = checked ? 'true' : 'false';
@@ -226,83 +275,23 @@ const SettingsAPIInfo = ({ options, refresh }) => {
         key: 'console_setting.api_info_enabled',
         value: newValue,
       });
-      if (res.data.success) {
+      if (res.data?.success) {
         setPanelEnabled(checked);
         showSuccess(t('设置已保存'));
         refresh?.();
       } else {
-        showError(res.data.message);
+        showError(res.data?.message);
       }
     } catch (err) {
       showError(err.message);
     }
   };
 
-  const columns = [
-    {
-      title: 'ID',
-      dataIndex: 'id',
-    },
-    {
-      title: t('API地址'),
-      dataIndex: 'url',
-      render: (text, record) => (
-        <Tag color={record.color} shape='circle' style={{ maxWidth: '280px' }}>
-          {text}
-        </Tag>
-      ),
-    },
-    {
-      title: t('线路描述'),
-      dataIndex: 'route',
-      render: (text, record) => <Tag shape='circle'>{text}</Tag>,
-    },
-    {
-      title: t('说明'),
-      dataIndex: 'description',
-      ellipsis: true,
-      render: (text, record) => <Tag shape='circle'>{text || '-'}</Tag>,
-    },
-    {
-      title: t('颜色'),
-      dataIndex: 'color',
-      render: (color) => <Avatar size='extra-extra-small' color={color} />,
-    },
-    {
-      title: t('操作'),
-      fixed: 'right',
-      width: 150,
-      render: (_, record) => (
-        <Space>
-          <Button
-            icon={<Edit size={14} />}
-            theme='light'
-            type='tertiary'
-            size='small'
-            onClick={() => handleEditApi(record)}
-          >
-            {t('编辑')}
-          </Button>
-          <Button
-            icon={<Trash2 size={14} />}
-            type='danger'
-            theme='light'
-            size='small'
-            onClick={() => handleDeleteApi(record)}
-          >
-            {t('删除')}
-          </Button>
-        </Space>
-      ),
-    },
-  ];
-
   const handleBatchDelete = () => {
     if (selectedRowKeys.length === 0) {
-      showError('请先选择要删除的API信息');
+      showError(t('请先选择要删除的API信息'));
       return;
     }
-
     const newList = apiInfoList.filter(
       (api) => !selectedRowKeys.includes(api.id),
     );
@@ -310,204 +299,394 @@ const SettingsAPIInfo = ({ options, refresh }) => {
     setSelectedRowKeys([]);
     setHasChanges(true);
     showSuccess(
-      `已删除 ${selectedRowKeys.length} 个API信息，请及时点击“保存设置”进行保存`,
+      t('已删除 {{count}} 个API信息，请及时点击"保存设置"进行保存', {
+        count: selectedRowKeys.length,
+      }),
     );
   };
 
-  const renderHeader = () => (
-    <div className='flex flex-col w-full'>
-      <div className='mb-2'>
-        <div className='flex items-center text-blue-500'>
-          <Settings size={16} className='mr-2' />
-          <Text>
-            {t(
-              'API信息管理，可以配置多个API地址用于状态展示和负载均衡（最多50个）',
-            )}
-          </Text>
-        </div>
+  const totalPages = Math.max(1, Math.ceil(apiInfoList.length / pageSize));
+  const startIdx = (currentPage - 1) * pageSize;
+  const pagedData = apiInfoList.slice(startIdx, startIdx + pageSize);
+
+  const visiblePageKeys = pagedData.map((row) => row.id);
+  const allPageSelected =
+    visiblePageKeys.length > 0 &&
+    visiblePageKeys.every((key) => selectedRowKeys.includes(key));
+  const somePageSelected =
+    !allPageSelected &&
+    visiblePageKeys.some((key) => selectedRowKeys.includes(key));
+
+  const togglePageSelection = (checked) => {
+    const set = new Set(selectedRowKeys);
+    if (checked) visiblePageKeys.forEach((key) => set.add(key));
+    else visiblePageKeys.forEach((key) => set.delete(key));
+    setSelectedRowKeys(Array.from(set));
+  };
+  const toggleRowSelection = (key, checked) => {
+    const set = new Set(selectedRowKeys);
+    if (checked) set.add(key);
+    else set.delete(key);
+    setSelectedRowKeys(Array.from(set));
+  };
+
+  const modalState = useOverlayState({
+    isOpen: showApiModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowApiModal(false);
+    },
+  });
+
+  return (
+    <div className='space-y-4'>
+      <div className='flex items-center text-sky-600'>
+        <Settings size={16} className='mr-2' />
+        <span className='text-sm'>
+          {t(
+            'API信息管理，可以配置多个API地址用于状态展示和负载均衡（最多50个）',
+          )}
+        </span>
       </div>
 
-      <Divider margin='12px' />
+      <div className='h-px bg-[color:var(--app-border)]' />
 
-      <div className='flex flex-col md:flex-row justify-between items-center gap-4 w-full'>
-        <div className='flex gap-2 w-full md:w-auto order-2 md:order-1'>
+      <div className='flex w-full flex-col items-center justify-between gap-4 md:flex-row'>
+        <div className='order-2 flex w-full gap-2 md:order-1 md:w-auto'>
           <Button
-            theme='light'
-            type='primary'
-            icon={<Plus size={14} />}
+            color='primary'
+            variant='flat'
+            startContent={<Plus size={14} />}
+            onPress={handleAddApi}
             className='w-full md:w-auto'
-            onClick={handleAddApi}
           >
             {t('添加API')}
           </Button>
           <Button
-            icon={<Trash2 size={14} />}
-            type='danger'
-            theme='light'
-            onClick={handleBatchDelete}
-            disabled={selectedRowKeys.length === 0}
+            color='danger'
+            variant='flat'
+            startContent={<Trash2 size={14} />}
+            isDisabled={selectedRowKeys.length === 0}
+            onPress={handleBatchDelete}
             className='w-full md:w-auto'
           >
             {t('批量删除')}{' '}
-            {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
+            {selectedRowKeys.length > 0 ? `(${selectedRowKeys.length})` : ''}
           </Button>
           <Button
-            icon={<Save size={14} />}
-            onClick={submitApiInfo}
-            loading={loading}
-            disabled={!hasChanges}
-            type='secondary'
+            variant='flat'
+            startContent={<Save size={14} />}
+            onPress={submitApiInfo}
+            isPending={loading}
+            isDisabled={!hasChanges}
             className='w-full md:w-auto'
           >
             {t('保存设置')}
           </Button>
         </div>
 
-        {/* 启用开关 */}
-        <div className='order-1 md:order-2 flex items-center gap-2'>
-          <Switch checked={panelEnabled} onChange={handleToggleEnabled} />
-          <Text>{panelEnabled ? t('已启用') : t('已禁用')}</Text>
-        </div>
+        <label className='order-1 inline-flex items-center gap-2 md:order-2'>
+          <Switch
+            isSelected={!!panelEnabled}
+            onChange={handleToggleEnabled}
+            size='sm'
+            aria-label='enabled'
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
+          <span className='text-sm text-foreground'>
+            {panelEnabled ? t('已启用') : t('已禁用')}
+          </span>
+        </label>
       </div>
-    </div>
-  );
 
-  // 计算当前页显示的数据
-  const getCurrentPageData = () => {
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    return apiInfoList.slice(startIndex, endIndex);
-  };
-
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: (selectedRowKeys, selectedRows) => {
-      setSelectedRowKeys(selectedRowKeys);
-    },
-    onSelect: (record, selected, selectedRows) => {
-      console.log(`选择行: ${selected}`, record);
-    },
-    onSelectAll: (selected, selectedRows) => {
-      console.log(`全选: ${selected}`, selectedRows);
-    },
-    getCheckboxProps: (record) => ({
-      disabled: false,
-      name: record.id,
-    }),
-  };
+      <div className='overflow-x-auto rounded-xl border border-[color:var(--app-border)]'>
+        <table className='w-full text-sm'>
+          <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+            <tr>
+              <th className='w-10 px-3 py-2 text-left font-semibold'>
+                <HeaderCheckbox
+                  checked={allPageSelected}
+                  indeterminate={somePageSelected}
+                  onChange={togglePageSelection}
+                  ariaLabel={t('选择当前页')}
+                />
+              </th>
+              <th className='w-16 px-3 py-2 text-left font-semibold'>ID</th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('API地址')}
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('线路描述')}
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>{t('说明')}</th>
+              <th className='w-16 px-3 py-2 text-left font-semibold'>
+                {t('颜色')}
+              </th>
+              <th className='w-40 px-3 py-2 text-right font-semibold'>
+                {t('操作')}
+              </th>
+            </tr>
+          </thead>
+          <tbody className='divide-y divide-[color:var(--app-border)]'>
+            {pagedData.length === 0 ? (
+              <tr>
+                <td colSpan={7} className='py-12 text-center text-sm text-muted'>
+                  <div className='flex flex-col items-center gap-3'>
+                    <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                      <Inbox size={28} />
+                    </div>
+                    <div>{t('暂无API信息')}</div>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              pagedData.map((record) => {
+                const checked = selectedRowKeys.includes(record.id);
+                return (
+                  <tr key={record.id}>
+                    <td className='px-3 py-2'>
+                      <input
+                        type='checkbox'
+                        checked={checked}
+                        onChange={(event) =>
+                          toggleRowSelection(record.id, event.target.checked)
+                        }
+                        className='h-4 w-4 accent-primary'
+                      />
+                    </td>
+                    <td className='px-3 py-2 text-muted'>{record.id}</td>
+                    <td className='px-3 py-2'>
+                      <ColorChip color={record.color}>{record.url}</ColorChip>
+                    </td>
+                    <td className='px-3 py-2'>
+                      <span className='inline-flex items-center rounded-full border border-[color:var(--app-border)] bg-background px-2 py-0.5 text-xs text-foreground'>
+                        {record.route}
+                      </span>
+                    </td>
+                    <td className='max-w-[260px] truncate px-3 py-2 text-foreground'>
+                      <span className='inline-flex items-center rounded-full border border-[color:var(--app-border)] bg-background px-2 py-0.5 text-xs text-foreground'>
+                        {record.description || '-'}
+                      </span>
+                    </td>
+                    <td className='px-3 py-2'>
+                      <ColorDot color={record.color} />
+                    </td>
+                    <td className='px-3 py-2 text-right'>
+                      <div className='inline-flex items-center gap-1.5'>
+                        <Button
+                          variant='light'
+                          size='sm'
+                          startContent={<Edit size={14} />}
+                          onPress={() => handleEditApi(record)}
+                        >
+                          {t('编辑')}
+                        </Button>
+                        <Button
+                          color='danger'
+                          variant='flat'
+                          size='sm'
+                          startContent={<Trash2 size={14} />}
+                          onPress={() => setPendingDelete(record)}
+                        >
+                          {t('删除')}
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
 
-  return (
-    <>
-      <Form.Section text={renderHeader()}>
-        <Table
-          columns={columns}
-          dataSource={getCurrentPageData()}
-          rowSelection={rowSelection}
-          rowKey='id'
-          scroll={{ x: 'max-content' }}
-          pagination={{
-            currentPage: currentPage,
-            pageSize: pageSize,
-            total: apiInfoList.length,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: ['5', '10', '20', '50'],
-            onChange: (page, size) => {
-              setCurrentPage(page);
-              setPageSize(size);
-            },
-            onShowSizeChange: (current, size) => {
+      <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted'>
+        <div className='flex items-center gap-2'>
+          <span>{t('每页')}</span>
+          <select
+            value={String(pageSize)}
+            onChange={(event) => {
+              setPageSize(Number(event.target.value));
               setCurrentPage(1);
-              setPageSize(size);
-            },
-          }}
-          size='middle'
-          loading={loading}
-          empty={
-            <Empty
-              image={
-                <IllustrationNoResult style={{ width: 150, height: 150 }} />
-              }
-              darkModeImage={
-                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-              }
-              description={t('暂无API信息')}
-              style={{ padding: 30 }}
-            />
-          }
-          className='overflow-hidden'
-        />
-      </Form.Section>
-
-      <Modal
-        title={editingApi ? t('编辑API') : t('添加API')}
-        visible={showApiModal}
-        onOk={handleSaveApi}
-        onCancel={() => setShowApiModal(false)}
-        okText={t('保存')}
-        cancelText={t('取消')}
-        confirmLoading={modalLoading}
-      >
-        <Form
-          layout='vertical'
-          initValues={apiForm}
-          key={editingApi ? editingApi.id : 'new'}
-        >
-          <Form.Input
-            field='url'
-            label={t('API地址')}
-            placeholder='https://api.example.com'
-            rules={[{ required: true, message: t('请输入API地址') }]}
-            onChange={(value) => setApiForm({ ...apiForm, url: value })}
-          />
-          <Form.Input
-            field='route'
-            label={t('线路描述')}
-            placeholder={t('如：香港线路')}
-            rules={[{ required: true, message: t('请输入线路描述') }]}
-            onChange={(value) => setApiForm({ ...apiForm, route: value })}
-          />
-          <Form.Input
-            field='description'
-            label={t('说明')}
-            placeholder={t('如：大带宽批量分析图片推荐')}
-            rules={[{ required: true, message: t('请输入说明') }]}
-            onChange={(value) => setApiForm({ ...apiForm, description: value })}
-          />
-          <Form.Select
-            field='color'
-            label={t('标识颜色')}
-            optionList={colorOptions}
-            onChange={(value) => setApiForm({ ...apiForm, color: value })}
-            render={(option) => (
-              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                <Avatar size='extra-extra-small' color={option.value} />
-                {option.label}
-              </div>
-            )}
-          />
-        </Form>
+            }}
+            aria-label={t('每页数量')}
+            className='h-7 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-xs outline-none focus:border-primary'
+          >
+            {[5, 10, 20, 50].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+          <span>{t('共 {{total}} 条', { total: apiInfoList.length })}</span>
+        </div>
+        <div className='flex items-center gap-1'>
+          <Button
+            size='sm'
+            variant='light'
+            isDisabled={currentPage <= 1}
+            onPress={() => setCurrentPage((p) => Math.max(1, p - 1))}
+          >
+            {t('上一页')}
+          </Button>
+          <span>
+            {currentPage} / {totalPages}
+          </span>
+          <Button
+            size='sm'
+            variant='light'
+            isDisabled={currentPage >= totalPages}
+            onPress={() =>
+              setCurrentPage((p) => Math.min(totalPages, p + 1))
+            }
+          >
+            {t('下一页')}
+          </Button>
+        </div>
+      </div>
+
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='md' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {editingApi ? t('编辑API') : t('添加API')}
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('API地址')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='text'
+                    value={apiForm.url}
+                    onChange={(event) =>
+                      setApiForm((prev) => ({
+                        ...prev,
+                        url: event.target.value,
+                      }))
+                    }
+                    placeholder='https://api.example.com'
+                    aria-label={t('API地址')}
+                    className={inputClass}
+                  />
+                  {formErrors.url ? (
+                    <div className='text-xs text-red-600'>{formErrors.url}</div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('线路描述')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='text'
+                    value={apiForm.route}
+                    onChange={(event) =>
+                      setApiForm((prev) => ({
+                        ...prev,
+                        route: event.target.value,
+                      }))
+                    }
+                    placeholder={t('如：香港线路')}
+                    aria-label={t('线路描述')}
+                    className={inputClass}
+                  />
+                  {formErrors.route ? (
+                    <div className='text-xs text-red-600'>
+                      {formErrors.route}
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('说明')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='text'
+                    value={apiForm.description}
+                    onChange={(event) =>
+                      setApiForm((prev) => ({
+                        ...prev,
+                        description: event.target.value,
+                      }))
+                    }
+                    placeholder={t('如：大带宽批量分析图片推荐')}
+                    aria-label={t('说明')}
+                    className={inputClass}
+                  />
+                  {formErrors.description ? (
+                    <div className='text-xs text-red-600'>
+                      {formErrors.description}
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('标识颜色')}
+                  </div>
+                  <div className='flex items-center gap-2'>
+                    <ColorDot color={apiForm.color} size={20} />
+                    <select
+                      value={apiForm.color}
+                      onChange={(event) =>
+                        setApiForm((prev) => ({
+                          ...prev,
+                          color: event.target.value,
+                        }))
+                      }
+                      aria-label={t('标识颜色')}
+                      className={selectClass}
+                    >
+                      {COLOR_OPTIONS.map((opt) => (
+                        <option key={opt} value={opt}>
+                          {opt}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={() => setShowApiModal(false)}>
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={handleSaveApi}
+                  isPending={modalLoading}
+                >
+                  {t('保存')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
-      <Modal
+      <ConfirmDialog
+        visible={!!pendingDelete}
         title={t('确认删除')}
-        visible={showDeleteModal}
-        onOk={confirmDeleteApi}
-        onCancel={() => {
-          setShowDeleteModal(false);
-          setDeletingApi(null);
-        }}
-        okText={t('确认删除')}
         cancelText={t('取消')}
-        type='warning'
-        okButtonProps={{
-          type: 'danger',
-          theme: 'solid',
+        confirmText={t('确认删除')}
+        danger
+        onCancel={() => setPendingDelete(null)}
+        onConfirm={() => {
+          const target = pendingDelete;
+          setPendingDelete(null);
+          performDeleteApi(target);
         }}
       >
-        <Text>{t('确定要删除此API信息吗？')}</Text>
-      </Modal>
-    </>
+        {t('确定要删除此API信息吗？')}
+      </ConfirmDialog>
+    </div>
   );
 };
 
diff --git a/web/src/pages/Setting/Dashboard/SettingsAnnouncements.jsx b/web/src/pages/Setting/Dashboard/SettingsAnnouncements.jsx
index c61102f1503..7cc6d95b6bd 100644
--- a/web/src/pages/Setting/Dashboard/SettingsAnnouncements.jsx
+++ b/web/src/pages/Setting/Dashboard/SettingsAnnouncements.jsx
@@ -17,26 +17,30 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Button,
-  Space,
-  Table,
-  Form,
-  Typography,
-  Empty,
-  Divider,
+  Input,
   Modal,
-  Tag,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
   Switch,
-  TextArea,
   Tooltip,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
 import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { Plus, Edit, Trash2, Save, Bell, Maximize2 } from 'lucide-react';
+  Bell,
+  Edit,
+  Inbox,
+  Maximize2,
+  Plus,
+  Save,
+  Trash2,
+} from 'lucide-react';
 import {
   API,
   showError,
@@ -45,17 +49,69 @@ import {
   formatDateTimeString,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+const selectClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+const TONE_CHIP = {
+  grey: 'bg-surface-secondary text-foreground',
+  blue: 'bg-sky-100 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300',
+  green:
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
+  orange:
+    'bg-orange-100 text-orange-700 dark:bg-orange-950/40 dark:text-orange-300',
+  red: 'bg-red-100 text-red-700 dark:bg-red-950/40 dark:text-red-300',
+};
+
+function TypeChip({ tone, children }) {
+  const cls = TONE_CHIP[tone] || TONE_CHIP.grey;
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${cls}`}
+    >
+      {children}
+    </span>
+  );
+}
 
-const { Text } = Typography;
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
+
+function toLocalDateTimeInputValue(value) {
+  if (!value) return '';
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return '';
+  const pad = (n) => String(n).padStart(2, '0');
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(
+    date.getDate(),
+  )}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
 
 const SettingsAnnouncements = ({ options, refresh }) => {
   const { t } = useTranslation();
 
   const [announcementsList, setAnnouncementsList] = useState([]);
   const [showAnnouncementModal, setShowAnnouncementModal] = useState(false);
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [showContentModal, setShowContentModal] = useState(false);
-  const [deletingAnnouncement, setDeletingAnnouncement] = useState(null);
   const [editingAnnouncement, setEditingAnnouncement] = useState(null);
   const [modalLoading, setModalLoading] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -66,15 +122,14 @@ const SettingsAnnouncements = ({ options, refresh }) => {
     type: 'default',
     extra: '',
   });
+  const [formErrors, setFormErrors] = useState({});
+
+  const [pendingDelete, setPendingDelete] = useState(null);
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-
-  // 面板启用状态
   const [panelEnabled, setPanelEnabled] = useState(true);
 
-  const formApiRef = useRef(null);
-
   const typeOptions = [
     { value: 'default', label: t('默认') },
     { value: 'ongoing', label: t('进行中') },
@@ -94,118 +149,12 @@ const SettingsAnnouncements = ({ options, refresh }) => {
     return colorMap[type] || 'grey';
   };
 
-  const columns = [
-    {
-      title: t('内容'),
-      dataIndex: 'content',
-      key: 'content',
-      render: (text) => (
-        <Tooltip content={text} position='topLeft' showArrow>
-          <div
-            style={{
-              maxWidth: '300px',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {text}
-          </div>
-        </Tooltip>
-      ),
-    },
-    {
-      title: t('发布时间'),
-      dataIndex: 'publishDate',
-      key: 'publishDate',
-      width: 180,
-      render: (publishDate) => (
-        <div>
-          <div style={{ fontWeight: 'bold' }}>
-            {getRelativeTime(publishDate)}
-          </div>
-          <div
-            style={{
-              fontSize: '12px',
-              color: 'var(--semi-color-text-2)',
-              marginTop: '2px',
-            }}
-          >
-            {publishDate ? formatDateTimeString(new Date(publishDate)) : '-'}
-          </div>
-        </div>
-      ),
-    },
-    {
-      title: t('类型'),
-      dataIndex: 'type',
-      key: 'type',
-      width: 100,
-      render: (type) => (
-        <Tag color={getTypeColor(type)} shape='circle'>
-          {typeOptions.find((opt) => opt.value === type)?.label || type}
-        </Tag>
-      ),
-    },
-    {
-      title: t('说明'),
-      dataIndex: 'extra',
-      key: 'extra',
-      render: (text) => (
-        <Tooltip content={text || '-'} showArrow>
-          <div
-            style={{
-              maxWidth: '200px',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              color: 'var(--semi-color-text-2)',
-            }}
-          >
-            {text || '-'}
-          </div>
-        </Tooltip>
-      ),
-    },
-    {
-      title: t('操作'),
-      key: 'action',
-      fixed: 'right',
-      width: 150,
-      render: (text, record) => (
-        <Space>
-          <Button
-            icon={<Edit size={14} />}
-            theme='light'
-            type='tertiary'
-            size='small'
-            onClick={() => handleEditAnnouncement(record)}
-          >
-            {t('编辑')}
-          </Button>
-          <Button
-            icon={<Trash2 size={14} />}
-            type='danger'
-            theme='light'
-            size='small'
-            onClick={() => handleDeleteAnnouncement(record)}
-          >
-            {t('删除')}
-          </Button>
-        </Space>
-      ),
-    },
-  ];
-
   const updateOption = async (key, value) => {
-    const res = await API.put('/api/option/', {
-      key,
-      value,
-    });
-    const { success, message } = res.data;
+    const res = await API.put('/api/option/', { key, value });
+    const { success, message } = res.data || {};
     if (success) {
-      showSuccess('系统公告已更新');
-      if (refresh) refresh();
+      showSuccess(t('系统公告已更新'));
+      refresh?.();
     } else {
       showError(message);
     }
@@ -218,8 +167,9 @@ const SettingsAnnouncements = ({ options, refresh }) => {
       await updateOption('console_setting.announcements', announcementsJson);
       setHasChanges(false);
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('系统公告更新失败', error);
-      showError('系统公告更新失败');
+      showError(t('系统公告更新失败'));
     } finally {
       setLoading(false);
     }
@@ -233,6 +183,7 @@ const SettingsAnnouncements = ({ options, refresh }) => {
       type: 'default',
       extra: '',
     });
+    setFormErrors({});
     setShowAnnouncementModal(true);
   };
 
@@ -246,42 +197,34 @@ const SettingsAnnouncements = ({ options, refresh }) => {
       type: announcement.type || 'default',
       extra: announcement.extra || '',
     });
+    setFormErrors({});
     setShowAnnouncementModal(true);
   };
 
-  const handleDeleteAnnouncement = (announcement) => {
-    setDeletingAnnouncement(announcement);
-    setShowDeleteModal(true);
-  };
-
-  const confirmDeleteAnnouncement = () => {
-    if (deletingAnnouncement) {
-      const newList = announcementsList.filter(
-        (item) => item.id !== deletingAnnouncement.id,
-      );
-      setAnnouncementsList(newList);
-      setHasChanges(true);
-      showSuccess('公告已删除，请及时点击“保存设置”进行保存');
-    }
-    setShowDeleteModal(false);
-    setDeletingAnnouncement(null);
+  const performDeleteAnnouncement = (announcement) => {
+    if (!announcement) return;
+    const newList = announcementsList.filter(
+      (item) => item.id !== announcement.id,
+    );
+    setAnnouncementsList(newList);
+    setHasChanges(true);
+    showSuccess(t('公告已删除，请及时点击"保存设置"进行保存'));
   };
 
   const handleSaveAnnouncement = async () => {
-    if (!announcementForm.content || !announcementForm.publishDate) {
-      showError('请填写完整的公告信息');
-      return;
-    }
+    const next = {};
+    if (!announcementForm.content?.trim())
+      next.content = t('请输入公告内容');
+    if (!announcementForm.publishDate) next.publishDate = t('请选择发布日期');
+    setFormErrors(next);
+    if (Object.keys(next).length > 0) return;
 
     try {
       setModalLoading(true);
-
-      // 将publishDate转换为ISO字符串保存
       const formData = {
         ...announcementForm,
         publishDate: announcementForm.publishDate.toISOString(),
       };
-
       let newList;
       if (editingAnnouncement) {
         newList = announcementsList.map((item) =>
@@ -290,23 +233,18 @@ const SettingsAnnouncements = ({ options, refresh }) => {
       } else {
         const newId =
           Math.max(...announcementsList.map((item) => item.id), 0) + 1;
-        const newAnnouncement = {
-          id: newId,
-          ...formData,
-        };
-        newList = [...announcementsList, newAnnouncement];
+        newList = [...announcementsList, { id: newId, ...formData }];
       }
-
       setAnnouncementsList(newList);
       setHasChanges(true);
       setShowAnnouncementModal(false);
       showSuccess(
         editingAnnouncement
-          ? '公告已更新，请及时点击“保存设置”进行保存'
-          : '公告已添加，请及时点击“保存设置”进行保存',
+          ? t('公告已更新，请及时点击"保存设置"进行保存')
+          : t('公告已添加，请及时点击"保存设置"进行保存'),
       );
     } catch (error) {
-      showError('操作失败: ' + error.message);
+      showError(t('操作失败') + ': ' + error.message);
     } finally {
       setModalLoading(false);
     }
@@ -317,17 +255,17 @@ const SettingsAnnouncements = ({ options, refresh }) => {
       setAnnouncementsList([]);
       return;
     }
-
     try {
       const parsed = JSON.parse(announcementsStr);
       const list = Array.isArray(parsed) ? parsed : [];
-      // 确保每个项目都有id
-      const listWithIds = list.map((item, index) => ({
-        ...item,
-        id: item.id || index + 1,
-      }));
-      setAnnouncementsList(listWithIds);
+      setAnnouncementsList(
+        list.map((item, index) => ({
+          ...item,
+          id: item.id || index + 1,
+        })),
+      );
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('解析系统公告失败:', error);
       setAnnouncementsList([]);
     }
@@ -336,9 +274,8 @@ const SettingsAnnouncements = ({ options, refresh }) => {
   useEffect(() => {
     const annStr =
       options['console_setting.announcements'] ?? options.Announcements;
-    if (annStr !== undefined) {
-      parseAnnouncements(annStr);
-    }
+    if (annStr !== undefined) parseAnnouncements(annStr);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options['console_setting.announcements'], options.Announcements]);
 
   useEffect(() => {
@@ -348,7 +285,7 @@ const SettingsAnnouncements = ({ options, refresh }) => {
         ? true
         : enabledStr === 'true' || enabledStr === true,
     );
-  }, [options['console_setting.announcements_enabled']]);
+  }, [options]);
 
   const handleToggleEnabled = async (checked) => {
     const newValue = checked ? 'true' : 'false';
@@ -357,12 +294,12 @@ const SettingsAnnouncements = ({ options, refresh }) => {
         key: 'console_setting.announcements_enabled',
         value: newValue,
       });
-      if (res.data.success) {
+      if (res.data?.success) {
         setPanelEnabled(checked);
         showSuccess(t('设置已保存'));
         refresh?.();
       } else {
-        showError(res.data.message);
+        showError(res.data?.message);
       }
     } catch (err) {
       showError(err.message);
@@ -371,10 +308,9 @@ const SettingsAnnouncements = ({ options, refresh }) => {
 
   const handleBatchDelete = () => {
     if (selectedRowKeys.length === 0) {
-      showError('请先选择要删除的系统公告');
+      showError(t('请先选择要删除的系统公告'));
       return;
     }
-
     const newList = announcementsList.filter(
       (item) => !selectedRowKeys.includes(item.id),
     );
@@ -382,252 +318,461 @@ const SettingsAnnouncements = ({ options, refresh }) => {
     setSelectedRowKeys([]);
     setHasChanges(true);
     showSuccess(
-      `已删除 ${selectedRowKeys.length} 个系统公告，请及时点击“保存设置”进行保存`,
+      t('已删除 {{count}} 个系统公告，请及时点击"保存设置"进行保存', {
+        count: selectedRowKeys.length,
+      }),
     );
   };
 
-  const renderHeader = () => (
-    <div className='flex flex-col w-full'>
-      <div className='mb-2'>
-        <div className='flex items-center text-blue-500'>
-          <Bell size={16} className='mr-2' />
-          <Text>
-            {t(
-              '系统公告管理，可以发布系统通知和重要消息（最多100个，前端显示最新20条）',
-            )}
-          </Text>
-        </div>
+  const sortedList = [...announcementsList].sort((a, b) => {
+    const dateA = new Date(a.publishDate).getTime();
+    const dateB = new Date(b.publishDate).getTime();
+    return dateB - dateA;
+  });
+  const totalPages = Math.max(1, Math.ceil(sortedList.length / pageSize));
+  const startIdx = (currentPage - 1) * pageSize;
+  const pagedData = sortedList.slice(startIdx, startIdx + pageSize);
+
+  const visiblePageKeys = pagedData.map((row) => row.id);
+  const allPageSelected =
+    visiblePageKeys.length > 0 &&
+    visiblePageKeys.every((key) => selectedRowKeys.includes(key));
+  const somePageSelected =
+    !allPageSelected &&
+    visiblePageKeys.some((key) => selectedRowKeys.includes(key));
+
+  const togglePageSelection = (checked) => {
+    const set = new Set(selectedRowKeys);
+    if (checked) visiblePageKeys.forEach((key) => set.add(key));
+    else visiblePageKeys.forEach((key) => set.delete(key));
+    setSelectedRowKeys(Array.from(set));
+  };
+  const toggleRowSelection = (key, checked) => {
+    const set = new Set(selectedRowKeys);
+    if (checked) set.add(key);
+    else set.delete(key);
+    setSelectedRowKeys(Array.from(set));
+  };
+
+  const editModalState = useOverlayState({
+    isOpen: showAnnouncementModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowAnnouncementModal(false);
+    },
+  });
+  const contentModalState = useOverlayState({
+    isOpen: showContentModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowContentModal(false);
+    },
+  });
+
+  return (
+    <div className='space-y-4'>
+      <div className='flex items-center text-sky-600'>
+        <Bell size={16} className='mr-2' />
+        <span className='text-sm'>
+          {t(
+            '系统公告管理，可以发布系统通知和重要消息（最多100个，前端显示最新20条）',
+          )}
+        </span>
       </div>
 
-      <Divider margin='12px' />
+      <div className='h-px bg-[color:var(--app-border)]' />
 
-      <div className='flex flex-col md:flex-row justify-between items-center gap-4 w-full'>
-        <div className='flex gap-2 w-full md:w-auto order-2 md:order-1'>
+      <div className='flex w-full flex-col items-center justify-between gap-4 md:flex-row'>
+        <div className='order-2 flex w-full gap-2 md:order-1 md:w-auto'>
           <Button
-            theme='light'
-            type='primary'
-            icon={<Plus size={14} />}
+            color='primary'
+            variant='flat'
+            startContent={<Plus size={14} />}
+            onPress={handleAddAnnouncement}
             className='w-full md:w-auto'
-            onClick={handleAddAnnouncement}
           >
             {t('添加公告')}
           </Button>
           <Button
-            icon={<Trash2 size={14} />}
-            type='danger'
-            theme='light'
-            onClick={handleBatchDelete}
-            disabled={selectedRowKeys.length === 0}
+            color='danger'
+            variant='flat'
+            startContent={<Trash2 size={14} />}
+            isDisabled={selectedRowKeys.length === 0}
+            onPress={handleBatchDelete}
             className='w-full md:w-auto'
           >
             {t('批量删除')}{' '}
-            {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
+            {selectedRowKeys.length > 0 ? `(${selectedRowKeys.length})` : ''}
           </Button>
           <Button
-            icon={<Save size={14} />}
-            onClick={submitAnnouncements}
-            loading={loading}
-            disabled={!hasChanges}
-            type='secondary'
+            variant='flat'
+            startContent={<Save size={14} />}
+            onPress={submitAnnouncements}
+            isPending={loading}
+            isDisabled={!hasChanges}
             className='w-full md:w-auto'
           >
             {t('保存设置')}
           </Button>
         </div>
 
-        {/* 启用开关 */}
-        <div className='order-1 md:order-2 flex items-center gap-2'>
-          <Switch checked={panelEnabled} onChange={handleToggleEnabled} />
-          <Text>{panelEnabled ? t('已启用') : t('已禁用')}</Text>
-        </div>
+        <label className='order-1 inline-flex items-center gap-2 md:order-2'>
+          <Switch
+            isSelected={!!panelEnabled}
+            onChange={handleToggleEnabled}
+            size='sm'
+            aria-label='enabled'
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
+          <span className='text-sm text-foreground'>
+            {panelEnabled ? t('已启用') : t('已禁用')}
+          </span>
+        </label>
       </div>
-    </div>
-  );
-
-  // 计算当前页显示的数据（按发布时间倒序排序，最新优先显示）
-  const getCurrentPageData = () => {
-    const sortedList = [...announcementsList].sort((a, b) => {
-      const dateA = new Date(a.publishDate).getTime();
-      const dateB = new Date(b.publishDate).getTime();
-      return dateB - dateA; // 倒序，最新的排在前面
-    });
-
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    return sortedList.slice(startIndex, endIndex);
-  };
 
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: (selectedRowKeys, selectedRows) => {
-      setSelectedRowKeys(selectedRowKeys);
-    },
-    onSelect: (record, selected, selectedRows) => {
-      console.log(`选择行: ${selected}`, record);
-    },
-    onSelectAll: (selected, selectedRows) => {
-      console.log(`全选: ${selected}`, selectedRows);
-    },
-    getCheckboxProps: (record) => ({
-      disabled: false,
-      name: record.id,
-    }),
-  };
+      <div className='overflow-x-auto rounded-xl border border-[color:var(--app-border)]'>
+        <table className='w-full text-sm'>
+          <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+            <tr>
+              <th className='w-10 px-3 py-2 text-left font-semibold'>
+                <HeaderCheckbox
+                  checked={allPageSelected}
+                  indeterminate={somePageSelected}
+                  onChange={togglePageSelection}
+                  ariaLabel={t('选择当前页')}
+                />
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('内容')}
+              </th>
+              <th className='w-44 px-3 py-2 text-left font-semibold'>
+                {t('发布时间')}
+              </th>
+              <th className='w-24 px-3 py-2 text-left font-semibold'>
+                {t('类型')}
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('说明')}
+              </th>
+              <th className='w-40 px-3 py-2 text-right font-semibold'>
+                {t('操作')}
+              </th>
+            </tr>
+          </thead>
+          <tbody className='divide-y divide-[color:var(--app-border)]'>
+            {pagedData.length === 0 ? (
+              <tr>
+                <td colSpan={6} className='py-12 text-center text-sm text-muted'>
+                  <div className='flex flex-col items-center gap-3'>
+                    <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                      <Inbox size={28} />
+                    </div>
+                    <div>{t('暂无系统公告')}</div>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              pagedData.map((record) => {
+                const checked = selectedRowKeys.includes(record.id);
+                return (
+                  <tr key={record.id}>
+                    <td className='px-3 py-2'>
+                      <input
+                        type='checkbox'
+                        checked={checked}
+                        onChange={(event) =>
+                          toggleRowSelection(record.id, event.target.checked)
+                        }
+                        className='h-4 w-4 accent-primary'
+                      />
+                    </td>
+                    <td className='max-w-[300px] truncate px-3 py-2 text-foreground'>
+                      <Tooltip content={record.content} placement='top'>
+                        <span>{record.content}</span>
+                      </Tooltip>
+                    </td>
+                    <td className='px-3 py-2 text-foreground'>
+                      <div className='font-semibold'>
+                        {getRelativeTime(record.publishDate)}
+                      </div>
+                      <div className='text-xs text-muted'>
+                        {record.publishDate
+                          ? formatDateTimeString(new Date(record.publishDate))
+                          : '-'}
+                      </div>
+                    </td>
+                    <td className='px-3 py-2'>
+                      <TypeChip tone={getTypeColor(record.type)}>
+                        {typeOptions.find((opt) => opt.value === record.type)
+                          ?.label || record.type}
+                      </TypeChip>
+                    </td>
+                    <td className='max-w-[200px] truncate px-3 py-2 text-muted'>
+                      <Tooltip content={record.extra || '-'} placement='top'>
+                        <span>{record.extra || '-'}</span>
+                      </Tooltip>
+                    </td>
+                    <td className='px-3 py-2 text-right'>
+                      <div className='inline-flex items-center gap-1.5'>
+                        <Button
+                          variant='light'
+                          size='sm'
+                          startContent={<Edit size={14} />}
+                          onPress={() => handleEditAnnouncement(record)}
+                        >
+                          {t('编辑')}
+                        </Button>
+                        <Button
+                          color='danger'
+                          variant='flat'
+                          size='sm'
+                          startContent={<Trash2 size={14} />}
+                          onPress={() => setPendingDelete(record)}
+                        >
+                          {t('删除')}
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
 
-  return (
-    <>
-      <Form.Section text={renderHeader()}>
-        <Table
-          columns={columns}
-          dataSource={getCurrentPageData()}
-          rowSelection={rowSelection}
-          rowKey='id'
-          scroll={{ x: 'max-content' }}
-          pagination={{
-            currentPage: currentPage,
-            pageSize: pageSize,
-            total: announcementsList.length,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: ['5', '10', '20', '50'],
-            onChange: (page, size) => {
-              setCurrentPage(page);
-              setPageSize(size);
-            },
-            onShowSizeChange: (current, size) => {
+      <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted'>
+        <div className='flex items-center gap-2'>
+          <span>{t('每页')}</span>
+          <select
+            value={String(pageSize)}
+            onChange={(event) => {
+              setPageSize(Number(event.target.value));
               setCurrentPage(1);
-              setPageSize(size);
-            },
-          }}
-          size='middle'
-          loading={loading}
-          empty={
-            <Empty
-              image={
-                <IllustrationNoResult style={{ width: 150, height: 150 }} />
-              }
-              darkModeImage={
-                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-              }
-              description={t('暂无系统公告')}
-              style={{ padding: 30 }}
-            />
-          }
-          className='overflow-hidden'
-        />
-      </Form.Section>
-
-      <Modal
-        title={editingAnnouncement ? t('编辑公告') : t('添加公告')}
-        visible={showAnnouncementModal}
-        onOk={handleSaveAnnouncement}
-        onCancel={() => setShowAnnouncementModal(false)}
-        okText={t('保存')}
-        cancelText={t('取消')}
-        confirmLoading={modalLoading}
-      >
-        <Form
-          layout='vertical'
-          initValues={announcementForm}
-          key={editingAnnouncement ? editingAnnouncement.id : 'new'}
-          getFormApi={(api) => (formApiRef.current = api)}
-        >
-          <Form.TextArea
-            field='content'
-            label={t('公告内容')}
-            placeholder={t('请输入公告内容（支持 Markdown/HTML）')}
-            maxCount={500}
-            rows={3}
-            rules={[{ required: true, message: t('请输入公告内容') }]}
-            onChange={(value) =>
-              setAnnouncementForm({ ...announcementForm, content: value })
-            }
-          />
+            }}
+            aria-label={t('每页数量')}
+            className='h-7 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-xs outline-none focus:border-primary'
+          >
+            {[5, 10, 20, 50].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+          <span>{t('共 {{total}} 条', { total: announcementsList.length })}</span>
+        </div>
+        <div className='flex items-center gap-1'>
           <Button
-            theme='light'
-            type='tertiary'
-            size='small'
-            icon={<Maximize2 size={14} />}
-            style={{ marginBottom: 16 }}
-            onClick={() => setShowContentModal(true)}
+            size='sm'
+            variant='light'
+            isDisabled={currentPage <= 1}
+            onPress={() => setCurrentPage((p) => Math.max(1, p - 1))}
           >
-            {t('放大编辑')}
+            {t('上一页')}
           </Button>
-          <Form.DatePicker
-            field='publishDate'
-            label={t('发布日期')}
-            type='dateTime'
-            rules={[{ required: true, message: t('请选择发布日期') }]}
-            onChange={(value) =>
-              setAnnouncementForm({ ...announcementForm, publishDate: value })
-            }
-          />
-          <Form.Select
-            field='type'
-            label={t('公告类型')}
-            optionList={typeOptions}
-            onChange={(value) =>
-              setAnnouncementForm({ ...announcementForm, type: value })
-            }
-          />
-          <Form.Input
-            field='extra'
-            label={t('说明信息')}
-            placeholder={t('可选，公告的补充说明')}
-            onChange={(value) =>
-              setAnnouncementForm({ ...announcementForm, extra: value })
+          <span>
+            {currentPage} / {totalPages}
+          </span>
+          <Button
+            size='sm'
+            variant='light'
+            isDisabled={currentPage >= totalPages}
+            onPress={() =>
+              setCurrentPage((p) => Math.min(totalPages, p + 1))
             }
-          />
-        </Form>
+          >
+            {t('下一页')}
+          </Button>
+        </div>
+      </div>
+
+      <Modal state={editModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='md' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {editingAnnouncement ? t('编辑公告') : t('添加公告')}
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='space-y-2'>
+                  <div className='flex items-center justify-between'>
+                    <div className='text-sm font-medium text-foreground'>
+                      {t('公告内容')}
+                      <span className='ml-1 text-red-500'>*</span>
+                    </div>
+                    <Button
+                      variant='light'
+                      size='sm'
+                      startContent={<Maximize2 size={14} />}
+                      onPress={() => setShowContentModal(true)}
+                    >
+                      {t('放大编辑')}
+                    </Button>
+                  </div>
+                  <textarea
+                    value={announcementForm.content}
+                    onChange={(event) =>
+                      setAnnouncementForm((prev) => ({
+                        ...prev,
+                        content: event.target.value,
+                      }))
+                    }
+                    placeholder={t('请输入公告内容（支持 Markdown/HTML）')}
+                    rows={3}
+                    maxLength={500}
+                    aria-label={t('公告内容')}
+                    className={textareaClass}
+                  />
+                  {formErrors.content ? (
+                    <div className='text-xs text-red-600'>
+                      {formErrors.content}
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('发布日期')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <input
+                    type='datetime-local'
+                    value={toLocalDateTimeInputValue(announcementForm.publishDate)}
+                    onChange={(event) => {
+                      const v = event.target.value;
+                      setAnnouncementForm((prev) => ({
+                        ...prev,
+                        publishDate: v ? new Date(v) : null,
+                      }));
+                    }}
+                    aria-label={t('发布日期')}
+                    className={inputClass}
+                  />
+                  {formErrors.publishDate ? (
+                    <div className='text-xs text-red-600'>
+                      {formErrors.publishDate}
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('公告类型')}
+                  </div>
+                  <select
+                    value={announcementForm.type}
+                    onChange={(event) =>
+                      setAnnouncementForm((prev) => ({
+                        ...prev,
+                        type: event.target.value,
+                      }))
+                    }
+                    aria-label={t('公告类型')}
+                    className={selectClass}
+                  >
+                    {typeOptions.map((opt) => (
+                      <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('说明信息')}
+                  </div>
+                  <Input
+                    type='text'
+                    value={announcementForm.extra}
+                    onChange={(event) =>
+                      setAnnouncementForm((prev) => ({
+                        ...prev,
+                        extra: event.target.value,
+                      }))
+                    }
+                    placeholder={t('可选，公告的补充说明')}
+                    aria-label={t('说明信息')}
+                    className={inputClass}
+                  />
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button
+                  variant='light'
+                  onPress={() => setShowAnnouncementModal(false)}
+                >
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={handleSaveAnnouncement}
+                  isPending={modalLoading}
+                >
+                  {t('保存')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
-      <Modal
-        title={t('确认删除')}
-        visible={showDeleteModal}
-        onOk={confirmDeleteAnnouncement}
-        onCancel={() => {
-          setShowDeleteModal(false);
-          setDeletingAnnouncement(null);
-        }}
-        okText={t('确认删除')}
-        cancelText={t('取消')}
-        type='warning'
-        okButtonProps={{
-          type: 'danger',
-          theme: 'solid',
-        }}
-      >
-        <Text>{t('确定要删除此公告吗？')}</Text>
+      <Modal state={contentModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='lg' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {t('编辑公告内容')}
+              </ModalHeader>
+              <ModalBody className='px-6 py-5'>
+                <textarea
+                  value={announcementForm.content}
+                  onChange={(event) =>
+                    setAnnouncementForm((prev) => ({
+                      ...prev,
+                      content: event.target.value,
+                    }))
+                  }
+                  placeholder={t('请输入公告内容（支持 Markdown/HTML）')}
+                  rows={15}
+                  maxLength={500}
+                  aria-label={t('公告内容')}
+                  className={textareaClass}
+                />
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={() => setShowContentModal(false)}>
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={() => setShowContentModal(false)}
+                >
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
-      {/* 公告内容放大编辑 Modal */}
-      <Modal
-        title={t('编辑公告内容')}
-        visible={showContentModal}
-        onOk={() => {
-          // 将内容同步到表单
-          if (formApiRef.current) {
-            formApiRef.current.setValue('content', announcementForm.content);
-          }
-          setShowContentModal(false);
-        }}
-        onCancel={() => setShowContentModal(false)}
-        okText={t('确定')}
+      <ConfirmDialog
+        visible={!!pendingDelete}
+        title={t('确认删除')}
         cancelText={t('取消')}
-        width={800}
+        confirmText={t('确认删除')}
+        danger
+        onCancel={() => setPendingDelete(null)}
+        onConfirm={() => {
+          const target = pendingDelete;
+          setPendingDelete(null);
+          performDeleteAnnouncement(target);
+        }}
       >
-        <TextArea
-          value={announcementForm.content}
-          placeholder={t('请输入公告内容（支持 Markdown/HTML）')}
-          maxCount={500}
-          rows={15}
-          style={{ width: '100%' }}
-          onChange={(value) =>
-            setAnnouncementForm({ ...announcementForm, content: value })
-          }
-        />
-      </Modal>
-    </>
+        {t('确定要删除此公告吗？')}
+      </ConfirmDialog>
+    </div>
   );
 };
 
diff --git a/web/src/pages/Setting/Dashboard/SettingsDataDashboard.jsx b/web/src/pages/Setting/Dashboard/SettingsDataDashboard.jsx
index c33ba77acde..07f47fd6d21 100644
--- a/web/src/pages/Setting/Dashboard/SettingsDataDashboard.jsx
+++ b/web/src/pages/Setting/Dashboard/SettingsDataDashboard.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -28,143 +28,180 @@ import {
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
+const DEFAULT_INPUTS = {
+  DataExportEnabled: false,
+  DataExportInterval: '',
+  DataExportDefaultTime: '',
+};
+
 export default function DataDashboard(props) {
   const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
 
-  const optionsDataExportDefaultTime = [
-    { key: 'hour', label: t('小时'), value: 'hour' },
-    { key: 'day', label: t('天'), value: 'day' },
-    { key: 'week', label: t('周'), value: 'week' },
+  const intervalOptions = [
+    { label: t('小时'), value: 'hour' },
+    { label: t('天'), value: 'day' },
+    { label: t('周'), value: 'week' },
   ];
-  const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    DataExportEnabled: false,
-    DataExportInterval: '',
-    DataExportDefaultTime: '',
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-
-  function onSubmit() {
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
+
+  const onSubmit = async () => {
     const updateArray = compareObjects(inputs, inputsRow);
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        value = inputs[item.key];
-      }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
+    if (!updateArray.length) {
+      showWarning(t('你似乎并没有修改什么'));
+      return;
+    }
     setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
+    try {
+      const requests = updateArray.map((item) =>
+        API.put('/api/option/', {
+          key: item.key,
+          value:
+            typeof inputs[item.key] === 'boolean'
+              ? String(inputs[item.key])
+              : String(inputs[item.key] ?? ''),
+        }),
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => r === undefined)) {
+        if (requests.length > 1) {
+          showError(t('部分保存失败，请重试'));
+          return;
         }
-        showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+        return;
+      }
+      showSuccess(t('保存成功'));
+      setInputsRow(structuredClone(inputs));
+      props.refresh?.();
+    } catch (e) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
-      }
+    if (!props.options) return;
+    const next = { ...DEFAULT_INPUTS };
+    if ('DataExportEnabled' in props.options) {
+      const raw = props.options.DataExportEnabled;
+      next.DataExportEnabled = raw === true || raw === 'true';
+    }
+    if ('DataExportInterval' in props.options) {
+      next.DataExportInterval = props.options.DataExportInterval ?? '';
+    }
+    if ('DataExportDefaultTime' in props.options) {
+      next.DataExportDefaultTime = props.options.DataExportDefaultTime ?? '';
+    }
+    setInputs(next);
+    setInputsRow(structuredClone(next));
+    if (next.DataExportDefaultTime) {
+      localStorage.setItem(
+        'data_export_default_time',
+        String(next.DataExportDefaultTime),
+      );
     }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
-    localStorage.setItem(
-      'data_export_default_time',
-      String(inputs.DataExportDefaultTime),
-    );
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
+    <div className='p-6 space-y-6'>
+      <div>
+        <div className='text-base font-semibold text-foreground'>
+          {t('数据看板设置')}
+        </div>
+      </div>
+
+      <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+        <div className='min-w-0 flex-1'>
+          <div className='text-sm font-medium text-foreground'>
+            {t('启用数据看板（实验性）')}
+          </div>
+          <div className='mt-1 text-xs leading-snug text-muted'>
+            {t('开启后控制台首页将展示用量、消费等聚合数据')}
+          </div>
+        </div>
+        <Switch
+          isSelected={!!inputs.DataExportEnabled}
+          onChange={setField('DataExportEnabled')}
+          aria-label={t('启用数据看板')}
+          size='sm'
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </label>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <div className='space-y-2'>
+          <div className='text-sm font-medium text-foreground'>
+            {t('数据看板更新间隔')}
+          </div>
+          <div className='flex items-center gap-2'>
+            <Input
+              type='number'
+              min={1}
+              step={1}
+              value={
+                inputs.DataExportInterval === '' ||
+                inputs.DataExportInterval == null
+                  ? ''
+                  : String(inputs.DataExportInterval)
+              }
+              onChange={(e) =>
+                setField('DataExportInterval')(e.target.value)
+              }
+              placeholder={t('数据看板更新间隔')}
+              aria-label={t('数据看板更新间隔')}
+              className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+            />
+            <span className='text-xs text-muted shrink-0'>{t('分钟')}</span>
+          </div>
+          <div className='text-xs leading-snug text-muted'>
+            {t('设置过短会影响数据库性能')}
+          </div>
+        </div>
+
+        <div className='space-y-2'>
+          <div className='text-sm font-medium text-foreground'>
+            {t('数据看板默认时间粒度')}
+          </div>
+          <select
+            value={inputs.DataExportDefaultTime ?? ''}
+            onChange={(e) =>
+              setField('DataExportDefaultTime')(e.target.value)
+            }
+            aria-label={t('数据看板默认时间粒度')}
+            className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+          >
+            <option value=''>{t('数据看板默认时间粒度')}</option>
+            {intervalOptions.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+          <div className='text-xs leading-snug text-muted'>
+            {t('仅修改展示粒度，统计精确到小时')}
+          </div>
+        </div>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
         >
-          <Form.Section text={t('数据看板设置')}>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'DataExportEnabled'}
-                  label={t('启用数据看板（实验性）')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) => {
-                    setInputs({
-                      ...inputs,
-                      DataExportEnabled: value,
-                    });
-                  }}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('数据看板更新间隔')}
-                  step={1}
-                  min={1}
-                  suffix={t('分钟')}
-                  extraText={t('设置过短会影响数据库性能')}
-                  placeholder={t('数据看板更新间隔')}
-                  field={'DataExportInterval'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      DataExportInterval: String(value),
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Select
-                  label={t('数据看板默认时间粒度')}
-                  optionList={optionsDataExportDefaultTime}
-                  field={'DataExportDefaultTime'}
-                  extraText={t('仅修改展示粒度，统计精确到小时')}
-                  placeholder={t('数据看板默认时间粒度')}
-                  style={{ width: 180 }}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      DataExportDefaultTime: String(value),
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存数据看板设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+          {t('保存数据看板设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Dashboard/SettingsFAQ.jsx b/web/src/pages/Setting/Dashboard/SettingsFAQ.jsx
index 3c6f6969629..31d6d194c44 100644
--- a/web/src/pages/Setting/Dashboard/SettingsFAQ.jsx
+++ b/web/src/pages/Setting/Dashboard/SettingsFAQ.jsx
@@ -17,131 +17,80 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Button,
-  Space,
-  Table,
-  Form,
-  Typography,
-  Empty,
-  Divider,
+  Input,
   Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
   Switch,
   Tooltip,
-} from '@douyinfe/semi-ui';
+  useOverlayState,
+} from '@heroui/react';
 import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { Plus, Edit, Trash2, Save, HelpCircle } from 'lucide-react';
+  Edit,
+  HelpCircle,
+  Inbox,
+  Plus,
+  Save,
+  Trash2,
+} from 'lucide-react';
 import { API, showError, showSuccess } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
 
-const { Text } = Typography;
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
 
 const SettingsFAQ = ({ options, refresh }) => {
   const { t } = useTranslation();
 
   const [faqList, setFaqList] = useState([]);
   const [showFaqModal, setShowFaqModal] = useState(false);
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [deletingFaq, setDeletingFaq] = useState(null);
   const [editingFaq, setEditingFaq] = useState(null);
   const [modalLoading, setModalLoading] = useState(false);
   const [loading, setLoading] = useState(false);
   const [hasChanges, setHasChanges] = useState(false);
-  const [faqForm, setFaqForm] = useState({
-    question: '',
-    answer: '',
-  });
+  const [faqForm, setFaqForm] = useState({ question: '', answer: '' });
+  const [formErrors, setFormErrors] = useState({});
+
+  const [pendingDelete, setPendingDelete] = useState(null);
+
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
-
-  // 面板启用状态
   const [panelEnabled, setPanelEnabled] = useState(true);
 
-  const columns = [
-    {
-      title: t('问题标题'),
-      dataIndex: 'question',
-      key: 'question',
-      render: (text) => (
-        <Tooltip content={text} showArrow>
-          <div
-            style={{
-              maxWidth: '300px',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              fontWeight: 'bold',
-            }}
-          >
-            {text}
-          </div>
-        </Tooltip>
-      ),
-    },
-    {
-      title: t('回答内容'),
-      dataIndex: 'answer',
-      key: 'answer',
-      render: (text) => (
-        <Tooltip content={text} showArrow>
-          <div
-            style={{
-              maxWidth: '400px',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-              color: 'var(--semi-color-text-1)',
-            }}
-          >
-            {text}
-          </div>
-        </Tooltip>
-      ),
-    },
-    {
-      title: t('操作'),
-      key: 'action',
-      fixed: 'right',
-      width: 150,
-      render: (text, record) => (
-        <Space>
-          <Button
-            icon={<Edit size={14} />}
-            theme='light'
-            type='tertiary'
-            size='small'
-            onClick={() => handleEditFaq(record)}
-          >
-            {t('编辑')}
-          </Button>
-          <Button
-            icon={<Trash2 size={14} />}
-            type='danger'
-            theme='light'
-            size='small'
-            onClick={() => handleDeleteFaq(record)}
-          >
-            {t('删除')}
-          </Button>
-        </Space>
-      ),
-    },
-  ];
-
   const updateOption = async (key, value) => {
-    const res = await API.put('/api/option/', {
-      key,
-      value,
-    });
-    const { success, message } = res.data;
+    const res = await API.put('/api/option/', { key, value });
+    const { success, message } = res.data || {};
     if (success) {
-      showSuccess('常见问答已更新');
-      if (refresh) refresh();
+      showSuccess(t('常见问答已更新'));
+      refresh?.();
     } else {
       showError(message);
     }
@@ -154,8 +103,9 @@ const SettingsFAQ = ({ options, refresh }) => {
       await updateOption('console_setting.faq', faqJson);
       setHasChanges(false);
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('常见问答更新失败', error);
-      showError('常见问答更新失败');
+      showError(t('常见问答更新失败'));
     } finally {
       setLoading(false);
     }
@@ -163,47 +113,27 @@ const SettingsFAQ = ({ options, refresh }) => {
 
   const handleAddFaq = () => {
     setEditingFaq(null);
-    setFaqForm({
-      question: '',
-      answer: '',
-    });
+    setFaqForm({ question: '', answer: '' });
+    setFormErrors({});
     setShowFaqModal(true);
   };
 
   const handleEditFaq = (faq) => {
     setEditingFaq(faq);
-    setFaqForm({
-      question: faq.question,
-      answer: faq.answer,
-    });
+    setFaqForm({ question: faq.question, answer: faq.answer });
+    setFormErrors({});
     setShowFaqModal(true);
   };
 
-  const handleDeleteFaq = (faq) => {
-    setDeletingFaq(faq);
-    setShowDeleteModal(true);
-  };
-
-  const confirmDeleteFaq = () => {
-    if (deletingFaq) {
-      const newList = faqList.filter((item) => item.id !== deletingFaq.id);
-      setFaqList(newList);
-      setHasChanges(true);
-      showSuccess('问答已删除，请及时点击“保存设置”进行保存');
-    }
-    setShowDeleteModal(false);
-    setDeletingFaq(null);
-  };
-
   const handleSaveFaq = async () => {
-    if (!faqForm.question || !faqForm.answer) {
-      showError('请填写完整的问答信息');
-      return;
-    }
+    const next = {};
+    if (!faqForm.question?.trim()) next.question = t('请输入问题标题');
+    if (!faqForm.answer?.trim()) next.answer = t('请输入回答内容');
+    setFormErrors(next);
+    if (Object.keys(next).length > 0) return;
 
     try {
       setModalLoading(true);
-
       let newList;
       if (editingFaq) {
         newList = faqList.map((item) =>
@@ -211,44 +141,47 @@ const SettingsFAQ = ({ options, refresh }) => {
         );
       } else {
         const newId = Math.max(...faqList.map((item) => item.id), 0) + 1;
-        const newFaq = {
-          id: newId,
-          ...faqForm,
-        };
-        newList = [...faqList, newFaq];
+        newList = [...faqList, { id: newId, ...faqForm }];
       }
-
       setFaqList(newList);
       setHasChanges(true);
       setShowFaqModal(false);
       showSuccess(
         editingFaq
-          ? '问答已更新，请及时点击“保存设置”进行保存'
-          : '问答已添加，请及时点击“保存设置”进行保存',
+          ? t('问答已更新，请及时点击"保存设置"进行保存')
+          : t('问答已添加，请及时点击"保存设置"进行保存'),
       );
     } catch (error) {
-      showError('操作失败: ' + error.message);
+      showError(t('操作失败') + ': ' + error.message);
     } finally {
       setModalLoading(false);
     }
   };
 
+  const performDeleteFaq = (faq) => {
+    if (!faq) return;
+    const newList = faqList.filter((item) => item.id !== faq.id);
+    setFaqList(newList);
+    setHasChanges(true);
+    showSuccess(t('问答已删除，请及时点击"保存设置"进行保存'));
+  };
+
   const parseFAQ = (faqStr) => {
     if (!faqStr) {
       setFaqList([]);
       return;
     }
-
     try {
       const parsed = JSON.parse(faqStr);
       const list = Array.isArray(parsed) ? parsed : [];
-      // 确保每个项目都有id
-      const listWithIds = list.map((item, index) => ({
-        ...item,
-        id: item.id || index + 1,
-      }));
-      setFaqList(listWithIds);
+      setFaqList(
+        list.map((item, index) => ({
+          ...item,
+          id: item.id || index + 1,
+        })),
+      );
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('解析常见问答失败:', error);
       setFaqList([]);
     }
@@ -258,6 +191,7 @@ const SettingsFAQ = ({ options, refresh }) => {
     if (options['console_setting.faq'] !== undefined) {
       parseFAQ(options['console_setting.faq']);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options['console_setting.faq']]);
 
   useEffect(() => {
@@ -267,7 +201,7 @@ const SettingsFAQ = ({ options, refresh }) => {
         ? true
         : enabledStr === 'true' || enabledStr === true,
     );
-  }, [options['console_setting.faq_enabled']]);
+  }, [options]);
 
   const handleToggleEnabled = async (checked) => {
     const newValue = checked ? 'true' : 'false';
@@ -276,12 +210,12 @@ const SettingsFAQ = ({ options, refresh }) => {
         key: 'console_setting.faq_enabled',
         value: newValue,
       });
-      if (res.data.success) {
+      if (res.data?.success) {
         setPanelEnabled(checked);
         showSuccess(t('设置已保存'));
         refresh?.();
       } else {
-        showError(res.data.message);
+        showError(res.data?.message);
       }
     } catch (err) {
       showError(err.message);
@@ -290,10 +224,9 @@ const SettingsFAQ = ({ options, refresh }) => {
 
   const handleBatchDelete = () => {
     if (selectedRowKeys.length === 0) {
-      showError('请先选择要删除的常见问答');
+      showError(t('请先选择要删除的常见问答'));
       return;
     }
-
     const newList = faqList.filter(
       (item) => !selectedRowKeys.includes(item.id),
     );
@@ -301,189 +234,335 @@ const SettingsFAQ = ({ options, refresh }) => {
     setSelectedRowKeys([]);
     setHasChanges(true);
     showSuccess(
-      `已删除 ${selectedRowKeys.length} 个常见问答，请及时点击“保存设置”进行保存`,
+      t('已删除 {{count}} 个常见问答，请及时点击"保存设置"进行保存', {
+        count: selectedRowKeys.length,
+      }),
     );
   };
 
-  const renderHeader = () => (
-    <div className='flex flex-col w-full'>
-      <div className='mb-2'>
-        <div className='flex items-center text-blue-500'>
-          <HelpCircle size={16} className='mr-2' />
-          <Text>
-            {t(
-              '常见问答管理，为用户提供常见问题的答案（最多50个，前端显示最新20条）',
-            )}
-          </Text>
-        </div>
+  const totalPages = Math.max(1, Math.ceil(faqList.length / pageSize));
+  const startIdx = (currentPage - 1) * pageSize;
+  const pagedData = faqList.slice(startIdx, startIdx + pageSize);
+
+  const visiblePageKeys = pagedData.map((row) => row.id);
+  const allPageSelected =
+    visiblePageKeys.length > 0 &&
+    visiblePageKeys.every((key) => selectedRowKeys.includes(key));
+  const somePageSelected =
+    !allPageSelected &&
+    visiblePageKeys.some((key) => selectedRowKeys.includes(key));
+
+  const togglePageSelection = (checked) => {
+    const set = new Set(selectedRowKeys);
+    if (checked) visiblePageKeys.forEach((key) => set.add(key));
+    else visiblePageKeys.forEach((key) => set.delete(key));
+    setSelectedRowKeys(Array.from(set));
+  };
+  const toggleRowSelection = (key, checked) => {
+    const set = new Set(selectedRowKeys);
+    if (checked) set.add(key);
+    else set.delete(key);
+    setSelectedRowKeys(Array.from(set));
+  };
+
+  const modalState = useOverlayState({
+    isOpen: showFaqModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowFaqModal(false);
+    },
+  });
+
+  return (
+    <div className='space-y-4'>
+      <div className='flex items-center text-sky-600'>
+        <HelpCircle size={16} className='mr-2' />
+        <span className='text-sm'>
+          {t(
+            '常见问答管理，为用户提供常见问题的答案（最多50个，前端显示最新20条）',
+          )}
+        </span>
       </div>
 
-      <Divider margin='12px' />
+      <div className='h-px bg-[color:var(--app-border)]' />
 
-      <div className='flex flex-col md:flex-row justify-between items-center gap-4 w-full'>
-        <div className='flex gap-2 w-full md:w-auto order-2 md:order-1'>
+      <div className='flex w-full flex-col items-center justify-between gap-4 md:flex-row'>
+        <div className='order-2 flex w-full gap-2 md:order-1 md:w-auto'>
           <Button
-            theme='light'
-            type='primary'
-            icon={<Plus size={14} />}
+            color='primary'
+            variant='flat'
+            startContent={<Plus size={14} />}
+            onPress={handleAddFaq}
             className='w-full md:w-auto'
-            onClick={handleAddFaq}
           >
             {t('添加问答')}
           </Button>
           <Button
-            icon={<Trash2 size={14} />}
-            type='danger'
-            theme='light'
-            onClick={handleBatchDelete}
-            disabled={selectedRowKeys.length === 0}
+            color='danger'
+            variant='flat'
+            startContent={<Trash2 size={14} />}
+            isDisabled={selectedRowKeys.length === 0}
+            onPress={handleBatchDelete}
             className='w-full md:w-auto'
           >
             {t('批量删除')}{' '}
-            {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
+            {selectedRowKeys.length > 0 ? `(${selectedRowKeys.length})` : ''}
           </Button>
           <Button
-            icon={<Save size={14} />}
-            onClick={submitFAQ}
-            loading={loading}
-            disabled={!hasChanges}
-            type='secondary'
+            variant='flat'
+            startContent={<Save size={14} />}
+            onPress={submitFAQ}
+            isPending={loading}
+            isDisabled={!hasChanges}
             className='w-full md:w-auto'
           >
             {t('保存设置')}
           </Button>
         </div>
 
-        {/* 启用开关 */}
-        <div className='order-1 md:order-2 flex items-center gap-2'>
-          <Switch checked={panelEnabled} onChange={handleToggleEnabled} />
-          <Text>{panelEnabled ? t('已启用') : t('已禁用')}</Text>
-        </div>
+        <label className='order-1 inline-flex items-center gap-2 md:order-2'>
+          <Switch
+            isSelected={!!panelEnabled}
+            onChange={handleToggleEnabled}
+            size='sm'
+            aria-label='enabled'
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
+          <span className='text-sm text-foreground'>
+            {panelEnabled ? t('已启用') : t('已禁用')}
+          </span>
+        </label>
       </div>
-    </div>
-  );
-
-  // 计算当前页显示的数据
-  const getCurrentPageData = () => {
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    return faqList.slice(startIndex, endIndex);
-  };
 
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: (selectedRowKeys, selectedRows) => {
-      setSelectedRowKeys(selectedRowKeys);
-    },
-    onSelect: (record, selected, selectedRows) => {
-      console.log(`选择行: ${selected}`, record);
-    },
-    onSelectAll: (selected, selectedRows) => {
-      console.log(`全选: ${selected}`, selectedRows);
-    },
-    getCheckboxProps: (record) => ({
-      disabled: false,
-      name: record.id,
-    }),
-  };
+      <div className='overflow-x-auto rounded-xl border border-[color:var(--app-border)]'>
+        <table className='w-full text-sm'>
+          <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+            <tr>
+              <th className='w-10 px-3 py-2 text-left font-semibold'>
+                <HeaderCheckbox
+                  checked={allPageSelected}
+                  indeterminate={somePageSelected}
+                  onChange={togglePageSelection}
+                  ariaLabel={t('选择当前页')}
+                />
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('问题标题')}
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('回答内容')}
+              </th>
+              <th className='w-40 px-3 py-2 text-right font-semibold'>
+                {t('操作')}
+              </th>
+            </tr>
+          </thead>
+          <tbody className='divide-y divide-[color:var(--app-border)]'>
+            {pagedData.length === 0 ? (
+              <tr>
+                <td colSpan={4} className='py-12 text-center text-sm text-muted'>
+                  <div className='flex flex-col items-center gap-3'>
+                    <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                      <Inbox size={28} />
+                    </div>
+                    <div>{t('暂无常见问答')}</div>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              pagedData.map((record) => {
+                const checked = selectedRowKeys.includes(record.id);
+                return (
+                  <tr key={record.id}>
+                    <td className='px-3 py-2'>
+                      <input
+                        type='checkbox'
+                        checked={checked}
+                        onChange={(event) =>
+                          toggleRowSelection(record.id, event.target.checked)
+                        }
+                        className='h-4 w-4 accent-primary'
+                      />
+                    </td>
+                    <td className='max-w-[300px] truncate px-3 py-2 font-semibold text-foreground'>
+                      <Tooltip content={record.question} placement='top'>
+                        <span>{record.question}</span>
+                      </Tooltip>
+                    </td>
+                    <td className='max-w-[400px] truncate px-3 py-2 text-muted'>
+                      <Tooltip content={record.answer} placement='top'>
+                        <span>{record.answer}</span>
+                      </Tooltip>
+                    </td>
+                    <td className='px-3 py-2 text-right'>
+                      <div className='inline-flex items-center gap-1.5'>
+                        <Button
+                          variant='light'
+                          size='sm'
+                          startContent={<Edit size={14} />}
+                          onPress={() => handleEditFaq(record)}
+                        >
+                          {t('编辑')}
+                        </Button>
+                        <Button
+                          color='danger'
+                          variant='flat'
+                          size='sm'
+                          startContent={<Trash2 size={14} />}
+                          onPress={() => setPendingDelete(record)}
+                        >
+                          {t('删除')}
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
 
-  return (
-    <>
-      <Form.Section text={renderHeader()}>
-        <Table
-          columns={columns}
-          dataSource={getCurrentPageData()}
-          rowSelection={rowSelection}
-          rowKey='id'
-          scroll={{ x: 'max-content' }}
-          pagination={{
-            currentPage: currentPage,
-            pageSize: pageSize,
-            total: faqList.length,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: ['5', '10', '20', '50'],
-            onChange: (page, size) => {
-              setCurrentPage(page);
-              setPageSize(size);
-            },
-            onShowSizeChange: (current, size) => {
+      <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted'>
+        <div className='flex items-center gap-2'>
+          <span>{t('每页')}</span>
+          <select
+            value={String(pageSize)}
+            onChange={(event) => {
+              setPageSize(Number(event.target.value));
               setCurrentPage(1);
-              setPageSize(size);
-            },
-          }}
-          size='middle'
-          loading={loading}
-          empty={
-            <Empty
-              image={
-                <IllustrationNoResult style={{ width: 150, height: 150 }} />
-              }
-              darkModeImage={
-                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-              }
-              description={t('暂无常见问答')}
-              style={{ padding: 30 }}
-            />
-          }
-          className='overflow-hidden'
-        />
-      </Form.Section>
-
-      <Modal
-        title={editingFaq ? t('编辑问答') : t('添加问答')}
-        visible={showFaqModal}
-        onOk={handleSaveFaq}
-        onCancel={() => setShowFaqModal(false)}
-        okText={t('保存')}
-        cancelText={t('取消')}
-        confirmLoading={modalLoading}
-        width={800}
-      >
-        <Form
-          layout='vertical'
-          initValues={faqForm}
-          key={editingFaq ? editingFaq.id : 'new'}
-        >
-          <Form.Input
-            field='question'
-            label={t('问题标题')}
-            placeholder={t('请输入问题标题')}
-            maxLength={200}
-            rules={[{ required: true, message: t('请输入问题标题') }]}
-            onChange={(value) => setFaqForm({ ...faqForm, question: value })}
-          />
-          <Form.TextArea
-            field='answer'
-            label={t('回答内容')}
-            placeholder={t('请输入回答内容（支持 Markdown/HTML）')}
-            maxCount={1000}
-            rows={6}
-            rules={[{ required: true, message: t('请输入回答内容') }]}
-            onChange={(value) => setFaqForm({ ...faqForm, answer: value })}
-          />
-        </Form>
+            }}
+            aria-label={t('每页数量')}
+            className='h-7 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-xs outline-none focus:border-primary'
+          >
+            {[5, 10, 20, 50].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+          <span>{t('共 {{total}} 条', { total: faqList.length })}</span>
+        </div>
+        <div className='flex items-center gap-1'>
+          <Button
+            size='sm'
+            variant='light'
+            isDisabled={currentPage <= 1}
+            onPress={() => setCurrentPage((p) => Math.max(1, p - 1))}
+          >
+            {t('上一页')}
+          </Button>
+          <span>
+            {currentPage} / {totalPages}
+          </span>
+          <Button
+            size='sm'
+            variant='light'
+            isDisabled={currentPage >= totalPages}
+            onPress={() =>
+              setCurrentPage((p) => Math.min(totalPages, p + 1))
+            }
+          >
+            {t('下一页')}
+          </Button>
+        </div>
+      </div>
+
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='lg' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {editingFaq ? t('编辑问答') : t('添加问答')}
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('问题标题')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='text'
+                    value={faqForm.question}
+                    onChange={(event) =>
+                      setFaqForm((prev) => ({
+                        ...prev,
+                        question: event.target.value,
+                      }))
+                    }
+                    placeholder={t('请输入问题标题')}
+                    maxLength={200}
+                    aria-label={t('问题标题')}
+                    className={inputClass}
+                  />
+                  {formErrors.question ? (
+                    <div className='text-xs text-red-600'>
+                      {formErrors.question}
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('回答内容')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <textarea
+                    value={faqForm.answer}
+                    onChange={(event) =>
+                      setFaqForm((prev) => ({
+                        ...prev,
+                        answer: event.target.value,
+                      }))
+                    }
+                    placeholder={t('请输入回答内容（支持 Markdown/HTML）')}
+                    rows={6}
+                    maxLength={1000}
+                    aria-label={t('回答内容')}
+                    className={textareaClass}
+                  />
+                  {formErrors.answer ? (
+                    <div className='text-xs text-red-600'>
+                      {formErrors.answer}
+                    </div>
+                  ) : null}
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={() => setShowFaqModal(false)}>
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={handleSaveFaq}
+                  isPending={modalLoading}
+                >
+                  {t('保存')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
-      <Modal
+      <ConfirmDialog
+        visible={!!pendingDelete}
         title={t('确认删除')}
-        visible={showDeleteModal}
-        onOk={confirmDeleteFaq}
-        onCancel={() => {
-          setShowDeleteModal(false);
-          setDeletingFaq(null);
-        }}
-        okText={t('确认删除')}
         cancelText={t('取消')}
-        type='warning'
-        okButtonProps={{
-          type: 'danger',
-          theme: 'solid',
+        confirmText={t('确认删除')}
+        danger
+        onCancel={() => setPendingDelete(null)}
+        onConfirm={() => {
+          const target = pendingDelete;
+          setPendingDelete(null);
+          performDeleteFaq(target);
         }}
       >
-        <Text>{t('确定要删除此问答吗？')}</Text>
-      </Modal>
-    </>
+        {t('确定要删除此问答吗？')}
+      </ConfirmDialog>
+    </div>
   );
 };
 
diff --git a/web/src/pages/Setting/Dashboard/SettingsUptimeKuma.jsx b/web/src/pages/Setting/Dashboard/SettingsUptimeKuma.jsx
index 3f3d5dd8ef3..8c827983b04 100644
--- a/web/src/pages/Setting/Dashboard/SettingsUptimeKuma.jsx
+++ b/web/src/pages/Setting/Dashboard/SettingsUptimeKuma.jsx
@@ -17,35 +17,50 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Button,
-  Space,
-  Table,
-  Form,
-  Typography,
-  Empty,
-  Divider,
+  Input,
   Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
   Switch,
-} from '@douyinfe/semi-ui';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
-import { Plus, Edit, Trash2, Save, Activity } from 'lucide-react';
+  useOverlayState,
+} from '@heroui/react';
+import { Activity, Edit, Inbox, Plus, Save, Trash2 } from 'lucide-react';
 import { API, showError, showSuccess } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
 
-const { Text } = Typography;
+function HeaderCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <input
+      ref={ref}
+      type='checkbox'
+      checked={!!checked}
+      onChange={(event) => onChange(event.target.checked)}
+      aria-label={ariaLabel}
+      className='h-4 w-4 accent-primary'
+    />
+  );
+}
 
 const SettingsUptimeKuma = ({ options, refresh }) => {
   const { t } = useTranslation();
 
   const [uptimeGroupsList, setUptimeGroupsList] = useState([]);
   const [showUptimeModal, setShowUptimeModal] = useState(false);
-  const [showDeleteModal, setShowDeleteModal] = useState(false);
-  const [deletingGroup, setDeletingGroup] = useState(null);
   const [editingGroup, setEditingGroup] = useState(null);
   const [modalLoading, setModalLoading] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -55,98 +70,21 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
     url: '',
     slug: '',
   });
+  const [formErrors, setFormErrors] = useState({});
+
+  const [pendingDelete, setPendingDelete] = useState(null);
+
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
   const [selectedRowKeys, setSelectedRowKeys] = useState([]);
   const [panelEnabled, setPanelEnabled] = useState(true);
 
-  const columns = [
-    {
-      title: t('分类名称'),
-      dataIndex: 'categoryName',
-      key: 'categoryName',
-      render: (text) => (
-        <div
-          style={{
-            fontWeight: 'bold',
-            color: 'var(--semi-color-text-0)',
-          }}
-        >
-          {text}
-        </div>
-      ),
-    },
-    {
-      title: t('Uptime Kuma地址'),
-      dataIndex: 'url',
-      key: 'url',
-      render: (text) => (
-        <div
-          style={{
-            maxWidth: '300px',
-            wordBreak: 'break-all',
-            fontFamily: 'monospace',
-            color: 'var(--semi-color-primary)',
-          }}
-        >
-          {text}
-        </div>
-      ),
-    },
-    {
-      title: t('状态页面Slug'),
-      dataIndex: 'slug',
-      key: 'slug',
-      render: (text) => (
-        <div
-          style={{
-            fontFamily: 'monospace',
-            color: 'var(--semi-color-text-1)',
-          }}
-        >
-          {text}
-        </div>
-      ),
-    },
-    {
-      title: t('操作'),
-      key: 'action',
-      fixed: 'right',
-      width: 150,
-      render: (text, record) => (
-        <Space>
-          <Button
-            icon={<Edit size={14} />}
-            theme='light'
-            type='tertiary'
-            size='small'
-            onClick={() => handleEditGroup(record)}
-          >
-            {t('编辑')}
-          </Button>
-          <Button
-            icon={<Trash2 size={14} />}
-            type='danger'
-            theme='light'
-            size='small'
-            onClick={() => handleDeleteGroup(record)}
-          >
-            {t('删除')}
-          </Button>
-        </Space>
-      ),
-    },
-  ];
-
   const updateOption = async (key, value) => {
-    const res = await API.put('/api/option/', {
-      key,
-      value,
-    });
-    const { success, message } = res.data;
+    const res = await API.put('/api/option/', { key, value });
+    const { success, message } = res.data || {};
     if (success) {
-      showSuccess('Uptime Kuma配置已更新');
-      if (refresh) refresh();
+      showSuccess(t('Uptime Kuma配置已更新'));
+      refresh?.();
     } else {
       showError(message);
     }
@@ -159,8 +97,9 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
       await updateOption('console_setting.uptime_kuma_groups', groupsJson);
       setHasChanges(false);
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('Uptime Kuma配置更新失败', error);
-      showError('Uptime Kuma配置更新失败');
+      showError(t('Uptime Kuma配置更新失败'));
     } finally {
       setLoading(false);
     }
@@ -168,11 +107,8 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
 
   const handleAddGroup = () => {
     setEditingGroup(null);
-    setUptimeForm({
-      categoryName: '',
-      url: '',
-      slug: '',
-    });
+    setUptimeForm({ categoryName: '', url: '', slug: '' });
+    setFormErrors({});
     setShowUptimeModal(true);
   };
 
@@ -183,48 +119,32 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
       url: group.url,
       slug: group.slug,
     });
+    setFormErrors({});
     setShowUptimeModal(true);
   };
 
-  const handleDeleteGroup = (group) => {
-    setDeletingGroup(group);
-    setShowDeleteModal(true);
-  };
-
-  const confirmDeleteGroup = () => {
-    if (deletingGroup) {
-      const newList = uptimeGroupsList.filter(
-        (item) => item.id !== deletingGroup.id,
-      );
-      setUptimeGroupsList(newList);
-      setHasChanges(true);
-      showSuccess('分类已删除，请及时点击“保存设置”进行保存');
-    }
-    setShowDeleteModal(false);
-    setDeletingGroup(null);
-  };
-
   const handleSaveGroup = async () => {
-    if (!uptimeForm.categoryName || !uptimeForm.url || !uptimeForm.slug) {
-      showError('请填写完整的分类信息');
-      return;
-    }
-
-    try {
-      new URL(uptimeForm.url);
-    } catch (error) {
-      showError('请输入有效的URL地址');
-      return;
+    const next = {};
+    if (!uptimeForm.categoryName?.trim()) next.categoryName = t('请输入分类名称');
+    if (!uptimeForm.url?.trim()) {
+      next.url = t('请输入Uptime Kuma地址');
+    } else {
+      try {
+        new URL(uptimeForm.url);
+      } catch (e) {
+        next.url = t('请输入有效的URL地址');
+      }
     }
-
-    if (!/^[a-zA-Z0-9_-]+$/.test(uptimeForm.slug)) {
-      showError('Slug只能包含字母、数字、下划线和连字符');
-      return;
+    if (!uptimeForm.slug?.trim()) {
+      next.slug = t('请输入状态页面Slug');
+    } else if (!/^[a-zA-Z0-9_-]+$/.test(uptimeForm.slug)) {
+      next.slug = t('Slug只能包含字母、数字、下划线和连字符');
     }
+    setFormErrors(next);
+    if (Object.keys(next).length > 0) return;
 
     try {
       setModalLoading(true);
-
       let newList;
       if (editingGroup) {
         newList = uptimeGroupsList.map((item) =>
@@ -233,43 +153,47 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
       } else {
         const newId =
           Math.max(...uptimeGroupsList.map((item) => item.id), 0) + 1;
-        const newGroup = {
-          id: newId,
-          ...uptimeForm,
-        };
-        newList = [...uptimeGroupsList, newGroup];
+        newList = [...uptimeGroupsList, { id: newId, ...uptimeForm }];
       }
-
       setUptimeGroupsList(newList);
       setHasChanges(true);
       setShowUptimeModal(false);
       showSuccess(
         editingGroup
-          ? '分类已更新，请及时点击“保存设置”进行保存'
-          : '分类已添加，请及时点击“保存设置”进行保存',
+          ? t('分类已更新，请及时点击"保存设置"进行保存')
+          : t('分类已添加，请及时点击"保存设置"进行保存'),
       );
     } catch (error) {
-      showError('操作失败: ' + error.message);
+      showError(t('操作失败') + ': ' + error.message);
     } finally {
       setModalLoading(false);
     }
   };
 
+  const performDeleteGroup = (group) => {
+    if (!group) return;
+    const newList = uptimeGroupsList.filter((item) => item.id !== group.id);
+    setUptimeGroupsList(newList);
+    setHasChanges(true);
+    showSuccess(t('分类已删除，请及时点击"保存设置"进行保存'));
+  };
+
   const parseUptimeGroups = (groupsStr) => {
     if (!groupsStr) {
       setUptimeGroupsList([]);
       return;
     }
-
     try {
       const parsed = JSON.parse(groupsStr);
       const list = Array.isArray(parsed) ? parsed : [];
-      const listWithIds = list.map((item, index) => ({
-        ...item,
-        id: item.id || index + 1,
-      }));
-      setUptimeGroupsList(listWithIds);
+      setUptimeGroupsList(
+        list.map((item, index) => ({
+          ...item,
+          id: item.id || index + 1,
+        })),
+      );
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.error('解析Uptime Kuma配置失败:', error);
       setUptimeGroupsList([]);
     }
@@ -277,9 +201,8 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
 
   useEffect(() => {
     const groupsStr = options['console_setting.uptime_kuma_groups'];
-    if (groupsStr !== undefined) {
-      parseUptimeGroups(groupsStr);
-    }
+    if (groupsStr !== undefined) parseUptimeGroups(groupsStr);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [options['console_setting.uptime_kuma_groups']]);
 
   useEffect(() => {
@@ -289,7 +212,7 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
         ? true
         : enabledStr === 'true' || enabledStr === true,
     );
-  }, [options['console_setting.uptime_kuma_enabled']]);
+  }, [options]);
 
   const handleToggleEnabled = async (checked) => {
     const newValue = checked ? 'true' : 'false';
@@ -298,12 +221,12 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
         key: 'console_setting.uptime_kuma_enabled',
         value: newValue,
       });
-      if (res.data.success) {
+      if (res.data?.success) {
         setPanelEnabled(checked);
         showSuccess(t('设置已保存'));
         refresh?.();
       } else {
-        showError(res.data.message);
+        showError(res.data?.message);
       }
     } catch (err) {
       showError(err.message);
@@ -312,10 +235,9 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
 
   const handleBatchDelete = () => {
     if (selectedRowKeys.length === 0) {
-      showError('请先选择要删除的分类');
+      showError(t('请先选择要删除的分类'));
       return;
     }
-
     const newList = uptimeGroupsList.filter(
       (item) => !selectedRowKeys.includes(item.id),
     );
@@ -323,199 +245,364 @@ const SettingsUptimeKuma = ({ options, refresh }) => {
     setSelectedRowKeys([]);
     setHasChanges(true);
     showSuccess(
-      `已删除 ${selectedRowKeys.length} 个分类，请及时点击“保存设置”进行保存`,
+      t('已删除 {{count}} 个分类，请及时点击"保存设置"进行保存', {
+        count: selectedRowKeys.length,
+      }),
     );
   };
 
-  const renderHeader = () => (
-    <div className='flex flex-col w-full'>
-      <div className='mb-2'>
-        <div className='flex items-center text-blue-500'>
-          <Activity size={16} className='mr-2' />
-          <Text>
-            {t(
-              'Uptime Kuma监控分类管理，可以配置多个监控分类用于服务状态展示（最多20个）',
-            )}
-          </Text>
-        </div>
+  const totalPages = Math.max(1, Math.ceil(uptimeGroupsList.length / pageSize));
+  const startIdx = (currentPage - 1) * pageSize;
+  const pagedData = uptimeGroupsList.slice(startIdx, startIdx + pageSize);
+
+  const visiblePageKeys = pagedData.map((row) => row.id);
+  const allPageSelected =
+    visiblePageKeys.length > 0 &&
+    visiblePageKeys.every((key) => selectedRowKeys.includes(key));
+  const somePageSelected =
+    !allPageSelected &&
+    visiblePageKeys.some((key) => selectedRowKeys.includes(key));
+
+  const togglePageSelection = (checked) => {
+    const set = new Set(selectedRowKeys);
+    if (checked) visiblePageKeys.forEach((key) => set.add(key));
+    else visiblePageKeys.forEach((key) => set.delete(key));
+    setSelectedRowKeys(Array.from(set));
+  };
+  const toggleRowSelection = (key, checked) => {
+    const set = new Set(selectedRowKeys);
+    if (checked) set.add(key);
+    else set.delete(key);
+    setSelectedRowKeys(Array.from(set));
+  };
+
+  const modalState = useOverlayState({
+    isOpen: showUptimeModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setShowUptimeModal(false);
+    },
+  });
+
+  return (
+    <div className='space-y-4'>
+      <div className='flex items-center text-sky-600'>
+        <Activity size={16} className='mr-2' />
+        <span className='text-sm'>
+          {t(
+            'Uptime Kuma监控分类管理，可以配置多个监控分类用于服务状态展示（最多20个）',
+          )}
+        </span>
       </div>
 
-      <Divider margin='12px' />
+      <div className='h-px bg-[color:var(--app-border)]' />
 
-      <div className='flex flex-col md:flex-row justify-between items-center gap-4 w-full'>
-        <div className='flex gap-2 w-full md:w-auto order-2 md:order-1'>
+      <div className='flex w-full flex-col items-center justify-between gap-4 md:flex-row'>
+        <div className='order-2 flex w-full gap-2 md:order-1 md:w-auto'>
           <Button
-            theme='light'
-            type='primary'
-            icon={<Plus size={14} />}
+            color='primary'
+            variant='flat'
+            startContent={<Plus size={14} />}
+            onPress={handleAddGroup}
             className='w-full md:w-auto'
-            onClick={handleAddGroup}
           >
             {t('添加分类')}
           </Button>
           <Button
-            icon={<Trash2 size={14} />}
-            type='danger'
-            theme='light'
-            onClick={handleBatchDelete}
-            disabled={selectedRowKeys.length === 0}
+            color='danger'
+            variant='flat'
+            startContent={<Trash2 size={14} />}
+            isDisabled={selectedRowKeys.length === 0}
+            onPress={handleBatchDelete}
             className='w-full md:w-auto'
           >
             {t('批量删除')}{' '}
-            {selectedRowKeys.length > 0 && `(${selectedRowKeys.length})`}
+            {selectedRowKeys.length > 0 ? `(${selectedRowKeys.length})` : ''}
           </Button>
           <Button
-            icon={<Save size={14} />}
-            onClick={submitUptimeGroups}
-            loading={loading}
-            disabled={!hasChanges}
-            type='secondary'
+            variant='flat'
+            startContent={<Save size={14} />}
+            onPress={submitUptimeGroups}
+            isPending={loading}
+            isDisabled={!hasChanges}
             className='w-full md:w-auto'
           >
             {t('保存设置')}
           </Button>
         </div>
 
-        {/* 启用开关 */}
-        <div className='order-1 md:order-2 flex items-center gap-2'>
-          <Switch checked={panelEnabled} onChange={handleToggleEnabled} />
-          <Text>{panelEnabled ? t('已启用') : t('已禁用')}</Text>
-        </div>
+        <label className='order-1 inline-flex items-center gap-2 md:order-2'>
+          <Switch
+            isSelected={!!panelEnabled}
+            onChange={handleToggleEnabled}
+            size='sm'
+            aria-label='enabled'
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
+          <span className='text-sm text-foreground'>
+            {panelEnabled ? t('已启用') : t('已禁用')}
+          </span>
+        </label>
       </div>
-    </div>
-  );
-
-  const getCurrentPageData = () => {
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    return uptimeGroupsList.slice(startIndex, endIndex);
-  };
 
-  const rowSelection = {
-    selectedRowKeys,
-    onChange: (selectedRowKeys, selectedRows) => {
-      setSelectedRowKeys(selectedRowKeys);
-    },
-    onSelect: (record, selected, selectedRows) => {
-      console.log(`选择行: ${selected}`, record);
-    },
-    onSelectAll: (selected, selectedRows) => {
-      console.log(`全选: ${selected}`, selectedRows);
-    },
-    getCheckboxProps: (record) => ({
-      disabled: false,
-      name: record.id,
-    }),
-  };
+      <div className='overflow-x-auto rounded-xl border border-[color:var(--app-border)]'>
+        <table className='w-full text-sm'>
+          <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+            <tr>
+              <th className='w-10 px-3 py-2 text-left font-semibold'>
+                <HeaderCheckbox
+                  checked={allPageSelected}
+                  indeterminate={somePageSelected}
+                  onChange={togglePageSelection}
+                  ariaLabel={t('选择当前页')}
+                />
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('分类名称')}
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('Uptime Kuma地址')}
+              </th>
+              <th className='px-3 py-2 text-left font-semibold'>
+                {t('状态页面Slug')}
+              </th>
+              <th className='w-40 px-3 py-2 text-right font-semibold'>
+                {t('操作')}
+              </th>
+            </tr>
+          </thead>
+          <tbody className='divide-y divide-[color:var(--app-border)]'>
+            {pagedData.length === 0 ? (
+              <tr>
+                <td colSpan={5} className='py-12 text-center text-sm text-muted'>
+                  <div className='flex flex-col items-center gap-3'>
+                    <div className='flex h-16 w-16 items-center justify-center rounded-full bg-surface-secondary text-muted'>
+                      <Inbox size={28} />
+                    </div>
+                    <div>{t('暂无监控数据')}</div>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              pagedData.map((record) => {
+                const checked = selectedRowKeys.includes(record.id);
+                return (
+                  <tr key={record.id}>
+                    <td className='px-3 py-2'>
+                      <input
+                        type='checkbox'
+                        checked={checked}
+                        onChange={(event) =>
+                          toggleRowSelection(record.id, event.target.checked)
+                        }
+                        className='h-4 w-4 accent-primary'
+                      />
+                    </td>
+                    <td className='px-3 py-2 font-semibold text-foreground'>
+                      {record.categoryName}
+                    </td>
+                    <td className='max-w-[300px] break-all px-3 py-2 font-mono text-primary'>
+                      {record.url}
+                    </td>
+                    <td className='px-3 py-2 font-mono text-muted'>
+                      {record.slug}
+                    </td>
+                    <td className='px-3 py-2 text-right'>
+                      <div className='inline-flex items-center gap-1.5'>
+                        <Button
+                          variant='light'
+                          size='sm'
+                          startContent={<Edit size={14} />}
+                          onPress={() => handleEditGroup(record)}
+                        >
+                          {t('编辑')}
+                        </Button>
+                        <Button
+                          color='danger'
+                          variant='flat'
+                          size='sm'
+                          startContent={<Trash2 size={14} />}
+                          onPress={() => setPendingDelete(record)}
+                        >
+                          {t('删除')}
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
+          </tbody>
+        </table>
+      </div>
 
-  return (
-    <>
-      <Form.Section text={renderHeader()}>
-        <Table
-          columns={columns}
-          dataSource={getCurrentPageData()}
-          rowSelection={rowSelection}
-          rowKey='id'
-          scroll={{ x: 'max-content' }}
-          pagination={{
-            currentPage: currentPage,
-            pageSize: pageSize,
-            total: uptimeGroupsList.length,
-            showSizeChanger: true,
-            showQuickJumper: true,
-            pageSizeOptions: ['5', '10', '20', '50'],
-            onChange: (page, size) => {
-              setCurrentPage(page);
-              setPageSize(size);
-            },
-            onShowSizeChange: (current, size) => {
+      <div className='flex flex-wrap items-center justify-between gap-2 text-xs text-muted'>
+        <div className='flex items-center gap-2'>
+          <span>{t('每页')}</span>
+          <select
+            value={String(pageSize)}
+            onChange={(event) => {
+              setPageSize(Number(event.target.value));
               setCurrentPage(1);
-              setPageSize(size);
-            },
-          }}
-          size='middle'
-          loading={loading}
-          empty={
-            <Empty
-              image={
-                <IllustrationNoResult style={{ width: 150, height: 150 }} />
-              }
-              darkModeImage={
-                <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-              }
-              description={t('暂无监控数据')}
-              style={{ padding: 30 }}
-            />
-          }
-          className='overflow-hidden'
-        />
-      </Form.Section>
-
-      <Modal
-        title={editingGroup ? t('编辑分类') : t('添加分类')}
-        visible={showUptimeModal}
-        onOk={handleSaveGroup}
-        onCancel={() => setShowUptimeModal(false)}
-        okText={t('保存')}
-        cancelText={t('取消')}
-        confirmLoading={modalLoading}
-        width={600}
-      >
-        <Form
-          layout='vertical'
-          initValues={uptimeForm}
-          key={editingGroup ? editingGroup.id : 'new'}
-        >
-          <Form.Input
-            field='categoryName'
-            label={t('分类名称')}
-            placeholder={t('请输入分类名称，如：OpenAI、Claude等')}
-            maxLength={50}
-            rules={[{ required: true, message: t('请输入分类名称') }]}
-            onChange={(value) =>
-              setUptimeForm({ ...uptimeForm, categoryName: value })
+            }}
+            aria-label={t('每页数量')}
+            className='h-7 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-xs outline-none focus:border-primary'
+          >
+            {[5, 10, 20, 50].map((n) => (
+              <option key={n} value={n}>
+                {n}
+              </option>
+            ))}
+          </select>
+          <span>{t('共 {{total}} 条', { total: uptimeGroupsList.length })}</span>
+        </div>
+        <div className='flex items-center gap-1'>
+          <Button
+            size='sm'
+            variant='light'
+            isDisabled={currentPage <= 1}
+            onPress={() => setCurrentPage((p) => Math.max(1, p - 1))}
+          >
+            {t('上一页')}
+          </Button>
+          <span>
+            {currentPage} / {totalPages}
+          </span>
+          <Button
+            size='sm'
+            variant='light'
+            isDisabled={currentPage >= totalPages}
+            onPress={() =>
+              setCurrentPage((p) => Math.min(totalPages, p + 1))
             }
-          />
-          <Form.Input
-            field='url'
-            label={t('Uptime Kuma地址')}
-            placeholder={t(
-              '请输入Uptime Kuma服务地址，如：https://status.example.com',
-            )}
-            maxLength={500}
-            rules={[{ required: true, message: t('请输入Uptime Kuma地址') }]}
-            onChange={(value) => setUptimeForm({ ...uptimeForm, url: value })}
-          />
-          <Form.Input
-            field='slug'
-            label={t('状态页面Slug')}
-            placeholder={t('请输入状态页面的Slug，如：my-status')}
-            maxLength={100}
-            rules={[{ required: true, message: t('请输入状态页面Slug') }]}
-            onChange={(value) => setUptimeForm({ ...uptimeForm, slug: value })}
-          />
-        </Form>
+          >
+            {t('下一页')}
+          </Button>
+        </div>
+      </div>
+
+      <Modal state={modalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='md' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {editingGroup ? t('编辑分类') : t('添加分类')}
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('分类名称')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='text'
+                    value={uptimeForm.categoryName}
+                    onChange={(event) =>
+                      setUptimeForm((prev) => ({
+                        ...prev,
+                        categoryName: event.target.value,
+                      }))
+                    }
+                    placeholder={t('请输入分类名称，如：OpenAI、Claude等')}
+                    maxLength={50}
+                    aria-label={t('分类名称')}
+                    className={inputClass}
+                  />
+                  {formErrors.categoryName ? (
+                    <div className='text-xs text-red-600'>
+                      {formErrors.categoryName}
+                    </div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('Uptime Kuma地址')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='text'
+                    value={uptimeForm.url}
+                    onChange={(event) =>
+                      setUptimeForm((prev) => ({
+                        ...prev,
+                        url: event.target.value,
+                      }))
+                    }
+                    placeholder={t(
+                      '请输入Uptime Kuma服务地址，如：https://status.example.com',
+                    )}
+                    maxLength={500}
+                    aria-label={t('Uptime Kuma地址')}
+                    className={inputClass}
+                  />
+                  {formErrors.url ? (
+                    <div className='text-xs text-red-600'>{formErrors.url}</div>
+                  ) : null}
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('状态页面Slug')}
+                    <span className='ml-1 text-red-500'>*</span>
+                  </div>
+                  <Input
+                    type='text'
+                    value={uptimeForm.slug}
+                    onChange={(event) =>
+                      setUptimeForm((prev) => ({
+                        ...prev,
+                        slug: event.target.value,
+                      }))
+                    }
+                    placeholder={t('请输入状态页面的Slug，如：my-status')}
+                    maxLength={100}
+                    aria-label={t('状态页面Slug')}
+                    className={inputClass}
+                  />
+                  {formErrors.slug ? (
+                    <div className='text-xs text-red-600'>{formErrors.slug}</div>
+                  ) : null}
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button
+                  variant='light'
+                  onPress={() => setShowUptimeModal(false)}
+                >
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={handleSaveGroup}
+                  isPending={modalLoading}
+                >
+                  {t('保存')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
-      <Modal
+      <ConfirmDialog
+        visible={!!pendingDelete}
         title={t('确认删除')}
-        visible={showDeleteModal}
-        onOk={confirmDeleteGroup}
-        onCancel={() => {
-          setShowDeleteModal(false);
-          setDeletingGroup(null);
-        }}
-        okText={t('确认删除')}
         cancelText={t('取消')}
-        type='warning'
-        okButtonProps={{
-          type: 'danger',
-          theme: 'solid',
+        confirmText={t('确认删除')}
+        danger
+        onCancel={() => setPendingDelete(null)}
+        onConfirm={() => {
+          const target = pendingDelete;
+          setPendingDelete(null);
+          performDeleteGroup(target);
         }}
       >
-        <Text>{t('确定要删除此分类吗？')}</Text>
-      </Modal>
-    </>
+        {t('确定要删除此分类吗？')}
+      </ConfirmDialog>
+    </div>
   );
 };
 
diff --git a/web/src/pages/Setting/Drawing/SettingsDrawing.jsx b/web/src/pages/Setting/Drawing/SettingsDrawing.jsx
index fbea670239c..d2a48f30a8f 100644
--- a/web/src/pages/Setting/Drawing/SettingsDrawing.jsx
+++ b/web/src/pages/Setting/Drawing/SettingsDrawing.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin, Tag } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -28,183 +28,163 @@ import {
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
+const DEFAULT_INPUTS = {
+  DrawingEnabled: false,
+  MjNotifyEnabled: false,
+  MjAccountFilterEnabled: false,
+  MjForwardUrlEnabled: false,
+  MjModeClearEnabled: false,
+  MjActionCheckSuccessEnabled: false,
+};
+
+function ToggleRow({ label, helper, isSelected, onValueChange }) {
+  return (
+    <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium leading-snug text-foreground'>
+          {label}
+        </div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!isSelected}
+        onChange={onValueChange}
+        aria-label={typeof label === 'string' ? label : undefined}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </label>
+  );
+}
+
 export default function SettingsDrawing(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    DrawingEnabled: false,
-    MjNotifyEnabled: false,
-    MjAccountFilterEnabled: false,
-    MjForwardUrlEnabled: false,
-    MjModeClearEnabled: false,
-    MjActionCheckSuccessEnabled: false,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
 
-  function onSubmit() {
+  const onSubmit = async () => {
     const updateArray = compareObjects(inputs, inputsRow);
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        value = inputs[item.key];
-      }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
+    if (!updateArray.length) {
+      showWarning(t('你似乎并没有修改什么'));
+      return;
+    }
     setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
+    try {
+      const requests = updateArray.map((item) =>
+        API.put('/api/option/', {
+          key: item.key,
+          value: String(inputs[item.key]),
+        }),
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => r === undefined)) {
+        if (requests.length > 1) {
+          showError(t('部分保存失败，请重试'));
+          return;
         }
-        showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+        return;
+      }
+      showSuccess(t('保存成功'));
+      setInputsRow(structuredClone(inputs));
+      props.refresh?.();
+    } catch (e) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
+    if (!props.options) return;
+    const next = { ...DEFAULT_INPUTS };
+    for (const key of Object.keys(DEFAULT_INPUTS)) {
+      if (key in props.options) {
+        const raw = props.options[key];
+        next[key] = raw === true || raw === 'true';
       }
     }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
-    localStorage.setItem('mj_notify_enabled', String(inputs.MjNotifyEnabled));
+    setInputs(next);
+    setInputsRow(structuredClone(next));
+    localStorage.setItem('mj_notify_enabled', String(next.MjNotifyEnabled));
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
+    <div className='p-6 space-y-6'>
+      <div>
+        <div className='text-base font-semibold text-foreground'>
+          {t('绘图设置')}
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3'>
+        <ToggleRow
+          label={t('启用绘图功能')}
+          isSelected={inputs.DrawingEnabled}
+          onValueChange={setField('DrawingEnabled')}
+        />
+        <ToggleRow
+          label={t('允许回调（会泄露服务器 IP 地址）')}
+          isSelected={inputs.MjNotifyEnabled}
+          onValueChange={setField('MjNotifyEnabled')}
+        />
+        <ToggleRow
+          label={t('允许 AccountFilter 参数')}
+          isSelected={inputs.MjAccountFilterEnabled}
+          onValueChange={setField('MjAccountFilterEnabled')}
+        />
+        <ToggleRow
+          label={t('开启之后将上游地址替换为服务器地址')}
+          isSelected={inputs.MjForwardUrlEnabled}
+          onValueChange={setField('MjForwardUrlEnabled')}
+        />
+        <ToggleRow
+          label={
+            <span>
+              {t('开启之后会清除用户提示词中的')}{' '}
+              <code className='rounded bg-[color:var(--app-surface-muted)] px-1 py-0.5 font-mono text-[11px]'>
+                --fast
+              </code>{' '}
+              、
+              <code className='rounded bg-[color:var(--app-surface-muted)] px-1 py-0.5 font-mono text-[11px]'>
+                --relax
+              </code>{' '}
+              {t('以及')}{' '}
+              <code className='rounded bg-[color:var(--app-surface-muted)] px-1 py-0.5 font-mono text-[11px]'>
+                --turbo
+              </code>{' '}
+              {t('参数')}
+            </span>
+          }
+          isSelected={inputs.MjModeClearEnabled}
+          onValueChange={setField('MjModeClearEnabled')}
+        />
+        <ToggleRow
+          label={t('检测必须等待绘图成功才能进行放大等操作')}
+          isSelected={inputs.MjActionCheckSuccessEnabled}
+          onValueChange={setField('MjActionCheckSuccessEnabled')}
+        />
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
         >
-          <Form.Section text={t('绘图设置')}>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'DrawingEnabled'}
-                  label={t('启用绘图功能')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) => {
-                    setInputs({
-                      ...inputs,
-                      DrawingEnabled: value,
-                    });
-                  }}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'MjNotifyEnabled'}
-                  label={t('允许回调（会泄露服务器 IP 地址）')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      MjNotifyEnabled: value,
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'MjAccountFilterEnabled'}
-                  label={t('允许 AccountFilter 参数')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      MjAccountFilterEnabled: value,
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'MjForwardUrlEnabled'}
-                  label={t('开启之后将上游地址替换为服务器地址')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      MjForwardUrlEnabled: value,
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'MjModeClearEnabled'}
-                  label={
-                    <>
-                      {t('开启之后会清除用户提示词中的')} <Tag>--fast</Tag> 、
-                      <Tag>--relax</Tag> {t('以及')} <Tag>--turbo</Tag>{' '}
-                      {t('参数')}
-                    </>
-                  }
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      MjModeClearEnabled: value,
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'MjActionCheckSuccessEnabled'}
-                  label={t('检测必须等待绘图成功才能进行放大等操作')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      MjActionCheckSuccessEnabled: value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存绘图设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+          {t('保存绘图设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Model/SettingClaudeModel.jsx b/web/src/pages/Setting/Model/SettingClaudeModel.jsx
index b93941c1f1c..5d0baad0770 100644
--- a/web/src/pages/Setting/Model/SettingClaudeModel.jsx
+++ b/web/src/pages/Setting/Model/SettingClaudeModel.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -28,7 +28,6 @@ import {
   verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
-import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
 const CLAUDE_HEADER = {
   'claude-3-7-sonnet-20250219-thinking': {
@@ -56,195 +55,219 @@ const CLAUDE_DEFAULT_MAX_TOKENS = {
   'claude-3-7-sonnet-20250219-thinking': 8192,
 };
 
+const DEFAULT_INPUTS = {
+  'claude.model_headers_settings': '',
+  'claude.thinking_adapter_enabled': true,
+  'claude.default_max_tokens': '',
+  'claude.thinking_adapter_budget_tokens_percentage': 0.8,
+};
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-primary';
+
+function ToggleRow({ label, helper, value, onChange }) {
+  return (
+    <div className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!value}
+        onChange={onChange}
+        aria-label={label}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </div>
+  );
+}
+
+function NumberField({ label, value, onChange, helper, min, step = 0.01 }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type='number'
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange(v === '' ? '' : Number(v));
+        }}
+        min={min}
+        step={step}
+        aria-label={label}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function JsonField({ label, value, onChange, placeholder, helper, rows = 6 }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <textarea
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        aria-label={label}
+        className={textareaClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export default function SettingClaudeModel(props) {
   const { t } = useTranslation();
-
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    'claude.model_headers_settings': '',
-    'claude.thinking_adapter_enabled': true,
-    'claude.default_max_tokens': '',
-    'claude.thinking_adapter_budget_tokens_percentage': 0.8,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-
-  function onSubmit() {
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+
+  const setField = (key) => (value) =>
+    setInputs((prev) => ({ ...prev, [key]: value }));
+
+  const onSubmit = () => {
+    const jsonKeys = [
+      'claude.model_headers_settings',
+      'claude.default_max_tokens',
+    ];
+    for (const key of jsonKeys) {
+      const v = inputs[key];
+      if (v && String(v).trim() !== '' && !verifyJSON(v)) {
+        showError(t('不是合法的 JSON 字符串'));
+        return;
+      }
+    }
+
     const updateArray = compareObjects(inputs, inputsRow);
     if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = String(inputs[item.key]);
-
-      return API.put('/api/option/', {
+    const requestQueue = updateArray.map((item) =>
+      API.put('/api/option/', {
         key: item.key,
-        value,
-      });
-    });
+        value: String(inputs[item.key]),
+      }),
+    );
+
     setLoading(true);
     Promise.all(requestQueue)
       .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
+        if (res.includes(undefined)) {
+          if (requestQueue.length > 1) {
             return showError(t('部分保存失败，请重试'));
+          }
+          return;
         }
         showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
+        props.refresh?.();
       })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+      .catch(() => showError(t('保存失败，请重试')))
+      .finally(() => setLoading(false));
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
+    const currentInputs = { ...DEFAULT_INPUTS };
+    for (const key in props.options) {
+      if (Object.prototype.hasOwnProperty.call(DEFAULT_INPUTS, key)) {
         currentInputs[key] = props.options[key];
       }
     }
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
+    <div className='p-6 space-y-6'>
+      <div className='text-base font-semibold text-foreground'>
+        {t('Claude设置')}
+      </div>
+
+      <JsonField
+        label={t('Claude请求头追加')}
+        value={inputs['claude.model_headers_settings']}
+        onChange={setField('claude.model_headers_settings')}
+        placeholder={
+          t('为一个 JSON 文本，例如：') +
+          '\n' +
+          JSON.stringify(CLAUDE_HEADER, null, 2)
+        }
+      />
+
+      <div className='space-y-1 text-xs leading-snug text-muted'>
+        <div>
+          {t(
+            'Claude会在原有请求头基础上追加这些值，不会覆盖已有同名请求头；重复值会自动忽略。',
+          )}
+        </div>
+        <pre className='whitespace-pre-wrap rounded-lg border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-3 font-mono text-[11px]'>
+{`${t('前：')}\n${CLAUDE_HEADER_APPEND_BEFORE}\n\n${t('配置：')}\n${JSON.stringify(
+            CLAUDE_HEADER_APPEND_CONFIG,
+            null,
+            2,
+          )}\n\n${t('后：')}\n${CLAUDE_HEADER_APPEND_AFTER}`}
+        </pre>
+      </div>
+
+      <JsonField
+        label={t('缺省 MaxTokens')}
+        value={inputs['claude.default_max_tokens']}
+        onChange={setField('claude.default_max_tokens')}
+        placeholder={
+          t('为一个 JSON 文本，例如：') +
+          '\n' +
+          JSON.stringify(CLAUDE_DEFAULT_MAX_TOKENS, null, 2)
+        }
+        helper={
+          t('示例') + '\n' + JSON.stringify(CLAUDE_DEFAULT_MAX_TOKENS, null, 2)
+        }
+      />
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <ToggleRow
+          label={t('启用Claude思考适配（-thinking后缀）')}
+          value={inputs['claude.thinking_adapter_enabled']}
+          onChange={setField('claude.thinking_adapter_enabled')}
+        />
+        <NumberField
+          label={t('思考适配 BudgetTokens 百分比')}
+          value={inputs['claude.thinking_adapter_budget_tokens_percentage']}
+          onChange={setField(
+            'claude.thinking_adapter_budget_tokens_percentage',
+          )}
+          helper={t(
+            'Claude思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比，0.1以上的小数',
+          )}
+          min={0.1}
+          step={0.01}
+        />
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
         >
-          <Form.Section text={t('Claude设置')}>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.TextArea
-                  label={t('Claude请求头追加')}
-                  field={'claude.model_headers_settings'}
-                  placeholder={
-                    t('为一个 JSON 文本，例如：') +
-                    '\n' +
-                    JSON.stringify(CLAUDE_HEADER, null, 2)
-                  }
-                  extraText={
-                    <div>
-                      <div>
-                        {t(
-                          'Claude会在原有请求头基础上追加这些值，不会覆盖已有同名请求头；重复值会自动忽略。',
-                        )}
-                      </div>
-                      <div className='mt-2 whitespace-pre-wrap font-mono text-xs'>
-                        {`${t('前：')}\n${CLAUDE_HEADER_APPEND_BEFORE}\n\n${t('配置：')}\n${JSON.stringify(
-                          CLAUDE_HEADER_APPEND_CONFIG,
-                          null,
-                          2,
-                        )}\n\n${t('后：')}\n${CLAUDE_HEADER_APPEND_AFTER}`}
-                      </div>
-                    </div>
-                  }
-                  autosize={{ minRows: 6, maxRows: 12 }}
-                  trigger='blur'
-                  stopValidateWithError
-                  rules={[
-                    {
-                      validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串'),
-                    },
-                  ]}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'claude.model_headers_settings': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.TextArea
-                  label={t('缺省 MaxTokens')}
-                  field={'claude.default_max_tokens'}
-                  placeholder={
-                    t('为一个 JSON 文本，例如：') +
-                    '\n' +
-                    JSON.stringify(CLAUDE_DEFAULT_MAX_TOKENS, null, 2)
-                  }
-                  extraText={
-                    t('示例') +
-                    '\n' +
-                    JSON.stringify(CLAUDE_DEFAULT_MAX_TOKENS, null, 2)
-                  }
-                  autosize={{ minRows: 6, maxRows: 12 }}
-                  trigger='blur'
-                  stopValidateWithError
-                  rules={[
-                    {
-                      validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串'),
-                    },
-                  ]}
-                  onChange={(value) =>
-                    setInputs({ ...inputs, 'claude.default_max_tokens': value })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col span={16}>
-                <Form.Switch
-                  label={t('启用Claude思考适配（-thinking后缀）')}
-                  field={'claude.thinking_adapter_enabled'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'claude.thinking_adapter_enabled': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col span={16}>
-                {/*//展示MaxTokens和BudgetTokens的计算公式, 并展示实际数字*/}
-                <Text>
-                  {t(
-                    'Claude思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比',
-                  )}
-                </Text>
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('思考适配 BudgetTokens 百分比')}
-                  field={'claude.thinking_adapter_budget_tokens_percentage'}
-                  initValue={''}
-                  extraText={t('0.1以上的小数')}
-                  min={0.1}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'claude.thinking_adapter_budget_tokens_percentage': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+          {t('保存')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Model/SettingGeminiModel.jsx b/web/src/pages/Setting/Model/SettingGeminiModel.jsx
index 91c2f45a2e5..38063b7d5bd 100644
--- a/web/src/pages/Setting/Model/SettingGeminiModel.jsx
+++ b/web/src/pages/Setting/Model/SettingGeminiModel.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -28,15 +28,9 @@ import {
   verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
-import Text from '@douyinfe/semi-ui/lib/es/typography/text';
 
-const GEMINI_SETTING_EXAMPLE = {
-  default: 'OFF'
-};
-
-const GEMINI_VERSION_EXAMPLE = {
-  default: 'v1beta',
-};
+const GEMINI_SETTING_EXAMPLE = { default: 'OFF' };
+const GEMINI_VERSION_EXAMPLE = { default: 'v1beta' };
 
 const DEFAULT_GEMINI_INPUTS = {
   'gemini.safety_settings': '',
@@ -48,259 +42,251 @@ const DEFAULT_GEMINI_INPUTS = {
   'gemini.remove_function_response_id_enabled': true,
 };
 
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-primary';
+
+function ToggleRow({ label, helper, value, onChange, disabled }) {
+  return (
+    <div className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!value}
+        onChange={onChange}
+        isDisabled={disabled}
+        aria-label={label}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </div>
+  );
+}
+
+function NumberField({
+  label,
+  value,
+  onChange,
+  helper,
+  min,
+  max,
+  step = 0.001,
+}) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type='number'
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange(v === '' ? '' : Number(v));
+        }}
+        min={min}
+        max={max}
+        step={step}
+        aria-label={label}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function JsonField({ label, value, onChange, placeholder, helper, rows = 6 }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <textarea
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        aria-label={label}
+        className={textareaClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export default function SettingGeminiModel(props) {
   const { t } = useTranslation();
-
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState(DEFAULT_GEMINI_INPUTS);
-  const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(DEFAULT_GEMINI_INPUTS);
 
-  async function onSubmit() {
-    await refForm.current
-      .validate()
-      .then(() => {
-        const updateArray = compareObjects(inputs, inputsRow);
-        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-        const requestQueue = updateArray.map((item) => {
-          let value = String(inputs[item.key]);
-          return API.put('/api/option/', {
-            key: item.key,
-            value,
-          });
-        });
-        setLoading(true);
-        Promise.all(requestQueue)
-          .then((res) => {
-            if (requestQueue.length === 1) {
-              if (res.includes(undefined)) return;
-            } else if (requestQueue.length > 1) {
-              if (res.includes(undefined))
-                return showError(t('部分保存失败，请重试'));
-            }
-            showSuccess(t('保存成功'));
-            props.refresh();
-          })
-          .catch(() => {
-            showError(t('保存失败，请重试'));
-          })
-          .finally(() => {
-            setLoading(false);
-          });
+  const setField = (key) => (value) =>
+    setInputs((prev) => ({ ...prev, [key]: value }));
+
+  const onSubmit = () => {
+    const jsonKeys = [
+      'gemini.safety_settings',
+      'gemini.version_settings',
+      'gemini.supported_imagine_models',
+    ];
+    for (const key of jsonKeys) {
+      const v = inputs[key];
+      if (v && String(v).trim() !== '' && !verifyJSON(v)) {
+        showError(t('不是合法的 JSON 字符串'));
+        return;
+      }
+    }
+
+    const updateArray = compareObjects(inputs, inputsRow);
+    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
+    const requestQueue = updateArray.map((item) =>
+      API.put('/api/option/', {
+        key: item.key,
+        value: String(inputs[item.key]),
+      }),
+    );
+
+    setLoading(true);
+    Promise.all(requestQueue)
+      .then((res) => {
+        if (res.includes(undefined)) {
+          if (requestQueue.length > 1) {
+            return showError(t('部分保存失败，请重试'));
+          }
+          return;
+        }
+        showSuccess(t('保存成功'));
+        props.refresh?.();
       })
-      .catch((error) => {
-        console.error('Validation failed:', error);
-        showError(t('请检查输入'));
-      });
-  }
+      .catch(() => showError(t('保存失败，请重试')))
+      .finally(() => setLoading(false));
+  };
 
   useEffect(() => {
     const currentInputs = { ...DEFAULT_GEMINI_INPUTS };
-    for (let key in props.options) {
+    for (const key in props.options) {
       if (Object.prototype.hasOwnProperty.call(DEFAULT_GEMINI_INPUTS, key)) {
         currentInputs[key] = props.options[key];
       }
     }
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
-        >
-          <Form.Section text={t('Gemini设置')}>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.TextArea
-                  label={t('Gemini安全设置')}
-                  placeholder={
-                    t('为一个 JSON 文本，例如：') +
-                    '\n' +
-                    JSON.stringify(GEMINI_SETTING_EXAMPLE, null, 2)
-                  }
-                  field={'gemini.safety_settings'}
-                  extraText={t(
-                    'default为默认设置，可单独设置每个分类的安全等级',
-                  )}
-                  autosize={{ minRows: 6, maxRows: 12 }}
-                  trigger='blur'
-                  stopValidateWithError
-                  rules={[
-                    {
-                      validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串'),
-                    },
-                  ]}
-                  onChange={(value) =>
-                    setInputs({ ...inputs, 'gemini.safety_settings': value })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.TextArea
-                  label={t('Gemini版本设置')}
-                  placeholder={
-                    t('为一个 JSON 文本，例如：') +
-                    '\n' +
-                    JSON.stringify(GEMINI_VERSION_EXAMPLE, null, 2)
-                  }
-                  field={'gemini.version_settings'}
-                  extraText={t('default为默认设置，可单独设置每个模型的版本')}
-                  autosize={{ minRows: 6, maxRows: 12 }}
-                  trigger='blur'
-                  stopValidateWithError
-                  rules={[
-                    {
-                      validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串'),
-                    },
-                  ]}
-                  onChange={(value) =>
-                    setInputs({ ...inputs, 'gemini.version_settings': value })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col span={16}>
-                <Form.Switch
-                  label={t('启用FunctionCall思维签名填充')}
-                  field={'gemini.function_call_thought_signature_enabled'}
-                  extraText={t(
-                    '仅为使用OpenAI格式的Gemini/Vertex渠道填充thoughtSignature',
-                  )}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'gemini.function_call_thought_signature_enabled': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col span={16}>
-                <Form.Switch
-                  label={t('移除 functionResponse.id 字段')}
-                  field={'gemini.remove_function_response_id_enabled'}
-                  extraText={t(
-                    'Vertex AI 不支持 functionResponse.id 字段，开启后将自动移除该字段',
-                  )}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'gemini.remove_function_response_id_enabled': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.TextArea
-                  field={'gemini.supported_imagine_models'}
-                  label={t('支持的图像模型')}
-                  placeholder={
-                    t('例如：') +
-                    '\n' +
-                    JSON.stringify(
-                      ['gemini-2.0-flash-exp-image-generation'],
-                      null,
-                      2,
-                    )
-                  }
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'gemini.supported_imagine_models': value,
-                    })
-                  }
-                  trigger='blur'
-                  stopValidateWithError
-                  rules={[
-                    {
-                      validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串'),
-                    },
-                  ]}
-                />
-              </Col>
-            </Row>
-          </Form.Section>
+    <div className='p-6 space-y-6'>
+      <div className='text-base font-semibold text-foreground'>
+        {t('Gemini设置')}
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <JsonField
+          label={t('Gemini安全设置')}
+          value={inputs['gemini.safety_settings']}
+          onChange={setField('gemini.safety_settings')}
+          placeholder={
+            t('为一个 JSON 文本，例如：') +
+            '\n' +
+            JSON.stringify(GEMINI_SETTING_EXAMPLE, null, 2)
+          }
+          helper={t('default为默认设置，可单独设置每个分类的安全等级')}
+        />
+        <JsonField
+          label={t('Gemini版本设置')}
+          value={inputs['gemini.version_settings']}
+          onChange={setField('gemini.version_settings')}
+          placeholder={
+            t('为一个 JSON 文本，例如：') +
+            '\n' +
+            JSON.stringify(GEMINI_VERSION_EXAMPLE, null, 2)
+          }
+          helper={t('default为默认设置，可单独设置每个模型的版本')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <ToggleRow
+          label={t('启用FunctionCall思维签名填充')}
+          helper={t('仅为使用OpenAI格式的Gemini/Vertex渠道填充thoughtSignature')}
+          value={inputs['gemini.function_call_thought_signature_enabled']}
+          onChange={setField(
+            'gemini.function_call_thought_signature_enabled',
+          )}
+        />
+        <ToggleRow
+          label={t('移除 functionResponse.id 字段')}
+          helper={t(
+            'Vertex AI 不支持 functionResponse.id 字段，开启后将自动移除该字段',
+          )}
+          value={inputs['gemini.remove_function_response_id_enabled']}
+          onChange={setField('gemini.remove_function_response_id_enabled')}
+        />
+      </div>
 
-          <Form.Section text={t('Gemini思考适配设置')}>
-            <Row>
-              <Col span={16}>
-                <Text>
-                  {t(
-                    '和Claude不同，默认情况下Gemini的思考模型会自动决定要不要思考，就算不开启适配模型也可以正常使用，' +
-                      '如果您需要计费，推荐设置无后缀模型价格按思考价格设置。' +
-                      '支持使用 gemini-2.5-pro-preview-06-05-thinking-128 格式来精确传递思考预算。',
-                  )}
-                </Text>
-              </Col>
-            </Row>
-            <Row>
-              <Col span={16}>
-                <Form.Switch
-                  label={t('启用Gemini思考后缀适配')}
-                  field={'gemini.thinking_adapter_enabled'}
-                  extraText={t(
-                    '适配 -thinking、-thinking-预算数字 和 -nothinking 后缀',
-                  )}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'gemini.thinking_adapter_enabled': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col span={16}>
-                <Text>
-                  {t(
-                    'Gemini思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比',
-                  )}
-                </Text>
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('思考预算占比')}
-                  field={'gemini.thinking_adapter_budget_tokens_percentage'}
-                  initValue={''}
-                  extraText={t('0.002-1之间的小数')}
-                  min={0.002}
-                  max={1}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'gemini.thinking_adapter_budget_tokens_percentage': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-          </Form.Section>
+      <JsonField
+        label={t('支持的图像模型')}
+        value={inputs['gemini.supported_imagine_models']}
+        onChange={setField('gemini.supported_imagine_models')}
+        placeholder={
+          t('例如：') +
+          '\n' +
+          JSON.stringify(['gemini-2.0-flash-exp-image-generation'], null, 2)
+        }
+        rows={4}
+      />
 
-          <Row>
-            <Button size='default' onClick={onSubmit}>
-              {t('保存')}
-            </Button>
-          </Row>
-        </Form>
-      </Spin>
-    </>
+      <div className='space-y-3 border-t border-[color:var(--app-border)] pt-4'>
+        <div className='text-sm font-semibold text-foreground'>
+          {t('Gemini思考适配设置')}
+        </div>
+        <p className='text-sm leading-relaxed text-muted'>
+          {t(
+            '和Claude不同，默认情况下Gemini的思考模型会自动决定要不要思考，就算不开启适配模型也可以正常使用，如果您需要计费，推荐设置无后缀模型价格按思考价格设置。支持使用 gemini-2.5-pro-preview-06-05-thinking-128 格式来精确传递思考预算。',
+          )}
+        </p>
+
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          <ToggleRow
+            label={t('启用Gemini思考后缀适配')}
+            helper={t('适配 -thinking、-thinking-预算数字 和 -nothinking 后缀')}
+            value={inputs['gemini.thinking_adapter_enabled']}
+            onChange={setField('gemini.thinking_adapter_enabled')}
+          />
+          <NumberField
+            label={t('思考预算占比')}
+            value={inputs['gemini.thinking_adapter_budget_tokens_percentage']}
+            onChange={setField(
+              'gemini.thinking_adapter_budget_tokens_percentage',
+            )}
+            helper={t(
+              'Gemini思考适配 BudgetTokens = MaxTokens * BudgetTokens 百分比，0.002-1之间的小数',
+            )}
+            min={0.002}
+            max={1}
+          />
+        </div>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
+        >
+          {t('保存')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Model/SettingGlobalModel.jsx b/web/src/pages/Setting/Model/SettingGlobalModel.jsx
index 4b8f9f4d93f..835af488ee2 100644
--- a/web/src/pages/Setting/Model/SettingGlobalModel.jsx
+++ b/web/src/pages/Setting/Model/SettingGlobalModel.jsx
@@ -17,17 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  Button,
-  Col,
-  Form,
-  Row,
-  Spin,
-  Banner,
-  Tag,
-  Divider,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -37,6 +28,7 @@ import {
   verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import { TriangleAlert } from 'lucide-react';
 
 const thinkingExample = JSON.stringify(
   ['moonshotai/kimi-k2-thinking', 'kimi-k2-thinking'],
@@ -74,39 +66,129 @@ const defaultGlobalSettingInputs = {
   'general_setting.ping_interval_seconds': 60,
 };
 
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-primary';
+
+function ToggleRow({ label, helper, value, onChange, disabled }) {
+  return (
+    <div className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!value}
+        onChange={onChange}
+        isDisabled={disabled}
+        aria-label={label}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </div>
+  );
+}
+
+function NumberField({ label, value, onChange, helper, min, disabled }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type='number'
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange(v === '' ? '' : Number(v));
+        }}
+        min={min}
+        disabled={disabled}
+        aria-label={label}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function JsonField({ label, value, onChange, placeholder, helper, rows = 4 }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <textarea
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        aria-label={label}
+        className={textareaClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function WarnBanner({ children }) {
+  return (
+    <div className='flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100'>
+      <TriangleAlert size={16} className='mt-0.5 shrink-0' />
+      <div>{children}</div>
+    </div>
+  );
+}
+
 export default function SettingGlobalModel(props) {
   const { t } = useTranslation();
-
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState(defaultGlobalSettingInputs);
-  const refForm = useRef();
   const [inputsRow, setInputsRow] = useState(defaultGlobalSettingInputs);
-  const chatCompletionsToResponsesPolicyKey =
-    'global.chat_completions_to_responses_policy';
-
-  const setChatCompletionsToResponsesPolicyValue = (value) => {
-    setInputs((prev) => ({
-      ...prev,
-      [chatCompletionsToResponsesPolicyKey]: value,
-    }));
-    if (refForm.current) {
-      refForm.current.setValue(chatCompletionsToResponsesPolicyKey, value);
-    }
-  };
+  const policyKey = 'global.chat_completions_to_responses_policy';
+
+  const setField = (key) => (value) =>
+    setInputs((prev) => ({ ...prev, [key]: value }));
+
+  const setPolicyValue = (value) => setField(policyKey)(value);
 
   const normalizeValueBeforeSave = (key, value) => {
     if (key === 'global.thinking_model_blacklist') {
       const text = typeof value === 'string' ? value.trim() : '';
       return text === '' ? '[]' : value;
     }
-    if (key === 'global.chat_completions_to_responses_policy') {
+    if (key === policyKey) {
       const text = typeof value === 'string' ? value.trim() : '';
       return text === '' ? '{}' : value;
     }
     return value;
   };
 
-  function onSubmit() {
+  const onSubmit = () => {
+    if (
+      inputs['global.thinking_model_blacklist'] &&
+      inputs['global.thinking_model_blacklist'].trim() !== '' &&
+      !verifyJSON(inputs['global.thinking_model_blacklist'])
+    ) {
+      showError(t('不是合法的 JSON 字符串'));
+      return;
+    }
+    if (
+      inputs[policyKey] &&
+      inputs[policyKey].trim() !== '' &&
+      !verifyJSON(inputs[policyKey])
+    ) {
+      showError(t('不是合法的 JSON 字符串'));
+      return;
+    }
+
     const updateArray = compareObjects(inputs, inputsRow);
     if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
     const requestQueue = updateArray.map((item) => {
@@ -114,49 +196,37 @@ export default function SettingGlobalModel(props) {
         item.key,
         inputs[item.key],
       );
-      let value = String(normalizedValue);
-
       return API.put('/api/option/', {
         key: item.key,
-        value,
+        value: String(normalizedValue),
       });
     });
+
     setLoading(true);
     Promise.all(requestQueue)
       .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
+        if (res.includes(undefined)) {
+          if (requestQueue.length > 1) {
             return showError(t('部分保存失败，请重试'));
+          }
+          return;
         }
         showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
+        props.refresh?.();
       })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+      .catch(() => showError(t('保存失败，请重试')))
+      .finally(() => setLoading(false));
+  };
 
   useEffect(() => {
     const currentInputs = {};
     for (const key of Object.keys(defaultGlobalSettingInputs)) {
       if (props.options[key] !== undefined) {
         let value = props.options[key];
-        if (key === 'global.thinking_model_blacklist') {
-          try {
-            value =
-              value && String(value).trim() !== ''
-                ? JSON.stringify(JSON.parse(value), null, 2)
-                : defaultGlobalSettingInputs[key];
-          } catch (error) {
-            value = defaultGlobalSettingInputs[key];
-          }
-        }
-        if (key === 'global.chat_completions_to_responses_policy') {
+        if (
+          key === 'global.thinking_model_blacklist' ||
+          key === policyKey
+        ) {
           try {
             value =
               value && String(value).trim() !== ''
@@ -171,246 +241,147 @@ export default function SettingGlobalModel(props) {
         currentInputs[key] = defaultGlobalSettingInputs[key];
       }
     }
-
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    if (refForm.current) {
-      refForm.current.setValues(currentInputs);
-    }
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
-        >
-          <Form.Section text={t('全局设置')}>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  label={t('启用请求透传')}
-                  field={'global.pass_through_request_enabled'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'global.pass_through_request_enabled': value,
-                    })
-                  }
-                  extraText={t(
-                    '开启后，所有请求将直接透传给上游，不会进行任何处理（重定向和渠道适配也将失效）,请谨慎开启',
-                  )}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col span={24}>
-                <Form.TextArea
-                  label={t('禁用思考处理的模型列表')}
-                  field={'global.thinking_model_blacklist'}
-                  placeholder={t('例如：') + '\n' + thinkingExample}
-                  rows={4}
-                  rules={[
-                    {
-                      validator: (rule, value) => {
-                        if (!value || value.trim() === '') return true;
-                        return verifyJSON(value);
-                      },
-                      message: t('不是合法的 JSON 字符串'),
-                    },
-                  ]}
-                  extraText={t(
-                    '列出的模型将不会自动添加或移除-thinking/-nothinking 后缀',
-                  )}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'global.thinking_model_blacklist': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-
-            <Form.Section
-              text={
-                <span
-                  style={{
-                    fontSize: 14,
-                    fontWeight: 600,
-                    display: 'inline-flex',
-                    alignItems: 'center',
-                    gap: 8,
-                    flexWrap: 'wrap',
-                  }}
-                >
-                  {t('ChatCompletions→Responses 兼容配置')}
-                  <Tag color='orange' size='small'>
-                    测试版
-                  </Tag>
-                </span>
-              }
-            >
-              <Row style={{ marginTop: 10 }}>
-                <Col span={24}>
-                  <Banner
-                    type='warning'
-                    description={t(
-                      '提示：该功能为测试版，未来配置结构与功能行为可能发生变更，请勿在生产环境使用。',
-                    )}
-                  />
-                </Col>
-              </Row>
-
-              <Row style={{ marginTop: 10 }}>
-                <Col span={24}>
-                  <Form.TextArea
-                    label={t('参数配置')}
-                    field={chatCompletionsToResponsesPolicyKey}
-                    placeholder={
-                      t('例如（指定渠道）：') +
-                      '\n' +
-                      chatCompletionsToResponsesPolicyExample +
-                      '\n\n' +
-                      t('例如（全渠道）：') +
-                      '\n' +
-                      chatCompletionsToResponsesPolicyAllChannelsExample
-                    }
-                    rows={8}
-                    rules={[
-                      {
-                        validator: (rule, value) => {
-                          if (!value || value.trim() === '') return true;
-                          return verifyJSON(value);
-                        },
-                        message: t('不是合法的 JSON 字符串'),
-                      },
-                    ]}
-                    onChange={(value) =>
-                      setInputs((prev) => ({
-                        ...prev,
-                        [chatCompletionsToResponsesPolicyKey]: value,
-                      }))
-                    }
-                  />
-                </Col>
-              </Row>
-
-              <Row style={{ marginTop: 10, marginBottom: 16 }}>
-                <Col span={24}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      gap: 8,
-                      flexWrap: 'wrap',
-                      alignItems: 'center',
-                    }}
-                  >
-                    <Button
-                      type='secondary'
-                      size='small'
-                      onClick={() =>
-                        setChatCompletionsToResponsesPolicyValue(
-                          chatCompletionsToResponsesPolicyExample,
-                        )
-                      }
-                    >
-                      {t('填充模板（指定渠道）')}
-                    </Button>
-                    <Button
-                      type='secondary'
-                      size='small'
-                      onClick={() =>
-                        setChatCompletionsToResponsesPolicyValue(
-                          chatCompletionsToResponsesPolicyAllChannelsExample,
-                        )
-                      }
-                    >
-                      {t('填充模板（全渠道）')}
-                    </Button>
-                    <Button
-                      type='secondary'
-                      size='small'
-                      onClick={() => {
-                        const raw = inputs[chatCompletionsToResponsesPolicyKey];
-                        if (!raw || String(raw).trim() === '') return;
-                        try {
-                          const formatted = JSON.stringify(
-                            JSON.parse(raw),
-                            null,
-                            2,
-                          );
-                          setChatCompletionsToResponsesPolicyValue(formatted);
-                        } catch (error) {
-                          showError(t('不是合法的 JSON 字符串'));
-                        }
-                      }}
-                    >
-                      {t('格式化 JSON')}
-                    </Button>
-                  </div>
-                </Col>
-              </Row>
-            </Form.Section>
-
-            <Form.Section
-              text={
-                <span style={{ fontSize: 14, fontWeight: 600 }}>
-                  {t('连接保活设置')}
-                </span>
+    <div className='p-6 space-y-6'>
+      <div className='text-base font-semibold text-foreground'>
+        {t('全局设置')}
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <ToggleRow
+          label={t('启用请求透传')}
+          helper={t(
+            '开启后，所有请求将直接透传给上游，不会进行任何处理（重定向和渠道适配也将失效）,请谨慎开启',
+          )}
+          value={inputs['global.pass_through_request_enabled']}
+          onChange={setField('global.pass_through_request_enabled')}
+        />
+      </div>
+
+      <JsonField
+        label={t('禁用思考处理的模型列表')}
+        value={inputs['global.thinking_model_blacklist']}
+        onChange={setField('global.thinking_model_blacklist')}
+        placeholder={t('例如：') + '\n' + thinkingExample}
+        helper={t(
+          '列出的模型将不会自动添加或移除-thinking/-nothinking 后缀',
+        )}
+        rows={4}
+      />
+
+      <div className='space-y-3 border-t border-[color:var(--app-border)] pt-4'>
+        <div className='flex flex-wrap items-center gap-2 text-sm font-semibold text-foreground'>
+          <span>{t('ChatCompletions→Responses 兼容配置')}</span>
+          <span className='inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-amber-700 dark:bg-amber-950/60 dark:text-amber-200'>
+            {t('测试版')}
+          </span>
+        </div>
+
+        <WarnBanner>
+          {t(
+            '提示：该功能为测试版，未来配置结构与功能行为可能发生变更，请勿在生产环境使用。',
+          )}
+        </WarnBanner>
+
+        <JsonField
+          label={t('参数配置')}
+          value={inputs[policyKey]}
+          onChange={setField(policyKey)}
+          placeholder={
+            t('例如（指定渠道）：') +
+            '\n' +
+            chatCompletionsToResponsesPolicyExample +
+            '\n\n' +
+            t('例如（全渠道）：') +
+            '\n' +
+            chatCompletionsToResponsesPolicyAllChannelsExample
+          }
+          rows={8}
+        />
+
+        <div className='flex flex-wrap items-center gap-2'>
+          <Button
+            variant='flat'
+            size='sm'
+            onPress={() =>
+              setPolicyValue(chatCompletionsToResponsesPolicyExample)
+            }
+          >
+            {t('填充模板（指定渠道）')}
+          </Button>
+          <Button
+            variant='flat'
+            size='sm'
+            onPress={() =>
+              setPolicyValue(
+                chatCompletionsToResponsesPolicyAllChannelsExample,
+              )
+            }
+          >
+            {t('填充模板（全渠道）')}
+          </Button>
+          <Button
+            variant='flat'
+            size='sm'
+            onPress={() => {
+              const raw = inputs[policyKey];
+              if (!raw || String(raw).trim() === '') return;
+              try {
+                const formatted = JSON.stringify(JSON.parse(raw), null, 2);
+                setPolicyValue(formatted);
+              } catch (error) {
+                showError(t('不是合法的 JSON 字符串'));
               }
-            >
-              <Row style={{ marginTop: 10 }}>
-                <Col span={24}>
-                  <Banner
-                    type='warning'
-                    description={t(
-                      '警告：启用保活后，如果已经写入保活数据后渠道出错，系统无法重试，如果必须开启，推荐设置尽可能大的Ping间隔',
-                    )}
-                  />
-                </Col>
-              </Row>
-              <Row>
-                <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                  <Form.Switch
-                    label={t('启用Ping间隔')}
-                    field={'general_setting.ping_interval_enabled'}
-                    onChange={(value) =>
-                      setInputs({
-                        ...inputs,
-                        'general_setting.ping_interval_enabled': value,
-                      })
-                    }
-                    extraText={t('开启后，将定期发送ping数据保持连接活跃')}
-                  />
-                </Col>
-                <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                  <Form.InputNumber
-                    label={t('Ping间隔（秒）')}
-                    field={'general_setting.ping_interval_seconds'}
-                    onChange={(value) =>
-                      setInputs({
-                        ...inputs,
-                        'general_setting.ping_interval_seconds': value,
-                      })
-                    }
-                    min={1}
-                    disabled={!inputs['general_setting.ping_interval_enabled']}
-                  />
-                </Col>
-              </Row>
-            </Form.Section>
-
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+            }}
+          >
+            {t('格式化 JSON')}
+          </Button>
+        </div>
+      </div>
+
+      <div className='space-y-3 border-t border-[color:var(--app-border)] pt-4'>
+        <div className='text-sm font-semibold text-foreground'>
+          {t('连接保活设置')}
+        </div>
+
+        <WarnBanner>
+          {t(
+            '警告：启用保活后，如果已经写入保活数据后渠道出错，系统无法重试，如果必须开启，推荐设置尽可能大的Ping间隔',
+          )}
+        </WarnBanner>
+
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          <ToggleRow
+            label={t('启用Ping间隔')}
+            helper={t('开启后，将定期发送ping数据保持连接活跃')}
+            value={inputs['general_setting.ping_interval_enabled']}
+            onChange={setField('general_setting.ping_interval_enabled')}
+          />
+          <NumberField
+            label={t('Ping间隔（秒）')}
+            value={inputs['general_setting.ping_interval_seconds']}
+            onChange={setField('general_setting.ping_interval_seconds')}
+            min={1}
+            disabled={!inputs['general_setting.ping_interval_enabled']}
+          />
+        </div>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
+        >
+          {t('保存')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Model/SettingGrokModel.jsx b/web/src/pages/Setting/Model/SettingGrokModel.jsx
index 3d721c79816..dfb9329e37d 100644
--- a/web/src/pages/Setting/Model/SettingGrokModel.jsx
+++ b/web/src/pages/Setting/Model/SettingGrokModel.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useRef, useState } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   API,
   compareObjects,
@@ -36,50 +36,90 @@ const DEFAULT_GROK_INPUTS = {
   'grok.violation_deduction_amount': 0.05,
 };
 
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+function ToggleRow({ label, helper, value, onChange }) {
+  return (
+    <div className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!value}
+        onChange={onChange}
+        aria-label={label}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </div>
+  );
+}
+
+function NumberField({ label, value, onChange, helper, min, step, disabled }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type='number'
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange(v === '' ? '' : Number(v));
+        }}
+        min={min}
+        step={step}
+        disabled={disabled}
+        aria-label={label}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export default function SettingGrokModel(props) {
   const { t } = useTranslation();
-
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState(DEFAULT_GROK_INPUTS);
   const [inputsRow, setInputsRow] = useState(DEFAULT_GROK_INPUTS);
-  const refForm = useRef();
-
-  async function onSubmit() {
-    await refForm.current
-      .validate()
-      .then(() => {
-        const updateArray = compareObjects(inputs, inputsRow);
-        if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-
-        const requestQueue = updateArray.map((item) => {
-          const value = String(inputs[item.key]);
-          return API.put('/api/option/', { key: item.key, value });
-        });
-
-        setLoading(true);
-        Promise.all(requestQueue)
-          .then((res) => {
-            if (requestQueue.length === 1) {
-              if (res.includes(undefined)) return;
-            } else if (requestQueue.length > 1) {
-              if (res.includes(undefined))
-                return showError(t('部分保存失败，请重试'));
-            }
-            showSuccess(t('保存成功'));
-            props.refresh();
-          })
-          .catch(() => {
-            showError(t('保存失败，请重试'));
-          })
-          .finally(() => {
-            setLoading(false);
-          });
+
+  const setField = (key) => (value) =>
+    setInputs((prev) => ({ ...prev, [key]: value }));
+
+  const onSubmit = () => {
+    const updateArray = compareObjects(inputs, inputsRow);
+    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
+    const requestQueue = updateArray.map((item) =>
+      API.put('/api/option/', {
+        key: item.key,
+        value: String(inputs[item.key]),
+      }),
+    );
+
+    setLoading(true);
+    Promise.all(requestQueue)
+      .then((res) => {
+        if (res.includes(undefined)) {
+          if (requestQueue.length > 1) {
+            return showError(t('部分保存失败，请重试'));
+          }
+          return;
+        }
+        showSuccess(t('保存成功'));
+        props.refresh?.();
       })
-      .catch((error) => {
-        console.error('Validation failed:', error);
-        showError(t('请检查输入'));
-      });
-  }
+      .catch(() => showError(t('保存失败，请重试')))
+      .finally(() => setLoading(false));
+  };
 
   useEffect(() => {
     const currentInputs = { ...DEFAULT_GROK_INPUTS };
@@ -88,87 +128,69 @@ export default function SettingGrokModel(props) {
         currentInputs[key] = props.options[key];
       }
     }
-
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    if (refForm.current) {
-      refForm.current.setValues(currentInputs);
-    }
   }, [props.options]);
 
   return (
-    <Spin spinning={loading}>
-      <Form
-        values={inputs}
-        getFormApi={(formAPI) => (refForm.current = formAPI)}
-        style={{ marginBottom: 15 }}
-      >
-        <Form.Section text={t('Grok设置')}>
-          <Row>
-            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-              <Form.Switch
-                label={t('启用违规扣费')}
-                field={'grok.violation_deduction_enabled'}
-                onChange={(value) =>
-                  setInputs({
-                    ...inputs,
-                    'grok.violation_deduction_enabled': value,
-                  })
-                }
-                extraText={
-                  <span>
-                    {t('开启后，违规请求将额外扣费。')}{' '}
-                    <a
-                      href={XAI_VIOLATION_FEE_DOC_URL}
-                      target='_blank'
-                      rel='noreferrer'
-                    >
-                      {t('官方说明')}
-                    </a>
-                  </span>
-                }
-              />
-            </Col>
-          </Row>
-
-          <Row>
-            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-              <Form.InputNumber
-                label={t('违规扣费金额')}
-                field={'grok.violation_deduction_amount'}
-                min={0}
-                step={0.01}
-                precision={4}
-                disabled={!inputs['grok.violation_deduction_enabled']}
-                onChange={(value) =>
-                  setInputs({
-                    ...inputs,
-                    'grok.violation_deduction_amount': value,
-                  })
-                }
-                extraText={
-                  <span>
-                    {t('这是基础金额，实际扣费 = 基础金额 x 系统分组倍率。')}{' '}
-                    <a
-                      href={XAI_VIOLATION_FEE_DOC_URL}
-                      target='_blank'
-                      rel='noreferrer'
-                    >
-                      {t('官方说明')}
-                    </a>
-                  </span>
-                }
-              />
-            </Col>
-          </Row>
-
-          <Row>
-            <Button size='default' onClick={onSubmit}>
-              {t('保存')}
-            </Button>
-          </Row>
-        </Form.Section>
-      </Form>
-    </Spin>
+    <div className='p-6 space-y-6'>
+      <div className='text-base font-semibold text-foreground'>
+        {t('Grok设置')}
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <ToggleRow
+          label={t('启用违规扣费')}
+          helper={
+            <span>
+              {t('开启后，违规请求将额外扣费。')}{' '}
+              <a
+                href={XAI_VIOLATION_FEE_DOC_URL}
+                target='_blank'
+                rel='noreferrer'
+                className='text-primary underline'
+              >
+                {t('官方说明')}
+              </a>
+            </span>
+          }
+          value={inputs['grok.violation_deduction_enabled']}
+          onChange={setField('grok.violation_deduction_enabled')}
+        />
+        <NumberField
+          label={t('违规扣费金额')}
+          value={inputs['grok.violation_deduction_amount']}
+          onChange={setField('grok.violation_deduction_amount')}
+          min={0}
+          step={0.01}
+          disabled={!inputs['grok.violation_deduction_enabled']}
+          helper={
+            <span>
+              {t('这是基础金额，实际扣费 = 基础金额 x 系统分组倍率。')}{' '}
+              <a
+                href={XAI_VIOLATION_FEE_DOC_URL}
+                target='_blank'
+                rel='noreferrer'
+                className='text-primary underline'
+              >
+                {t('官方说明')}
+              </a>
+            </span>
+          }
+        />
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
+        >
+          {t('保存')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Model/SettingModelDeployment.jsx b/web/src/pages/Setting/Model/SettingModelDeployment.jsx
index fdfbb448e36..5889bfb0016 100644
--- a/web/src/pages/Setting/Model/SettingModelDeployment.jsx
+++ b/web/src/pages/Setting/Model/SettingModelDeployment.jsx
@@ -17,16 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  Button,
-  Col,
-  Form,
-  Row,
-  Spin,
-  Card,
-  Typography,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Card, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -35,24 +27,27 @@ import {
   showWarning,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
-import { Server, Cloud, Zap, ArrowUpRight } from 'lucide-react';
+import { Cloud, Zap, ArrowUpRight } from 'lucide-react';
+
+const DEFAULT_INPUTS = {
+  'model_deployment.ionet.api_key': '',
+  'model_deployment.ionet.enabled': false,
+};
 
-const { Text } = Typography;
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
 
 export default function SettingModelDeployment(props) {
   const { t } = useTranslation();
-
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    'model_deployment.ionet.api_key': '',
-    'model_deployment.ionet.enabled': false,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState({
-    'model_deployment.ionet.api_key': '',
-    'model_deployment.ionet.enabled': false,
-  });
   const [testing, setTesting] = useState(false);
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+
+  const setField = (key) => (value) =>
+    setInputs((prev) => ({ ...prev, [key]: value }));
+
+  const enabled = !!inputs['model_deployment.ionet.enabled'];
 
   const testApiKey = async () => {
     const apiKey = inputs['model_deployment.ionet.api_key'];
@@ -75,11 +70,8 @@ export default function SettingModelDeployment(props) {
       const response = await API.post(
         '/api/deployments/settings/test-connection',
         apiKey && apiKey.trim() !== '' ? { api_key: apiKey.trim() } : {},
-        {
-          skipErrorHandler: true,
-        },
+        { skipErrorHandler: true },
       );
-
       if (response?.data?.success) {
         showSuccess(t('API Key 验证成功！连接到 io.net 服务正常'));
       } else {
@@ -91,7 +83,6 @@ export default function SettingModelDeployment(props) {
       }
     } catch (error) {
       console.error('io.net API test error:', error);
-
       if (error?.code === 'ERR_NETWORK') {
         showError(t('网络连接失败，请检查网络设置或稍后重试'));
       } else {
@@ -107,227 +98,155 @@ export default function SettingModelDeployment(props) {
     }
   };
 
-  function onSubmit() {
+  const onSubmit = () => {
     const updateArray = compareObjects(inputs, inputsRow);
     if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-
-    const requestQueue = updateArray.map((item) => {
-      let value = String(inputs[item.key]);
-      return API.put('/api/option/', {
+    const requestQueue = updateArray.map((item) =>
+      API.put('/api/option/', {
         key: item.key,
-        value,
-      });
-    });
+        value: String(inputs[item.key]),
+      }),
+    );
 
     setLoading(true);
     Promise.all(requestQueue)
       .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
+        if (res.includes(undefined)) {
+          if (requestQueue.length > 1) {
             return showError(t('部分保存失败，请重试'));
+          }
+          return;
         }
         showSuccess(t('保存成功'));
-        // 更新 inputsRow 以反映已保存的状态
         setInputsRow(structuredClone(inputs));
-        props.refresh();
+        props.refresh?.();
       })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+      .catch(() => showError(t('保存失败，请重试')))
+      .finally(() => setLoading(false));
+  };
 
   useEffect(() => {
-    if (props.options) {
-      const defaultInputs = {
-        'model_deployment.ionet.api_key': '',
-        'model_deployment.ionet.enabled': false,
-      };
-
-      const currentInputs = {};
-      for (let key in defaultInputs) {
-        if (props.options.hasOwnProperty(key)) {
-          currentInputs[key] = props.options[key];
-        } else {
-          currentInputs[key] = defaultInputs[key];
-        }
+    if (!props.options) return;
+    const currentInputs = { ...DEFAULT_INPUTS };
+    for (const key in DEFAULT_INPUTS) {
+      if (Object.prototype.hasOwnProperty.call(props.options, key)) {
+        currentInputs[key] = props.options[key];
       }
-
-      setInputs(currentInputs);
-      setInputsRow(structuredClone(currentInputs));
-      refForm.current?.setValues(currentInputs);
     }
+    setInputs(currentInputs);
+    setInputsRow(structuredClone(currentInputs));
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
-        >
-          <Form.Section
-            text={
-              <div
-                style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
-              >
-                <span>{t('模型部署设置')}</span>
+    <div className='p-6 space-y-6'>
+      <div className='text-base font-semibold text-foreground'>
+        {t('模型部署设置')}
+      </div>
+
+      <Card className='!rounded-2xl shadow-sm border border-[color:var(--app-border)]'>
+        <Card.Content className='p-6 space-y-5'>
+          <div className='flex items-center gap-2 text-sm font-semibold text-foreground'>
+            <Cloud size={18} />
+            <span>io.net</span>
+          </div>
+
+          <div className='grid grid-cols-1 gap-6 lg:grid-cols-[1.4fr_1fr]'>
+            <div className='space-y-4'>
+              <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+                <div className='min-w-0 flex-1'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('启用 io.net 部署')}
+                  </div>
+                  <div className='mt-1 text-xs leading-snug text-muted'>
+                    {t('启用后可接入 io.net GPU 资源')}
+                  </div>
+                </div>
+                <Switch
+                  isSelected={enabled}
+                  onChange={setField('model_deployment.ionet.enabled')}
+                  aria-label={t('启用 io.net 部署')}
+                  size='sm'
+                >
+                  <Switch.Control>
+                    <Switch.Thumb />
+                  </Switch.Control>
+                </Switch>
+              </label>
+
+              <div className='space-y-2'>
+                <div className='text-sm font-medium text-foreground'>
+                  {t('API Key')}
+                </div>
+                <Input
+                  type='password'
+                  value={inputs['model_deployment.ionet.api_key'] ?? ''}
+                  onChange={(e) =>
+                    setField('model_deployment.ionet.api_key')(e.target.value)
+                  }
+                  placeholder={t(
+                    '请输入 io.net API Key（敏感信息不显示）',
+                  )}
+                  disabled={!enabled}
+                  aria-label={t('API Key')}
+                  className={inputClass}
+                />
+                <div className='text-xs leading-snug text-muted'>
+                  {t('请使用 Project 为 io.cloud 的密钥')}
+                </div>
               </div>
-            }
-          >
-            {/*<Text */}
-            {/*  type="secondary" */}
-            {/*  size="small"*/}
-            {/*  style={{ */}
-            {/*    display: 'block', */}
-            {/*    marginBottom: '20px',*/}
-            {/*    color: 'var(--semi-color-text-2)'*/}
-            {/*  }}*/}
-            {/*>*/}
-            {/*  {t('配置模型部署服务提供商的API密钥和启用状态')}*/}
-            {/*</Text>*/}
 
-            <Card
-              title={
-                <div
-                  style={{ display: 'flex', alignItems: 'center', gap: '8px' }}
+              <div className='flex flex-wrap gap-3'>
+                <Button
+                  variant='bordered'
+                  size='sm'
+                  startContent={<Zap size={14} />}
+                  onPress={testApiKey}
+                  isPending={testing}
+                  isDisabled={!enabled}
                 >
-                  <Cloud size={18} />
-                  <span>io.net</span>
-                </div>
-              }
-              bodyStyle={{ padding: '20px' }}
-              style={{ marginBottom: '16px' }}
-            >
-              <Row gutter={24}>
-                <Col xs={24} lg={14}>
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '16px',
-                    }}
-                  >
-                    <Form.Switch
-                      label={t('启用 io.net 部署')}
-                      field={'model_deployment.ionet.enabled'}
-                      onChange={(value) =>
-                        setInputs({
-                          ...inputs,
-                          'model_deployment.ionet.enabled': value,
-                        })
-                      }
-                      extraText={t('启用后可接入 io.net GPU 资源')}
-                    />
-                    <Form.Input
-                      label={t('API Key')}
-                      field={'model_deployment.ionet.api_key'}
-                      placeholder={t('请输入 io.net API Key（敏感信息不显示）')}
-                      onChange={(value) =>
-                        setInputs({
-                          ...inputs,
-                          'model_deployment.ionet.api_key': value,
-                        })
-                      }
-                      disabled={!inputs['model_deployment.ionet.enabled']}
-                      extraText={t('请使用 Project 为 io.cloud 的密钥')}
-                      mode='password'
-                    />
-                    <div style={{ display: 'flex', gap: '12px' }}>
-                      <Button
-                        type='outline'
-                        size='small'
-                        icon={<Zap size={16} />}
-                        onClick={testApiKey}
-                        loading={testing}
-                        disabled={!inputs['model_deployment.ionet.enabled']}
-                        style={{
-                          height: '32px',
-                          fontSize: '13px',
-                          borderRadius: '6px',
-                          fontWeight: '500',
-                          borderColor: testing
-                            ? 'var(--semi-color-primary)'
-                            : 'var(--semi-color-border)',
-                          color: testing
-                            ? 'var(--semi-color-primary)'
-                            : 'var(--semi-color-text-0)',
-                        }}
-                      >
-                        {testing ? t('连接测试中...') : t('测试连接')}
-                      </Button>
-                    </div>
-                  </div>
-                </Col>
-                <Col xs={24} lg={10}>
-                  <div
-                    style={{
-                      background: 'var(--semi-color-fill-0)',
-                      padding: '16px',
-                      borderRadius: '8px',
-                      border: '1px solid var(--semi-color-border)',
-                      height: '100%',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      gap: '12px',
-                      justifyContent: 'space-between',
-                    }}
-                  >
-                    <div>
-                      <Text
-                        strong
-                        style={{ display: 'block', marginBottom: '8px' }}
-                      >
-                        {t('获取 io.net API Key')}
-                      </Text>
-                      <ul
-                        style={{
-                          margin: 0,
-                          paddingLeft: '18px',
-                          display: 'flex',
-                          flexDirection: 'column',
-                          gap: '6px',
-                          color: 'var(--semi-color-text-2)',
-                          fontSize: '13px',
-                          lineHeight: 1.6,
-                        }}
-                      >
-                        <li>{t('访问 io.net 控制台的 API Keys 页面')}</li>
-                        <li>
-                          {t('创建或选择密钥时，将 Project 设置为 io.cloud')}
-                        </li>
-                        <li>{t('复制生成的密钥并粘贴到此处')}</li>
-                      </ul>
-                    </div>
-                    <Button
-                      icon={<ArrowUpRight size={16} />}
-                      type='primary'
-                      theme='solid'
-                      style={{ width: '100%' }}
-                      onClick={() =>
-                        window.open('https://ai.io.net/ai/api-keys', '_blank')
-                      }
-                    >
-                      {t('前往 io.net API Keys')}
-                    </Button>
-                  </div>
-                </Col>
-              </Row>
-            </Card>
+                  {testing ? t('连接测试中...') : t('测试连接')}
+                </Button>
+              </div>
+            </div>
 
-            <Row>
-              <Button size='default' type='primary' onClick={onSubmit}>
-                {t('保存设置')}
+            <div className='flex flex-col justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+              <div>
+                <div className='mb-2 text-sm font-semibold text-foreground'>
+                  {t('获取 io.net API Key')}
+                </div>
+                <ul className='m-0 list-disc space-y-1.5 pl-5 text-xs leading-relaxed text-muted'>
+                  <li>{t('访问 io.net 控制台的 API Keys 页面')}</li>
+                  <li>{t('创建或选择密钥时，将 Project 设置为 io.cloud')}</li>
+                  <li>{t('复制生成的密钥并粘贴到此处')}</li>
+                </ul>
+              </div>
+              <Button
+                color='primary'
+                size='sm'
+                endContent={<ArrowUpRight size={14} />}
+                onPress={() =>
+                  window.open('https://ai.io.net/ai/api-keys', '_blank')
+                }
+                className='w-full'
+              >
+                {t('前往 io.net API Keys')}
               </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+            </div>
+          </div>
+        </Card.Content>
+      </Card>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
+        >
+          {t('保存设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsChannelAffinity.jsx b/web/src/pages/Setting/Operation/SettingsChannelAffinity.jsx
index 76ad7aec284..06255f08676 100644
--- a/web/src/pages/Setting/Operation/SettingsChannelAffinity.jsx
+++ b/web/src/pages/Setting/Operation/SettingsChannelAffinity.jsx
@@ -6,44 +6,37 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
-  Banner,
   Button,
-  Col,
-  Collapse,
-  Divider,
-  Form,
-  Input,
   Modal,
-  Row,
-  Select,
-  Space,
-  Spin,
-  Table,
-  Tag,
-  Typography,
-} from '@douyinfe/semi-ui';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  Switch,
+  useOverlayState,
+} from '@heroui/react';
 import {
-  IconClose,
-  IconCode,
-  IconDelete,
-  IconEdit,
-  IconPlus,
-  IconRefresh,
-  IconSearch,
-} from '@douyinfe/semi-icons';
+  ChevronDown,
+  Code2,
+  Edit3,
+  Plus,
+  RefreshCw,
+  Search,
+  Trash2,
+  X,
+} from 'lucide-react';
 import {
   API,
   compareObjects,
@@ -53,12 +46,84 @@ import {
   toBoolean,
   verifyJSON,
 } from '../../../helpers';
-import { useTranslation } from 'react-i18next';
 import {
   CHANNEL_AFFINITY_RULE_TEMPLATES,
   cloneChannelAffinityTemplate,
 } from '../../../constants/channel-affinity-template.constants';
 import ParamOverrideEditorModal from '../../../components/table/channels/modals/ParamOverrideEditorModal';
+import ConfirmDialog from '../../../components/common/ui/ConfirmDialog';
+
+// ----------------------------- helpers -----------------------------
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 font-mono text-xs text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function StatusChip({ tone = 'grey', children, className = '' }) {
+  const TONE = {
+    green: 'bg-success/15 text-success',
+    orange: 'bg-warning/15 text-warning',
+    red: 'bg-danger/15 text-danger',
+    grey: 'bg-surface-secondary text-muted',
+    primary: 'bg-primary/15 text-primary',
+  };
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TONE[tone] || TONE.grey
+      } ${className}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function InfoBanner({ children }) {
+  return (
+    <div className='flex items-start gap-2 rounded-xl border border-primary/20 bg-primary/5 px-3 py-2 text-sm text-foreground'>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+function SwitchRow({ label, hint, value, onChange }) {
+  return (
+    <div className='space-y-1'>
+      <div className='flex items-start justify-between gap-3'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        <Switch
+          isSelected={!!value}
+          onValueChange={onChange}
+          size='md'
+          aria-label={label}
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </div>
+      {hint ? <div className='text-xs text-muted'>{hint}</div> : null}
+    </div>
+  );
+}
+
+// ----------------------------- constants -----------------------------
 
 const KEY_ENABLED = 'channel_affinity_setting.enabled';
 const KEY_SWITCH_ON_SUCCESS = 'channel_affinity_setting.switch_on_success';
@@ -108,6 +173,8 @@ const RULES_JSON_PLACEHOLDER = `[
   }
 ]`;
 
+// ----------------------------- pure helpers -----------------------------
+
 const normalizeStringList = (text) => {
   if (!text) return [];
   return text
@@ -123,10 +190,7 @@ const parseRulesJson = (jsonString) => {
   try {
     const parsed = JSON.parse(jsonString || '[]');
     if (!Array.isArray(parsed)) return [];
-    return parsed.map((rule, index) => ({
-      id: index,
-      ...(rule || {}),
-    }));
+    return parsed.map((rule, index) => ({ id: index, ...(rule || {}) }));
   } catch (e) {
     return [];
   }
@@ -144,11 +208,7 @@ const normalizeKeySource = (src) => {
   const type = (src?.type || '').trim();
   const key = (src?.key || '').trim();
   const path = (src?.path || '').trim();
-
-  if (type === 'gjson') {
-    return { type, key: '', path };
-  }
-
+  if (type === 'gjson') return { type, key: '', path };
   return { type, key, path: '' };
 };
 
@@ -178,9 +238,7 @@ const tryParseRulesJsonArray = (jsonString) => {
 const parseOptionalObjectJson = (jsonString, label) => {
   const raw = (jsonString || '').trim();
   if (!raw) return { ok: true, value: null };
-  if (!verifyJSON(raw)) {
-    return { ok: false, message: `${label} JSON 格式不正确` };
-  }
+  if (!verifyJSON(raw)) return { ok: false, message: `${label} JSON 格式不正确` };
   try {
     const parsed = JSON.parse(raw);
     if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
@@ -222,11 +280,54 @@ const buildChannelAffinityRulePayload = ({
     : {}),
 });
 
+const buildModalFormValues = (rule) => {
+  const r = rule || {};
+  return {
+    name: r.name || '',
+    model_regex_text: (r.model_regex || []).join('\n'),
+    path_regex_text: (r.path_regex || []).join('\n'),
+    user_agent_include_text: (r.user_agent_include || []).join('\n'),
+    value_regex: r.value_regex || '',
+    ttl_seconds: Number(r.ttl_seconds || 0),
+    skip_retry_on_failure: !!r.skip_retry_on_failure,
+    include_using_group: r.include_using_group ?? true,
+    include_model_name: !!r.include_model_name,
+    include_rule_name: r.include_rule_name ?? true,
+    param_override_template_json: r.param_override_template
+      ? stringifyPretty(r.param_override_template)
+      : '',
+  };
+};
+
+const validateKeySources = (keySources) => {
+  const xs = (keySources || []).map(normalizeKeySource).filter((x) => x.type);
+  if (xs.length === 0) return { ok: false, message: 'Key 来源不能为空' };
+  for (const x of xs) {
+    if (x.type === 'context_int' || x.type === 'context_string') {
+      if (!x.key) return { ok: false, message: 'Key 不能为空' };
+    } else if (x.type === 'gjson') {
+      if (!x.path) return { ok: false, message: 'Path 不能为空' };
+    } else {
+      return { ok: false, message: 'Key 来源类型不合法' };
+    }
+  }
+  return { ok: true, value: xs };
+};
+
+// ----------------------------- main -----------------------------
+
+const INITIAL_INPUTS = {
+  [KEY_ENABLED]: false,
+  [KEY_SWITCH_ON_SUCCESS]: true,
+  [KEY_MAX_ENTRIES]: 100000,
+  [KEY_DEFAULT_TTL]: 3600,
+  [KEY_RULES]: '[]',
+};
+
 export default function SettingsChannelAffinity(props) {
   const { t } = useTranslation();
-  const { Text } = Typography;
-  const [loading, setLoading] = useState(false);
 
+  const [loading, setLoading] = useState(false);
   const [cacheLoading, setCacheLoading] = useState(false);
   const [cacheStats, setCacheStats] = useState({
     enabled: false,
@@ -237,91 +338,63 @@ export default function SettingsChannelAffinity(props) {
     cache_algo: '',
   });
 
-  const [inputs, setInputs] = useState({
-    [KEY_ENABLED]: false,
-    [KEY_SWITCH_ON_SUCCESS]: true,
-    [KEY_MAX_ENTRIES]: 100000,
-    [KEY_DEFAULT_TTL]: 3600,
-    [KEY_RULES]: '[]',
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
+  const [inputs, setInputs] = useState(INITIAL_INPUTS);
+  const [inputsRow, setInputsRow] = useState(INITIAL_INPUTS);
   const [editMode, setEditMode] = useState('visual');
-  const prevEditModeRef = useRef(editMode);
 
   const [rules, setRules] = useState([]);
   const [modalVisible, setModalVisible] = useState(false);
   const [editingRule, setEditingRule] = useState(null);
   const [isEdit, setIsEdit] = useState(false);
-  const modalFormRef = useRef();
-  const [modalInitValues, setModalInitValues] = useState(null);
-  const [modalFormKey, setModalFormKey] = useState(0);
-  const [modalAdvancedActiveKey, setModalAdvancedActiveKey] = useState([]);
+  const [modalForm, setModalForm] = useState({});
+  const [modalAdvancedOpen, setModalAdvancedOpen] = useState(false);
   const [paramTemplateDraft, setParamTemplateDraft] = useState('');
   const [paramTemplateEditorVisible, setParamTemplateEditorVisible] =
     useState(false);
 
+  // Confirm dialogs
+  const [confirmClearAll, setConfirmClearAll] = useState(false);
+  const [confirmClearRule, setConfirmClearRule] = useState(null);
+  const [confirmAppendTemplates, setConfirmAppendTemplates] = useState(false);
+
+  // Param-template preview modal
+  const [previewModalVisible, setPreviewModalVisible] = useState(false);
+  const [previewRaw, setPreviewRaw] = useState('');
+
+  const ruleModalState = useOverlayState({
+    isOpen: modalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) closeRuleModal();
+    },
+  });
+
+  const previewModalState = useOverlayState({
+    isOpen: previewModalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setPreviewModalVisible(false);
+    },
+  });
+
   const effectiveDefaultTTLSeconds =
     Number(inputs?.[KEY_DEFAULT_TTL] || 0) > 0
       ? Number(inputs?.[KEY_DEFAULT_TTL] || 0)
       : 3600;
 
-  const buildModalFormValues = (rule) => {
-    const r = rule || {};
-    return {
-      name: r.name || '',
-      model_regex_text: (r.model_regex || []).join('\n'),
-      path_regex_text: (r.path_regex || []).join('\n'),
-      user_agent_include_text: (r.user_agent_include || []).join('\n'),
-      value_regex: r.value_regex || '',
-      ttl_seconds: Number(r.ttl_seconds || 0),
-      skip_retry_on_failure: !!r.skip_retry_on_failure,
-      include_using_group: r.include_using_group ?? true,
-      include_model_name: !!r.include_model_name,
-      include_rule_name: r.include_rule_name ?? true,
-      param_override_template_json: r.param_override_template
-        ? stringifyPretty(r.param_override_template)
-        : '',
-    };
+  const setInputsField = (key) => (value) => {
+    setInputs((prev) => ({ ...prev, [key]: value }));
   };
 
-  const paramTemplatePreviewMeta = useMemo(() => {
-    const raw = (paramTemplateDraft || '').trim();
-    if (!raw) {
-      return {
-        tagLabel: t('未设置'),
-        tagColor: 'grey',
-        preview: t('当前规则未设置参数覆盖模板'),
-      };
-    }
-    if (!verifyJSON(raw)) {
-      return {
-        tagLabel: t('JSON 无效'),
-        tagColor: 'red',
-        preview: raw,
-      };
-    }
-    try {
-      return {
-        tagLabel: t('已设置'),
-        tagColor: 'orange',
-        preview: JSON.stringify(JSON.parse(raw), null, 2),
-      };
-    } catch (error) {
-      return {
-        tagLabel: t('JSON 无效'),
-        tagColor: 'red',
-        preview: raw,
-      };
-    }
-  }, [paramTemplateDraft, t]);
+  const setModalField = (key) => (value) => {
+    setModalForm((prev) => ({ ...prev, [key]: value }));
+  };
 
   const updateParamTemplateDraft = (value) => {
     const next = typeof value === 'string' ? value : '';
     setParamTemplateDraft(next);
-    if (modalFormRef.current) {
-      modalFormRef.current.setValue('param_override_template_json', next);
-    }
+    setModalForm((prev) => ({
+      ...prev,
+      param_override_template_json: next,
+    }));
   };
 
   const formatParamTemplateDraft = () => {
@@ -344,34 +417,33 @@ export default function SettingsChannelAffinity(props) {
       showWarning(t('该规则未设置参数覆盖模板'));
       return;
     }
-    Modal.info({
-      title: t('参数覆盖模板预览'),
-      content: (
-        <div style={{ marginTop: 6, paddingBottom: 10 }}>
-          <pre
-            style={{
-              margin: 0,
-              maxHeight: 420,
-              overflow: 'auto',
-              fontSize: 12,
-              lineHeight: 1.6,
-              padding: 10,
-              borderRadius: 8,
-              background: 'var(--semi-color-fill-0)',
-              border: '1px solid var(--semi-color-border)',
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-all',
-            }}
-          >
-            {stringifyPretty(raw)}
-          </pre>
-        </div>
-      ),
-      footer: null,
-      width: 760,
-    });
+    setPreviewRaw(stringifyPretty(raw));
+    setPreviewModalVisible(true);
   };
 
+  const paramTemplatePreviewMeta = useMemo(() => {
+    const raw = (paramTemplateDraft || '').trim();
+    if (!raw) {
+      return {
+        tagLabel: t('未设置'),
+        tagTone: 'grey',
+        preview: t('当前规则未设置参数覆盖模板'),
+      };
+    }
+    if (!verifyJSON(raw)) {
+      return { tagLabel: t('JSON 无效'), tagTone: 'red', preview: raw };
+    }
+    try {
+      return {
+        tagLabel: t('已设置'),
+        tagTone: 'orange',
+        preview: JSON.stringify(JSON.parse(raw), null, 2),
+      };
+    } catch (error) {
+      return { tagLabel: t('JSON 无效'), tagTone: 'red', preview: raw };
+    }
+  }, [paramTemplateDraft, t]);
+
   const refreshCacheStats = async () => {
     try {
       setCacheLoading(true);
@@ -388,72 +460,9 @@ export default function SettingsChannelAffinity(props) {
     }
   };
 
-  const confirmClearAllCache = () => {
-    Modal.confirm({
-      title: t('确认清空全部渠道亲和性缓存'),
-      content: (
-        <div style={{ lineHeight: '1.6' }}>
-          <Text>{t('将删除所有仍在内存中的渠道亲和性缓存条目。')}</Text>
-        </div>
-      ),
-      onOk: async () => {
-        const res = await API.delete('/api/option/channel_affinity_cache', {
-          params: { all: true },
-        });
-        const { success, message } = res.data;
-        if (!success) {
-          showError(t(message));
-          return;
-        }
-        showSuccess(t('已清空'));
-        await refreshCacheStats();
-      },
-    });
-  };
-
-  const confirmClearRuleCache = (rule) => {
-    const name = (rule?.name || '').trim();
-    if (!name) return;
-    if (!rule?.include_rule_name) {
-      showWarning(
-        t('该规则未启用“作用域：包含规则名称”，无法按规则清空缓存。'),
-      );
-      return;
-    }
-    Modal.confirm({
-      title: t('确认清空该规则缓存'),
-      content: (
-        <div style={{ lineHeight: '1.6' }}>
-          <Text>{t('规则')}：</Text> <Text strong>{name}</Text>
-        </div>
-      ),
-      onOk: async () => {
-        const res = await API.delete('/api/option/channel_affinity_cache', {
-          params: { rule_name: name },
-        });
-        const { success, message } = res.data;
-        if (!success) {
-          showError(t(message));
-          return;
-        }
-        showSuccess(t('已清空'));
-        await refreshCacheStats();
-      },
-    });
-  };
-
-  const setRulesJsonToForm = (jsonString) => {
-    if (!refForm.current) return;
-    // Use setValue instead of setValues. Semi Form's setValues assigns undefined
-    // to every registered field not included in the payload, which can wipe other inputs.
-    refForm.current.setValue(KEY_RULES, jsonString || '[]');
-  };
-
   const switchToJsonMode = () => {
-    // Ensure a stable source of truth when entering JSON mode.
-    // Semi Form may ignore setValues() for an unmounted field, so we seed state first.
     const jsonString = rulesToJson(rules);
-    setInputs((prev) => ({ ...(prev || {}), [KEY_RULES]: jsonString }));
+    setInputs((prev) => ({ ...prev, [KEY_RULES]: jsonString }));
     setEditMode('json');
   };
 
@@ -470,205 +479,48 @@ export default function SettingsChannelAffinity(props) {
     setRules(nextRules);
     const jsonString = rulesToJson(nextRules);
     setInputs((prev) => ({ ...prev, [KEY_RULES]: jsonString }));
-    if (refForm.current && editMode === 'json') {
-      refForm.current.setValue(KEY_RULES, jsonString);
-    }
   };
 
-  const appendCodexAndClaudeCodeTemplates = () => {
-    const doAppend = () => {
-      const existingNames = new Set(
-        (rules || [])
-          .map((r) => (r?.name || '').trim())
-          .filter((x) => x.length > 0),
-      );
-
-      const templates = [
-        CHANNEL_AFFINITY_RULE_TEMPLATES.codexCli,
-        CHANNEL_AFFINITY_RULE_TEMPLATES.claudeCli,
-      ].map((tpl) => {
-        const baseTemplate = cloneChannelAffinityTemplate(tpl);
-        const name = makeUniqueName(existingNames, tpl.name);
-        existingNames.add(name);
-        return { ...baseTemplate, name };
-      });
+  const doAppendTemplates = () => {
+    const existingNames = new Set(
+      (rules || [])
+        .map((r) => (r?.name || '').trim())
+        .filter((x) => x.length > 0),
+    );
 
-      const next = [...(rules || []), ...templates].map((r, idx) => ({
-        ...(r || {}),
-        id: idx,
-      }));
-      updateRulesState(next);
-      showSuccess(t('已填充模版'));
-    };
+    const templates = [
+      CHANNEL_AFFINITY_RULE_TEMPLATES.codexCli,
+      CHANNEL_AFFINITY_RULE_TEMPLATES.claudeCli,
+    ].map((tpl) => {
+      const baseTemplate = cloneChannelAffinityTemplate(tpl);
+      const name = makeUniqueName(existingNames, tpl.name);
+      existingNames.add(name);
+      return { ...baseTemplate, name };
+    });
+
+    const next = [...(rules || []), ...templates].map((r, idx) => ({
+      ...(r || {}),
+      id: idx,
+    }));
+    updateRulesState(next);
+    showSuccess(t('已填充模版'));
+  };
 
+  const handleAppendTemplates = () => {
     if ((rules || []).length === 0) {
-      doAppend();
+      doAppendTemplates();
       return;
     }
-
-    Modal.confirm({
-      title: t('填充 Codex CLI / Claude CLI 模版'),
-      content: (
-        <div style={{ lineHeight: '1.6' }}>
-          <Text type='tertiary'>{t('将追加 2 条规则到现有规则列表。')}</Text>
-        </div>
-      ),
-      onOk: doAppend,
-    });
+    setConfirmAppendTemplates(true);
   };
 
-  const ruleColumns = [
-    {
-      title: t('名称'),
-      dataIndex: 'name',
-      render: (text) => <Text>{text || '-'}</Text>,
-    },
-    {
-      title: t('模型正则'),
-      dataIndex: 'model_regex',
-      render: (list) =>
-        (list || []).length > 0
-          ? (list || []).slice(0, 3).map((v, idx) => (
-              <Tag key={`${v}-${idx}`} style={{ marginRight: 4 }}>
-                {v}
-              </Tag>
-            ))
-          : '-',
-    },
-    {
-      title: t('路径正则'),
-      dataIndex: 'path_regex',
-      render: (list) =>
-        (list || []).length > 0
-          ? (list || []).slice(0, 2).map((v, idx) => (
-              <Tag key={`${v}-${idx}`} style={{ marginRight: 4 }}>
-                {v}
-              </Tag>
-            ))
-          : '-',
-    },
-    {
-      title: t('Key 来源'),
-      dataIndex: 'key_sources',
-      render: (list) => {
-        const xs = list || [];
-        if (xs.length === 0) return '-';
-        return xs.slice(0, 3).map((src, idx) => {
-          const s = normalizeKeySource(src);
-          const detail = s.type === 'gjson' ? s.path : s.key;
-          return (
-            <Tag key={`${s.type}-${idx}`} style={{ marginRight: 4 }}>
-              {s.type}:{detail}
-            </Tag>
-          );
-        });
-      },
-    },
-    {
-      title: t('TTL（秒）'),
-      dataIndex: 'ttl_seconds',
-      render: (v) => <Text>{Number(v || 0) || '-'}</Text>,
-    },
-    {
-      title: t('失败后是否重试'),
-      dataIndex: 'skip_retry_on_failure',
-      render: (value) => (
-        <Tag color={value ? 'orange' : 'green'} style={{ marginRight: 4 }}>
-          {value ? t('不重试') : t('重试')}
-        </Tag>
-      ),
-    },
-    {
-      title: t('覆盖模板'),
-      render: (_, record) => {
-        if (!record?.param_override_template) {
-          return <Text type='tertiary'>-</Text>;
-        }
-        return (
-          <Button
-            size='small'
-            icon={<IconSearch />}
-            type='tertiary'
-            onClick={() => openParamTemplatePreview(record)}
-          >
-            {t('预览模板')}
-          </Button>
-        );
-      },
-    },
-    {
-      title: t('缓存条目数'),
-      render: (_, record) => {
-        const name = (record?.name || '').trim();
-        if (!name || !record?.include_rule_name) {
-          return <Text type='tertiary'>N/A</Text>;
-        }
-        const n = Number(cacheStats?.by_rule_name?.[name] || 0);
-        return <Text>{n}</Text>;
-      },
-    },
-    {
-      title: t('作用域'),
-      render: (_, record) => {
-        const tags = [];
-        if (record?.include_using_group) tags.push(t('分组'));
-        if (record?.include_model_name) tags.push(t('模型'));
-        if (record?.include_rule_name) tags.push(t('规则'));
-        if (tags.length === 0) return '-';
-        return tags.map((x) => (
-          <Tag key={x} style={{ marginRight: 4 }}>
-            {x}
-          </Tag>
-        ));
-      },
-    },
-    {
-      title: t('操作'),
-      render: (_, record) => (
-        <Space>
-          <Button
-            icon={<IconClose />}
-            theme='borderless'
-            type='warning'
-            disabled={!record?.include_rule_name}
-            title={t('清空该规则缓存')}
-            aria-label={t('清空该规则缓存')}
-            onClick={() => confirmClearRuleCache(record)}
-          />
-          <Button
-            icon={<IconEdit />}
-            theme='borderless'
-            title={t('编辑规则')}
-            aria-label={t('编辑规则')}
-            onClick={() => handleEditRule(record)}
-          />
-          <Button
-            icon={<IconDelete />}
-            theme='borderless'
-            type='danger'
-            title={t('删除规则')}
-            aria-label={t('删除规则')}
-            onClick={() => handleDeleteRule(record.id)}
-          />
-        </Space>
-      ),
-    },
-  ];
-
-  const validateKeySources = (keySources) => {
-    const xs = (keySources || []).map(normalizeKeySource).filter((x) => x.type);
-    if (xs.length === 0) return { ok: false, message: 'Key 来源不能为空' };
-    for (const x of xs) {
-      if (x.type === 'context_int' || x.type === 'context_string') {
-        if (!x.key) return { ok: false, message: 'Key 不能为空' };
-      } else if (x.type === 'gjson') {
-        if (!x.path) return { ok: false, message: 'Path 不能为空' };
-      } else {
-        return { ok: false, message: 'Key 来源类型不合法' };
-      }
-    }
-    return { ok: true, value: xs };
-  };
+  function closeRuleModal() {
+    setModalVisible(false);
+    setEditingRule(null);
+    setModalAdvancedOpen(false);
+    setParamTemplateDraft('');
+    setParamTemplateEditorVisible(false);
+  }
 
   const openAddModal = () => {
     const nextRule = {
@@ -686,13 +538,11 @@ export default function SettingsChannelAffinity(props) {
     };
     setEditingRule(nextRule);
     setIsEdit(false);
-    modalFormRef.current = null;
     const initValues = buildModalFormValues(nextRule);
-    setModalInitValues(initValues);
+    setModalForm(initValues);
     setParamTemplateDraft(initValues.param_override_template_json || '');
     setParamTemplateEditorVisible(false);
-    setModalAdvancedActiveKey([]);
-    setModalFormKey((k) => k + 1);
+    setModalAdvancedOpen(false);
     setModalVisible(true);
   };
 
@@ -707,13 +557,11 @@ export default function SettingsChannelAffinity(props) {
     };
     setEditingRule(nextRule);
     setIsEdit(true);
-    modalFormRef.current = null;
     const initValues = buildModalFormValues(nextRule);
-    setModalInitValues(initValues);
+    setModalForm(initValues);
     setParamTemplateDraft(initValues.param_override_template_json || '');
     setParamTemplateEditorVisible(false);
-    setModalAdvancedActiveKey([]);
-    setModalFormKey((k) => k + 1);
+    setModalAdvancedOpen(false);
     setModalVisible(true);
   };
 
@@ -723,64 +571,54 @@ export default function SettingsChannelAffinity(props) {
     showSuccess(t('删除成功'));
   };
 
-  const handleModalSave = async () => {
-    try {
-      const values = await modalFormRef.current.validate();
-      const modelRegex = normalizeStringList(values.model_regex_text);
-      if (modelRegex.length === 0) return showError(t('模型正则不能为空'));
-
-      const keySourcesValidation = validateKeySources(editingRule?.key_sources);
-      if (!keySourcesValidation.ok)
-        return showError(t(keySourcesValidation.message));
-
-      const userAgentInclude = normalizeStringList(
-        values.user_agent_include_text,
-      );
-      const paramTemplateValidation = parseOptionalObjectJson(
-        paramTemplateDraft,
-        '参数覆盖模板',
-      );
-      if (!paramTemplateValidation.ok) {
-        return showError(t(paramTemplateValidation.message));
-      }
+  const handleModalSave = () => {
+    const values = modalForm;
+    const modelRegex = normalizeStringList(values.model_regex_text);
+    if (!values.name?.trim()) return showError(t('名称不能为空'));
+    if (modelRegex.length === 0) return showError(t('模型正则不能为空'));
 
-      const rulePayload = buildChannelAffinityRulePayload({
-        values,
-        isEdit,
-        editingRuleId: editingRule?.id,
-        rulesLength: rules.length,
-        modelRegex,
-        pathRegex: normalizeStringList(values.path_regex_text),
-        keySources: keySourcesValidation.value,
-        userAgentInclude,
-        paramOverrideTemplate: paramTemplateValidation.value,
-      });
+    const keySourcesValidation = validateKeySources(editingRule?.key_sources);
+    if (!keySourcesValidation.ok) {
+      return showError(t(keySourcesValidation.message));
+    }
 
-      if (!rulePayload.name) return showError(t('名称不能为空'));
+    const userAgentInclude = normalizeStringList(values.user_agent_include_text);
+    const paramTemplateValidation = parseOptionalObjectJson(
+      paramTemplateDraft,
+      '参数覆盖模板',
+    );
+    if (!paramTemplateValidation.ok) {
+      return showError(t(paramTemplateValidation.message));
+    }
 
-      const next = [...(rules || [])];
-      if (isEdit) {
-        let idx = next.findIndex((r) => r.id === editingRule?.id);
-        if (idx < 0 && editingRule?.name) {
-          idx = next.findIndex(
-            (r) => (r?.name || '').trim() === (editingRule?.name || '').trim(),
-          );
-        }
-        if (idx < 0) return showError(t('规则未找到，请刷新后重试'));
-        next[idx] = rulePayload;
-      } else {
-        next.push(rulePayload);
+    const rulePayload = buildChannelAffinityRulePayload({
+      values,
+      isEdit,
+      editingRuleId: editingRule?.id,
+      rulesLength: rules.length,
+      modelRegex,
+      pathRegex: normalizeStringList(values.path_regex_text),
+      keySources: keySourcesValidation.value,
+      userAgentInclude,
+      paramOverrideTemplate: paramTemplateValidation.value,
+    });
+
+    const next = [...(rules || [])];
+    if (isEdit) {
+      let idx = next.findIndex((r) => r.id === editingRule?.id);
+      if (idx < 0 && editingRule?.name) {
+        idx = next.findIndex(
+          (r) => (r?.name || '').trim() === (editingRule?.name || '').trim(),
+        );
       }
-      updateRulesState(next.map((r, idx) => ({ ...r, id: idx })));
-      setModalVisible(false);
-      setEditingRule(null);
-      setModalInitValues(null);
-      setParamTemplateDraft('');
-      setParamTemplateEditorVisible(false);
-      showSuccess(t('保存成功'));
-    } catch (e) {
-      showError(t('请检查输入'));
+      if (idx < 0) return showError(t('规则未找到，请刷新后重试'));
+      next[idx] = rulePayload;
+    } else {
+      next.push(rulePayload);
     }
+    updateRulesState(next.map((r, idx) => ({ ...r, id: idx })));
+    closeRuleModal();
+    showSuccess(t('保存成功'));
   };
 
   const updateKeySource = (index, patch) => {
@@ -820,13 +658,10 @@ export default function SettingsChannelAffinity(props) {
 
     const requestQueue = updateArray.map((item) => {
       let value = '';
-      if (item.key === KEY_RULES) {
-        value = compactRules;
-      } else if (typeof inputs[item.key] === 'boolean') {
+      if (item.key === KEY_RULES) value = compactRules;
+      else if (typeof inputs[item.key] === 'boolean')
         value = String(inputs[item.key]);
-      } else {
-        value = String(inputs[item.key] ?? '');
-      }
+      else value = String(inputs[item.key] ?? '');
       return API.put('/api/option/', { key: item.key, value });
     });
 
@@ -847,8 +682,8 @@ export default function SettingsChannelAffinity(props) {
   }
 
   useEffect(() => {
-    const currentInputs = { ...inputs };
-    for (let key in props.options) {
+    const currentInputs = { ...INITIAL_INPUTS };
+    for (const key in props.options) {
       if (
         ![
           KEY_ENABLED,
@@ -859,13 +694,9 @@ export default function SettingsChannelAffinity(props) {
         ].includes(key)
       )
         continue;
-      if (key === KEY_ENABLED)
+      if (key === KEY_ENABLED || key === KEY_SWITCH_ON_SUCCESS)
         currentInputs[key] = toBoolean(props.options[key]);
-      else if (key === KEY_SWITCH_ON_SUCCESS)
-        currentInputs[key] = toBoolean(props.options[key]);
-      else if (key === KEY_MAX_ENTRIES)
-        currentInputs[key] = Number(props.options[key] || 0) || 0;
-      else if (key === KEY_DEFAULT_TTL)
+      else if (key === KEY_MAX_ENTRIES || key === KEY_DEFAULT_TTL)
         currentInputs[key] = Number(props.options[key] || 0) || 0;
       else if (key === KEY_RULES) {
         try {
@@ -878,284 +709,575 @@ export default function SettingsChannelAffinity(props) {
     }
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    if (refForm.current) refForm.current.setValues(currentInputs);
     setRules(parseRulesJson(currentInputs[KEY_RULES]));
     refreshCacheStats();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [props.options]);
 
-  useEffect(() => {
-    const prevEditMode = prevEditModeRef.current;
-    prevEditModeRef.current = editMode;
-
-    // On switching from visual -> json, ensure the JSON editor is seeded.
-    // Semi Form may ignore setValues() for an unmounted field.
-    if (prevEditMode === editMode) return;
-    if (editMode !== 'json') return;
-    if (!refForm.current) return;
-    refForm.current.setValue(KEY_RULES, inputs[KEY_RULES] || '[]');
-  }, [editMode, inputs]);
-
   useEffect(() => {
     if (editMode === 'visual') {
       setRules(parseRulesJson(inputs[KEY_RULES]));
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputs[KEY_RULES], editMode]);
 
-  const banner = (
-    <Banner
-      fullMode={false}
-      type='info'
-      description={t(
-        '渠道亲和性会基于从请求上下文或 JSON Body 提取的 Key，优先复用上一次成功的渠道。',
-      )}
-    />
+  // ESC-to-close for both modals
+  useEffect(() => {
+    if (!modalVisible && !previewModalVisible) return;
+    const onKey = (event) => {
+      if (event.key !== 'Escape') return;
+      if (previewModalVisible) setPreviewModalVisible(false);
+      else if (modalVisible) closeRuleModal();
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [modalVisible, previewModalVisible]);
+
+  // ----------------------------- render -----------------------------
+
+  const renderRulesTable = () => (
+    <div className='overflow-x-auto rounded-xl border border-border'>
+      <table className='w-full text-sm'>
+        <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+          <tr>
+            <th className='px-3 py-2 text-left font-medium'>{t('名称')}</th>
+            <th className='px-3 py-2 text-left font-medium'>
+              {t('模型正则')}
+            </th>
+            <th className='px-3 py-2 text-left font-medium'>
+              {t('路径正则')}
+            </th>
+            <th className='px-3 py-2 text-left font-medium'>{t('Key 来源')}</th>
+            <th className='px-3 py-2 text-left font-medium'>
+              {t('TTL（秒）')}
+            </th>
+            <th className='px-3 py-2 text-left font-medium'>
+              {t('失败后是否重试')}
+            </th>
+            <th className='px-3 py-2 text-left font-medium'>{t('覆盖模板')}</th>
+            <th className='px-3 py-2 text-left font-medium'>
+              {t('缓存条目数')}
+            </th>
+            <th className='px-3 py-2 text-left font-medium'>{t('作用域')}</th>
+            <th className='px-3 py-2 text-left font-medium'>{t('操作')}</th>
+          </tr>
+        </thead>
+        <tbody className='divide-y divide-border'>
+          {(rules || []).length === 0 ? (
+            <tr>
+              <td
+                colSpan={10}
+                className='px-4 py-8 text-center text-sm text-muted'
+              >
+                {t('暂无数据')}
+              </td>
+            </tr>
+          ) : (
+            rules.map((record) => {
+              const scopeTags = [];
+              if (record.include_using_group) scopeTags.push(t('分组'));
+              if (record.include_model_name) scopeTags.push(t('模型'));
+              if (record.include_rule_name) scopeTags.push(t('规则'));
+
+              const cacheCount =
+                record.name && record.include_rule_name
+                  ? Number(cacheStats?.by_rule_name?.[record.name] || 0)
+                  : null;
+
+              return (
+                <tr
+                  key={record.id}
+                  className='bg-background hover:bg-surface-secondary/60'
+                >
+                  <td className='px-3 py-2 align-top text-foreground'>
+                    {record.name || '-'}
+                  </td>
+                  <td className='px-3 py-2 align-top'>
+                    {(record.model_regex || []).length === 0
+                      ? '-'
+                      : (record.model_regex || []).slice(0, 3).map((v, idx) => (
+                          <StatusChip
+                            key={`${v}-${idx}`}
+                            className='mr-1'
+                          >
+                            {v}
+                          </StatusChip>
+                        ))}
+                  </td>
+                  <td className='px-3 py-2 align-top'>
+                    {(record.path_regex || []).length === 0
+                      ? '-'
+                      : (record.path_regex || []).slice(0, 2).map((v, idx) => (
+                          <StatusChip
+                            key={`${v}-${idx}`}
+                            className='mr-1'
+                          >
+                            {v}
+                          </StatusChip>
+                        ))}
+                  </td>
+                  <td className='px-3 py-2 align-top'>
+                    {(record.key_sources || []).length === 0
+                      ? '-'
+                      : (record.key_sources || []).slice(0, 3).map((src, idx) => {
+                          const s = normalizeKeySource(src);
+                          const detail = s.type === 'gjson' ? s.path : s.key;
+                          return (
+                            <StatusChip
+                              key={`${s.type}-${idx}`}
+                              className='mr-1'
+                            >
+                              {s.type}:{detail}
+                            </StatusChip>
+                          );
+                        })}
+                  </td>
+                  <td className='px-3 py-2 align-top text-foreground'>
+                    {Number(record.ttl_seconds || 0) || '-'}
+                  </td>
+                  <td className='px-3 py-2 align-top'>
+                    <StatusChip
+                      tone={record.skip_retry_on_failure ? 'orange' : 'green'}
+                    >
+                      {record.skip_retry_on_failure ? t('不重试') : t('重试')}
+                    </StatusChip>
+                  </td>
+                  <td className='px-3 py-2 align-top'>
+                    {record.param_override_template ? (
+                      <Button
+                        size='sm'
+                        variant='light'
+                        startContent={<Search size={14} />}
+                        onPress={() => openParamTemplatePreview(record)}
+                      >
+                        {t('预览模板')}
+                      </Button>
+                    ) : (
+                      <span className='text-muted'>-</span>
+                    )}
+                  </td>
+                  <td className='px-3 py-2 align-top text-foreground'>
+                    {cacheCount === null ? (
+                      <span className='text-muted'>N/A</span>
+                    ) : (
+                      cacheCount
+                    )}
+                  </td>
+                  <td className='px-3 py-2 align-top'>
+                    {scopeTags.length === 0
+                      ? '-'
+                      : scopeTags.map((x) => (
+                          <StatusChip key={x} className='mr-1'>
+                            {x}
+                          </StatusChip>
+                        ))}
+                  </td>
+                  <td className='px-3 py-2 align-top'>
+                    <div className='flex items-center gap-1'>
+                      <Button
+                        isIconOnly
+                        size='sm'
+                        variant='light'
+                        color='warning'
+                        isDisabled={!record.include_rule_name}
+                        aria-label={t('清空该规则缓存')}
+                        onPress={() => setConfirmClearRule(record)}
+                      >
+                        <X size={14} />
+                      </Button>
+                      <Button
+                        isIconOnly
+                        size='sm'
+                        variant='light'
+                        aria-label={t('编辑规则')}
+                        onPress={() => handleEditRule(record)}
+                      >
+                        <Edit3 size={14} />
+                      </Button>
+                      <Button
+                        isIconOnly
+                        size='sm'
+                        variant='light'
+                        color='danger'
+                        aria-label={t('删除规则')}
+                        onPress={() => handleDeleteRule(record.id)}
+                      >
+                        <Trash2 size={14} />
+                      </Button>
+                    </div>
+                  </td>
+                </tr>
+              );
+            })
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+
+  const renderKeySourcesTable = () => (
+    <div className='overflow-x-auto rounded-xl border border-border'>
+      <table className='w-full text-sm'>
+        <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+          <tr>
+            <th className='w-[180px] px-3 py-2 text-left font-medium'>
+              {t('类型')}
+            </th>
+            <th className='px-3 py-2 text-left font-medium'>
+              {t('Key 或 Path')}
+            </th>
+            <th className='w-[90px] px-3 py-2 text-left font-medium'>
+              {t('操作')}
+            </th>
+          </tr>
+        </thead>
+        <tbody className='divide-y divide-border'>
+          {(editingRule?.key_sources || []).length === 0 ? (
+            <tr>
+              <td
+                colSpan={3}
+                className='px-4 py-6 text-center text-sm text-muted'
+              >
+                {t('暂无数据')}
+              </td>
+            </tr>
+          ) : (
+            (editingRule?.key_sources || []).map((src, idx) => {
+              const s = normalizeKeySource(src);
+              const isGjson = s.type === 'gjson';
+              return (
+                <tr
+                  key={`ks-${idx}`}
+                  className='bg-background hover:bg-surface-secondary/60'
+                >
+                  <td className='px-3 py-2 align-middle'>
+                    <select
+                      value={s.type || 'gjson'}
+                      onChange={(event) =>
+                        updateKeySource(idx, { type: event.target.value })
+                      }
+                      aria-label={t('Key 来源类型')}
+                      className={`${inputClass} w-[160px]`}
+                    >
+                      {KEY_SOURCE_TYPES.map((option) => (
+                        <option key={option.value} value={option.value}>
+                          {option.label}
+                        </option>
+                      ))}
+                    </select>
+                  </td>
+                  <td className='px-3 py-2 align-middle'>
+                    <input
+                      type='text'
+                      value={isGjson ? s.path : s.key}
+                      onChange={(event) =>
+                        updateKeySource(
+                          idx,
+                          isGjson
+                            ? { path: event.target.value }
+                            : { key: event.target.value },
+                        )
+                      }
+                      aria-label={t('Key 或 Path')}
+                      placeholder={
+                        isGjson ? 'metadata.conversation_id' : 'user_id'
+                      }
+                      className={inputClass}
+                    />
+                  </td>
+                  <td className='px-3 py-2 align-middle'>
+                    <Button
+                      isIconOnly
+                      size='sm'
+                      variant='light'
+                      color='danger'
+                      aria-label={t('删除 Key 来源')}
+                      onPress={() => removeKeySource(idx)}
+                    >
+                      <Trash2 size={14} />
+                    </Button>
+                  </td>
+                </tr>
+              );
+            })
+          )}
+        </tbody>
+      </table>
+    </div>
   );
 
   return (
     <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
-        >
-          <Form.Section text={t('渠道亲和性')}>
-            {banner}
-            <Divider style={{ marginTop: 12, marginBottom: 12 }} />
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={KEY_ENABLED}
-                  label={t('启用')}
-                  checkedText='|'
-                  uncheckedText='O'
-                  onChange={(value) =>
-                    setInputs({ ...inputs, [KEY_ENABLED]: value })
-                  }
-                />
-                <Text type='tertiary' size='small'>
-                  {t('启用后将优先复用上一次成功的渠道（粘滞选路）。')}
-                </Text>
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  field={KEY_MAX_ENTRIES}
-                  label={t('最大条目数')}
-                  min={0}
-                  placeholder='例如 100000…'
-                  extraText={
-                    <Text type='tertiary' size='small'>
-                      {t(
-                        '内存缓存最大条目数。0 表示使用后端默认容量：100000。',
-                      )}
-                    </Text>
-                  }
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      [KEY_MAX_ENTRIES]: Number(value || 0),
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  field={KEY_DEFAULT_TTL}
-                  label={t('默认 TTL（秒）')}
-                  min={0}
-                  placeholder='例如 3600…'
-                  extraText={
-                    <Text type='tertiary' size='small'>
-                      {t(
-                        '规则 ttl_seconds 为 0 时使用。0 表示使用后端默认 TTL：3600 秒。',
-                      )}
-                    </Text>
-                  }
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      [KEY_DEFAULT_TTL]: Number(value || 0),
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-
-            <Row gutter={16} style={{ marginTop: 12 }}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={KEY_SWITCH_ON_SUCCESS}
-                  label={t('成功后切换亲和')}
-                  checkedText='|'
-                  uncheckedText='O'
-                  onChange={(value) =>
-                    setInputs({ ...inputs, [KEY_SWITCH_ON_SUCCESS]: value })
-                  }
-                />
-                <Text type='tertiary' size='small'>
-                  {t(
-                    '如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。',
-                  )}
-                </Text>
-              </Col>
-            </Row>
+      <div className='relative space-y-4'>
+        {loading && (
+          <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+            <Spinner color='primary' />
+          </div>
+        )}
 
-            <Divider style={{ marginTop: 12, marginBottom: 12 }} />
+        <div className='border-b border-border pb-2 text-base font-semibold text-foreground'>
+          {t('渠道亲和性')}
+        </div>
 
-            <Space style={{ marginBottom: 10 }}>
-              <Button
-                type={editMode === 'visual' ? 'primary' : 'tertiary'}
-                onClick={switchToVisualMode}
-              >
-                {t('可视化')}
-              </Button>
-              <Button
-                type={editMode === 'json' ? 'primary' : 'tertiary'}
-                onClick={switchToJsonMode}
-              >
-                {t('JSON 模式')}
-              </Button>
-              <Button onClick={appendCodexAndClaudeCodeTemplates}>
-                {t('填充 Codex CLI / Claude CLI 模版')}
-              </Button>
-              <Button icon={<IconPlus />} onClick={openAddModal}>
-                {t('新增规则')}
-              </Button>
-              <Button theme='solid' onClick={onSubmit}>
-                {t('保存')}
-              </Button>
-              <Button
-                icon={<IconRefresh />}
-                loading={cacheLoading}
-                onClick={refreshCacheStats}
-              >
-                {t('刷新缓存统计')}
-              </Button>
-              <Button type='danger' onClick={confirmClearAllCache}>
-                {t('清空全部缓存')}
-              </Button>
-            </Space>
-
-            {editMode === 'visual' ? (
-              <Table
-                columns={ruleColumns}
-                dataSource={rules}
-                rowKey='id'
-                pagination={false}
-                size='small'
-              />
-            ) : (
-              <Form.TextArea
-                field={KEY_RULES}
-                label={t('规则 JSON')}
-                extraText={t(
-                  '规则为 JSON 数组；可视化与 JSON 模式共用同一份数据。',
-                )}
-                placeholder={RULES_JSON_PLACEHOLDER}
-                style={{ width: '100%' }}
-                autosize={{ minRows: 10, maxRows: 28 }}
-                rules={[
-                  {
-                    validator: (rule, value) => verifyJSON(value || '[]'),
-                  },
-                ]}
-                onChange={(value) =>
-                  setInputs({ ...inputs, [KEY_RULES]: value })
-                }
-              />
+        <InfoBanner>
+          {t(
+            '渠道亲和性会基于从请求上下文或 JSON Body 提取的 Key，优先复用上一次成功的渠道。',
+          )}
+        </InfoBanner>
+
+        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3'>
+          <SwitchRow
+            label={t('启用')}
+            hint={t('启用后将优先复用上一次成功的渠道（粘滞选路）。')}
+            value={inputs[KEY_ENABLED]}
+            onChange={setInputsField(KEY_ENABLED)}
+          />
+          <div className='space-y-2'>
+            <FieldLabel>{t('最大条目数')}</FieldLabel>
+            <input
+              type='number'
+              min={0}
+              value={inputs[KEY_MAX_ENTRIES] ?? 0}
+              onChange={(event) => {
+                const raw = event.target.value;
+                setInputsField(KEY_MAX_ENTRIES)(
+                  raw === '' ? 0 : Number(raw),
+                );
+              }}
+              placeholder='例如 100000…'
+              className={inputClass}
+            />
+            <FieldHint>
+              {t(
+                '内存缓存最大条目数。0 表示使用后端默认容量：100000。',
+              )}
+            </FieldHint>
+          </div>
+          <div className='space-y-2'>
+            <FieldLabel>{t('默认 TTL（秒）')}</FieldLabel>
+            <input
+              type='number'
+              min={0}
+              value={inputs[KEY_DEFAULT_TTL] ?? 0}
+              onChange={(event) => {
+                const raw = event.target.value;
+                setInputsField(KEY_DEFAULT_TTL)(
+                  raw === '' ? 0 : Number(raw),
+                );
+              }}
+              placeholder='例如 3600…'
+              className={inputClass}
+            />
+            <FieldHint>
+              {t(
+                '规则 ttl_seconds 为 0 时使用。0 表示使用后端默认 TTL：3600 秒。',
+              )}
+            </FieldHint>
+          </div>
+        </div>
+
+        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3'>
+          <SwitchRow
+            label={t('成功后切换亲和')}
+            hint={t(
+              '如果亲和到的渠道失败，重试到其他渠道成功后，将亲和更新到成功的渠道。',
             )}
-          </Form.Section>
-        </Form>
-      </Spin>
-
-      <Modal
-        title={isEdit ? t('编辑规则') : t('新增规则')}
-        visible={modalVisible}
-        onCancel={() => {
-          setModalVisible(false);
-          setEditingRule(null);
-          setModalInitValues(null);
-          setModalAdvancedActiveKey([]);
-          setParamTemplateDraft('');
-          setParamTemplateEditorVisible(false);
-        }}
-        onOk={handleModalSave}
-        okText={t('保存')}
-        cancelText={t('取消')}
-        width={720}
-      >
-        <Form
-          key={`channel-affinity-rule-form-${modalFormKey}`}
-          initValues={modalInitValues || {}}
-          getFormApi={(formAPI) => {
-            modalFormRef.current = formAPI;
-          }}
-        >
-          <Form.Input
-            field='name'
-            label={t('名称')}
-            extraText={t('规则名称（可读性更好，也会出现在管理侧日志中）。')}
-            placeholder='例如 prefer-by-conversation-id…'
-            rules={[{ required: true }]}
-            onChange={(value) =>
-              setEditingRule((prev) => ({ ...(prev || {}), name: value }))
-            }
+            value={inputs[KEY_SWITCH_ON_SUCCESS]}
+            onChange={setInputsField(KEY_SWITCH_ON_SUCCESS)}
           />
+        </div>
 
-          <Row gutter={16}>
-            <Col xs={24} sm={12}>
-              <Form.TextArea
-                field='model_regex_text'
-                label={t('模型正则（每行一个）')}
-                extraText={t(
-                  '必填。对请求的 model 名称进行匹配，任意一条匹配即命中该规则。',
-                )}
-                placeholder={'^gpt-4o.*$\n^claude-3.*$…'}
-                autosize={{ minRows: 4, maxRows: 10 }}
-                rules={[{ required: true }]}
-              />
-            </Col>
-            <Col xs={24} sm={12}>
-              <Form.TextArea
-                field='path_regex_text'
-                label={t('路径正则（每行一个）')}
-                extraText={t(
-                  '可选。对请求路径进行匹配；不填表示匹配所有路径。',
-                )}
-                placeholder={'/v1/chat/completions\n/v1/responses…'}
-                autosize={{ minRows: 4, maxRows: 10 }}
-              />
-            </Col>
-          </Row>
-
-          <Row gutter={16} style={{ marginTop: 12 }}>
-            <Col xs={24} sm={12}>
-              <Form.Switch
-                field='skip_retry_on_failure'
-                label={t('失败后不重试')}
-              />
-              <Text type='tertiary' size='small'>
-                {t('开启后，若该规则命中且请求失败，将不会切换渠道重试。')}
-              </Text>
-            </Col>
-          </Row>
-
-          <Collapse
-            keepDOM
-            activeKey={modalAdvancedActiveKey}
-            onChange={(activeKey) => {
-              const keys = Array.isArray(activeKey) ? activeKey : [activeKey];
-              setModalAdvancedActiveKey(keys.filter(Boolean));
-            }}
+        <div className='border-t border-border pt-3' />
+
+        {/* Toolbar */}
+        <div className='flex flex-wrap items-center gap-2'>
+          <div className='inline-flex overflow-hidden rounded-xl border border-border'>
+            {[
+              { value: 'visual', label: t('可视化') },
+              { value: 'json', label: t('JSON 模式') },
+            ].map((mode) => {
+              const active = mode.value === editMode;
+              return (
+                <button
+                  key={mode.value}
+                  type='button'
+                  onClick={() => {
+                    if (mode.value === 'visual') switchToVisualMode();
+                    else switchToJsonMode();
+                  }}
+                  className={`px-4 py-1.5 text-sm font-medium transition-colors ${
+                    active
+                      ? 'bg-foreground text-background'
+                      : 'bg-background text-muted hover:bg-surface-secondary'
+                  }`}
+                >
+                  {mode.label}
+                </button>
+              );
+            })}
+          </div>
+          <Button variant='flat' onPress={handleAppendTemplates}>
+            {t('填充 Codex CLI / Claude CLI 模版')}
+          </Button>
+          <Button
+            variant='flat'
+            startContent={<Plus size={14} />}
+            onPress={openAddModal}
+          >
+            {t('新增规则')}
+          </Button>
+          <Button color='primary' onPress={onSubmit}>
+            {t('保存')}
+          </Button>
+          <Button
+            variant='flat'
+            startContent={<RefreshCw size={14} />}
+            isPending={cacheLoading}
+            onPress={refreshCacheStats}
           >
-            <Collapse.Panel header={t('高级设置')} itemKey='advanced'>
-              <Row gutter={16}>
-                <Col xs={24}>
-                  <Form.TextArea
-                    field='user_agent_include_text'
-                    label={t('User-Agent include（每行一个，可不写）')}
-                    extraText={
-                      <Text type='tertiary' size='small'>
+            {t('刷新缓存统计')}
+          </Button>
+          <Button color='danger' onPress={() => setConfirmClearAll(true)}>
+            {t('清空全部缓存')}
+          </Button>
+        </div>
+
+        {editMode === 'visual' ? (
+          renderRulesTable()
+        ) : (
+          <div className='space-y-2'>
+            <FieldLabel>{t('规则 JSON')}</FieldLabel>
+            <textarea
+              rows={14}
+              value={inputs[KEY_RULES] ?? '[]'}
+              onChange={(event) =>
+                setInputsField(KEY_RULES)(event.target.value)
+              }
+              placeholder={RULES_JSON_PLACEHOLDER}
+              className={textareaClass}
+            />
+            <FieldHint>
+              {t('规则为 JSON 数组；可视化与 JSON 模式共用同一份数据。')}
+            </FieldHint>
+          </div>
+        )}
+      </div>
+
+      {/* Rule edit modal */}
+      <Modal state={ruleModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size='3xl'
+            placement='center'
+            className='max-w-[95vw]'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <span>{isEdit ? t('编辑规则') : t('新增规则')}</span>
+              </ModalHeader>
+              <ModalBody className='max-h-[72vh] space-y-4 overflow-y-auto px-6 py-5'>
+                <div className='space-y-2'>
+                  <FieldLabel required>{t('名称')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={modalForm.name || ''}
+                    onChange={(event) => {
+                      const v = event.target.value;
+                      setModalField('name')(v);
+                      setEditingRule((prev) => ({
+                        ...(prev || {}),
+                        name: v,
+                      }));
+                    }}
+                    placeholder='例如 prefer-by-conversation-id…'
+                    className={inputClass}
+                  />
+                  <FieldHint>
+                    {t('规则名称（可读性更好，也会出现在管理侧日志中）。')}
+                  </FieldHint>
+                </div>
+
+                <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+                  <div className='space-y-2'>
+                    <FieldLabel required>
+                      {t('模型正则（每行一个）')}
+                    </FieldLabel>
+                    <textarea
+                      rows={5}
+                      value={modalForm.model_regex_text || ''}
+                      onChange={(event) =>
+                        setModalField('model_regex_text')(event.target.value)
+                      }
+                      placeholder={'^gpt-4o.*$\n^claude-3.*$…'}
+                      className={textareaClass}
+                    />
+                    <FieldHint>
+                      {t(
+                        '必填。对请求的 model 名称进行匹配，任意一条匹配即命中该规则。',
+                      )}
+                    </FieldHint>
+                  </div>
+                  <div className='space-y-2'>
+                    <FieldLabel>{t('路径正则（每行一个）')}</FieldLabel>
+                    <textarea
+                      rows={5}
+                      value={modalForm.path_regex_text || ''}
+                      onChange={(event) =>
+                        setModalField('path_regex_text')(event.target.value)
+                      }
+                      placeholder={'/v1/chat/completions\n/v1/responses…'}
+                      className={textareaClass}
+                    />
+                    <FieldHint>
+                      {t(
+                        '可选。对请求路径进行匹配；不填表示匹配所有路径。',
+                      )}
+                    </FieldHint>
+                  </div>
+                </div>
+
+                <SwitchRow
+                  label={t('失败后不重试')}
+                  hint={t(
+                    '开启后，若该规则命中且请求失败，将不会切换渠道重试。',
+                  )}
+                  value={modalForm.skip_retry_on_failure}
+                  onChange={setModalField('skip_retry_on_failure')}
+                />
+
+                {/* 高级设置 */}
+                <details
+                  className='group rounded-xl border border-border bg-background'
+                  open={modalAdvancedOpen}
+                  onToggle={(event) =>
+                    setModalAdvancedOpen(event.currentTarget.open)
+                  }
+                >
+                  <summary className='flex cursor-pointer items-center justify-between gap-2 px-3 py-2 text-sm font-medium text-foreground'>
+                    <span>{t('高级设置')}</span>
+                    <ChevronDown
+                      size={16}
+                      className='text-muted transition-transform group-open:rotate-180'
+                    />
+                  </summary>
+                  <div className='space-y-4 border-t border-border px-3 py-3'>
+                    <div className='space-y-2'>
+                      <FieldLabel>
+                        {t('User-Agent include（每行一个，可不写）')}
+                      </FieldLabel>
+                      <textarea
+                        rows={4}
+                        value={modalForm.user_agent_include_text || ''}
+                        onChange={(event) =>
+                          setModalField('user_agent_include_text')(
+                            event.target.value,
+                          )
+                        }
+                        placeholder={'curl\nPostmanRuntime\nMyApp/…'}
+                        className={textareaClass}
+                      />
+                      <FieldHint>
                         {t(
                           '可选。匹配入口请求的 User-Agent；任意一行作为子串匹配（忽略大小写）即命中。',
                         )}
@@ -1167,235 +1289,194 @@ export default function SettingsChannelAffinity(props) {
                         {t(
                           '为保证匹配准确，请确保客户端直连本站点（避免反向代理/网关改写 User-Agent）。',
                         )}
-                      </Text>
-                    }
-                    placeholder={'curl\nPostmanRuntime\nMyApp/…'}
-                    autosize={{ minRows: 3, maxRows: 8 }}
-                  />
-                </Col>
-              </Row>
-
-              <Row gutter={16}>
-                <Col xs={24} sm={12}>
-                  <Form.Input
-                    field='value_regex'
-                    label={t('Value 正则')}
-                    placeholder='^[-0-9A-Za-z._:]{1,128}$'
-                    extraText={t(
-                      '可选。对提取到的亲和 Key 做正则校验；不填表示不校验。',
-                    )}
-                  />
-                </Col>
-                <Col xs={24} sm={12}>
-                  <Form.InputNumber
-                    field='ttl_seconds'
-                    label={t('TTL（秒，0 表示默认）')}
-                    placeholder='例如 600…'
-                    min={0}
-                    extraText={
-                      <Text type='tertiary' size='small'>
-                        {t('该规则的缓存保留时长；0 表示使用默认 TTL：')}
-                        {effectiveDefaultTTLSeconds}
-                        {t(' 秒。')}
-                      </Text>
-                    }
-                  />
-                </Col>
-              </Row>
+                      </FieldHint>
+                    </div>
 
-              <Row gutter={16}>
-                <Col xs={24}>
-                  <div style={{ marginBottom: 8 }}>
-                    <Text strong>{t('参数覆盖模板')}</Text>
-                  </div>
-                  <Text type='tertiary' size='small'>
-                    {t(
-                      '命中该亲和规则后，会把此模板合并到渠道参数覆盖中（同名键由模板覆盖）。',
-                    )}
-                  </Text>
-                  <div
-                    style={{
-                      marginTop: 8,
-                      borderRadius: 10,
-                      padding: 10,
-                      background: 'var(--semi-color-fill-0)',
-                      border: '1px solid var(--semi-color-border)',
-                    }}
-                  >
-                    <div
-                      style={{
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'space-between',
-                        marginBottom: 8,
-                        gap: 8,
-                        flexWrap: 'wrap',
-                      }}
-                    >
-                      <Tag color={paramTemplatePreviewMeta.tagColor}>
-                        {paramTemplatePreviewMeta.tagLabel}
-                      </Tag>
-                      <Space>
-                        <Button
-                          size='small'
-                          type='primary'
-                          icon={<IconCode />}
-                          onClick={() => setParamTemplateEditorVisible(true)}
-                        >
-                          {t('可视化编辑')}
-                        </Button>
-                        <Button size='small' onClick={formatParamTemplateDraft}>
-                          {t('格式化')}
-                        </Button>
-                        <Button
-                          size='small'
-                          type='tertiary'
-                          onClick={() => updateParamTemplateDraft('')}
-                        >
-                          {t('清空')}
-                        </Button>
-                      </Space>
+                    <div className='grid grid-cols-1 gap-4 sm:grid-cols-2'>
+                      <div className='space-y-2'>
+                        <FieldLabel>{t('Value 正则')}</FieldLabel>
+                        <input
+                          type='text'
+                          value={modalForm.value_regex || ''}
+                          onChange={(event) =>
+                            setModalField('value_regex')(event.target.value)
+                          }
+                          placeholder='^[-0-9A-Za-z._:]{1,128}$'
+                          className={inputClass}
+                        />
+                        <FieldHint>
+                          {t(
+                            '可选。对提取到的亲和 Key 做正则校验；不填表示不校验。',
+                          )}
+                        </FieldHint>
+                      </div>
+                      <div className='space-y-2'>
+                        <FieldLabel>
+                          {t('TTL（秒，0 表示默认）')}
+                        </FieldLabel>
+                        <input
+                          type='number'
+                          min={0}
+                          value={modalForm.ttl_seconds ?? 0}
+                          onChange={(event) => {
+                            const raw = event.target.value;
+                            setModalField('ttl_seconds')(
+                              raw === '' ? 0 : Number(raw),
+                            );
+                          }}
+                          placeholder='例如 600…'
+                          className={inputClass}
+                        />
+                        <FieldHint>
+                          {t('该规则的缓存保留时长；0 表示使用默认 TTL：')}
+                          {effectiveDefaultTTLSeconds}
+                          {t(' 秒。')}
+                        </FieldHint>
+                      </div>
+                    </div>
+
+                    <div className='space-y-2'>
+                      <div className='text-sm font-medium text-foreground'>
+                        {t('参数覆盖模板')}
+                      </div>
+                      <div className='text-xs text-muted'>
+                        {t(
+                          '命中该亲和规则后，会把此模板合并到渠道参数覆盖中（同名键由模板覆盖）。',
+                        )}
+                      </div>
+                      <div className='rounded-xl border border-border bg-surface-secondary p-3'>
+                        <div className='mb-2 flex flex-wrap items-center justify-between gap-2'>
+                          <StatusChip tone={paramTemplatePreviewMeta.tagTone}>
+                            {paramTemplatePreviewMeta.tagLabel}
+                          </StatusChip>
+                          <div className='flex flex-wrap items-center gap-2'>
+                            <Button
+                              size='sm'
+                              color='primary'
+                              startContent={<Code2 size={14} />}
+                              onPress={() =>
+                                setParamTemplateEditorVisible(true)
+                              }
+                            >
+                              {t('可视化编辑')}
+                            </Button>
+                            <Button
+                              size='sm'
+                              variant='flat'
+                              onPress={formatParamTemplateDraft}
+                            >
+                              {t('格式化')}
+                            </Button>
+                            <Button
+                              size='sm'
+                              variant='light'
+                              onPress={() => updateParamTemplateDraft('')}
+                            >
+                              {t('清空')}
+                            </Button>
+                          </div>
+                        </div>
+                        <pre className='m-0 max-h-[220px] overflow-auto whitespace-pre-wrap break-all text-xs leading-relaxed'>
+                          {paramTemplatePreviewMeta.preview}
+                        </pre>
+                      </div>
+                    </div>
+
+                    <div className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+                      <SwitchRow
+                        label={t('作用域：包含分组')}
+                        hint={t(
+                          '开启后，using_group 会参与 cache key（不同分组隔离）。',
+                        )}
+                        value={modalForm.include_using_group}
+                        onChange={setModalField('include_using_group')}
+                      />
+                      <SwitchRow
+                        label={t('作用域：包含模型名称')}
+                        hint={t(
+                          '开启后，模型名称会参与 cache key（不同模型隔离）。',
+                        )}
+                        value={modalForm.include_model_name}
+                        onChange={setModalField('include_model_name')}
+                      />
+                      <SwitchRow
+                        label={t('作用域：包含规则名称')}
+                        hint={t(
+                          '开启后，规则名称会参与 cache key（不同规则隔离）。',
+                        )}
+                        value={modalForm.include_rule_name}
+                        onChange={setModalField('include_rule_name')}
+                      />
                     </div>
-                    <pre
-                      style={{
-                        margin: 0,
-                        maxHeight: 220,
-                        overflow: 'auto',
-                        fontSize: 12,
-                        lineHeight: 1.6,
-                        whiteSpace: 'pre-wrap',
-                        wordBreak: 'break-all',
-                      }}
-                    >
-                      {paramTemplatePreviewMeta.preview}
-                    </pre>
                   </div>
-                </Col>
-              </Row>
-
-              <Row gutter={16}>
-                <Col xs={24} sm={8}>
-                  <Form.Switch
-                    field='include_using_group'
-                    label={t('作用域：包含分组')}
-                  />
-                  <Text type='tertiary' size='small'>
-                    {t(
-                      '开启后，using_group 会参与 cache key（不同分组隔离）。',
-                    )}
-                  </Text>
-                </Col>
-                <Col xs={24} sm={8}>
-                  <Form.Switch
-                    field='include_model_name'
-                    label={t('作用域：包含模型名称')}
-                  />
-                  <Text type='tertiary' size='small'>
-                    {t('开启后，模型名称会参与 cache key（不同模型隔离）。')}
-                  </Text>
-                </Col>
-                <Col xs={24} sm={8}>
-                  <Form.Switch
-                    field='include_rule_name'
-                    label={t('作用域：包含规则名称')}
-                  />
-                  <Text type='tertiary' size='small'>
-                    {t('开启后，规则名称会参与 cache key（不同规则隔离）。')}
-                  </Text>
-                </Col>
-              </Row>
-            </Collapse.Panel>
-          </Collapse>
-
-          <Divider style={{ marginTop: 12, marginBottom: 12 }} />
-          <Space style={{ marginBottom: 10 }}>
-            <Text>{t('Key 来源')}</Text>
-            <Button icon={<IconPlus />} onClick={addKeySource}>
-              {t('新增 Key 来源')}
-            </Button>
-          </Space>
-          <Text type='tertiary' size='small'>
-            {t(
-              'context_int/context_string 从请求上下文读取；gjson 从入口请求的 JSON body 按 gjson path 读取。',
-            )}
-          </Text>
-          <div style={{ marginTop: 8, marginBottom: 8 }}>
-            <Text type='tertiary' size='small'>
-              {t('常用上下文 Key（用于 context_*）')}：
-            </Text>
-            <div style={{ marginTop: 6 }}>
-              {(CONTEXT_KEY_PRESETS || []).map((x) => (
-                <Tag key={x.key} style={{ marginRight: 6, marginBottom: 6 }}>
-                  {x.label}
-                </Tag>
-              ))}
-            </div>
-          </div>
+                </details>
 
-          <Table
-            columns={[
-              {
-                title: t('类型'),
-                render: (_, __, idx) => (
-                  <Select
-                    style={{ width: 160 }}
-                    optionList={KEY_SOURCE_TYPES}
-                    value={(
-                      editingRule?.key_sources?.[idx]?.type || 'gjson'
-                    ).trim()}
-                    aria-label={t('Key 来源类型')}
-                    onChange={(value) => updateKeySource(idx, { type: value })}
-                  />
-                ),
-              },
-              {
-                title: t('Key 或 Path'),
-                render: (_, __, idx) => {
-                  const src = normalizeKeySource(
-                    editingRule?.key_sources?.[idx],
-                  );
-                  const isGjson = src.type === 'gjson';
-                  return (
-                    <Input
-                      placeholder={
-                        isGjson ? 'metadata.conversation_id' : 'user_id'
-                      }
-                      aria-label={t('Key 或 Path')}
-                      value={isGjson ? src.path : src.key}
-                      onChange={(value) =>
-                        updateKeySource(
-                          idx,
-                          isGjson ? { path: value } : { key: value },
-                        )
-                      }
-                    />
-                  );
-                },
-              },
-              {
-                title: t('操作'),
-                width: 90,
-                render: (_, __, idx) => (
+                <div className='border-t border-border pt-3' />
+
+                <div className='flex flex-wrap items-center gap-2'>
+                  <span className='text-sm font-medium text-foreground'>
+                    {t('Key 来源')}
+                  </span>
                   <Button
-                    icon={<IconDelete />}
-                    theme='borderless'
-                    type='danger'
-                    title={t('删除 Key 来源')}
-                    aria-label={t('删除 Key 来源')}
-                    onClick={() => removeKeySource(idx)}
-                  />
-                ),
-              },
-            ]}
-            dataSource={(editingRule?.key_sources || []).map((x, idx) => ({
-              id: idx,
-              ...x,
-            }))}
-            rowKey='id'
-            pagination={false}
-            size='small'
-          />
-        </Form>
+                    size='sm'
+                    variant='flat'
+                    startContent={<Plus size={14} />}
+                    onPress={addKeySource}
+                  >
+                    {t('新增 Key 来源')}
+                  </Button>
+                </div>
+                <FieldHint>
+                  {t(
+                    'context_int/context_string 从请求上下文读取；gjson 从入口请求的 JSON body 按 gjson path 读取。',
+                  )}
+                </FieldHint>
+                <div className='space-y-2'>
+                  <div className='text-xs text-muted'>
+                    {t('常用上下文 Key（用于 context_*）')}：
+                  </div>
+                  <div className='flex flex-wrap gap-1.5'>
+                    {CONTEXT_KEY_PRESETS.map((x) => (
+                      <StatusChip key={x.key}>{x.label}</StatusChip>
+                    ))}
+                  </div>
+                </div>
+
+                {renderKeySourcesTable()}
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={closeRuleModal}>
+                  {t('取消')}
+                </Button>
+                <Button color='primary' onPress={handleModalSave}>
+                  {t('保存')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
+      </Modal>
+
+      {/* Param-template preview modal */}
+      <Modal state={previewModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer
+            size='3xl'
+            placement='center'
+            className='max-w-[95vw]'
+          >
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <span>{t('参数覆盖模板预览')}</span>
+              </ModalHeader>
+              <ModalBody className='px-6 py-5'>
+                <pre className='m-0 max-h-[420px] overflow-auto whitespace-pre-wrap break-all rounded-lg border border-border bg-surface-secondary p-3 text-xs leading-relaxed'>
+                  {previewRaw}
+                </pre>
+              </ModalBody>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
 
       <ParamOverrideEditorModal
@@ -1407,6 +1488,83 @@ export default function SettingsChannelAffinity(props) {
         }}
         onCancel={() => setParamTemplateEditorVisible(false)}
       />
+
+      {/* Confirm dialogs */}
+      <ConfirmDialog
+        visible={confirmClearAll}
+        title={t('确认清空全部渠道亲和性缓存')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setConfirmClearAll(false)}
+        onConfirm={async () => {
+          setConfirmClearAll(false);
+          try {
+            const res = await API.delete(
+              '/api/option/channel_affinity_cache',
+              { params: { all: true } },
+            );
+            const { success, message } = res.data;
+            if (!success) return showError(t(message));
+            showSuccess(t('已清空'));
+            await refreshCacheStats();
+          } catch (error) {
+            showError(t('保存失败，请重试'));
+          }
+        }}
+      >
+        {t('将删除所有仍在内存中的渠道亲和性缓存条目。')}
+      </ConfirmDialog>
+
+      <ConfirmDialog
+        visible={!!confirmClearRule}
+        title={t('确认清空该规则缓存')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setConfirmClearRule(null)}
+        onConfirm={async () => {
+          const target = confirmClearRule;
+          setConfirmClearRule(null);
+          if (!target?.name) return;
+          if (!target?.include_rule_name) {
+            showWarning(
+              t('该规则未启用"作用域：包含规则名称"，无法按规则清空缓存。'),
+            );
+            return;
+          }
+          try {
+            const res = await API.delete(
+              '/api/option/channel_affinity_cache',
+              { params: { rule_name: target.name } },
+            );
+            const { success, message } = res.data;
+            if (!success) return showError(t(message));
+            showSuccess(t('已清空'));
+            await refreshCacheStats();
+          } catch (error) {
+            showError(t('保存失败，请重试'));
+          }
+        }}
+      >
+        {confirmClearRule?.name
+          ? `${t('规则')}: ${confirmClearRule.name}`
+          : ''}
+      </ConfirmDialog>
+
+      <ConfirmDialog
+        visible={confirmAppendTemplates}
+        title={t('填充 Codex CLI / Claude CLI 模版')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        onCancel={() => setConfirmAppendTemplates(false)}
+        onConfirm={() => {
+          setConfirmAppendTemplates(false);
+          doAppendTemplates();
+        }}
+      >
+        {t('将追加 2 条规则到现有规则列表。')}
+      </ConfirmDialog>
     </>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsCheckin.jsx b/web/src/pages/Setting/Operation/SettingsCheckin.jsx
index 1ce5faa727c..b790f0df509 100644
--- a/web/src/pages/Setting/Operation/SettingsCheckin.jsx
+++ b/web/src/pages/Setting/Operation/SettingsCheckin.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin, Typography } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -28,125 +28,164 @@ import {
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
+const FIELDS = {
+  enabled: 'checkin_setting.enabled',
+  minQuota: 'checkin_setting.min_quota',
+  maxQuota: 'checkin_setting.max_quota',
+};
+
+const DEFAULT_INPUTS = {
+  [FIELDS.enabled]: false,
+  [FIELDS.minQuota]: 1000,
+  [FIELDS.maxQuota]: 10000,
+};
+
 export default function SettingsCheckin(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    'checkin_setting.enabled': false,
-    'checkin_setting.min_quota': 1000,
-    'checkin_setting.max_quota': 10000,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-
-  function handleFieldChange(fieldName) {
-    return (value) => {
-      setInputs((inputs) => ({ ...inputs, [fieldName]: value }));
-    };
-  }
-
-  function onSubmit() {
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
+
+  const onSubmit = async () => {
     const updateArray = compareObjects(inputs, inputsRow);
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        value = String(inputs[item.key]);
-      }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
+    if (!updateArray.length) {
+      showWarning(t('你似乎并没有修改什么'));
+      return;
+    }
     setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
+    try {
+      const requests = updateArray.map((item) =>
+        API.put('/api/option/', {
+          key: item.key,
+          value: String(inputs[item.key]),
+        }),
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => r === undefined)) {
+        if (requests.length > 1) {
+          showError(t('部分保存失败，请重试'));
+          return;
         }
-        showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+        return;
+      }
+      showSuccess(t('保存成功'));
+      setInputsRow(structuredClone(inputs));
+      props.refresh?.();
+    } catch (e) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
+    if (!props.options) return;
+    const next = { ...DEFAULT_INPUTS };
+    for (const key of Object.keys(DEFAULT_INPUTS)) {
+      if (key in props.options) {
+        const raw = props.options[key];
+        if (typeof DEFAULT_INPUTS[key] === 'boolean') {
+          next[key] = raw === true || raw === 'true';
+        } else if (typeof DEFAULT_INPUTS[key] === 'number') {
+          const parsed = Number(raw);
+          next[key] = Number.isFinite(parsed) ? parsed : DEFAULT_INPUTS[key];
+        } else {
+          next[key] = raw;
+        }
       }
     }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
+    setInputs(next);
+    setInputsRow(structuredClone(next));
   }, [props.options]);
 
+  const enabled = !!inputs[FIELDS.enabled];
+
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
+    <div className='p-6 space-y-6'>
+      <div>
+        <div className='text-base font-semibold text-foreground'>
+          {t('签到设置')}
+        </div>
+        <div className='mt-1 text-xs text-muted'>
+          {t('签到功能允许用户每日签到获取随机额度奖励')}
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+          <div className='min-w-0 flex-1'>
+            <div className='text-sm font-medium text-foreground'>
+              {t('启用签到功能')}
+            </div>
+            <div className='mt-1 text-xs leading-snug text-muted'>
+              {t('开启后用户可在签到日历中领取每日额度')}
+            </div>
+          </div>
+          <Switch
+            isSelected={enabled}
+            onChange={setField(FIELDS.enabled)}
+            aria-label={t('启用签到功能')}
+            size='sm'
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
+        </label>
+
+        <div className='space-y-2'>
+          <div className='text-sm font-medium text-foreground'>
+            {t('签到最小额度')}
+          </div>
+          <Input
+            type='number'
+            min={0}
+            value={String(inputs[FIELDS.minQuota] ?? '')}
+            onChange={(e) => {
+              const v = e.target.value;
+              setField(FIELDS.minQuota)(v === '' ? '' : Number(v));
+            }}
+            placeholder={t('签到奖励的最小额度')}
+            disabled={!enabled}
+            aria-label={t('签到最小额度')}
+            className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:cursor-not-allowed disabled:opacity-60'
+          />
+        </div>
+
+        <div className='space-y-2'>
+          <div className='text-sm font-medium text-foreground'>
+            {t('签到最大额度')}
+          </div>
+          <Input
+            type='number'
+            min={0}
+            value={String(inputs[FIELDS.maxQuota] ?? '')}
+            onChange={(e) => {
+              const v = e.target.value;
+              setField(FIELDS.maxQuota)(v === '' ? '' : Number(v));
+            }}
+            placeholder={t('签到奖励的最大额度')}
+            disabled={!enabled}
+            aria-label={t('签到最大额度')}
+            className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:cursor-not-allowed disabled:opacity-60'
+          />
+        </div>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
         >
-          <Form.Section text={t('签到设置')}>
-            <Typography.Text
-              type='tertiary'
-              style={{ marginBottom: 16, display: 'block' }}
-            >
-              {t('签到功能允许用户每日签到获取随机额度奖励')}
-            </Typography.Text>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'checkin_setting.enabled'}
-                  label={t('启用签到功能')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={handleFieldChange('checkin_setting.enabled')}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  field={'checkin_setting.min_quota'}
-                  label={t('签到最小额度')}
-                  placeholder={t('签到奖励的最小额度')}
-                  onChange={handleFieldChange('checkin_setting.min_quota')}
-                  min={0}
-                  disabled={!inputs['checkin_setting.enabled']}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  field={'checkin_setting.max_quota'}
-                  label={t('签到最大额度')}
-                  placeholder={t('签到奖励的最大额度')}
-                  onChange={handleFieldChange('checkin_setting.max_quota')}
-                  min={0}
-                  disabled={!inputs['checkin_setting.enabled']}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存签到设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+          {t('保存签到设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsCreditLimit.jsx b/web/src/pages/Setting/Operation/SettingsCreditLimit.jsx
index 52476932b84..84e6c075b83 100644
--- a/web/src/pages/Setting/Operation/SettingsCreditLimit.jsx
+++ b/web/src/pages/Setting/Operation/SettingsCreditLimit.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import { useTranslation } from 'react-i18next';
 import {
   compareObjects,
@@ -28,171 +28,197 @@ import {
   showWarning,
 } from '../../../helpers';
 
+const NUMERIC_FIELDS = [
+  'QuotaForNewUser',
+  'PreConsumedQuota',
+  'QuotaForInviter',
+  'QuotaForInvitee',
+];
+const BOOLEAN_FIELDS = ['quota_setting.enable_free_model_pre_consume'];
+
+const DEFAULT_INPUTS = {
+  QuotaForNewUser: '',
+  PreConsumedQuota: '',
+  QuotaForInviter: '',
+  QuotaForInvitee: '',
+  'quota_setting.enable_free_model_pre_consume': true,
+};
+
+// Small reusable number input row used for all the per-field cards on this
+// settings page. Keeps the visual weight consistent and avoids repeating the
+// label/description block four times in JSX.
+function NumberField({ label, value, onChange, suffix, helper, placeholder }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <div className='flex items-center gap-2'>
+        <Input
+          type='number'
+          min={0}
+          step={1}
+          value={value === '' || value == null ? '' : String(value)}
+          onChange={(e) => {
+            const v = e.target.value;
+            onChange(v === '' ? '' : Number(v));
+          }}
+          placeholder={placeholder}
+          aria-label={label}
+          className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+        />
+        {suffix ? (
+          <span className='text-xs text-muted shrink-0'>{suffix}</span>
+        ) : null}
+      </div>
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export default function SettingsCreditLimit(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    QuotaForNewUser: '',
-    PreConsumedQuota: '',
-    QuotaForInviter: '',
-    QuotaForInvitee: '',
-    'quota_setting.enable_free_model_pre_consume': true,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-
-  function onSubmit() {
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
+
+  const onSubmit = async () => {
     const updateArray = compareObjects(inputs, inputsRow);
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        value = inputs[item.key];
-      }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
+    if (!updateArray.length) {
+      showWarning(t('你似乎并没有修改什么'));
+      return;
+    }
     setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
+    try {
+      const requests = updateArray.map((item) =>
+        API.put('/api/option/', {
+          key: item.key,
+          value:
+            typeof inputs[item.key] === 'boolean'
+              ? String(inputs[item.key])
+              : String(inputs[item.key] ?? ''),
+        }),
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => r === undefined)) {
+        if (requests.length > 1) {
+          showError(t('部分保存失败，请重试'));
+          return;
         }
-        showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+        return;
+      }
+      showSuccess(t('保存成功'));
+      setInputsRow(structuredClone(inputs));
+      props.refresh?.();
+    } catch (e) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
+    if (!props.options) return;
+    const next = { ...DEFAULT_INPUTS };
+    for (const key of Object.keys(DEFAULT_INPUTS)) {
+      if (key in props.options) {
+        const raw = props.options[key];
+        if (BOOLEAN_FIELDS.includes(key)) {
+          next[key] = raw === true || raw === 'true';
+        } else if (NUMERIC_FIELDS.includes(key)) {
+          if (raw === '' || raw == null) {
+            next[key] = '';
+          } else {
+            const parsed = Number(raw);
+            next[key] = Number.isFinite(parsed) ? parsed : '';
+          }
+        } else {
+          next[key] = raw;
+        }
       }
     }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
+    setInputs(next);
+    setInputsRow(structuredClone(next));
   }, [props.options]);
+
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
+    <div className='p-6 space-y-6'>
+      <div>
+        <div className='text-base font-semibold text-foreground'>
+          {t('额度设置')}
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <NumberField
+          label={t('新用户初始额度')}
+          value={inputs.QuotaForNewUser}
+          onChange={setField('QuotaForNewUser')}
+          suffix='Token'
+        />
+        <NumberField
+          label={t('请求预扣费额度')}
+          value={inputs.PreConsumedQuota}
+          onChange={setField('PreConsumedQuota')}
+          suffix='Token'
+          helper={t('请求结束后多退少补')}
+        />
+        <NumberField
+          label={t('邀请新用户奖励额度')}
+          value={inputs.QuotaForInviter}
+          onChange={setField('QuotaForInviter')}
+          suffix='Token'
+          placeholder={t('例如：2000')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <NumberField
+          label={t('新用户使用邀请码奖励额度')}
+          value={inputs.QuotaForInvitee}
+          onChange={setField('QuotaForInvitee')}
+          suffix='Token'
+          placeholder={t('例如：1000')}
+        />
+      </div>
+
+      <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+        <div className='min-w-0 flex-1'>
+          <div className='text-sm font-medium text-foreground'>
+            {t('对免费模型启用预消耗')}
+          </div>
+          <div className='mt-1 text-xs leading-snug text-muted'>
+            {t(
+              '开启后，对免费模型（倍率为0，或者价格为0）的模型也会预消耗额度',
+            )}
+          </div>
+        </div>
+        <Switch
+          isSelected={!!inputs['quota_setting.enable_free_model_pre_consume']}
+          onChange={setField('quota_setting.enable_free_model_pre_consume')}
+          aria-label={t('对免费模型启用预消耗')}
+          size='sm'
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </label>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
         >
-          <Form.Section text={t('额度设置')}>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('新用户初始额度')}
-                  field={'QuotaForNewUser'}
-                  step={1}
-                  min={0}
-                  suffix={'Token'}
-                  placeholder={''}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      QuotaForNewUser: String(value),
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('请求预扣费额度')}
-                  field={'PreConsumedQuota'}
-                  step={1}
-                  min={0}
-                  suffix={'Token'}
-                  extraText={t('请求结束后多退少补')}
-                  placeholder={''}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      PreConsumedQuota: String(value),
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('邀请新用户奖励额度')}
-                  field={'QuotaForInviter'}
-                  step={1}
-                  min={0}
-                  suffix={'Token'}
-                  extraText={''}
-                  placeholder={t('例如：2000')}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      QuotaForInviter: String(value),
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={6}>
-                <Form.InputNumber
-                  label={t('新用户使用邀请码奖励额度')}
-                  field={'QuotaForInvitee'}
-                  step={1}
-                  min={0}
-                  suffix={'Token'}
-                  extraText={''}
-                  placeholder={t('例如：1000')}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      QuotaForInvitee: String(value),
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col>
-                <Form.Switch
-                  label={t('对免费模型启用预消耗')}
-                  field={'quota_setting.enable_free_model_pre_consume'}
-                  extraText={t(
-                    '开启后，对免费模型（倍率为0，或者价格为0）的模型也会预消耗额度',
-                  )}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'quota_setting.enable_free_model_pre_consume': value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存额度设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+          {t('保存额度设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsGeneral.jsx b/web/src/pages/Setting/Operation/SettingsGeneral.jsx
index 80810da068c..6b2015674b6 100644
--- a/web/src/pages/Setting/Operation/SettingsGeneral.jsx
+++ b/web/src/pages/Setting/Operation/SettingsGeneral.jsx
@@ -17,18 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef, useMemo } from 'react';
-import {
-  Banner,
-  Button,
-  Col,
-  Form,
-  Row,
-  Spin,
-  Modal,
-  Input,
-  Typography,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useState, useMemo } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -38,37 +28,104 @@ import {
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
-const { Text } = Typography;
+const DEFAULT_INPUTS = {
+  TopUpLink: '',
+  'general_setting.docs_link': '',
+  'general_setting.quota_display_type': 'USD',
+  'general_setting.custom_currency_symbol': '¤',
+  'general_setting.custom_currency_exchange_rate': '',
+  QuotaPerUnit: '',
+  RetryTimes: '',
+  USDExchangeRate: '',
+  DisplayTokenStatEnabled: false,
+  DefaultCollapseSidebar: false,
+  DemoSiteEnabled: false,
+  SelfUseModeEnabled: false,
+  'token_setting.max_user_tokens': 1000,
+};
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const selectClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+function TextField({ label, value, onChange, placeholder, helper }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type='text'
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={label}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function NumberField({ label, value, onChange, placeholder, helper, min, step }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type='number'
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(e) => {
+          const v = e.target.value;
+          onChange(v === '' ? '' : Number(v));
+        }}
+        placeholder={placeholder}
+        min={min}
+        step={step}
+        aria-label={label}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToggleRow({ label, helper, value, onChange }) {
+  return (
+    <div className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!value}
+        onChange={onChange}
+        aria-label={label}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </div>
+  );
+}
 
 export default function GeneralSettings(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [showQuotaWarning, setShowQuotaWarning] = useState(false);
-  const [inputs, setInputs] = useState({
-    TopUpLink: '',
-    'general_setting.docs_link': '',
-    'general_setting.quota_display_type': 'USD',
-    'general_setting.custom_currency_symbol': '¤',
-    'general_setting.custom_currency_exchange_rate': '',
-    QuotaPerUnit: '',
-    RetryTimes: '',
-    USDExchangeRate: '',
-    DisplayTokenStatEnabled: false,
-    DefaultCollapseSidebar: false,
-    DemoSiteEnabled: false,
-    SelfUseModeEnabled: false,
-    'token_setting.max_user_tokens': 1000,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-
-  function handleFieldChange(fieldName) {
-    return (value) => {
-      setInputs((inputs) => ({ ...inputs, [fieldName]: value }));
-    };
-  }
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
 
-  function onSubmit() {
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
+
+  const onSubmit = () => {
     const updateArray = compareObjects(inputs, inputsRow);
     if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
     const requestQueue = updateArray.map((item) => {
@@ -78,32 +135,24 @@ export default function GeneralSettings(props) {
       } else {
         value = inputs[item.key];
       }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
+      return API.put('/api/option/', { key: item.key, value });
     });
     setLoading(true);
     Promise.all(requestQueue)
       .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
+        if (res.includes(undefined)) {
+          if (requestQueue.length > 1) {
             return showError(t('部分保存失败，请重试'));
+          }
+          return;
         }
         showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
+        props.refresh?.();
       })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+      .catch(() => showError(t('保存失败，请重试')))
+      .finally(() => setLoading(false));
+  };
 
-  // 计算展示在输入框中的“1 USD = X <currency>”中的 X
   const combinedRate = useMemo(() => {
     const type = inputs['general_setting.quota_display_type'];
     if (type === 'USD') return '1';
@@ -119,11 +168,11 @@ export default function GeneralSettings(props) {
   const onCombinedRateChange = (val) => {
     const type = inputs['general_setting.quota_display_type'];
     if (type === 'CNY') {
-      handleFieldChange('USDExchangeRate')(val);
+      setField('USDExchangeRate')(val);
     } else if (type === 'TOKENS') {
-      handleFieldChange('QuotaPerUnit')(val);
+      setField('QuotaPerUnit')(val);
     } else if (type === 'CUSTOM') {
-      handleFieldChange('general_setting.custom_currency_exchange_rate')(val);
+      setField('general_setting.custom_currency_exchange_rate')(val);
     }
   };
 
@@ -199,13 +248,12 @@ export default function GeneralSettings(props) {
   }, [quotaDisplayType, combinedRate, inputs, t]);
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
+    const currentInputs = { ...DEFAULT_INPUTS };
+    for (const key in props.options) {
+      if (Object.prototype.hasOwnProperty.call(DEFAULT_INPUTS, key)) {
         currentInputs[key] = props.options[key];
       }
     }
-    // 若旧字段存在且新字段缺失，则做一次兜底映射
     if (
       currentInputs['general_setting.quota_display_type'] === undefined &&
       props.options?.DisplayInCurrencyEnabled !== undefined
@@ -215,13 +263,12 @@ export default function GeneralSettings(props) {
         ? 'USD'
         : 'TOKENS';
     }
-    // 回填自定义货币相关字段（如果后端已存在）
-    if (props.options['general_setting.custom_currency_symbol'] !== undefined) {
+    if (props.options?.['general_setting.custom_currency_symbol'] !== undefined) {
       currentInputs['general_setting.custom_currency_symbol'] =
         props.options['general_setting.custom_currency_symbol'];
     }
     if (
-      props.options['general_setting.custom_currency_exchange_rate'] !==
+      props.options?.['general_setting.custom_currency_exchange_rate'] !==
       undefined
     ) {
       currentInputs['general_setting.custom_currency_exchange_rate'] =
@@ -229,208 +276,150 @@ export default function GeneralSettings(props) {
     }
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
-        >
-          <Form.Section text={t('通用设置')}>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Input
-                  field={'TopUpLink'}
-                  label={t('充值链接')}
-                  initValue={''}
-                  placeholder={t('例如发卡网站的购买链接')}
-                  onChange={handleFieldChange('TopUpLink')}
-                  showClear
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Input
-                  field={'general_setting.docs_link'}
-                  label={t('文档地址')}
-                  initValue={''}
-                  placeholder={t('例如 https://docs.newapi.pro')}
-                  onChange={handleFieldChange('general_setting.docs_link')}
-                  showClear
-                />
-              </Col>
-              {/* 单位美元额度已合入汇率组合控件（TOKENS 模式下编辑），不再单独展示 */}
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Input
-                  field={'RetryTimes'}
-                  label={t('失败重试次数')}
-                  initValue={''}
-                  placeholder={t('失败重试次数')}
-                  onChange={handleFieldChange('RetryTimes')}
-                  showClear
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Select
-                  field='general_setting.quota_display_type'
-                  label={t('额度展示类型')}
-                  extraText={quotaDisplayTypeDesc}
-                  onChange={handleFieldChange(
-                    'general_setting.quota_display_type',
-                  )}
-                >
-                  <Form.Select.Option value='USD'>
-                    USD ($)
-                  </Form.Select.Option>
-                  <Form.Select.Option value='CNY'>
-                    CNY (¥)
-                  </Form.Select.Option>
-                  {showTokensOption && (
-                    <Form.Select.Option value='TOKENS'>
-                      Tokens
-                    </Form.Select.Option>
-                  )}
-                  <Form.Select.Option value='CUSTOM'>
-                    {t('自定义货币')}
-                  </Form.Select.Option>
-                </Form.Select>
-              </Col>
-              {quotaDisplayType !== 'USD' && (
-                <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                  <Form.Slot label={rateLabel}>
-                    <Input
-                      prefix='1 USD = '
-                      suffix={rateSuffix}
-                      value={combinedRate}
-                      onChange={onCombinedRateChange}
-                    />
-                    <Text
-                      type='tertiary'
-                      size='small'
-                      style={{ marginTop: 4, display: 'block' }}
-                    >
-                      {rateExtraText}
-                    </Text>
-                  </Form.Slot>
-                </Col>
-              )}
-              <Col
-                xs={24}
-                sm={12}
-                md={8}
-                lg={8}
-                xl={8}
-                style={
-                  quotaDisplayType !== 'CUSTOM'
-                    ? { display: 'none' }
-                    : undefined
-                }
-              >
-                <Form.Input
-                  field='general_setting.custom_currency_symbol'
-                  label={t('自定义货币符号')}
-                  extraText={t(
-                    '自定义货币符号将显示在所有额度数值前，例如 €1.50',
-                  )}
-                  placeholder={t('例如 €, £, Rp, ₩, ₹...')}
-                  onChange={handleFieldChange(
-                    'general_setting.custom_currency_symbol',
-                  )}
-                  showClear
-                />
-              </Col>
-              <Col span={24}>
-                <Text type='tertiary' size='small'>
-                  {t('预览效果')}：{previewText}
-                </Text>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'DisplayTokenStatEnabled'}
-                  label={t('额度查询接口返回令牌额度而非用户额度')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={handleFieldChange('DisplayTokenStatEnabled')}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'DefaultCollapseSidebar'}
-                  label={t('默认折叠侧边栏')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={handleFieldChange('DefaultCollapseSidebar')}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'DemoSiteEnabled'}
-                  label={t('演示站点模式')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={handleFieldChange('DemoSiteEnabled')}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'SelfUseModeEnabled'}
-                  label={t('自用模式')}
-                  extraText={t('开启后不限制：必须设置模型倍率')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={handleFieldChange('SelfUseModeEnabled')}
-                />
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('用户最大令牌数量')}
-                  field={'token_setting.max_user_tokens'}
-                  step={1}
-                  min={1}
-                  extraText={t('每个用户最多可创建的令牌数量，默认 1000，设置过大可能会影响性能')}
-                  placeholder={'1000'}
-                  onChange={handleFieldChange('token_setting.max_user_tokens')}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存通用设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-
-      <Modal
-        title={t('警告')}
-        visible={showQuotaWarning}
-        onOk={() => setShowQuotaWarning(false)}
-        onCancel={() => setShowQuotaWarning(false)}
-        closeOnEsc={true}
-        width={500}
-      >
-        <Banner
-          type='warning'
-          description={t(
-            '此设置用于系统内部计算，默认值500000是为了精确到6位小数点设计，不推荐修改。',
+    <div className='p-6 space-y-6'>
+      <div className='text-base font-semibold text-foreground'>
+        {t('通用设置')}
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
+        <TextField
+          label={t('充值链接')}
+          value={inputs.TopUpLink}
+          onChange={setField('TopUpLink')}
+          placeholder={t('例如发卡网站的购买链接')}
+        />
+        <TextField
+          label={t('文档地址')}
+          value={inputs['general_setting.docs_link']}
+          onChange={setField('general_setting.docs_link')}
+          placeholder={t('例如 https://docs.newapi.pro')}
+        />
+        <TextField
+          label={t('失败重试次数')}
+          value={inputs.RetryTimes}
+          onChange={setField('RetryTimes')}
+          placeholder={t('失败重试次数')}
+        />
+
+        <div className='space-y-2'>
+          <div className='text-sm font-medium text-foreground'>
+            {t('额度展示类型')}
+          </div>
+          <select
+            value={quotaDisplayType}
+            onChange={(e) =>
+              setField('general_setting.quota_display_type')(e.target.value)
+            }
+            aria-label={t('额度展示类型')}
+            className={selectClass}
+          >
+            <option value='USD'>USD ($)</option>
+            <option value='CNY'>CNY (¥)</option>
+            {showTokensOption && <option value='TOKENS'>Tokens</option>}
+            <option value='CUSTOM'>{t('自定义货币')}</option>
+          </select>
+          {quotaDisplayTypeDesc ? (
+            <div className='text-xs leading-snug text-muted'>
+              {quotaDisplayTypeDesc}
+            </div>
+          ) : null}
+        </div>
+
+        {quotaDisplayType !== 'USD' && (
+          <div className='space-y-2'>
+            <div className='text-sm font-medium text-foreground'>
+              {rateLabel}
+            </div>
+            <div className='flex h-10 items-center overflow-hidden rounded-lg border border-[color:var(--app-border)] bg-background text-sm transition focus-within:border-primary'>
+              <span className='whitespace-nowrap pl-3 text-muted'>
+                1 USD =
+              </span>
+              <input
+                type='text'
+                value={combinedRate}
+                onChange={(e) => onCombinedRateChange(e.target.value)}
+                aria-label={rateLabel}
+                className='h-full flex-1 min-w-0 bg-transparent px-2 text-foreground outline-none'
+              />
+              <span className='whitespace-nowrap pr-3 text-muted'>
+                {rateSuffix}
+              </span>
+            </div>
+            {rateExtraText ? (
+              <div className='text-xs leading-snug text-muted'>
+                {rateExtraText}
+              </div>
+            ) : null}
+          </div>
+        )}
+
+        {quotaDisplayType === 'CUSTOM' && (
+          <TextField
+            label={t('自定义货币符号')}
+            value={inputs['general_setting.custom_currency_symbol']}
+            onChange={setField('general_setting.custom_currency_symbol')}
+            placeholder={t('例如 €, £, Rp, ₩, ₹...')}
+            helper={t('自定义货币符号将显示在所有额度数值前，例如 €1.50')}
+          />
+        )}
+      </div>
+
+      <div className='text-xs text-muted'>
+        {t('预览效果')}：{previewText}
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4'>
+        <ToggleRow
+          label={t('额度查询接口返回令牌额度而非用户额度')}
+          value={inputs.DisplayTokenStatEnabled}
+          onChange={setField('DisplayTokenStatEnabled')}
+        />
+        <ToggleRow
+          label={t('默认折叠侧边栏')}
+          value={inputs.DefaultCollapseSidebar}
+          onChange={setField('DefaultCollapseSidebar')}
+        />
+        <ToggleRow
+          label={t('演示站点模式')}
+          value={inputs.DemoSiteEnabled}
+          onChange={setField('DemoSiteEnabled')}
+        />
+        <ToggleRow
+          label={t('自用模式')}
+          helper={t('开启后不限制：必须设置模型倍率')}
+          value={inputs.SelfUseModeEnabled}
+          onChange={setField('SelfUseModeEnabled')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3'>
+        <NumberField
+          label={t('用户最大令牌数量')}
+          value={inputs['token_setting.max_user_tokens']}
+          onChange={setField('token_setting.max_user_tokens')}
+          placeholder='1000'
+          min={1}
+          step={1}
+          helper={t(
+            '每个用户最多可创建的令牌数量，默认 1000，设置过大可能会影响性能',
           )}
-          bordered
-          fullMode={false}
-          closeIcon={null}
         />
-      </Modal>
-    </>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[120px]'
+        >
+          {t('保存通用设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx b/web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx
index 19943c1a8aa..d9014e35bb5 100644
--- a/web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx
+++ b/web/src/pages/Setting/Operation/SettingsHeaderNavModules.jsx
@@ -18,83 +18,68 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState, useContext } from 'react';
-import {
-  Button,
-  Card,
-  Col,
-  Form,
-  Row,
-  Switch,
-  Typography,
-} from '@douyinfe/semi-ui';
+import { Button, Card, Switch } from '@heroui/react';
 import { API, showError, showSuccess } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 import { StatusContext } from '../../../context/Status';
 
-const { Text } = Typography;
+const DEFAULT_MODULES = {
+  home: true,
+  console: true,
+  pricing: { enabled: true, requireAuth: false },
+  docs: true,
+  about: true,
+};
+
+// HeroUI v3 Switch is a compound component; this helper centralizes the
+// anatomy so individual call sites stay readable.
+function ToggleSwitch({ isSelected, onValueChange, ariaLabel, isDisabled }) {
+  return (
+    <Switch
+      isSelected={!!isSelected}
+      onChange={onValueChange}
+      aria-label={ariaLabel}
+      isDisabled={isDisabled}
+      size='sm'
+    >
+      <Switch.Control>
+        <Switch.Thumb />
+      </Switch.Control>
+    </Switch>
+  );
+}
 
 export default function SettingsHeaderNavModules(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [statusState, statusDispatch] = useContext(StatusContext);
+  const [headerNavModules, setHeaderNavModules] = useState(DEFAULT_MODULES);
 
-  // 顶栏模块管理状态
-  const [headerNavModules, setHeaderNavModules] = useState({
-    home: true,
-    console: true,
-    pricing: {
-      enabled: true,
-      requireAuth: false, // 默认不需要登录鉴权
-    },
-    docs: true,
-    about: true,
-  });
-
-  // 处理顶栏模块配置变更
-  function handleHeaderNavModuleChange(moduleKey) {
-    return (checked) => {
-      const newModules = { ...headerNavModules };
+  const handleHeaderNavModuleChange = (moduleKey) => (checked) => {
+    setHeaderNavModules((prev) => {
+      const next = { ...prev };
       if (moduleKey === 'pricing') {
-        // 对于pricing模块，只更新enabled属性
-        newModules[moduleKey] = {
-          ...newModules[moduleKey],
-          enabled: checked,
-        };
+        next.pricing = { ...prev.pricing, enabled: checked };
       } else {
-        newModules[moduleKey] = checked;
+        next[moduleKey] = checked;
       }
-      setHeaderNavModules(newModules);
-    };
-  }
-
-  // 处理模型广场权限控制变更
-  function handlePricingAuthChange(checked) {
-    const newModules = { ...headerNavModules };
-    newModules.pricing = {
-      ...newModules.pricing,
-      requireAuth: checked,
-    };
-    setHeaderNavModules(newModules);
-  }
-
-  // 重置顶栏模块为默认配置
-  function resetHeaderNavModules() {
-    const defaultModules = {
-      home: true,
-      console: true,
-      pricing: {
-        enabled: true,
-        requireAuth: false,
-      },
-      docs: true,
-      about: true,
-    };
-    setHeaderNavModules(defaultModules);
+      return next;
+    });
+  };
+
+  const handlePricingAuthChange = (checked) => {
+    setHeaderNavModules((prev) => ({
+      ...prev,
+      pricing: { ...prev.pricing, requireAuth: checked },
+    }));
+  };
+
+  const resetHeaderNavModules = () => {
+    setHeaderNavModules(DEFAULT_MODULES);
     showSuccess(t('已重置为默认配置'));
-  }
+  };
 
-  // 保存配置
-  async function onSubmit() {
+  const onSubmit = async () => {
     setLoading(true);
     try {
       const res = await API.put('/api/option/', {
@@ -104,8 +89,6 @@ export default function SettingsHeaderNavModules(props) {
       const { success, message } = res.data;
       if (success) {
         showSuccess(t('保存成功'));
-
-        // 立即更新StatusContext中的状态
         statusDispatch({
           type: 'set',
           payload: {
@@ -113,11 +96,7 @@ export default function SettingsHeaderNavModules(props) {
             HeaderNavModules: JSON.stringify(headerNavModules),
           },
         });
-
-        // 刷新父组件状态
-        if (props.refresh) {
-          await props.refresh();
-        }
+        if (props.refresh) await props.refresh();
       } else {
         showError(message);
       }
@@ -126,47 +105,24 @@ export default function SettingsHeaderNavModules(props) {
     } finally {
       setLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
-    // 从 props.options 中获取配置
     if (props.options && props.options.HeaderNavModules) {
       try {
         const modules = JSON.parse(props.options.HeaderNavModules);
-
-        // 处理向后兼容性：如果pricing是boolean，转换为对象格式
         if (typeof modules.pricing === 'boolean') {
-          modules.pricing = {
-            enabled: modules.pricing,
-            requireAuth: false, // 默认不需要登录鉴权
-          };
+          modules.pricing = { enabled: modules.pricing, requireAuth: false };
         }
-
-        setHeaderNavModules(modules);
+        setHeaderNavModules({ ...DEFAULT_MODULES, ...modules });
       } catch (error) {
-        // 使用默认配置
-        const defaultModules = {
-          home: true,
-          console: true,
-          pricing: {
-            enabled: true,
-            requireAuth: false,
-          },
-          docs: true,
-          about: true,
-        };
-        setHeaderNavModules(defaultModules);
+        setHeaderNavModules(DEFAULT_MODULES);
       }
     }
   }, [props.options]);
 
-  // 模块配置数据
   const moduleConfigs = [
-    {
-      key: 'home',
-      title: t('首页'),
-      description: t('用户主页，展示系统信息'),
-    },
+    { key: 'home', title: t('首页'), description: t('用户主页，展示系统信息') },
     {
       key: 'console',
       title: t('控制台'),
@@ -176,181 +132,87 @@ export default function SettingsHeaderNavModules(props) {
       key: 'pricing',
       title: t('模型广场'),
       description: t('模型定价，需要登录访问'),
-      hasSubConfig: true, // 标识该模块有子配置
-    },
-    {
-      key: 'docs',
-      title: t('文档'),
-      description: t('系统文档和帮助信息'),
-    },
-    {
-      key: 'about',
-      title: t('关于'),
-      description: t('关于系统的详细信息'),
+      hasSubConfig: true,
     },
+    { key: 'docs', title: t('文档'), description: t('系统文档和帮助信息') },
+    { key: 'about', title: t('关于'), description: t('关于系统的详细信息') },
   ];
 
+  const isEnabled = (key) =>
+    key === 'pricing' ? !!headerNavModules.pricing?.enabled : !!headerNavModules[key];
+
   return (
-    <Card>
-      <Form.Section
-        text={t('顶栏管理')}
-        extraText={t('控制顶栏模块显示状态，全局生效')}
-      >
-        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
+    <Card className='!rounded-2xl shadow-sm border-0'>
+      <Card.Content className='p-6 space-y-6'>
+        <div>
+          <div className='text-base font-semibold text-foreground'>
+            {t('顶栏管理')}
+          </div>
+          <div className='mt-1 text-xs text-muted'>
+            {t('控制顶栏模块显示状态，全局生效')}
+          </div>
+        </div>
+
+        <div className='grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4'>
           {moduleConfigs.map((module) => (
-            <Col key={module.key} xs={24} sm={12} md={6} lg={6} xl={6}>
-              <Card
-                style={{
-                  borderRadius: '8px',
-                  border: '1px solid var(--semi-color-border)',
-                  transition: 'all 0.2s ease',
-                  background: 'var(--semi-color-bg-1)',
-                  minHeight: '80px',
-                }}
-                bodyStyle={{ padding: '16px' }}
-                hoverable
-              >
-                <div
-                  style={{
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    height: '100%',
-                  }}
-                >
-                  <div style={{ flex: 1, textAlign: 'left' }}>
-                    <div
-                      style={{
-                        fontWeight: '600',
-                        fontSize: '14px',
-                        color: 'var(--semi-color-text-0)',
-                        marginBottom: '4px',
-                      }}
-                    >
-                      {module.title}
-                    </div>
-                    <Text
-                      type='secondary'
-                      size='small'
-                      style={{
-                        fontSize: '12px',
-                        color: 'var(--semi-color-text-2)',
-                        lineHeight: '1.4',
-                        display: 'block',
-                      }}
-                    >
-                      {module.description}
-                    </Text>
+            <div
+              key={module.key}
+              className='flex flex-col rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4 transition-colors hover:border-primary/40'
+            >
+              <div className='flex items-start justify-between gap-3'>
+                <div className='min-w-0 flex-1'>
+                  <div className='text-sm font-semibold text-foreground'>
+                    {module.title}
                   </div>
-                  <div style={{ marginLeft: '16px' }}>
-                    <Switch
-                      checked={
-                        module.key === 'pricing'
-                          ? headerNavModules[module.key]?.enabled
-                          : headerNavModules[module.key]
-                      }
-                      onChange={handleHeaderNavModuleChange(module.key)}
-                      size='default'
-                    />
+                  <div className='mt-1 text-xs leading-snug text-muted'>
+                    {module.description}
                   </div>
                 </div>
-
-                {/* 为模型广场添加权限控制子开关 */}
-                {module.key === 'pricing' &&
-                  (module.key === 'pricing'
-                    ? headerNavModules[module.key]?.enabled
-                    : headerNavModules[module.key]) && (
-                    <div
-                      style={{
-                        borderTop: '1px solid var(--semi-color-border)',
-                        marginTop: '12px',
-                        paddingTop: '12px',
-                      }}
-                    >
-                      <div
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          alignItems: 'center',
-                        }}
-                      >
-                        <div style={{ flex: 1, textAlign: 'left' }}>
-                          <div
-                            style={{
-                              fontWeight: '500',
-                              fontSize: '12px',
-                              color: 'var(--semi-color-text-1)',
-                              marginBottom: '2px',
-                            }}
-                          >
-                            {t('需要登录访问')}
-                          </div>
-                          <Text
-                            type='secondary'
-                            size='small'
-                            style={{
-                              fontSize: '11px',
-                              color: 'var(--semi-color-text-2)',
-                              lineHeight: '1.4',
-                              display: 'block',
-                            }}
-                          >
-                            {t('开启后未登录用户无法访问模型广场')}
-                          </Text>
-                        </div>
-                        <div style={{ marginLeft: '16px' }}>
-                          <Switch
-                            checked={
-                              headerNavModules.pricing?.requireAuth || false
-                            }
-                            onChange={handlePricingAuthChange}
-                            size='default'
-                          />
-                        </div>
+                <ToggleSwitch
+                  isSelected={isEnabled(module.key)}
+                  onValueChange={handleHeaderNavModuleChange(module.key)}
+                  ariaLabel={module.title}
+                />
+              </div>
+
+              {module.key === 'pricing' && isEnabled('pricing') && (
+                <div className='mt-3 border-t border-[color:var(--app-border)] pt-3'>
+                  <div className='flex items-start justify-between gap-3'>
+                    <div className='min-w-0 flex-1'>
+                      <div className='text-xs font-medium text-muted'>
+                        {t('需要登录访问')}
+                      </div>
+                      <div className='mt-0.5 text-[11px] leading-snug text-muted'>
+                        {t('开启后未登录用户无法访问模型广场')}
                       </div>
                     </div>
-                  )}
-              </Card>
-            </Col>
+                    <ToggleSwitch
+                      isSelected={!!headerNavModules.pricing?.requireAuth}
+                      onValueChange={handlePricingAuthChange}
+                      ariaLabel={t('需要登录访问')}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
           ))}
-        </Row>
+        </div>
 
-        <div
-          style={{
-            display: 'flex',
-            gap: '12px',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            paddingTop: '8px',
-            borderTop: '1px solid var(--semi-color-border)',
-          }}
-        >
-          <Button
-            size='default'
-            type='tertiary'
-            onClick={resetHeaderNavModules}
-            style={{
-              borderRadius: '6px',
-              fontWeight: '500',
-            }}
-          >
+        <div className='flex items-center gap-3 border-t border-[color:var(--app-border)] pt-4'>
+          <Button variant='flat' size='md' onPress={resetHeaderNavModules}>
             {t('重置为默认')}
           </Button>
           <Button
-            size='default'
-            type='primary'
-            onClick={onSubmit}
-            loading={loading}
-            style={{
-              borderRadius: '6px',
-              fontWeight: '500',
-              minWidth: '100px',
-            }}
+            color='primary'
+            size='md'
+            onPress={onSubmit}
+            isPending={loading}
+            className='min-w-[100px]'
           >
             {t('保存设置')}
           </Button>
         </div>
-      </Form.Section>
+      </Card.Content>
     </Card>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsLog.jsx b/web/src/pages/Setting/Operation/SettingsLog.jsx
index d309a12b060..4160d041c46 100644
--- a/web/src/pages/Setting/Operation/SettingsLog.jsx
+++ b/web/src/pages/Setting/Operation/SettingsLog.jsx
@@ -17,17 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  Button,
-  Col,
-  Form,
-  Row,
-  Spin,
-  DatePicker,
-  Typography,
-  Modal,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Spinner, Switch } from '@heroui/react';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 import {
@@ -37,225 +28,239 @@ import {
   showSuccess,
   showWarning,
 } from '../../../helpers';
+import ConfirmDialog from '../../../components/common/ui/ConfirmDialog';
+
+const DEFAULT_INPUTS = {
+  LogConsumeEnabled: false,
+  historyTimestamp: dayjs().subtract(1, 'month').toDate(),
+};
+
+// Convert a Date or ISO string to the value format datetime-local expects
+// (YYYY-MM-DDTHH:mm). datetime-local does not accept seconds or timezones.
+const toLocalInputValue = (value) => {
+  if (!value) return '';
+  const d = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(d.getTime())) return '';
+  const offset = d.getTime() - d.getTimezoneOffset() * 60000;
+  return new Date(offset).toISOString().slice(0, 16);
+};
 
-const { Text } = Typography;
+const fromLocalInputValue = (value) => (value ? new Date(value) : null);
 
 export default function SettingsLog(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [loadingCleanHistoryLog, setLoadingCleanHistoryLog] = useState(false);
-  const [inputs, setInputs] = useState({
-    LogConsumeEnabled: false,
-    historyTimestamp: dayjs().subtract(1, 'month').toDate(),
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
 
-  function onSubmit() {
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
+
+  const onSubmit = async () => {
     const updateArray = compareObjects(inputs, inputsRow).filter(
       (item) => item.key !== 'historyTimestamp',
     );
-
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        value = inputs[item.key];
-      }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
+    if (!updateArray.length) {
+      showWarning(t('你似乎并没有修改什么'));
+      return;
+    }
     setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
+    try {
+      const requests = updateArray.map((item) =>
+        API.put('/api/option/', {
+          key: item.key,
+          value:
+            typeof inputs[item.key] === 'boolean'
+              ? String(inputs[item.key])
+              : String(inputs[item.key] ?? ''),
+        }),
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => r === undefined)) {
+        if (requests.length > 1) {
+          showError(t('部分保存失败，请重试'));
+          return;
         }
-        showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
-  async function onCleanHistoryLog() {
+        return;
+      }
+      showSuccess(t('保存成功'));
+      setInputsRow(structuredClone(inputs));
+      props.refresh?.();
+    } catch (e) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const promptCleanHistory = () => {
     if (!inputs.historyTimestamp) {
       showError(t('请选择日志记录时间'));
       return;
     }
+    setConfirmOpen(true);
+  };
 
-    const now = dayjs();
-    const targetDate = dayjs(inputs.historyTimestamp);
-    const targetTime = targetDate.format('YYYY-MM-DD HH:mm:ss');
-    const currentTime = now.format('YYYY-MM-DD HH:mm:ss');
-    const daysDiff = now.diff(targetDate, 'day');
-
-    Modal.confirm({
-      title: t('确认清除历史日志'),
-      content: (
-        <div style={{ lineHeight: '1.8' }}>
-          <p>
-            <Text>{t('当前时间')}：</Text>
-            <Text strong style={{ color: '#52c41a' }}>
-              {currentTime}
-            </Text>
-          </p>
-          <p>
-            <Text>{t('选择时间')}：</Text>
-            <Text strong type='danger'>
-              {targetTime}
-            </Text>
-            {daysDiff > 0 && (
-              <Text type='tertiary'>
-                {' '}
-                ({t('约')} {daysDiff} {t('天前')})
-              </Text>
-            )}
-          </p>
-          <div
-            style={{
-              background: '#fff7e6',
-              border: '1px solid #ffd591',
-              padding: '12px',
-              borderRadius: '4px',
-              marginTop: '12px',
-              color: '#333',
-            }}
-          >
-            <Text strong style={{ color: '#d46b08' }}>
-              ⚠️ {t('注意')}：
-            </Text>
-            <Text style={{ color: '#333' }}>{t('将删除')} </Text>
-            <Text strong style={{ color: '#cf1322' }}>
-              {targetTime}
-            </Text>
-            {daysDiff > 0 && (
-              <Text style={{ color: '#8c8c8c' }}>
-                {' '}
-                ({t('约')} {daysDiff} {t('天前')})
-              </Text>
-            )}
-            <Text style={{ color: '#333' }}> {t('之前的所有日志')}</Text>
-          </div>
-          <p style={{ marginTop: '12px' }}>
-            <Text type='danger'>
-              {t('此操作不可恢复，请仔细确认时间后再操作！')}
-            </Text>
-          </p>
-        </div>
-      ),
-      okText: t('确认删除'),
-      cancelText: t('取消'),
-      okType: 'danger',
-      onOk: async () => {
-        try {
-          setLoadingCleanHistoryLog(true);
-          const res = await API.delete(
-            `/api/log/?target_timestamp=${Date.parse(inputs.historyTimestamp) / 1000}`,
-          );
-          const { success, message, data } = res.data;
-          if (success) {
-            showSuccess(`${data} ${t('条日志已清理！')}`);
-            return;
-          } else {
-            throw new Error(t('日志清理失败：') + message);
-          }
-        } catch (error) {
-          showError(error.message);
-        } finally {
-          setLoadingCleanHistoryLog(false);
-        }
-      },
-    });
-  }
+  const onConfirmCleanHistory = async () => {
+    setConfirmOpen(false);
+    try {
+      setLoadingCleanHistoryLog(true);
+      const target = inputs.historyTimestamp;
+      const ts = (target instanceof Date ? target.getTime() : Date.parse(target)) / 1000;
+      const res = await API.delete(`/api/log/?target_timestamp=${ts}`);
+      const { success, message, data } = res.data;
+      if (success) {
+        showSuccess(`${data} ${t('条日志已清理！')}`);
+      } else {
+        throw new Error(t('日志清理失败：') + message);
+      }
+    } catch (error) {
+      showError(error.message);
+    } finally {
+      setLoadingCleanHistoryLog(false);
+    }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
-      }
+    if (!props.options) return;
+    const next = { ...DEFAULT_INPUTS };
+    if ('LogConsumeEnabled' in props.options) {
+      const raw = props.options.LogConsumeEnabled;
+      next.LogConsumeEnabled = raw === true || raw === 'true';
     }
-    currentInputs['historyTimestamp'] = inputs.historyTimestamp;
-    setInputs(Object.assign(inputs, currentInputs));
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
+    setInputs((prev) => ({ ...prev, ...next, historyTimestamp: prev.historyTimestamp }));
+    setInputsRow(structuredClone(next));
   }, [props.options]);
+
+  const target = inputs.historyTimestamp;
+  const targetDate = target ? dayjs(target) : null;
+  const now = dayjs();
+  const targetTime = targetDate ? targetDate.format('YYYY-MM-DD HH:mm:ss') : '';
+  const currentTime = now.format('YYYY-MM-DD HH:mm:ss');
+  const daysDiff = targetDate ? now.diff(targetDate, 'day') : 0;
+
   return (
     <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
-        >
-          <Form.Section text={t('日志设置')}>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'LogConsumeEnabled'}
-                  label={t('启用额度消费日志记录')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) => {
-                    setInputs({
-                      ...inputs,
-                      LogConsumeEnabled: value,
-                    });
-                  }}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Spin spinning={loadingCleanHistoryLog}>
-                  <Form.DatePicker
-                    label={t('清除历史日志')}
-                    field={'historyTimestamp'}
-                    type='dateTime'
-                    inputReadOnly={true}
-                    onChange={(value) => {
-                      setInputs({
-                        ...inputs,
-                        historyTimestamp: value,
-                      });
-                    }}
-                  />
-                  <Text
-                    type='tertiary'
-                    size='small'
-                    style={{ display: 'block', marginTop: 4, marginBottom: 8 }}
-                  >
-                    {t('将清除选定时间之前的所有日志')}
-                  </Text>
-                  <Button
-                    size='default'
-                    type='danger'
-                    onClick={onCleanHistoryLog}
-                  >
-                    {t('清除历史日志')}
-                  </Button>
-                </Spin>
-              </Col>
-            </Row>
+      <div className='p-6 space-y-6'>
+        <div>
+          <div className='text-base font-semibold text-foreground'>
+            {t('日志设置')}
+          </div>
+        </div>
+
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+            <div className='min-w-0 flex-1'>
+              <div className='text-sm font-medium text-foreground'>
+                {t('启用额度消费日志记录')}
+              </div>
+              <div className='mt-1 text-xs leading-snug text-muted'>
+                {t('开启后会记录每次额度变动的明细，方便审计与对账')}
+              </div>
+            </div>
+            <Switch
+              isSelected={!!inputs.LogConsumeEnabled}
+              onChange={setField('LogConsumeEnabled')}
+              aria-label={t('启用额度消费日志记录')}
+              size='sm'
+            >
+              <Switch.Control>
+                <Switch.Thumb />
+              </Switch.Control>
+            </Switch>
+          </label>
+
+          <div className='space-y-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+            <div>
+              <div className='text-sm font-medium text-foreground'>
+                {t('清除历史日志')}
+              </div>
+              <div className='mt-1 text-xs leading-snug text-muted'>
+                {t('将清除选定时间之前的所有日志')}
+              </div>
+            </div>
+            <input
+              type='datetime-local'
+              value={toLocalInputValue(inputs.historyTimestamp)}
+              onChange={(e) =>
+                setField('historyTimestamp')(fromLocalInputValue(e.target.value))
+              }
+              aria-label={t('清除历史日志时间')}
+              className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+            />
+            <Button
+              color='danger'
+              variant='flat'
+              size='sm'
+              onPress={promptCleanHistory}
+              isPending={loadingCleanHistoryLog}
+            >
+              {loadingCleanHistoryLog ? (
+                <span className='inline-flex items-center gap-2'>
+                  <Spinner size='sm' />
+                  {t('清除中…')}
+                </span>
+              ) : (
+                t('清除历史日志')
+              )}
+            </Button>
+          </div>
+        </div>
 
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存日志设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
+        <div className='border-t border-[color:var(--app-border)] pt-4'>
+          <Button
+            color='primary'
+            size='md'
+            onPress={onSubmit}
+            isPending={loading}
+            className='min-w-[100px]'
+          >
+            {t('保存日志设置')}
+          </Button>
+        </div>
+      </div>
+
+      <ConfirmDialog
+        visible={confirmOpen}
+        title={t('确认清除历史日志')}
+        cancelText={t('取消')}
+        confirmText={t('确认删除')}
+        danger
+        onCancel={() => setConfirmOpen(false)}
+        onConfirm={onConfirmCleanHistory}
+      >
+        <div className='space-y-3 text-sm'>
+          <div className='flex justify-between'>
+            <span className='text-muted'>{t('当前时间')}：</span>
+            <span className='font-medium text-emerald-600'>{currentTime}</span>
+          </div>
+          <div className='flex justify-between'>
+            <span className='text-muted'>{t('选择时间')}：</span>
+            <span className='font-medium text-rose-600'>
+              {targetTime}
+              {daysDiff > 0 ? (
+                <span className='ml-2 text-xs text-muted'>
+                  ({t('约')} {daysDiff} {t('天前')})
+                </span>
+              ) : null}
+            </span>
+          </div>
+          <div className='rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs text-amber-900 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100'>
+            ⚠️ {t('注意')}：{t('将删除')} <strong>{targetTime}</strong>
+            {daysDiff > 0 ? (
+              <span className='ml-1 text-muted'>
+                ({t('约')} {daysDiff} {t('天前')})
+              </span>
+            ) : null}
+            {' '}{t('之前的所有日志')}
+          </div>
+          <div className='text-xs text-rose-600'>
+            {t('此操作不可恢复，请仔细确认时间后再操作！')}
+          </div>
+        </div>
+      </ConfirmDialog>
     </>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsMonitoring.jsx b/web/src/pages/Setting/Operation/SettingsMonitoring.jsx
index e4ee116f294..14c87523d55 100644
--- a/web/src/pages/Setting/Operation/SettingsMonitoring.jsx
+++ b/web/src/pages/Setting/Operation/SettingsMonitoring.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useMemo, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -30,261 +30,285 @@ import {
 import { useTranslation } from 'react-i18next';
 import HttpStatusCodeRulesInput from '../../../components/settings/HttpStatusCodeRulesInput';
 
+const DEFAULT_INPUTS = {
+  ChannelDisableThreshold: '',
+  QuotaRemindThreshold: '',
+  AutomaticDisableChannelEnabled: false,
+  AutomaticEnableChannelEnabled: false,
+  AutomaticDisableKeywords: '',
+  AutomaticDisableStatusCodes: '401',
+  AutomaticRetryStatusCodes:
+    '100-199,300-399,401-407,409-499,500-503,505-523,525-599',
+  'monitor_setting.auto_test_channel_enabled': false,
+  'monitor_setting.auto_test_channel_minutes': 10,
+};
+
+const BOOLEAN_FIELDS = new Set([
+  'AutomaticDisableChannelEnabled',
+  'AutomaticEnableChannelEnabled',
+  'monitor_setting.auto_test_channel_enabled',
+]);
+
+const NUMERIC_FIELDS = new Set([
+  'ChannelDisableThreshold',
+  'QuotaRemindThreshold',
+  'monitor_setting.auto_test_channel_minutes',
+]);
+
+function ToggleRow({ label, helper, isSelected, onValueChange }) {
+  return (
+    <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!isSelected}
+        onChange={onValueChange}
+        aria-label={label}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </label>
+  );
+}
+
+function NumberField({ label, value, onChange, suffix, helper, placeholder, min = 0 }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <div className='flex items-center gap-2'>
+        <Input
+          type='number'
+          min={min}
+          step={1}
+          value={value === '' || value == null ? '' : String(value)}
+          onChange={(e) => {
+            const v = e.target.value;
+            onChange(v === '' ? '' : Number(v));
+          }}
+          placeholder={placeholder}
+          aria-label={label}
+          className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+        />
+        {suffix ? (
+          <span className='text-xs text-muted shrink-0'>{suffix}</span>
+        ) : null}
+      </div>
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export default function SettingsMonitoring(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    ChannelDisableThreshold: '',
-    QuotaRemindThreshold: '',
-    AutomaticDisableChannelEnabled: false,
-    AutomaticEnableChannelEnabled: false,
-    AutomaticDisableKeywords: '',
-    AutomaticDisableStatusCodes: '401',
-    AutomaticRetryStatusCodes:
-      '100-199,300-399,401-407,409-499,500-503,505-523,525-599',
-    'monitor_setting.auto_test_channel_enabled': false,
-    'monitor_setting.auto_test_channel_minutes': 10,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-  const parsedAutoDisableStatusCodes = parseHttpStatusCodeRules(
-    inputs.AutomaticDisableStatusCodes || '',
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
+
+  const parsedDisable = useMemo(
+    () => parseHttpStatusCodeRules(inputs.AutomaticDisableStatusCodes || ''),
+    [inputs.AutomaticDisableStatusCodes],
   );
-  const parsedAutoRetryStatusCodes = parseHttpStatusCodeRules(
-    inputs.AutomaticRetryStatusCodes || '',
+  const parsedRetry = useMemo(
+    () => parseHttpStatusCodeRules(inputs.AutomaticRetryStatusCodes || ''),
+    [inputs.AutomaticRetryStatusCodes],
   );
 
-  function onSubmit() {
+  const onSubmit = async () => {
     const updateArray = compareObjects(inputs, inputsRow);
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    if (!parsedAutoDisableStatusCodes.ok) {
+    if (!updateArray.length) {
+      showWarning(t('你似乎并没有修改什么'));
+      return;
+    }
+    if (!parsedDisable.ok) {
       const details =
-        parsedAutoDisableStatusCodes.invalidTokens &&
-        parsedAutoDisableStatusCodes.invalidTokens.length > 0
-          ? `: ${parsedAutoDisableStatusCodes.invalidTokens.join(', ')}`
+        parsedDisable.invalidTokens?.length > 0
+          ? `: ${parsedDisable.invalidTokens.join(', ')}`
           : '';
-      return showError(`${t('自动禁用状态码格式不正确')}${details}`);
+      showError(`${t('自动禁用状态码格式不正确')}${details}`);
+      return;
     }
-    if (!parsedAutoRetryStatusCodes.ok) {
+    if (!parsedRetry.ok) {
       const details =
-        parsedAutoRetryStatusCodes.invalidTokens &&
-        parsedAutoRetryStatusCodes.invalidTokens.length > 0
-          ? `: ${parsedAutoRetryStatusCodes.invalidTokens.join(', ')}`
+        parsedRetry.invalidTokens?.length > 0
+          ? `: ${parsedRetry.invalidTokens.join(', ')}`
           : '';
-      return showError(`${t('自动重试状态码格式不正确')}${details}`);
+      showError(`${t('自动重试状态码格式不正确')}${details}`);
+      return;
     }
-    const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        const normalizedMap = {
-          AutomaticDisableStatusCodes: parsedAutoDisableStatusCodes.normalized,
-          AutomaticRetryStatusCodes: parsedAutoRetryStatusCodes.normalized,
-        };
-        value = normalizedMap[item.key] ?? inputs[item.key];
-      }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
     setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
+    try {
+      const requests = updateArray.map((item) => {
+        let value;
+        if (typeof inputs[item.key] === 'boolean') {
+          value = String(inputs[item.key]);
+        } else if (item.key === 'AutomaticDisableStatusCodes') {
+          value = parsedDisable.normalized;
+        } else if (item.key === 'AutomaticRetryStatusCodes') {
+          value = parsedRetry.normalized;
+        } else {
+          value = String(inputs[item.key] ?? '');
         }
-        showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
+        return API.put('/api/option/', { key: item.key, value });
       });
-  }
+      const results = await Promise.all(requests);
+      if (results.some((r) => r === undefined)) {
+        if (requests.length > 1) {
+          showError(t('部分保存失败，请重试'));
+          return;
+        }
+        return;
+      }
+      showSuccess(t('保存成功'));
+      setInputsRow(structuredClone(inputs));
+      props.refresh?.();
+    } catch (e) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
+    if (!props.options) return;
+    const next = { ...DEFAULT_INPUTS };
+    for (const key of Object.keys(DEFAULT_INPUTS)) {
+      if (key in props.options) {
+        const raw = props.options[key];
+        if (BOOLEAN_FIELDS.has(key)) {
+          next[key] = raw === true || raw === 'true';
+        } else if (NUMERIC_FIELDS.has(key)) {
+          if (raw === '' || raw == null) {
+            next[key] = '';
+          } else {
+            const parsed = Number(raw);
+            next[key] = Number.isFinite(parsed) ? parsed : '';
+          }
+        } else {
+          next[key] = raw ?? '';
+        }
       }
     }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
+    setInputs(next);
+    setInputsRow(structuredClone(next));
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
+    <div className='p-6 space-y-6'>
+      <div>
+        <div className='text-base font-semibold text-foreground'>
+          {t('监控设置')}
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <ToggleRow
+          label={t('定时测试所有通道')}
+          helper={t('开启后系统会定期对所有通道发起健康检查')}
+          isSelected={inputs['monitor_setting.auto_test_channel_enabled']}
+          onValueChange={setField('monitor_setting.auto_test_channel_enabled')}
+        />
+        <NumberField
+          label={t('自动测试所有通道间隔时间')}
+          value={inputs['monitor_setting.auto_test_channel_minutes']}
+          onChange={setField('monitor_setting.auto_test_channel_minutes')}
+          suffix={t('分钟')}
+          helper={t('每隔多少分钟测试一次所有通道')}
+          min={1}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <NumberField
+          label={t('测试所有渠道的最长响应时间')}
+          value={inputs.ChannelDisableThreshold}
+          onChange={setField('ChannelDisableThreshold')}
+          suffix={t('秒')}
+          helper={t('当运行通道全部测试时，超过此时间将自动禁用通道')}
+        />
+        <NumberField
+          label={t('额度提醒阈值')}
+          value={inputs.QuotaRemindThreshold}
+          onChange={setField('QuotaRemindThreshold')}
+          suffix='Token'
+          helper={t('低于此额度时将发送邮件提醒用户')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <ToggleRow
+          label={t('失败时自动禁用通道')}
+          isSelected={inputs.AutomaticDisableChannelEnabled}
+          onValueChange={setField('AutomaticDisableChannelEnabled')}
+        />
+        <ToggleRow
+          label={t('成功时自动启用通道')}
+          isSelected={inputs.AutomaticEnableChannelEnabled}
+          onValueChange={setField('AutomaticEnableChannelEnabled')}
+        />
+      </div>
+
+      <HttpStatusCodeRulesInput
+        label={t('自动禁用状态码')}
+        value={inputs.AutomaticDisableStatusCodes ?? ''}
+        onChange={setField('AutomaticDisableStatusCodes')}
+        placeholder={t('例如：401, 403, 429, 500-599')}
+        extraText={t('支持填写单个状态码或范围（含首尾），使用逗号分隔')}
+        parsed={parsedDisable}
+        invalidText={t('自动禁用状态码格式不正确')}
+      />
+
+      <HttpStatusCodeRulesInput
+        label={t('自动重试状态码')}
+        value={inputs.AutomaticRetryStatusCodes ?? ''}
+        onChange={setField('AutomaticRetryStatusCodes')}
+        placeholder={t('例如：401, 403, 429, 500-599')}
+        extraText={t(
+          '支持填写单个状态码或范围（含首尾），使用逗号分隔；504 和 524 始终不重试，不受此处配置影响',
+        )}
+        parsed={parsedRetry}
+        invalidText={t('自动重试状态码格式不正确')}
+      />
+
+      <div className='space-y-2'>
+        <div className='text-sm font-medium text-foreground'>
+          {t('自动禁用关键词')}
+        </div>
+        <textarea
+          value={inputs.AutomaticDisableKeywords ?? ''}
+          onChange={(e) => setField('AutomaticDisableKeywords')(e.target.value)}
+          placeholder={t('一行一个，不区分大小写')}
+          rows={6}
+          aria-label={t('自动禁用关键词')}
+          className='w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-primary'
+        />
+        <div className='text-xs leading-snug text-muted'>
+          {t('当上游通道返回错误中包含这些关键词时（不区分大小写），自动禁用通道')}
+        </div>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
         >
-          <Form.Section text={t('监控设置')}>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'monitor_setting.auto_test_channel_enabled'}
-                  label={t('定时测试所有通道')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'monitor_setting.auto_test_channel_enabled': value,
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('自动测试所有通道间隔时间')}
-                  step={1}
-                  min={1}
-                  suffix={t('分钟')}
-                  extraText={t('每隔多少分钟测试一次所有通道')}
-                  placeholder={''}
-                  field={'monitor_setting.auto_test_channel_minutes'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      'monitor_setting.auto_test_channel_minutes':
-                        parseInt(value),
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('测试所有渠道的最长响应时间')}
-                  step={1}
-                  min={0}
-                  suffix={t('秒')}
-                  extraText={t(
-                    '当运行通道全部测试时，超过此时间将自动禁用通道',
-                  )}
-                  placeholder={''}
-                  field={'ChannelDisableThreshold'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      ChannelDisableThreshold: String(value),
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('额度提醒阈值')}
-                  step={1}
-                  min={0}
-                  suffix={'Token'}
-                  extraText={t('低于此额度时将发送邮件提醒用户')}
-                  placeholder={''}
-                  field={'QuotaRemindThreshold'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      QuotaRemindThreshold: String(value),
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'AutomaticDisableChannelEnabled'}
-                  label={t('失败时自动禁用通道')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) => {
-                    setInputs({
-                      ...inputs,
-                      AutomaticDisableChannelEnabled: value,
-                    });
-                  }}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'AutomaticEnableChannelEnabled'}
-                  label={t('成功时自动启用通道')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      AutomaticEnableChannelEnabled: value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col xs={24} sm={16}>
-                <HttpStatusCodeRulesInput
-                  label={t('自动禁用状态码')}
-                  placeholder={t('例如：401, 403, 429, 500-599')}
-                  extraText={t(
-                    '支持填写单个状态码或范围（含首尾），使用逗号分隔',
-                  )}
-                  field={'AutomaticDisableStatusCodes'}
-                  onChange={(value) =>
-                    setInputs({ ...inputs, AutomaticDisableStatusCodes: value })
-                  }
-                  parsed={parsedAutoDisableStatusCodes}
-                  invalidText={t('自动禁用状态码格式不正确')}
-                />
-                <HttpStatusCodeRulesInput
-                  label={t('自动重试状态码')}
-                  placeholder={t('例如：401, 403, 429, 500-599')}
-                  extraText={t(
-                    '支持填写单个状态码或范围（含首尾），使用逗号分隔；504 和 524 始终不重试，不受此处配置影响',
-                  )}
-                  field={'AutomaticRetryStatusCodes'}
-                  onChange={(value) =>
-                    setInputs({ ...inputs, AutomaticRetryStatusCodes: value })
-                  }
-                  parsed={parsedAutoRetryStatusCodes}
-                  invalidText={t('自动重试状态码格式不正确')}
-                />
-                <Form.TextArea
-                  label={t('自动禁用关键词')}
-                  placeholder={t('一行一个，不区分大小写')}
-                  extraText={t(
-                    '当上游通道返回错误中包含这些关键词时（不区分大小写），自动禁用通道',
-                  )}
-                  field={'AutomaticDisableKeywords'}
-                  autosize={{ minRows: 6, maxRows: 12 }}
-                  onChange={(value) =>
-                    setInputs({ ...inputs, AutomaticDisableKeywords: value })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存监控设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+          {t('保存监控设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsSensitiveWords.jsx b/web/src/pages/Setting/Operation/SettingsSensitiveWords.jsx
index 8310ddb2110..818b90d5114 100644
--- a/web/src/pages/Setting/Operation/SettingsSensitiveWords.jsx
+++ b/web/src/pages/Setting/Operation/SettingsSensitiveWords.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin, Tag } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -28,130 +28,152 @@ import {
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
+const DEFAULT_INPUTS = {
+  CheckSensitiveEnabled: false,
+  CheckSensitiveOnPromptEnabled: false,
+  SensitiveWords: '',
+};
+
+const BOOLEAN_FIELDS = new Set([
+  'CheckSensitiveEnabled',
+  'CheckSensitiveOnPromptEnabled',
+]);
+
+function ToggleRow({ label, helper, isSelected, onValueChange }) {
+  return (
+    <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!isSelected}
+        onChange={onValueChange}
+        aria-label={label}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </label>
+  );
+}
+
 export default function SettingsSensitiveWords(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    CheckSensitiveEnabled: false,
-    CheckSensitiveOnPromptEnabled: false,
-    SensitiveWords: '',
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-
-  function onSubmit() {
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
+
+  const onSubmit = async () => {
     const updateArray = compareObjects(inputs, inputsRow);
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        value = inputs[item.key];
-      }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
+    if (!updateArray.length) {
+      showWarning(t('你似乎并没有修改什么'));
+      return;
+    }
     setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
+    try {
+      const requests = updateArray.map((item) =>
+        API.put('/api/option/', {
+          key: item.key,
+          value:
+            typeof inputs[item.key] === 'boolean'
+              ? String(inputs[item.key])
+              : String(inputs[item.key] ?? ''),
+        }),
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => r === undefined)) {
+        if (requests.length > 1) {
+          showError(t('部分保存失败，请重试'));
+          return;
         }
-        showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+        return;
+      }
+      showSuccess(t('保存成功'));
+      setInputsRow(structuredClone(inputs));
+      props.refresh?.();
+    } catch (e) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
+    if (!props.options) return;
+    const next = { ...DEFAULT_INPUTS };
+    for (const key of Object.keys(DEFAULT_INPUTS)) {
+      if (key in props.options) {
+        const raw = props.options[key];
+        if (BOOLEAN_FIELDS.has(key)) {
+          next[key] = raw === true || raw === 'true';
+        } else {
+          next[key] = raw ?? '';
+        }
       }
     }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
+    setInputs(next);
+    setInputsRow(structuredClone(next));
   }, [props.options]);
+
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
+    <div className='p-6 space-y-6'>
+      <div>
+        <div className='text-base font-semibold text-foreground'>
+          {t('屏蔽词过滤设置')}
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <ToggleRow
+          label={t('启用屏蔽词过滤功能')}
+          helper={t('开启后会拦截命中屏蔽词的请求')}
+          isSelected={inputs.CheckSensitiveEnabled}
+          onValueChange={setField('CheckSensitiveEnabled')}
+        />
+        <ToggleRow
+          label={t('启用 Prompt 检查')}
+          helper={t('开启后会对用户提示词逐条进行屏蔽词检查')}
+          isSelected={inputs.CheckSensitiveOnPromptEnabled}
+          onValueChange={setField('CheckSensitiveOnPromptEnabled')}
+        />
+      </div>
+
+      <div className='space-y-2'>
+        <div className='text-sm font-medium text-foreground'>
+          {t('屏蔽词列表')}
+        </div>
+        <textarea
+          value={inputs.SensitiveWords ?? ''}
+          onChange={(e) => setField('SensitiveWords')(e.target.value)}
+          placeholder={t('一行一个屏蔽词，不需要符号分割')}
+          rows={8}
+          aria-label={t('屏蔽词列表')}
+          className='w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-primary'
+        />
+        <div className='text-xs text-muted'>
+          {t('一行一个屏蔽词，不需要符号分割')}
+        </div>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
         >
-          <Form.Section text={t('屏蔽词过滤设置')}>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'CheckSensitiveEnabled'}
-                  label={t('启用屏蔽词过滤功能')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) => {
-                    setInputs({
-                      ...inputs,
-                      CheckSensitiveEnabled: value,
-                    });
-                  }}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'CheckSensitiveOnPromptEnabled'}
-                  label={t('启用 Prompt 检查')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      CheckSensitiveOnPromptEnabled: value,
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.TextArea
-                  label={t('屏蔽词列表')}
-                  extraText={t('一行一个屏蔽词，不需要符号分割')}
-                  placeholder={t('一行一个屏蔽词，不需要符号分割')}
-                  field={'SensitiveWords'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      SensitiveWords: value,
-                    })
-                  }
-                  style={{ fontFamily: 'JetBrains Mono, Consolas' }}
-                  autosize={{ minRows: 6, maxRows: 12 }}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存屏蔽词过滤设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+          {t('保存屏蔽词过滤设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx b/web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx
index bcfad9ba28d..b0900f19ce5 100644
--- a/web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx
+++ b/web/src/pages/Setting/Operation/SettingsSidebarModulesAdmin.jsx
@@ -19,123 +19,77 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useState, useEffect, useContext } from 'react';
 import { useTranslation } from 'react-i18next';
-import {
-  Card,
-  Form,
-  Button,
-  Switch,
-  Row,
-  Col,
-  Typography,
-} from '@douyinfe/semi-ui';
+import { Card, Button, Switch } from '@heroui/react';
 import { API, showSuccess, showError } from '../../../helpers';
 import { StatusContext } from '../../../context/Status';
 
-const { Text } = Typography;
+const DEFAULT_SIDEBAR_MODULES = {
+  chat: { enabled: true, playground: true, chat: true },
+  console: {
+    enabled: true,
+    detail: true,
+    token: true,
+    log: true,
+    midjourney: true,
+    task: true,
+  },
+  personal: { enabled: true, topup: true, personal: true },
+  admin: {
+    enabled: true,
+    channel: true,
+    models: true,
+    deployment: true,
+    redemption: true,
+    user: true,
+    subscription: true,
+    setting: true,
+  },
+};
+
+function ToggleSwitch({ isSelected, onValueChange, ariaLabel, isDisabled }) {
+  return (
+    <Switch
+      isSelected={!!isSelected}
+      onChange={onValueChange}
+      aria-label={ariaLabel}
+      isDisabled={isDisabled}
+      size='sm'
+    >
+      <Switch.Control>
+        <Switch.Thumb />
+      </Switch.Control>
+    </Switch>
+  );
+}
 
 export default function SettingsSidebarModulesAdmin(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [statusState, statusDispatch] = useContext(StatusContext);
+  const [sidebarModulesAdmin, setSidebarModulesAdmin] = useState(
+    DEFAULT_SIDEBAR_MODULES,
+  );
 
-  // 左侧边栏模块管理状态（管理员全局控制）
-  const [sidebarModulesAdmin, setSidebarModulesAdmin] = useState({
-    chat: {
-      enabled: true,
-      playground: true,
-      chat: true,
-    },
-    console: {
-      enabled: true,
-      detail: true,
-      token: true,
-      log: true,
-      midjourney: true,
-      task: true,
-    },
-    personal: {
-      enabled: true,
-      topup: true,
-      personal: true,
-    },
-    admin: {
-      enabled: true,
-      channel: true,
-      models: true,
-      deployment: true,
-      redemption: true,
-      user: true,
-      subscription: true,
-      setting: true,
-    },
-  });
-
-  // 处理区域级别开关变更
-  function handleSectionChange(sectionKey) {
-    return (checked) => {
-      const newModules = {
-        ...sidebarModulesAdmin,
-        [sectionKey]: {
-          ...sidebarModulesAdmin[sectionKey],
-          enabled: checked,
-        },
-      };
-      setSidebarModulesAdmin(newModules);
-    };
-  }
+  const handleSectionChange = (sectionKey) => (checked) => {
+    setSidebarModulesAdmin((prev) => ({
+      ...prev,
+      [sectionKey]: { ...prev[sectionKey], enabled: checked },
+    }));
+  };
 
-  // 处理功能级别开关变更
-  function handleModuleChange(sectionKey, moduleKey) {
-    return (checked) => {
-      const newModules = {
-        ...sidebarModulesAdmin,
-        [sectionKey]: {
-          ...sidebarModulesAdmin[sectionKey],
-          [moduleKey]: checked,
-        },
-      };
-      setSidebarModulesAdmin(newModules);
-    };
-  }
+  const handleModuleChange = (sectionKey, moduleKey) => (checked) => {
+    setSidebarModulesAdmin((prev) => ({
+      ...prev,
+      [sectionKey]: { ...prev[sectionKey], [moduleKey]: checked },
+    }));
+  };
 
-  // 重置为默认配置
-  function resetSidebarModules() {
-    const defaultModules = {
-      chat: {
-        enabled: true,
-        playground: true,
-        chat: true,
-      },
-      console: {
-        enabled: true,
-        detail: true,
-        token: true,
-        log: true,
-        midjourney: true,
-        task: true,
-      },
-      personal: {
-        enabled: true,
-        topup: true,
-        personal: true,
-      },
-      admin: {
-        enabled: true,
-        channel: true,
-        models: true,
-        deployment: true,
-        redemption: true,
-        user: true,
-        subscription: true,
-        setting: true,
-      },
-    };
-    setSidebarModulesAdmin(defaultModules);
+  const resetSidebarModules = () => {
+    setSidebarModulesAdmin(DEFAULT_SIDEBAR_MODULES);
     showSuccess(t('已重置为默认配置'));
-  }
+  };
 
-  // 保存配置
-  async function onSubmit() {
+  const onSubmit = async () => {
     setLoading(true);
     try {
       const res = await API.put('/api/option/', {
@@ -145,8 +99,6 @@ export default function SettingsSidebarModulesAdmin(props) {
       const { success, message } = res.data;
       if (success) {
         showSuccess(t('保存成功'));
-
-        // 立即更新StatusContext中的状态
         statusDispatch({
           type: 'set',
           payload: {
@@ -154,11 +106,7 @@ export default function SettingsSidebarModulesAdmin(props) {
             SidebarModulesAdmin: JSON.stringify(sidebarModulesAdmin),
           },
         });
-
-        // 刷新父组件状态
-        if (props.refresh) {
-          await props.refresh();
-        }
+        if (props.refresh) await props.refresh();
       } else {
         showError(message);
       }
@@ -167,44 +115,19 @@ export default function SettingsSidebarModulesAdmin(props) {
     } finally {
       setLoading(false);
     }
-  }
+  };
 
   useEffect(() => {
-    // 从 props.options 中获取配置
     if (props.options && props.options.SidebarModulesAdmin) {
       try {
         const modules = JSON.parse(props.options.SidebarModulesAdmin);
-        setSidebarModulesAdmin(modules);
+        setSidebarModulesAdmin({ ...DEFAULT_SIDEBAR_MODULES, ...modules });
       } catch (error) {
-        // 使用默认配置
-        const defaultModules = {
-          chat: { enabled: true, playground: true, chat: true },
-          console: {
-            enabled: true,
-            detail: true,
-            token: true,
-            log: true,
-            midjourney: true,
-            task: true,
-          },
-          personal: { enabled: true, topup: true, personal: true },
-          admin: {
-            enabled: true,
-            channel: true,
-            models: true,
-            deployment: true,
-            redemption: true,
-            user: true,
-            subscription: true,
-            setting: true,
-          },
-        };
-        setSidebarModulesAdmin(defaultModules);
+        setSidebarModulesAdmin(DEFAULT_SIDEBAR_MODULES);
       }
     }
   }, [props.options]);
 
-  // 区域配置数据
   const sectionConfigs = [
     {
       key: 'chat',
@@ -281,158 +204,91 @@ export default function SettingsSidebarModulesAdmin(props) {
   ];
 
   return (
-    <Card>
-      <Form.Section
-        text={t('侧边栏管理（全局控制）')}
-        extraText={t(
-          '全局控制侧边栏区域和功能显示，管理员隐藏的功能用户无法启用',
-        )}
-      >
-        {sectionConfigs.map((section) => (
-          <div key={section.key} style={{ marginBottom: '32px' }}>
-            {/* 区域标题和总开关 */}
-            <div
-              style={{
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-                marginBottom: '16px',
-                padding: '12px 16px',
-                backgroundColor: 'var(--semi-color-fill-0)',
-                borderRadius: '8px',
-                border: '1px solid var(--semi-color-border)',
-              }}
-            >
-              <div>
-                <div
-                  style={{
-                    fontWeight: '600',
-                    fontSize: '16px',
-                    color: 'var(--semi-color-text-0)',
-                    marginBottom: '4px',
-                  }}
-                >
-                  {section.title}
+    <Card className='!rounded-2xl shadow-sm border-0'>
+      <Card.Content className='p-6 space-y-6'>
+        <div>
+          <div className='text-base font-semibold text-foreground'>
+            {t('侧边栏管理（全局控制）')}
+          </div>
+          <div className='mt-1 text-xs text-muted'>
+            {t(
+              '全局控制侧边栏区域和功能显示，管理员隐藏的功能用户无法启用',
+            )}
+          </div>
+        </div>
+
+        {sectionConfigs.map((section) => {
+          const sectionEnabled =
+            !!sidebarModulesAdmin[section.key]?.enabled;
+          return (
+            <div key={section.key} className='space-y-3'>
+              <div className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-surface-muted)] px-4 py-3'>
+                <div className='min-w-0 flex-1'>
+                  <div className='text-sm font-semibold text-foreground'>
+                    {section.title}
+                  </div>
+                  <div className='mt-1 text-xs leading-snug text-muted'>
+                    {section.description}
+                  </div>
                 </div>
-                <Text
-                  type='secondary'
-                  size='small'
-                  style={{
-                    fontSize: '12px',
-                    color: 'var(--semi-color-text-2)',
-                    lineHeight: '1.4',
-                  }}
-                >
-                  {section.description}
-                </Text>
+                <ToggleSwitch
+                  isSelected={sectionEnabled}
+                  onValueChange={handleSectionChange(section.key)}
+                  ariaLabel={section.title}
+                />
               </div>
-              <Switch
-                checked={sidebarModulesAdmin[section.key]?.enabled}
-                onChange={handleSectionChange(section.key)}
-                size='default'
-              />
-            </div>
 
-            {/* 功能模块网格 */}
-            <Row gutter={[16, 16]}>
-              {section.modules.map((module) => (
-                <Col key={module.key} xs={24} sm={12} md={8} lg={6} xl={6}>
-                  <Card
-                    bodyStyle={{ padding: '16px' }}
-                    hoverable
-                    style={{
-                      opacity: sidebarModulesAdmin[section.key]?.enabled
-                        ? 1
-                        : 0.5,
-                      transition: 'opacity 0.2s',
-                    }}
+              <div
+                className={`grid grid-cols-1 gap-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 transition-opacity ${
+                  sectionEnabled ? 'opacity-100' : 'opacity-50'
+                }`}
+              >
+                {section.modules.map((module) => (
+                  <div
+                    key={module.key}
+                    className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4 transition-colors hover:border-primary/40'
                   >
-                    <div
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                        height: '100%',
-                      }}
-                    >
-                      <div style={{ flex: 1, textAlign: 'left' }}>
-                        <div
-                          style={{
-                            fontWeight: '600',
-                            fontSize: '14px',
-                            color: 'var(--semi-color-text-0)',
-                            marginBottom: '4px',
-                          }}
-                        >
-                          {module.title}
-                        </div>
-                        <Text
-                          type='secondary'
-                          size='small'
-                          style={{
-                            fontSize: '12px',
-                            color: 'var(--semi-color-text-2)',
-                            lineHeight: '1.4',
-                            display: 'block',
-                          }}
-                        >
-                          {module.description}
-                        </Text>
+                    <div className='min-w-0 flex-1'>
+                      <div className='text-sm font-semibold text-foreground'>
+                        {module.title}
                       </div>
-                      <div style={{ marginLeft: '16px' }}>
-                        <Switch
-                          checked={
-                            sidebarModulesAdmin[section.key]?.[module.key]
-                          }
-                          onChange={handleModuleChange(section.key, module.key)}
-                          size='default'
-                          disabled={!sidebarModulesAdmin[section.key]?.enabled}
-                        />
+                      <div className='mt-1 text-xs leading-snug text-muted'>
+                        {module.description}
                       </div>
                     </div>
-                  </Card>
-                </Col>
-              ))}
-            </Row>
-          </div>
-        ))}
+                    <ToggleSwitch
+                      isSelected={
+                        !!sidebarModulesAdmin[section.key]?.[module.key]
+                      }
+                      onValueChange={handleModuleChange(
+                        section.key,
+                        module.key,
+                      )}
+                      ariaLabel={module.title}
+                      isDisabled={!sectionEnabled}
+                    />
+                  </div>
+                ))}
+              </div>
+            </div>
+          );
+        })}
 
-        <div
-          style={{
-            display: 'flex',
-            gap: '12px',
-            justifyContent: 'flex-start',
-            alignItems: 'center',
-            paddingTop: '8px',
-            borderTop: '1px solid var(--semi-color-border)',
-          }}
-        >
-          <Button
-            size='default'
-            type='tertiary'
-            onClick={resetSidebarModules}
-            style={{
-              borderRadius: '6px',
-              fontWeight: '500',
-            }}
-          >
+        <div className='flex items-center gap-3 border-t border-[color:var(--app-border)] pt-4'>
+          <Button variant='flat' size='md' onPress={resetSidebarModules}>
             {t('重置为默认')}
           </Button>
           <Button
-            size='default'
-            type='primary'
-            onClick={onSubmit}
-            loading={loading}
-            style={{
-              borderRadius: '6px',
-              fontWeight: '500',
-              minWidth: '100px',
-            }}
+            color='primary'
+            size='md'
+            onPress={onSubmit}
+            isPending={loading}
+            className='min-w-[100px]'
           >
             {t('保存设置')}
           </Button>
         </div>
-      </Form.Section>
+      </Card.Content>
     </Card>
   );
 }
diff --git a/web/src/pages/Setting/Payment/SettingsGeneralPayment.jsx b/web/src/pages/Setting/Payment/SettingsGeneralPayment.jsx
index 995b1c8cee5..93a2af1dc03 100644
--- a/web/src/pages/Setting/Payment/SettingsGeneralPayment.jsx
+++ b/web/src/pages/Setting/Payment/SettingsGeneralPayment.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input } from '@heroui/react';
 import {
   API,
   removeTrailingSlash,
@@ -28,42 +28,84 @@ import {
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
+const DEFAULT_INPUTS = {
+  ServerAddress: '',
+  CustomCallbackAddress: '',
+  TopupGroupRatio: '',
+  PayMethods: '',
+  AmountOptions: '',
+  AmountDiscount: '',
+};
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-primary';
+
+function TextField({ label, value, onChange, placeholder, helper }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type='text'
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        aria-label={label}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function JsonField({ label, value, onChange, placeholder, helper, rows = 4 }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <textarea
+        value={value ?? ''}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        aria-label={label}
+        className={textareaClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export default function SettingsGeneralPayment(props) {
   const { t } = useTranslation();
   const sectionTitle = props.hideSectionTitle ? undefined : t('通用设置');
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    ServerAddress: '',
-    CustomCallbackAddress: '',
-    TopupGroupRatio: '',
-    PayMethods: '',
-    AmountOptions: '',
-    AmountDiscount: '',
-  });
-  const [originInputs, setOriginInputs] = useState({});
-  const formApiRef = useRef(null);
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [originInputs, setOriginInputs] = useState(DEFAULT_INPUTS);
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
 
   useEffect(() => {
-    if (props.options && formApiRef.current) {
-      const currentInputs = {
-        ServerAddress: props.options.ServerAddress || '',
-        CustomCallbackAddress: props.options.CustomCallbackAddress || '',
-        TopupGroupRatio: props.options.TopupGroupRatio || '',
-        PayMethods: props.options.PayMethods || '',
-        AmountOptions: props.options.AmountOptions || '',
-        AmountDiscount: props.options.AmountDiscount || '',
-      };
-      setInputs(currentInputs);
-      setOriginInputs({ ...currentInputs });
-      formApiRef.current.setValues(currentInputs);
-    }
+    if (!props.options) return;
+    const next = {
+      ServerAddress: props.options.ServerAddress || '',
+      CustomCallbackAddress: props.options.CustomCallbackAddress || '',
+      TopupGroupRatio: props.options.TopupGroupRatio || '',
+      PayMethods: props.options.PayMethods || '',
+      AmountOptions: props.options.AmountOptions || '',
+      AmountDiscount: props.options.AmountDiscount || '',
+    };
+    setInputs(next);
+    setOriginInputs({ ...next });
   }, [props.options]);
 
-  const handleFormChange = (values) => {
-    setInputs(values);
-  };
-
-  const submitGeneralSettings = async () => {
+  const submit = async () => {
     if (
       originInputs.TopupGroupRatio !== inputs.TopupGroupRatio &&
       !verifyJSON(inputs.TopupGroupRatio)
@@ -71,7 +113,6 @@ export default function SettingsGeneralPayment(props) {
       showError(t('充值分组倍率不是合法的 JSON 字符串'));
       return;
     }
-
     if (
       originInputs.PayMethods !== inputs.PayMethods &&
       !verifyJSON(inputs.PayMethods)
@@ -79,7 +120,6 @@ export default function SettingsGeneralPayment(props) {
       showError(t('充值方式设置不是合法的 JSON 字符串'));
       return;
     }
-
     if (
       originInputs.AmountOptions !== inputs.AmountOptions &&
       inputs.AmountOptions.trim() !== '' &&
@@ -88,7 +128,6 @@ export default function SettingsGeneralPayment(props) {
       showError(t('自定义充值数量选项不是合法的 JSON 数组'));
       return;
     }
-
     if (
       originInputs.AmountDiscount !== inputs.AmountDiscount &&
       inputs.AmountDiscount.trim() !== '' &&
@@ -134,115 +173,102 @@ export default function SettingsGeneralPayment(props) {
 
       const results = await Promise.all(
         options.map((option) =>
-          API.put('/api/option/', {
-            key: option.key,
-            value: option.value,
-          }),
+          API.put('/api/option/', { key: option.key, value: option.value }),
         ),
       );
 
-      const errorResults = results.filter((res) => !res.data.success);
+      const errorResults = results.filter((res) => !res.data?.success);
       if (errorResults.length === 0) {
         showSuccess(t('更新成功'));
         setOriginInputs({ ...inputs });
-        props.refresh && props.refresh();
+        props.refresh?.();
       } else {
-        errorResults.forEach((res) => {
-          showError(res.data.message);
-        });
+        errorResults.forEach((res) => showError(res.data.message));
       }
     } catch (error) {
       showError(t('更新失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (
-    <Spin spinning={loading}>
-      <Form
-        initValues={inputs}
-        onValueChange={handleFormChange}
-        getFormApi={(api) => (formApiRef.current = api)}
-      >
-        <Form.Section text={sectionTitle}>
-          <Form.Input
-            field='ServerAddress'
-            label={t('服务器地址')}
-            placeholder={'https://yourdomain.com'}
-            style={{ width: '100%' }}
-            extraText={t(
-              '该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置',
-            )}
-          />
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.Input
-                field='CustomCallbackAddress'
-                label={t('回调地址')}
-                placeholder={t('例如：https://yourdomain.com')}
-                extraText={t(
-                  '留空时默认使用服务器地址作为回调地址，填写后将覆盖默认值',
-                )}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='TopupGroupRatio'
-                label={t('充值分组倍率')}
-                placeholder={t('为一个 JSON 文本，键为组名称，值为倍率')}
-                autosize
-              />
-            </Col>
-          </Row>
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='PayMethods'
-                label={t('充值方式设置')}
-                placeholder={t('为一个 JSON 文本')}
-                autosize
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='AmountOptions'
-                label={t('自定义充值数量选项')}
-                placeholder={t(
-                  '为一个 JSON 数组，例如：[10, 20, 50, 100, 200, 500]',
-                )}
-                autosize
-                extraText={t(
-                  '设置用户可选择的充值数量选项，例如：[10, 20, 50, 100, 200, 500]',
-                )}
-              />
-            </Col>
-          </Row>
-          <Row style={{ marginTop: 16 }}>
-            <Col span={24}>
-              <Form.TextArea
-                field='AmountDiscount'
-                label={t('充值金额折扣配置')}
-                placeholder={t(
-                  '为一个 JSON 对象，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
-                )}
-                autosize
-                extraText={t(
-                  '设置不同充值金额对应的折扣，键为充值金额，值为折扣率，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
-                )}
-              />
-            </Col>
-          </Row>
-          <Button onClick={submitGeneralSettings} style={{ marginTop: 16 }}>
-            {t('保存通用设置')}
-          </Button>
-        </Form.Section>
-      </Form>
-    </Spin>
+    <div className='p-6 space-y-6'>
+      {sectionTitle ? (
+        <div>
+          <div className='text-base font-semibold text-foreground'>
+            {sectionTitle}
+          </div>
+        </div>
+      ) : null}
+
+      <TextField
+        label={t('服务器地址')}
+        value={inputs.ServerAddress}
+        onChange={setField('ServerAddress')}
+        placeholder='https://yourdomain.com'
+        helper={t(
+          '该服务器地址将影响支付回调地址以及默认首页展示的地址，请确保正确配置',
+        )}
+      />
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <TextField
+          label={t('回调地址')}
+          value={inputs.CustomCallbackAddress}
+          onChange={setField('CustomCallbackAddress')}
+          placeholder={t('例如：https://yourdomain.com')}
+          helper={t('留空时默认使用服务器地址作为回调地址，填写后将覆盖默认值')}
+        />
+        <JsonField
+          label={t('充值分组倍率')}
+          value={inputs.TopupGroupRatio}
+          onChange={setField('TopupGroupRatio')}
+          placeholder={t('为一个 JSON 文本，键为组名称，值为倍率')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <JsonField
+          label={t('充值方式设置')}
+          value={inputs.PayMethods}
+          onChange={setField('PayMethods')}
+          placeholder={t('为一个 JSON 文本')}
+        />
+        <JsonField
+          label={t('自定义充值数量选项')}
+          value={inputs.AmountOptions}
+          onChange={setField('AmountOptions')}
+          placeholder={t('为一个 JSON 数组，例如：[10, 20, 50, 100, 200, 500]')}
+          helper={t(
+            '设置用户可选择的充值数量选项，例如：[10, 20, 50, 100, 200, 500]',
+          )}
+        />
+      </div>
+
+      <JsonField
+        label={t('充值金额折扣配置')}
+        value={inputs.AmountDiscount}
+        onChange={setField('AmountDiscount')}
+        placeholder={t(
+          '为一个 JSON 对象，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
+        )}
+        helper={t(
+          '设置不同充值金额对应的折扣，键为充值金额，值为折扣率，例如：{"100": 0.95, "200": 0.9, "500": 0.85}',
+        )}
+      />
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={submit}
+          isPending={loading}
+          className='min-w-[100px]'
+        >
+          {t('保存通用设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Payment/SettingsPaymentGateway.jsx b/web/src/pages/Setting/Payment/SettingsPaymentGateway.jsx
index d0398a240a5..384b11e70c5 100644
--- a/web/src/pages/Setting/Payment/SettingsPaymentGateway.jsx
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGateway.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Banner, Button, Form, Row, Col, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input } from '@heroui/react';
 import {
   API,
   removeTrailingSlash,
@@ -28,56 +28,82 @@ import {
 import { useTranslation } from 'react-i18next';
 import { Info } from 'lucide-react';
 
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+function Field({ label, value, onChange, placeholder, type = 'text', helper, step, min, max }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type={type}
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (type === 'number') {
+            onChange(v === '' ? '' : Number(v));
+          } else {
+            onChange(v);
+          }
+        }}
+        placeholder={placeholder}
+        aria-label={label}
+        step={step}
+        min={min}
+        max={max}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+const DEFAULT_INPUTS = {
+  PayAddress: '',
+  EpayId: '',
+  EpayKey: '',
+  Price: 7.3,
+  MinTopUp: 1,
+};
+
 export default function SettingsPaymentGateway(props) {
   const { t } = useTranslation();
   const sectionTitle = props.hideSectionTitle ? undefined : t('易支付设置');
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    PayAddress: '',
-    EpayId: '',
-    EpayKey: '',
-    Price: 7.3,
-    MinTopUp: 1,
-  });
-  const formApiRef = useRef(null);
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
 
   useEffect(() => {
-    if (props.options && formApiRef.current) {
-      const currentInputs = {
-        PayAddress: props.options.PayAddress || '',
-        EpayId: props.options.EpayId || '',
-        EpayKey: props.options.EpayKey || '',
-        Price:
-          props.options.Price !== undefined
-            ? parseFloat(props.options.Price)
-            : 7.3,
-        MinTopUp:
-          props.options.MinTopUp !== undefined
-            ? parseFloat(props.options.MinTopUp)
-            : 1,
-      };
-
-      setInputs(currentInputs);
-      formApiRef.current.setValues(currentInputs);
-    }
+    if (!props.options) return;
+    setInputs({
+      PayAddress: props.options.PayAddress || '',
+      EpayId: props.options.EpayId || '',
+      EpayKey: props.options.EpayKey || '',
+      Price:
+        props.options.Price !== undefined
+          ? parseFloat(props.options.Price)
+          : 7.3,
+      MinTopUp:
+        props.options.MinTopUp !== undefined
+          ? parseFloat(props.options.MinTopUp)
+          : 1,
+    });
   }, [props.options]);
 
-  const handleFormChange = (values) => {
-    setInputs(values);
-  };
-
-  const submitPayAddress = async () => {
-    if (props.options.ServerAddress === '') {
+  const submit = async () => {
+    if (props.options?.ServerAddress === '') {
       showError(t('请先填写服务器地址'));
       return;
     }
-
     setLoading(true);
     try {
       const options = [
         { key: 'PayAddress', value: removeTrailingSlash(inputs.PayAddress) },
       ];
-
       if (inputs.EpayId !== '') {
         options.push({ key: 'EpayId', value: inputs.EpayId });
       }
@@ -92,94 +118,92 @@ export default function SettingsPaymentGateway(props) {
       }
 
       const requestQueue = options.map((opt) =>
-        API.put('/api/option/', {
-          key: opt.key,
-          value: opt.value,
-        }),
+        API.put('/api/option/', { key: opt.key, value: opt.value }),
       );
-
       const results = await Promise.all(requestQueue);
-
-      const errorResults = results.filter((res) => !res.data.success);
+      const errorResults = results.filter((res) => !res.data?.success);
       if (errorResults.length > 0) {
-        errorResults.forEach((res) => {
-          showError(res.data.message);
-        });
+        errorResults.forEach((res) => showError(res.data.message));
       } else {
         showSuccess(t('更新成功'));
-        props.refresh && props.refresh();
+        props.refresh?.();
       }
     } catch (error) {
       showError(t('更新失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (
-    <Spin spinning={loading}>
-      <Form
-        initValues={inputs}
-        onValueChange={handleFormChange}
-        getFormApi={(api) => (formApiRef.current = api)}
-      >
-        <Form.Section text={sectionTitle}>
-          <Banner
-            type='info'
-            icon={<Info size={16} />}
-            description={t(
-              '当前仅支持易支付接口，回调地址请在通用设置中配置。',
-            )}
-            style={{ marginBottom: 16 }}
-          />
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='PayAddress'
-                label={t('支付地址')}
-                placeholder={t('例如：https://yourdomain.com')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='EpayId'
-                label={t('商户 ID')}
-                placeholder={t('例如：0001')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='EpayKey'
-                label={t('API 密钥')}
-                placeholder={t('敏感信息不会发送到前端显示')}
-                type='password'
-              />
-            </Col>
-          </Row>
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.InputNumber
-                field='Price'
-                precision={2}
-                label={t('充值价格（x元/美金）')}
-                placeholder={t('例如：7，就是7元/美金')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.InputNumber
-                field='MinTopUp'
-                label={t('最低充值美元数量')}
-                placeholder={t('例如：2，就是最低充值2$')}
-              />
-            </Col>
-          </Row>
-          <Button onClick={submitPayAddress} style={{ marginTop: 16 }}>
-            {t('更新易支付设置')}
-          </Button>
-        </Form.Section>
-      </Form>
-    </Spin>
+    <div className='p-6 space-y-6'>
+      {sectionTitle ? (
+        <div>
+          <div className='text-base font-semibold text-foreground'>
+            {sectionTitle}
+          </div>
+        </div>
+      ) : null}
+
+      <div className='flex items-start gap-3 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/40 dark:text-sky-200'>
+        <Info size={16} className='mt-0.5 shrink-0' />
+        <div>
+          {t('当前仅支持易支付接口，回调地址请在通用设置中配置。')}
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <Field
+          label={t('支付地址')}
+          value={inputs.PayAddress}
+          onChange={setField('PayAddress')}
+          placeholder={t('例如：https://yourdomain.com')}
+        />
+        <Field
+          label={t('商户 ID')}
+          value={inputs.EpayId}
+          onChange={setField('EpayId')}
+          placeholder={t('例如：0001')}
+        />
+        <Field
+          label={t('API 密钥')}
+          value={inputs.EpayKey}
+          onChange={setField('EpayKey')}
+          placeholder={t('敏感信息不会发送到前端显示')}
+          type='password'
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <Field
+          label={t('充值价格（x元/美金）')}
+          value={inputs.Price}
+          onChange={setField('Price')}
+          placeholder={t('例如：7，就是7元/美金')}
+          type='number'
+          step='0.01'
+        />
+        <Field
+          label={t('最低充值美元数量')}
+          value={inputs.MinTopUp}
+          onChange={setField('MinTopUp')}
+          placeholder={t('例如：2，就是最低充值2$')}
+          type='number'
+          step='0.01'
+        />
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={submit}
+          isPending={loading}
+          className='min-w-[120px]'
+        >
+          {t('更新易支付设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx b/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
index dc1c310ea3a..de275e80c66 100644
--- a/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGatewayCreem.jsx
@@ -16,29 +16,60 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
-  Banner,
   Button,
-  Form,
-  Row,
-  Col,
-  Typography,
-  Spin,
-  Table,
-  Modal,
   Input,
-  InputNumber,
-  Select,
-} from '@douyinfe/semi-ui';
-const { Text } = Typography;
+  Modal,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Switch,
+  useOverlayState,
+} from '@heroui/react';
+import { BookOpen, Plus, Trash2 } from 'lucide-react';
 import { API, showError, showSuccess } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
-import { BookOpen, Plus, Trash2 } from 'lucide-react';
+
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+const selectClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+function Field({ label, value, onChange, placeholder, type = 'text', helper, disabled }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type={type}
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(event) => {
+          const v = event.target.value;
+          if (type === 'number') {
+            onChange(v === '' ? '' : Number(v));
+          } else {
+            onChange(v);
+          }
+        }}
+        placeholder={placeholder}
+        aria-label={label}
+        disabled={disabled}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
 
 export default function SettingsPaymentGatewayCreem(props) {
   const { t } = useTranslation();
   const sectionTitle = props.hideSectionTitle ? undefined : t('Creem 设置');
+
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState({
     CreemApiKey: '',
@@ -46,7 +77,6 @@ export default function SettingsPaymentGatewayCreem(props) {
     CreemProducts: '[]',
     CreemTestMode: false,
   });
-  const [originInputs, setOriginInputs] = useState({});
   const [products, setProducts] = useState([]);
   const [showProductModal, setShowProductModal] = useState(false);
   const [editingProduct, setEditingProduct] = useState(null);
@@ -57,85 +87,62 @@ export default function SettingsPaymentGatewayCreem(props) {
     quota: 0,
     currency: 'USD',
   });
-  const formApiRef = useRef(null);
 
-  useEffect(() => {
-    if (props.options && formApiRef.current) {
-      const currentInputs = {
-        CreemApiKey: props.options.CreemApiKey || '',
-        CreemWebhookSecret: props.options.CreemWebhookSecret || '',
-        CreemProducts: props.options.CreemProducts || '[]',
-        CreemTestMode: props.options.CreemTestMode === 'true',
-      };
-      setInputs(currentInputs);
-      setOriginInputs({ ...currentInputs });
-      formApiRef.current.setValues(currentInputs);
+  const setField = (key) => (value) =>
+    setInputs((prev) => ({ ...prev, [key]: value }));
 
-      // Parse products
-      try {
-        const parsedProducts = JSON.parse(currentInputs.CreemProducts);
-        setProducts(parsedProducts);
-      } catch (e) {
-        setProducts([]);
-      }
+  useEffect(() => {
+    if (!props.options) return;
+    const next = {
+      CreemApiKey: props.options.CreemApiKey || '',
+      CreemWebhookSecret: props.options.CreemWebhookSecret || '',
+      CreemProducts: props.options.CreemProducts || '[]',
+      CreemTestMode: props.options.CreemTestMode === 'true',
+    };
+    setInputs(next);
+    try {
+      const parsedProducts = JSON.parse(next.CreemProducts);
+      setProducts(Array.isArray(parsedProducts) ? parsedProducts : []);
+    } catch (e) {
+      setProducts([]);
     }
   }, [props.options]);
 
-  const handleFormChange = (values) => {
-    setInputs(values);
-  };
-
-  const submitCreemSetting = async () => {
+  const submit = async () => {
     setLoading(true);
     try {
       const options = [];
-
-      if (inputs.CreemApiKey && inputs.CreemApiKey !== '') {
+      if (inputs.CreemApiKey) {
         options.push({ key: 'CreemApiKey', value: inputs.CreemApiKey });
       }
-
-      if (inputs.CreemWebhookSecret && inputs.CreemWebhookSecret !== '') {
+      if (inputs.CreemWebhookSecret) {
         options.push({
           key: 'CreemWebhookSecret',
           value: inputs.CreemWebhookSecret,
         });
       }
-
-      // Save test mode setting
       options.push({
         key: 'CreemTestMode',
         value: inputs.CreemTestMode ? 'true' : 'false',
       });
-
-      // Save products as JSON string
       options.push({ key: 'CreemProducts', value: JSON.stringify(products) });
 
-      // 发送请求
       const requestQueue = options.map((opt) =>
-        API.put('/api/option/', {
-          key: opt.key,
-          value: opt.value,
-        }),
+        API.put('/api/option/', { key: opt.key, value: opt.value }),
       );
-
       const results = await Promise.all(requestQueue);
-
-      // 检查所有请求是否成功
-      const errorResults = results.filter((res) => !res.data.success);
+      const errorResults = results.filter((res) => !res.data?.success);
       if (errorResults.length > 0) {
-        errorResults.forEach((res) => {
-          showError(res.data.message);
-        });
+        errorResults.forEach((res) => showError(res.data?.message));
       } else {
         showSuccess(t('更新成功'));
-        // 更新本地存储的原始值
-        setOriginInputs({ ...inputs });
         props.refresh?.();
       }
     } catch (error) {
       showError(t('更新失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   const openProductModal = (product = null) => {
@@ -181,7 +188,6 @@ export default function SettingsPaymentGatewayCreem(props) {
 
     let newProducts = [...products];
     if (editingProduct) {
-      // 编辑现有产品
       const index = newProducts.findIndex(
         (p) => p.productId === editingProduct.productId,
       );
@@ -189,7 +195,6 @@ export default function SettingsPaymentGatewayCreem(props) {
         newProducts[index] = { ...productForm };
       }
     } else {
-      // 添加新产品
       if (newProducts.find((p) => p.productId === productForm.productId)) {
         showError(t('产品ID已存在'));
         return;
@@ -206,225 +211,308 @@ export default function SettingsPaymentGatewayCreem(props) {
     setProducts(newProducts);
   };
 
-  const columns = [
-    {
-      title: t('产品名称'),
-      dataIndex: 'name',
-      key: 'name',
-    },
-    {
-      title: t('产品ID'),
-      dataIndex: 'productId',
-      key: 'productId',
-    },
-    {
-      title: t('展示价格'),
-      dataIndex: 'price',
-      key: 'price',
-      render: (price, record) =>
-        `${record.currency === 'EUR' ? '€' : '$'}${price}`,
-    },
-    {
-      title: t('充值额度'),
-      dataIndex: 'quota',
-      key: 'quota',
+  const productModalState = useOverlayState({
+    isOpen: showProductModal,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) closeProductModal();
     },
-    {
-      title: t('操作'),
-      key: 'action',
-      render: (_, record) => (
-        <div className='flex gap-2'>
-          <Button
-            type='tertiary'
-            size='small'
-            onClick={() => openProductModal(record)}
-          >
-            {t('编辑')}
-          </Button>
-          <Button
-            type='danger'
-            theme='borderless'
-            size='small'
-            icon={<Trash2 size={14} />}
-            onClick={() => deleteProduct(record.productId)}
-          />
-        </div>
-      ),
-    },
-  ];
+  });
 
   return (
-    <Spin spinning={loading}>
-      <Form
-        initValues={inputs}
-        onValueChange={handleFormChange}
-        getFormApi={(api) => (formApiRef.current = api)}
-      >
-        <Form.Section text={sectionTitle}>
-          <Banner
-            type='info'
-            icon={<BookOpen size={16} />}
-            description={
-              <>
-                {t('Creem 介绍')}
-                <a href='https://creem.io' target='_blank' rel='noreferrer'>
-                  Creem Official Site
-                </a>
-                <br />
-                {t('Creem Setting Tips')}
-              </>
-            }
-            style={{ marginBottom: 16 }}
-          />
+    <div className='p-6 space-y-6'>
+      {sectionTitle ? (
+        <div className='text-base font-semibold text-foreground'>
+          {sectionTitle}
+        </div>
+      ) : null}
 
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='CreemApiKey'
-                label={t('API 密钥')}
-                placeholder={t('Creem API 密钥，敏感信息不显示')}
-                type='password'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='CreemWebhookSecret'
-                label={t('Webhook 签名密钥')}
-                placeholder={t(
-                  '用于验证回调 new-api 的 webhook 请求的密钥，敏感信息不显示',
-                )}
-                type='password'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Switch
-                field='CreemTestMode'
-                label={t('沙盒模式')}
-                extraText={t('启用后将使用 Creem Test Mode')}
-              />
-            </Col>
-          </Row>
+      <div className='flex items-start gap-3 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/40 dark:text-sky-200'>
+        <BookOpen size={16} className='mt-0.5 shrink-0' />
+        <div className='space-y-1'>
+          <div>
+            {t('Creem 介绍')}
+            <a
+              href='https://creem.io'
+              target='_blank'
+              rel='noreferrer'
+              className='ml-1 text-primary underline'
+            >
+              Creem Official Site
+            </a>
+          </div>
+          <div>{t('Creem Setting Tips')}</div>
+        </div>
+      </div>
 
-          <div style={{ marginTop: 24 }}>
-            <div className='flex justify-between items-center mb-4'>
-              <Text strong>{t('产品配置')}</Text>
-              <Button
-                type='primary'
-                icon={<Plus size={16} />}
-                onClick={() => openProductModal()}
-              >
-                {t('添加产品')}
-              </Button>
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <Field
+          label={t('API 密钥')}
+          value={inputs.CreemApiKey}
+          onChange={setField('CreemApiKey')}
+          placeholder={t('Creem API 密钥，敏感信息不显示')}
+          type='password'
+        />
+        <Field
+          label={t('Webhook 签名密钥')}
+          value={inputs.CreemWebhookSecret}
+          onChange={setField('CreemWebhookSecret')}
+          placeholder={t(
+            '用于验证回调 new-api 的 webhook 请求的密钥，敏感信息不显示',
+          )}
+          type='password'
+        />
+        <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+          <div className='min-w-0 flex-1'>
+            <div className='text-sm font-medium text-foreground'>
+              {t('沙盒模式')}
+            </div>
+            <div className='mt-1 text-xs leading-snug text-muted'>
+              {t('启用后将使用 Creem Test Mode')}
             </div>
-
-            <Table
-              columns={columns}
-              dataSource={products}
-              pagination={false}
-              empty={
-                <div className='text-center py-8'>
-                  <Text type='tertiary'>{t('暂无产品配置')}</Text>
-                </div>
-              }
-            />
           </div>
+          <Switch
+            isSelected={!!inputs.CreemTestMode}
+            onChange={setField('CreemTestMode')}
+            aria-label={t('沙盒模式')}
+            size='sm'
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
+        </label>
+      </div>
 
-          <Button onClick={submitCreemSetting} style={{ marginTop: 16 }}>
-            {t('更新 Creem 设置')}
+      <div className='space-y-3'>
+        <div className='flex items-center justify-between'>
+          <div className='text-sm font-semibold text-foreground'>
+            {t('产品配置')}
+          </div>
+          <Button
+            color='primary'
+            size='sm'
+            startContent={<Plus size={14} />}
+            onPress={() => openProductModal()}
+          >
+            {t('添加产品')}
           </Button>
-        </Form.Section>
-      </Form>
+        </div>
 
-      {/* 产品配置模态框 */}
-      <Modal
-        title={editingProduct ? t('编辑产品') : t('添加产品')}
-        visible={showProductModal}
-        onOk={saveProduct}
-        onCancel={closeProductModal}
-        maskClosable={false}
-        size='small'
-        centered
-      >
-        <div className='space-y-4'>
-          <div>
-            <Text strong className='block mb-2'>
-              {t('产品名称')}
-            </Text>
-            <Input
-              value={productForm.name}
-              onChange={(value) =>
-                setProductForm({ ...productForm, name: value })
-              }
-              placeholder={t('例如：基础套餐')}
-              size='large'
-            />
+        {products.length === 0 ? (
+          <div className='rounded-xl border border-dashed border-[color:var(--app-border)] py-10 text-center text-sm text-muted'>
+            {t('暂无产品配置')}
           </div>
-          <div>
-            <Text strong className='block mb-2'>
-              {t('产品ID')}
-            </Text>
-            <Input
-              value={productForm.productId}
-              onChange={(value) =>
-                setProductForm({ ...productForm, productId: value })
-              }
-              placeholder={t('例如：prod_6I8rBerHpPxyoiU9WK4kot')}
-              size='large'
-              disabled={!!editingProduct}
-            />
-          </div>
-          <div>
-            <Text strong className='block mb-2'>
-              {t('货币')}
-            </Text>
-            <Select
-              value={productForm.currency}
-              onChange={(value) =>
-                setProductForm({ ...productForm, currency: value })
-              }
-              size='large'
-              className='w-full'
-            >
-              <Select.Option value='USD'>{t('USD (美元)')}</Select.Option>
-              <Select.Option value='EUR'>{t('EUR (欧元)')}</Select.Option>
-            </Select>
+        ) : (
+          <div className='overflow-hidden rounded-xl border border-[color:var(--app-border)]'>
+            <table className='w-full text-sm'>
+              <thead className='bg-[color:var(--app-background)] text-xs uppercase text-muted'>
+                <tr>
+                  <th className='px-3 py-2 text-left font-semibold'>
+                    {t('产品名称')}
+                  </th>
+                  <th className='px-3 py-2 text-left font-semibold'>
+                    {t('产品ID')}
+                  </th>
+                  <th className='px-3 py-2 text-left font-semibold'>
+                    {t('展示价格')}
+                  </th>
+                  <th className='px-3 py-2 text-left font-semibold'>
+                    {t('充值额度')}
+                  </th>
+                  <th className='w-32 px-3 py-2 text-right font-semibold'>
+                    {t('操作')}
+                  </th>
+                </tr>
+              </thead>
+              <tbody className='divide-y divide-[color:var(--app-border)]'>
+                {products.map((product) => (
+                  <tr key={product.productId}>
+                    <td className='px-3 py-2 font-medium text-foreground'>
+                      {product.name}
+                    </td>
+                    <td className='px-3 py-2 text-xs text-muted'>
+                      {product.productId}
+                    </td>
+                    <td className='px-3 py-2 text-foreground'>
+                      {product.currency === 'EUR' ? '€' : '$'}
+                      {product.price}
+                    </td>
+                    <td className='px-3 py-2 text-foreground'>
+                      {product.quota}
+                    </td>
+                    <td className='px-3 py-2 text-right'>
+                      <div className='inline-flex items-center gap-1'>
+                        <Button
+                          variant='light'
+                          size='sm'
+                          onPress={() => openProductModal(product)}
+                        >
+                          {t('编辑')}
+                        </Button>
+                        <Button
+                          isIconOnly
+                          variant='light'
+                          color='danger'
+                          size='sm'
+                          aria-label={t('删除')}
+                          onPress={() => deleteProduct(product.productId)}
+                        >
+                          <Trash2 size={14} />
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
           </div>
-          <div>
-            <Text strong className='block mb-2'>
-              {t('价格')} (
-              {productForm.currency === 'EUR' ? t('欧元') : t('美元')})
-            </Text>
-            <InputNumber
-              value={productForm.price}
-              onChange={(value) =>
-                setProductForm({ ...productForm, price: value })
-              }
-              placeholder={t('例如：4.99')}
-              min={0.01}
-              precision={2}
-              size='large'
-              className='w-full'
-              defaultValue={4.49}
-            />
-          </div>
-          <div>
-            <Text strong className='block mb-2'>
-              {t('充值额度')}
-            </Text>
-            <InputNumber
-              value={productForm.quota}
-              onChange={(value) =>
-                setProductForm({ ...productForm, quota: value })
-              }
-              placeholder={t('例如：100000')}
-              min={1}
-              precision={0}
-              size='large'
-              className='w-full'
-            />
-          </div>
-        </div>
+        )}
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={submit}
+          isPending={loading}
+          className='min-w-[140px]'
+        >
+          {t('更新 Creem 设置')}
+        </Button>
+      </div>
+
+      <Modal state={productModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='sm' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                {editingProduct ? t('编辑产品') : t('添加产品')}
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('产品名称')}
+                  </div>
+                  <Input
+                    type='text'
+                    value={productForm.name}
+                    onChange={(event) =>
+                      setProductForm({
+                        ...productForm,
+                        name: event.target.value,
+                      })
+                    }
+                    placeholder={t('例如：基础套餐')}
+                    aria-label={t('产品名称')}
+                    className={inputClass}
+                  />
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('产品ID')}
+                  </div>
+                  <Input
+                    type='text'
+                    value={productForm.productId}
+                    onChange={(event) =>
+                      setProductForm({
+                        ...productForm,
+                        productId: event.target.value,
+                      })
+                    }
+                    placeholder={t('例如：prod_6I8rBerHpPxyoiU9WK4kot')}
+                    disabled={!!editingProduct}
+                    aria-label={t('产品ID')}
+                    className={inputClass}
+                  />
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('货币')}
+                  </div>
+                  <select
+                    value={productForm.currency}
+                    onChange={(event) =>
+                      setProductForm({
+                        ...productForm,
+                        currency: event.target.value,
+                      })
+                    }
+                    aria-label={t('货币')}
+                    className={selectClass}
+                  >
+                    <option value='USD'>{t('USD (美元)')}</option>
+                    <option value='EUR'>{t('EUR (欧元)')}</option>
+                  </select>
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('价格')} (
+                    {productForm.currency === 'EUR' ? t('欧元') : t('美元')})
+                  </div>
+                  <Input
+                    type='number'
+                    value={
+                      productForm.price === '' || productForm.price == null
+                        ? ''
+                        : String(productForm.price)
+                    }
+                    onChange={(event) => {
+                      const v = event.target.value;
+                      setProductForm({
+                        ...productForm,
+                        price: v === '' ? 0 : Number(v),
+                      });
+                    }}
+                    placeholder={t('例如：4.99')}
+                    min={0.01}
+                    step={0.01}
+                    aria-label={t('价格')}
+                    className={inputClass}
+                  />
+                </div>
+
+                <div className='space-y-2'>
+                  <div className='text-sm font-medium text-foreground'>
+                    {t('充值额度')}
+                  </div>
+                  <Input
+                    type='number'
+                    value={
+                      productForm.quota === '' || productForm.quota == null
+                        ? ''
+                        : String(productForm.quota)
+                    }
+                    onChange={(event) => {
+                      const v = event.target.value;
+                      setProductForm({
+                        ...productForm,
+                        quota: v === '' ? 0 : Number(v),
+                      });
+                    }}
+                    placeholder={t('例如：100000')}
+                    min={1}
+                    step={1}
+                    aria-label={t('充值额度')}
+                    className={inputClass}
+                  />
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button variant='light' onPress={closeProductModal}>
+                  {t('取消')}
+                </Button>
+                <Button color='primary' onPress={saveProduct}>
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
-    </Spin>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.jsx b/web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.jsx
index c8d3da2e402..38f8605adb1 100644
--- a/web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.jsx
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGatewayStripe.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Banner, Button, Form, Row, Col, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   API,
   removeTrailingSlash,
@@ -28,64 +28,98 @@ import {
 import { useTranslation } from 'react-i18next';
 import { BookOpen, TriangleAlert } from 'lucide-react';
 
-export default function SettingsPaymentGateway(props) {
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary';
+
+function Field({
+  label,
+  value,
+  onChange,
+  placeholder,
+  type = 'text',
+  helper,
+  step,
+}) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type={type}
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(e) => {
+          const v = e.target.value;
+          if (type === 'number') {
+            onChange(v === '' ? '' : Number(v));
+          } else {
+            onChange(v);
+          }
+        }}
+        placeholder={placeholder}
+        aria-label={label}
+        step={step}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+const DEFAULT_INPUTS = {
+  StripeApiSecret: '',
+  StripeWebhookSecret: '',
+  StripePriceId: '',
+  StripeUnitPrice: 8.0,
+  StripeMinTopUp: 1,
+  StripePromotionCodesEnabled: false,
+};
+
+export default function SettingsPaymentGatewayStripe(props) {
   const { t } = useTranslation();
   const sectionTitle = props.hideSectionTitle ? undefined : t('Stripe 设置');
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    StripeApiSecret: '',
-    StripeWebhookSecret: '',
-    StripePriceId: '',
-    StripeUnitPrice: 8.0,
-    StripeMinTopUp: 1,
-    StripePromotionCodesEnabled: false,
-  });
-  const [originInputs, setOriginInputs] = useState({});
-  const formApiRef = useRef(null);
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [originInputs, setOriginInputs] = useState(DEFAULT_INPUTS);
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
 
   useEffect(() => {
-    if (props.options && formApiRef.current) {
-      const currentInputs = {
-        StripeApiSecret: props.options.StripeApiSecret || '',
-        StripeWebhookSecret: props.options.StripeWebhookSecret || '',
-        StripePriceId: props.options.StripePriceId || '',
-        StripeUnitPrice:
-          props.options.StripeUnitPrice !== undefined
-            ? parseFloat(props.options.StripeUnitPrice)
-            : 8.0,
-        StripeMinTopUp:
-          props.options.StripeMinTopUp !== undefined
-            ? parseFloat(props.options.StripeMinTopUp)
-            : 1,
-        StripePromotionCodesEnabled:
-          props.options.StripePromotionCodesEnabled !== undefined
-            ? props.options.StripePromotionCodesEnabled
-            : false,
-      };
-      setInputs(currentInputs);
-      setOriginInputs({ ...currentInputs });
-      formApiRef.current.setValues(currentInputs);
-    }
+    if (!props.options) return;
+    const next = {
+      StripeApiSecret: props.options.StripeApiSecret || '',
+      StripeWebhookSecret: props.options.StripeWebhookSecret || '',
+      StripePriceId: props.options.StripePriceId || '',
+      StripeUnitPrice:
+        props.options.StripeUnitPrice !== undefined
+          ? parseFloat(props.options.StripeUnitPrice)
+          : 8.0,
+      StripeMinTopUp:
+        props.options.StripeMinTopUp !== undefined
+          ? parseFloat(props.options.StripeMinTopUp)
+          : 1,
+      StripePromotionCodesEnabled:
+        props.options.StripePromotionCodesEnabled === true ||
+        props.options.StripePromotionCodesEnabled === 'true',
+    };
+    setInputs(next);
+    setOriginInputs({ ...next });
   }, [props.options]);
 
-  const handleFormChange = (values) => {
-    setInputs(values);
-  };
-
-  const submitStripeSetting = async () => {
-    if (props.options.ServerAddress === '') {
+  const submit = async () => {
+    if (props.options?.ServerAddress === '') {
       showError(t('请先填写服务器地址'));
       return;
     }
-
     setLoading(true);
     try {
       const options = [];
 
-      if (inputs.StripeApiSecret && inputs.StripeApiSecret !== '') {
+      if (inputs.StripeApiSecret) {
         options.push({ key: 'StripeApiSecret', value: inputs.StripeApiSecret });
       }
-      if (inputs.StripeWebhookSecret && inputs.StripeWebhookSecret !== '') {
+      if (inputs.StripeWebhookSecret) {
         options.push({
           key: 'StripeWebhookSecret',
           value: inputs.StripeWebhookSecret,
@@ -94,28 +128,21 @@ export default function SettingsPaymentGateway(props) {
       if (inputs.StripePriceId !== '') {
         options.push({ key: 'StripePriceId', value: inputs.StripePriceId });
       }
-      if (
-        inputs.StripeUnitPrice !== undefined &&
-        inputs.StripeUnitPrice !== null
-      ) {
+      if (inputs.StripeUnitPrice != null) {
         options.push({
           key: 'StripeUnitPrice',
           value: inputs.StripeUnitPrice.toString(),
         });
       }
-      if (
-        inputs.StripeMinTopUp !== undefined &&
-        inputs.StripeMinTopUp !== null
-      ) {
+      if (inputs.StripeMinTopUp != null) {
         options.push({
           key: 'StripeMinTopUp',
           value: inputs.StripeMinTopUp.toString(),
         });
       }
       if (
-        originInputs['StripePromotionCodesEnabled'] !==
-          inputs.StripePromotionCodesEnabled &&
-        inputs.StripePromotionCodesEnabled !== undefined
+        originInputs.StripePromotionCodesEnabled !==
+        inputs.StripePromotionCodesEnabled
       ) {
         options.push({
           key: 'StripePromotionCodesEnabled',
@@ -123,144 +150,155 @@ export default function SettingsPaymentGateway(props) {
         });
       }
 
-      // 发送请求
       const requestQueue = options.map((opt) =>
-        API.put('/api/option/', {
-          key: opt.key,
-          value: opt.value,
-        }),
+        API.put('/api/option/', { key: opt.key, value: opt.value }),
       );
-
       const results = await Promise.all(requestQueue);
-
-      // 检查所有请求是否成功
-      const errorResults = results.filter((res) => !res.data.success);
+      const errorResults = results.filter((res) => !res.data?.success);
       if (errorResults.length > 0) {
-        errorResults.forEach((res) => {
-          showError(res.data.message);
-        });
+        errorResults.forEach((res) => showError(res.data.message));
       } else {
         showSuccess(t('更新成功'));
-        // 更新本地存储的原始值
         setOriginInputs({ ...inputs });
         props.refresh?.();
       }
     } catch (error) {
       showError(t('更新失败'));
+    } finally {
+      setLoading(false);
     }
-    setLoading(false);
   };
 
   return (
-    <Spin spinning={loading}>
-      <Form
-        initValues={inputs}
-        onValueChange={handleFormChange}
-        getFormApi={(api) => (formApiRef.current = api)}
-      >
-        <Form.Section text={sectionTitle}>
-          <Banner
-            type='info'
-            icon={<BookOpen size={16} />}
-            description={
-              <>
-                Stripe 密钥、Webhook 等设置请
-                <a
-                  href='https://dashboard.stripe.com/developers'
-                  target='_blank'
-                  rel='noreferrer'
-                >
-                  点击此处
-                </a>
-                进行设置，建议先在
-                <a
-                  href='https://dashboard.stripe.com/test/developers'
-                  target='_blank'
-                  rel='noreferrer'
-                >
-                  测试环境
-                </a>
-                完成联调。
-                <br />
-                {t('回调地址')}：
-                {props.options.ServerAddress
-                  ? removeTrailingSlash(props.options.ServerAddress)
-                  : t('网站地址')}
-                /api/stripe/webhook
-              </>
-            }
-            style={{ marginBottom: 12 }}
-          />
-          <Banner
-            type='warning'
-            icon={<TriangleAlert size={16} />}
-            description='需要包含事件：checkout.session.completed 和 checkout.session.expired'
-            style={{ marginBottom: 16 }}
-          />
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='StripeApiSecret'
-                label={t('API 密钥')}
-                placeholder={t('例如：sk_xxx 或 rk_xxx，留空表示保持当前不变')}
-                extraText={t(
-                  '保存后不会回显，请填写当前环境对应的 Stripe API 密钥',
-                )}
-                type='password'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='StripeWebhookSecret'
-                label={t('Webhook 签名密钥')}
-                placeholder={t('例如：whsec_xxx，留空表示保持当前不变')}
-                extraText={t('用于校验 Stripe Webhook 签名，保存后不会回显')}
-                type='password'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='StripePriceId'
-                label={t('商品价格 ID')}
-                placeholder={t('例如：price_xxx')}
-                extraText={t('在 Stripe 后台创建价格后获得')}
-              />
-            </Col>
-          </Row>
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
+    <div className='p-6 space-y-6'>
+      {sectionTitle ? (
+        <div>
+          <div className='text-base font-semibold text-foreground'>
+            {sectionTitle}
+          </div>
+        </div>
+      ) : null}
+
+      <div className='space-y-3'>
+        <div className='flex items-start gap-3 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/40 dark:text-sky-200'>
+          <BookOpen size={16} className='mt-0.5 shrink-0' />
+          <div className='space-y-1'>
+            <div>
+              Stripe 密钥、Webhook 等设置请
+              <a
+                href='https://dashboard.stripe.com/developers'
+                target='_blank'
+                rel='noreferrer'
+                className='mx-1 text-primary underline'
+              >
+                点击此处
+              </a>
+              进行设置，建议先在
+              <a
+                href='https://dashboard.stripe.com/test/developers'
+                target='_blank'
+                rel='noreferrer'
+                className='mx-1 text-primary underline'
+              >
+                测试环境
+              </a>
+              完成联调。
+            </div>
+            <div>
+              {t('回调地址')}：
+              {props.options?.ServerAddress
+                ? removeTrailingSlash(props.options.ServerAddress)
+                : t('网站地址')}
+              /api/stripe/webhook
+            </div>
+          </div>
+        </div>
+
+        <div className='flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100'>
+          <TriangleAlert size={16} className='mt-0.5 shrink-0' />
+          <div>
+            {t(
+              '需要包含事件：checkout.session.completed 和 checkout.session.expired',
+            )}
+          </div>
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <Field
+          label={t('API 密钥')}
+          value={inputs.StripeApiSecret}
+          onChange={setField('StripeApiSecret')}
+          placeholder={t('例如：sk_xxx 或 rk_xxx，留空表示保持当前不变')}
+          helper={t('保存后不会回显，请填写当前环境对应的 Stripe API 密钥')}
+          type='password'
+        />
+        <Field
+          label={t('Webhook 签名密钥')}
+          value={inputs.StripeWebhookSecret}
+          onChange={setField('StripeWebhookSecret')}
+          placeholder={t('例如：whsec_xxx，留空表示保持当前不变')}
+          helper={t('用于校验 Stripe Webhook 签名，保存后不会回显')}
+          type='password'
+        />
+        <Field
+          label={t('商品价格 ID')}
+          value={inputs.StripePriceId}
+          onChange={setField('StripePriceId')}
+          placeholder={t('例如：price_xxx')}
+          helper={t('在 Stripe 后台创建价格后获得')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <Field
+          label={t('充值价格（x元/美金）')}
+          value={inputs.StripeUnitPrice}
+          onChange={setField('StripeUnitPrice')}
+          placeholder={t('例如：7，就是7元/美金')}
+          helper={t('按 1 美元对应的站内价格填写')}
+          type='number'
+          step='0.01'
+        />
+        <Field
+          label={t('最低充值美元数量')}
+          value={inputs.StripeMinTopUp}
+          onChange={setField('StripeMinTopUp')}
+          placeholder={t('例如：2，就是最低充值2$')}
+          helper={t('用户单次最少可充值的美元数量')}
+          type='number'
+          step='0.01'
+        />
+        <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+          <div className='min-w-0 flex-1'>
+            <div className='text-sm font-medium text-foreground'>
+              {t('允许在 Stripe 支付中输入促销码')}
+            </div>
+          </div>
+          <Switch
+            isSelected={!!inputs.StripePromotionCodesEnabled}
+            onChange={setField('StripePromotionCodesEnabled')}
+            aria-label={t('允许在 Stripe 支付中输入促销码')}
+            size='sm'
           >
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.InputNumber
-                field='StripeUnitPrice'
-                precision={2}
-                label={t('充值价格（x元/美金）')}
-                placeholder={t('例如：7，就是7元/美金')}
-                extraText={t('按 1 美元对应的站内价格填写')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.InputNumber
-                field='StripeMinTopUp'
-                label={t('最低充值美元数量')}
-                placeholder={t('例如：2，就是最低充值2$')}
-                extraText={t('用户单次最少可充值的美元数量')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Switch
-                field='StripePromotionCodesEnabled'
-                size='default'
-                checkedText='｜'
-                uncheckedText='〇'
-                label={t('允许在 Stripe 支付中输入促销码')}
-              />
-            </Col>
-          </Row>
-          <Button onClick={submitStripeSetting}>{t('更新 Stripe 设置')}</Button>
-        </Form.Section>
-      </Form>
-    </Spin>
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+          </Switch>
+        </label>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={submit}
+          isPending={loading}
+          className='min-w-[120px]'
+        >
+          {t('更新 Stripe 设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffo.jsx b/web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffo.jsx
index 46802820bd1..2475e4fe178 100644
--- a/web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffo.jsx
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffo.jsx
@@ -6,66 +6,151 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import {
-  Banner,
   Button,
-  Form,
-  Row,
-  Col,
-  Typography,
-  Spin,
-  Table,
   Modal,
-  Input,
-  Space,
-} from '@douyinfe/semi-ui';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  Switch,
+  useOverlayState,
+} from '@heroui/react';
+import { BookOpen, TriangleAlert } from 'lucide-react';
 import {
   API,
   removeTrailingSlash,
   showError,
   showSuccess,
 } from '../../../helpers';
-import { useTranslation } from 'react-i18next';
-import { BookOpen, TriangleAlert } from 'lucide-react';
 
-const { Text } = Typography;
 const toBoolean = (value) => value === true || value === 'true';
 
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:cursor-not-allowed disabled:opacity-50';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children, required }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+      {required ? <span className='ml-0.5 text-danger'>*</span> : null}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function InfoBanner({ tone = 'info', icon, children }) {
+  const cls =
+    tone === 'warning'
+      ? 'border-warning/30 bg-warning/5'
+      : 'border-primary/20 bg-primary/5';
+  return (
+    <div
+      className={`flex items-start gap-2 rounded-xl border ${cls} px-3 py-2 text-sm text-foreground`}
+    >
+      {icon ? <span className='mt-0.5 shrink-0'>{icon}</span> : null}
+      <div className='flex-1'>{children}</div>
+    </div>
+  );
+}
+
+function SectionHeader({ title }) {
+  if (!title) return null;
+  return (
+    <div className='border-b border-border pb-2 text-base font-semibold text-foreground'>
+      {title}
+    </div>
+  );
+}
+
+// Mirrors Semi `<Form.Switch checkedText='｜' uncheckedText='〇' label
+// extraText>` row layout: title + description on the left, the switch
+// on the right.
+function SwitchRow({ label, hint, value, onChange }) {
+  return (
+    <div className='flex items-start justify-between gap-3'>
+      <div className='space-y-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {hint ? <div className='text-xs text-muted'>{hint}</div> : null}
+      </div>
+      <Switch
+        isSelected={!!value}
+        onValueChange={onChange}
+        size='md'
+        aria-label={label}
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </div>
+  );
+}
+
+const INITIAL_INPUTS = {
+  WaffoEnabled: false,
+  WaffoApiKey: '',
+  WaffoPrivateKey: '',
+  WaffoPublicCert: '',
+  WaffoSandboxPublicCert: '',
+  WaffoSandboxApiKey: '',
+  WaffoSandboxPrivateKey: '',
+  WaffoSandbox: false,
+  WaffoMerchantId: '',
+  WaffoCurrency: 'USD',
+  WaffoUnitPrice: 1.0,
+  WaffoMinTopUp: 1,
+  WaffoNotifyUrl: '',
+  WaffoReturnUrl: '',
+};
+
 export default function SettingsPaymentGatewayWaffo(props) {
   const { t } = useTranslation();
   const sectionTitle = props.hideSectionTitle ? undefined : t('Waffo 设置');
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    WaffoEnabled: false,
-    WaffoApiKey: '',
-    WaffoPrivateKey: '',
-    WaffoPublicCert: '',
-    WaffoSandboxPublicCert: '',
-    WaffoSandboxApiKey: '',
-    WaffoSandboxPrivateKey: '',
-    WaffoSandbox: false,
-    WaffoMerchantId: '',
-    WaffoCurrency: 'USD',
-    WaffoUnitPrice: 1.0,
-    WaffoMinTopUp: 1,
-    WaffoNotifyUrl: '',
-    WaffoReturnUrl: '',
-  });
-  const formApiRef = useRef(null);
+  const [inputs, setInputs] = useState(INITIAL_INPUTS);
   const iconFileInputRef = useRef(null);
 
+  // Pay-methods table state
+  const [waffoPayMethods, setWaffoPayMethods] = useState([]);
+  const [payMethodModalVisible, setPayMethodModalVisible] = useState(false);
+  const [editingPayMethodIndex, setEditingPayMethodIndex] = useState(-1);
+  const [payMethodForm, setPayMethodForm] = useState({
+    name: '',
+    icon: '',
+    payMethodType: '',
+    payMethodName: '',
+  });
+
+  const payMethodModalState = useOverlayState({
+    isOpen: payMethodModalVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setPayMethodModalVisible(false);
+    },
+  });
+
+  const setField = (key) => (value) => {
+    setInputs((prev) => ({ ...prev, [key]: value }));
+  };
+
   const handleIconFileChange = (e) => {
     const file = e.target.files[0];
     if (!file) return;
@@ -83,78 +168,56 @@ export default function SettingsPaymentGatewayWaffo(props) {
     e.target.value = '';
   };
 
-  // 支付方式列表
-  const [waffoPayMethods, setWaffoPayMethods] = useState([]);
-  // 支付方式弹窗
-  const [payMethodModalVisible, setPayMethodModalVisible] = useState(false);
-  // 当前编辑的索引，-1 表示新增
-  const [editingPayMethodIndex, setEditingPayMethodIndex] = useState(-1);
-  // 弹窗内表单字段的临时状态
-  const [payMethodForm, setPayMethodForm] = useState({
-    name: '',
-    icon: '',
-    payMethodType: '',
-    payMethodName: '',
-  });
-
   useEffect(() => {
-    if (props.options && formApiRef.current) {
-      const currentInputs = {
-        WaffoEnabled: toBoolean(props.options.WaffoEnabled),
-        WaffoApiKey: props.options.WaffoApiKey || '',
-        WaffoPrivateKey: props.options.WaffoPrivateKey || '',
-        WaffoPublicCert: props.options.WaffoPublicCert || '',
-        WaffoSandboxPublicCert: props.options.WaffoSandboxPublicCert || '',
-        WaffoSandboxApiKey: props.options.WaffoSandboxApiKey || '',
-        WaffoSandboxPrivateKey: props.options.WaffoSandboxPrivateKey || '',
-        WaffoSandbox: toBoolean(props.options.WaffoSandbox),
-        WaffoMerchantId: props.options.WaffoMerchantId || '',
-        WaffoCurrency: props.options.WaffoCurrency || 'USD',
-        WaffoUnitPrice: parseFloat(props.options.WaffoUnitPrice) || 1.0,
-        WaffoMinTopUp: parseInt(props.options.WaffoMinTopUp) || 1,
-        WaffoNotifyUrl: props.options.WaffoNotifyUrl || '',
-        WaffoReturnUrl: props.options.WaffoReturnUrl || '',
-      };
-      setInputs(currentInputs);
-      formApiRef.current.setValues(currentInputs);
-
-      // 解析支付方式列表
-      try {
-        const rawPayMethods = props.options.WaffoPayMethods;
-        if (rawPayMethods) {
-          const parsed = JSON.parse(rawPayMethods);
-          if (Array.isArray(parsed)) {
-            setWaffoPayMethods(parsed);
-          }
+    if (!props.options) return;
+    const currentInputs = {
+      WaffoEnabled: toBoolean(props.options.WaffoEnabled),
+      WaffoApiKey: props.options.WaffoApiKey || '',
+      WaffoPrivateKey: props.options.WaffoPrivateKey || '',
+      WaffoPublicCert: props.options.WaffoPublicCert || '',
+      WaffoSandboxPublicCert: props.options.WaffoSandboxPublicCert || '',
+      WaffoSandboxApiKey: props.options.WaffoSandboxApiKey || '',
+      WaffoSandboxPrivateKey: props.options.WaffoSandboxPrivateKey || '',
+      WaffoSandbox: toBoolean(props.options.WaffoSandbox),
+      WaffoMerchantId: props.options.WaffoMerchantId || '',
+      WaffoCurrency: props.options.WaffoCurrency || 'USD',
+      WaffoUnitPrice: parseFloat(props.options.WaffoUnitPrice) || 1.0,
+      WaffoMinTopUp: parseInt(props.options.WaffoMinTopUp) || 1,
+      WaffoNotifyUrl: props.options.WaffoNotifyUrl || '',
+      WaffoReturnUrl: props.options.WaffoReturnUrl || '',
+    };
+    setInputs(currentInputs);
+
+    try {
+      const rawPayMethods = props.options.WaffoPayMethods;
+      if (rawPayMethods) {
+        const parsed = JSON.parse(rawPayMethods);
+        if (Array.isArray(parsed)) {
+          setWaffoPayMethods(parsed);
         }
-      } catch {
-        setWaffoPayMethods([]);
       }
+    } catch {
+      setWaffoPayMethods([]);
     }
   }, [props.options]);
 
-  const handleFormChange = (values) => {
-    setInputs(values);
-  };
-
   const submitWaffoSetting = async () => {
     setLoading(true);
     try {
       const options = [];
-
       options.push({
         key: 'WaffoEnabled',
         value: inputs.WaffoEnabled ? 'true' : 'false',
       });
-
       if (inputs.WaffoApiKey && inputs.WaffoApiKey !== '') {
         options.push({ key: 'WaffoApiKey', value: inputs.WaffoApiKey });
       }
-
       if (inputs.WaffoPrivateKey && inputs.WaffoPrivateKey !== '') {
-        options.push({ key: 'WaffoPrivateKey', value: inputs.WaffoPrivateKey });
+        options.push({
+          key: 'WaffoPrivateKey',
+          value: inputs.WaffoPrivateKey,
+        });
       }
-
       options.push({
         key: 'WaffoPublicCert',
         value: inputs.WaffoPublicCert || '',
@@ -163,14 +226,12 @@ export default function SettingsPaymentGatewayWaffo(props) {
         key: 'WaffoSandboxPublicCert',
         value: inputs.WaffoSandboxPublicCert || '',
       });
-
       if (inputs.WaffoSandboxApiKey && inputs.WaffoSandboxApiKey !== '') {
         options.push({
           key: 'WaffoSandboxApiKey',
           value: inputs.WaffoSandboxApiKey,
         });
       }
-
       if (
         inputs.WaffoSandboxPrivateKey &&
         inputs.WaffoSandboxPrivateKey !== ''
@@ -180,28 +241,26 @@ export default function SettingsPaymentGatewayWaffo(props) {
           value: inputs.WaffoSandboxPrivateKey,
         });
       }
-
       options.push({
         key: 'WaffoSandbox',
         value: inputs.WaffoSandbox ? 'true' : 'false',
       });
-
       options.push({
         key: 'WaffoMerchantId',
         value: inputs.WaffoMerchantId || '',
       });
-      options.push({ key: 'WaffoCurrency', value: inputs.WaffoCurrency || '' });
-
+      options.push({
+        key: 'WaffoCurrency',
+        value: inputs.WaffoCurrency || '',
+      });
       options.push({
         key: 'WaffoUnitPrice',
         value: String(inputs.WaffoUnitPrice || 1.0),
       });
-
       options.push({
         key: 'WaffoMinTopUp',
         value: String(inputs.WaffoMinTopUp || 1),
       });
-
       options.push({
         key: 'WaffoNotifyUrl',
         value: inputs.WaffoNotifyUrl || '',
@@ -210,29 +269,18 @@ export default function SettingsPaymentGatewayWaffo(props) {
         key: 'WaffoReturnUrl',
         value: inputs.WaffoReturnUrl || '',
       });
-
-      // 保存支付方式列表
       options.push({
         key: 'WaffoPayMethods',
         value: JSON.stringify(waffoPayMethods),
       });
 
-      // 发送请求
       const requestQueue = options.map((opt) =>
-        API.put('/api/option/', {
-          key: opt.key,
-          value: opt.value,
-        }),
+        API.put('/api/option/', { key: opt.key, value: opt.value }),
       );
-
       const results = await Promise.all(requestQueue);
-
-      // 检查所有请求是否成功
       const errorResults = results.filter((res) => !res.data.success);
       if (errorResults.length > 0) {
-        errorResults.forEach((res) => {
-          showError(res.data.message);
-        });
+        errorResults.forEach((res) => showError(res.data.message));
       } else {
         showSuccess(t('更新成功'));
         props.refresh?.();
@@ -243,7 +291,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
     setLoading(false);
   };
 
-  // 打开新增弹窗
   const openAddPayMethodModal = () => {
     setEditingPayMethodIndex(-1);
     setPayMethodForm({
@@ -255,7 +302,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
     setPayMethodModalVisible(true);
   };
 
-  // 打开编辑弹窗
   const openEditPayMethodModal = (record, index) => {
     setEditingPayMethodIndex(index);
     setPayMethodForm({
@@ -267,7 +313,6 @@ export default function SettingsPaymentGatewayWaffo(props) {
     setPayMethodModalVisible(true);
   };
 
-  // 确认保存弹窗（新增或编辑）
   const handlePayMethodModalOk = () => {
     if (!payMethodForm.name || payMethodForm.name.trim() === '') {
       showError(t('支付方式名称不能为空'));
@@ -280,10 +325,8 @@ export default function SettingsPaymentGatewayWaffo(props) {
       payMethodName: payMethodForm.payMethodName.trim(),
     };
     if (editingPayMethodIndex === -1) {
-      // 新增
       setWaffoPayMethods([...waffoPayMethods, newMethod]);
     } else {
-      // 编辑
       const updated = [...waffoPayMethods];
       updated[editingPayMethodIndex] = newMethod;
       setWaffoPayMethods(updated);
@@ -291,411 +334,502 @@ export default function SettingsPaymentGatewayWaffo(props) {
     setPayMethodModalVisible(false);
   };
 
-  // 删除支付方式
   const handleDeletePayMethod = (index) => {
-    const updated = waffoPayMethods.filter((_, i) => i !== index);
-    setWaffoPayMethods(updated);
+    setWaffoPayMethods(waffoPayMethods.filter((_, i) => i !== index));
   };
 
-  // 支付方式表格列定义
-  const payMethodColumns = [
-    {
-      title: t('显示名称'),
-      dataIndex: 'name',
-    },
-    {
-      title: t('图标'),
-      dataIndex: 'icon',
-      render: (text) =>
-        text ? (
-          <img
-            src={text}
-            alt='icon'
-            style={{ width: 24, height: 24, objectFit: 'contain' }}
-          />
-        ) : (
-          <Text type='tertiary'>—</Text>
-        ),
-    },
-    {
-      title: t('支付方式类型'),
-      dataIndex: 'payMethodType',
-      render: (text) => text || <Text type='tertiary'>—</Text>,
-    },
-    {
-      title: t('支付方式名称'),
-      dataIndex: 'payMethodName',
-      render: (text) => text || <Text type='tertiary'>—</Text>,
-    },
-    {
-      title: t('操作'),
-      key: 'action',
-      render: (_, record, index) => (
-        <Space>
-          <Button
-            size='small'
-            onClick={() => openEditPayMethodModal(record, index)}
-          >
-            {t('编辑')}
-          </Button>
-          <Button
-            size='small'
-            type='danger'
-            onClick={() => handleDeletePayMethod(index)}
-          >
-            {t('删除')}
-          </Button>
-        </Space>
-      ),
-    },
-  ];
+  const dashSpan = <span className='text-muted'>—</span>;
 
   return (
-    <Spin spinning={loading}>
-      <Form
-        initValues={inputs}
-        onValueChange={handleFormChange}
-        getFormApi={(api) => (formApiRef.current = api)}
-      >
-        <Form.Section text={sectionTitle}>
-          <Banner
-            type='info'
-            icon={<BookOpen size={16} />}
-            description={
-              <>
-                Waffo 密钥、商户和支付方式等设置请
-                <a href='https://waffo.com' target='_blank' rel='noreferrer'>
-                  点击此处
-                </a>
-                进行配置，切换沙盒模式时请同步填写对应环境的密钥。
-                <br />
-                {t('回调地址')}：
-                {props.options.ServerAddress
-                  ? removeTrailingSlash(props.options.ServerAddress)
-                  : t('网站地址')}
-                /api/waffo/webhook
-              </>
-            }
-            style={{ marginBottom: 12 }}
+    <div className='relative space-y-6'>
+      {loading && (
+        <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+          <Spinner color='primary' />
+        </div>
+      )}
+
+      <div className='space-y-4'>
+        <SectionHeader title={sectionTitle} />
+
+        <InfoBanner icon={<BookOpen size={16} className='text-primary' />}>
+          Waffo 密钥、商户和支付方式等设置请
+          <a
+            href='https://waffo.com'
+            target='_blank'
+            rel='noreferrer'
+            className='text-primary underline-offset-2 hover:underline'
+          >
+            点击此处
+          </a>
+          进行配置，切换沙盒模式时请同步填写对应环境的密钥。
+          <br />
+          {t('回调地址')}：
+          {props.options?.ServerAddress
+            ? removeTrailingSlash(props.options.ServerAddress)
+            : t('网站地址')}
+          /api/waffo/webhook
+        </InfoBanner>
+
+        <InfoBanner
+          tone='warning'
+          icon={<TriangleAlert size={16} className='text-warning' />}
+        >
+          {t('请确认商户和所选环境密钥一致。')}
+        </InfoBanner>
+
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+          <SwitchRow
+            label={t('启用 Waffo')}
+            value={inputs.WaffoEnabled}
+            onChange={setField('WaffoEnabled')}
           />
-          <Banner
-            type='warning'
-            icon={<TriangleAlert size={16} />}
-            description={t('请确认商户和所选环境密钥一致。')}
-            style={{ marginBottom: 16 }}
+          <SwitchRow
+            label={t('沙盒模式')}
+            hint={t('用于切换当前下单和回调校验所使用的环境')}
+            value={inputs.WaffoSandbox}
+            onChange={setField('WaffoSandbox')}
           />
-
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Switch
-                field='WaffoEnabled'
-                label={t('启用 Waffo')}
-                size='default'
-                checkedText='｜'
-                uncheckedText='〇'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Switch
-                field='WaffoSandbox'
-                label={t('沙盒模式')}
-                size='default'
-                checkedText='｜'
-                uncheckedText='〇'
-                extraText={t('用于切换当前下单和回调校验所使用的环境')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='WaffoMerchantId'
-                label={t('商户 ID')}
-                placeholder={t('例如：MER_xxx')}
-                extraText={t('当前环境共用同一商户 ID')}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='WaffoApiKey'
-                label={t('API 密钥（生产环境）')}
-                placeholder={t(
-                  '填写后覆盖当前生产环境 API 密钥，留空表示保持当前不变',
-                )}
-                extraText={t('保存后不会回显，请填写生产环境对应的 API 密钥')}
-                type='password'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.TextArea
-                field='WaffoPrivateKey'
-                label={t('API 私钥（生产环境）')}
-                placeholder={t(
-                  '填写后覆盖当前生产环境私钥，留空表示保持当前不变',
-                )}
-                extraText={t('保存后不会回显，请填写生产环境对应的 API 私钥')}
-                type='password'
-                autosize={{ minRows: 3, maxRows: 6 }}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.TextArea
-                field='WaffoPublicCert'
-                label={t('Waffo 公钥（生产环境）')}
-                placeholder={t(
-                  '填写生产环境 Waffo 公钥，Base64 或 PEM 内容均可',
-                )}
-                extraText={t('用于校验生产环境的 Waffo 回调签名')}
-                type='password'
-                autosize={{ minRows: 3, maxRows: 6 }}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='WaffoSandboxApiKey'
-                label={t('API 密钥（测试环境）')}
-                placeholder={t(
-                  '填写后覆盖当前测试环境 API 密钥，留空表示保持当前不变',
-                )}
-                extraText={t('保存后不会回显，请填写测试环境对应的 API 密钥')}
-                type='password'
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.TextArea
-                field='WaffoSandboxPrivateKey'
-                label={t('API 私钥（测试环境）')}
-                placeholder={t(
-                  '填写后覆盖当前测试环境私钥，留空表示保持当前不变',
-                )}
-                extraText={t('保存后不会回显，请填写测试环境对应的 API 私钥')}
-                type='password'
-                autosize={{ minRows: 3, maxRows: 6 }}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.TextArea
-                field='WaffoSandboxPublicCert'
-                label={t('Waffo 公钥（测试环境）')}
-                placeholder={t(
-                  '填写测试环境 Waffo 公钥，Base64 或 PEM 内容均可',
-                )}
-                extraText={t('用于校验测试环境的 Waffo 回调签名')}
-                type='password'
-                autosize={{ minRows: 3, maxRows: 6 }}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='WaffoCurrency'
-                label={t('货币')}
-                placeholder='USD'
-                extraText={t('Waffo 当前使用 USD 结算')}
-                disabled
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.InputNumber
-                field='WaffoUnitPrice'
-                precision={2}
-                label={t('充值价格（x元/美金）')}
-                placeholder={t('例如：7，就是7元/美金')}
-                extraText={t('按 1 美元对应的站内价格填写')}
-                min={0}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.InputNumber
-                field='WaffoMinTopUp'
-                label={t('最低充值美元数量')}
-                placeholder={t('例如：2，就是最低充值2$')}
-                extraText={t('用户单次最少可充值的美元数量')}
-                min={1}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.Input
-                field='WaffoNotifyUrl'
-                label={t('回调地址')}
-                placeholder={t('例如：https://example.com/api/waffo/webhook')}
-                extraText={t('留空则自动使用当前站点的默认回调地址')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.Input
-                field='WaffoReturnUrl'
-                label={t('支付返回地址')}
-                placeholder={t('例如：https://example.com/console/topup')}
-                extraText={t('留空则自动使用当前站点的默认充值页地址')}
-              />
-            </Col>
-          </Row>
-        </Form.Section>
-
-        <Form.Section text={t('支付方式设置')}>
-          <Text type='secondary'>
-            {t(
-              '这里配置 Waffo 下展示给用户的 Card、Apple Pay、Google Pay 等子支付方式。',
-            )}
-          </Text>
-          <div style={{ marginTop: 12, marginBottom: 12 }}>
-            <Button onClick={openAddPayMethodModal}>{t('新增支付方式')}</Button>
+          <div className='space-y-2'>
+            <FieldLabel>{t('商户 ID')}</FieldLabel>
+            <input
+              type='text'
+              value={inputs.WaffoMerchantId}
+              onChange={(event) =>
+                setField('WaffoMerchantId')(event.target.value)
+              }
+              placeholder={t('例如：MER_xxx')}
+              className={inputClass}
+            />
+            <FieldHint>{t('当前环境共用同一商户 ID')}</FieldHint>
           </div>
-          <Table
-            columns={payMethodColumns}
-            dataSource={waffoPayMethods}
-            rowKey={(record, index) => index}
-            pagination={false}
-            size='small'
-            empty={
-              <Text type='tertiary'>{t('暂无支付方式，点击上方按钮新增')}</Text>
-            }
-          />
-          <Button onClick={submitWaffoSetting} style={{ marginTop: 16 }}>
-            {t('更新 Waffo 设置')}
-          </Button>
-        </Form.Section>
-      </Form>
+        </div>
 
-      {/* 新增/编辑支付方式弹窗 */}
-      <Modal
-        title={
-          editingPayMethodIndex === -1 ? t('新增支付方式') : t('编辑支付方式')
-        }
-        visible={payMethodModalVisible}
-        onOk={handlePayMethodModalOk}
-        onCancel={() => setPayMethodModalVisible(false)}
-        okText={t('确定')}
-        cancelText={t('取消')}
-      >
-        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
-          <div>
-            <div style={{ marginBottom: 4 }}>
-              <Text strong>{t('显示名称')}</Text>
-              <span
-                style={{ color: 'var(--semi-color-danger)', marginLeft: 4 }}
-              >
-                *
-              </span>
-            </div>
-            <Input
-              value={payMethodForm.name}
-              onChange={(val) =>
-                setPayMethodForm({ ...payMethodForm, name: val })
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+          <div className='space-y-2'>
+            <FieldLabel>{t('API 密钥（生产环境）')}</FieldLabel>
+            <input
+              type='password'
+              value={inputs.WaffoApiKey}
+              onChange={(event) => setField('WaffoApiKey')(event.target.value)}
+              placeholder={t(
+                '填写后覆盖当前生产环境 API 密钥，留空表示保持当前不变',
+              )}
+              className={inputClass}
+            />
+            <FieldHint>
+              {t('保存后不会回显，请填写生产环境对应的 API 密钥')}
+            </FieldHint>
+          </div>
+          <div className='space-y-2'>
+            <FieldLabel>{t('API 私钥（生产环境）')}</FieldLabel>
+            <textarea
+              rows={4}
+              value={inputs.WaffoPrivateKey}
+              onChange={(event) =>
+                setField('WaffoPrivateKey')(event.target.value)
               }
-              placeholder={t('例如：Credit Card')}
+              placeholder={t(
+                '填写后覆盖当前生产环境私钥，留空表示保持当前不变',
+              )}
+              className={textareaClass}
             />
-            <Text type='tertiary' size='small'>
-              {t('用户在充值页面看到的支付方式名称，例如：Credit Card')}
-            </Text>
+            <FieldHint>
+              {t('保存后不会回显，请填写生产环境对应的 API 私钥')}
+            </FieldHint>
           </div>
-          <div>
-            <div style={{ marginBottom: 4 }}>
-              <Text strong>{t('图标')}</Text>
-            </div>
-            <Space align='center'>
-              {payMethodForm.icon && (
-                <img
-                  src={payMethodForm.icon}
-                  alt='preview'
-                  style={{
-                    width: 32,
-                    height: 32,
-                    objectFit: 'contain',
-                    border: '1px solid var(--semi-color-border)',
-                    borderRadius: 4,
-                  }}
-                />
+          <div className='space-y-2'>
+            <FieldLabel>{t('Waffo 公钥（生产环境）')}</FieldLabel>
+            <textarea
+              rows={4}
+              value={inputs.WaffoPublicCert}
+              onChange={(event) =>
+                setField('WaffoPublicCert')(event.target.value)
+              }
+              placeholder={t(
+                '填写生产环境 Waffo 公钥，Base64 或 PEM 内容均可',
               )}
-              <input
-                type='file'
-                accept='image/*'
-                ref={iconFileInputRef}
-                style={{ display: 'none' }}
-                onChange={handleIconFileChange}
-              />
-              <Button
-                size='small'
-                onClick={() => iconFileInputRef.current?.click()}
-              >
-                {payMethodForm.icon ? t('重新上传') : t('上传图片')}
-              </Button>
-              {payMethodForm.icon && (
-                <Button
-                  size='small'
-                  type='danger'
-                  onClick={() =>
-                    setPayMethodForm((prev) => ({ ...prev, icon: '' }))
-                  }
-                >
-                  {t('清除')}
-                </Button>
+              className={textareaClass}
+            />
+            <FieldHint>{t('用于校验生产环境的 Waffo 回调签名')}</FieldHint>
+          </div>
+        </div>
+
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+          <div className='space-y-2'>
+            <FieldLabel>{t('API 密钥（测试环境）')}</FieldLabel>
+            <input
+              type='password'
+              value={inputs.WaffoSandboxApiKey}
+              onChange={(event) =>
+                setField('WaffoSandboxApiKey')(event.target.value)
+              }
+              placeholder={t(
+                '填写后覆盖当前测试环境 API 密钥，留空表示保持当前不变',
               )}
-            </Space>
-            <div>
-              <Text type='tertiary' size='small'>
-                {t('上传 PNG/JPG/SVG 图片，建议尺寸 ≤ 128×128px')}
-              </Text>
-            </div>
+              className={inputClass}
+            />
+            <FieldHint>
+              {t('保存后不会回显，请填写测试环境对应的 API 密钥')}
+            </FieldHint>
           </div>
-          <div>
-            <div style={{ marginBottom: 4 }}>
-              <Text strong>{t('支付方式类型')}</Text>
-            </div>
-            <Input
-              value={payMethodForm.payMethodType}
-              onChange={(val) =>
-                setPayMethodForm({ ...payMethodForm, payMethodType: val })
+          <div className='space-y-2'>
+            <FieldLabel>{t('API 私钥（测试环境）')}</FieldLabel>
+            <textarea
+              rows={4}
+              value={inputs.WaffoSandboxPrivateKey}
+              onChange={(event) =>
+                setField('WaffoSandboxPrivateKey')(event.target.value)
               }
-              placeholder='CREDITCARD,DEBITCARD'
-              maxLength={64}
+              placeholder={t(
+                '填写后覆盖当前测试环境私钥，留空表示保持当前不变',
+              )}
+              className={textareaClass}
             />
-            <Text type='tertiary' size='small'>
-              {t(
-                'Waffo API 参数，可空，例如：CREDITCARD,DEBITCARD（最多64位）',
+            <FieldHint>
+              {t('保存后不会回显，请填写测试环境对应的 API 私钥')}
+            </FieldHint>
+          </div>
+          <div className='space-y-2'>
+            <FieldLabel>{t('Waffo 公钥（测试环境）')}</FieldLabel>
+            <textarea
+              rows={4}
+              value={inputs.WaffoSandboxPublicCert}
+              onChange={(event) =>
+                setField('WaffoSandboxPublicCert')(event.target.value)
+              }
+              placeholder={t(
+                '填写测试环境 Waffo 公钥，Base64 或 PEM 内容均可',
               )}
-            </Text>
+              className={textareaClass}
+            />
+            <FieldHint>{t('用于校验测试环境的 Waffo 回调签名')}</FieldHint>
+          </div>
+        </div>
+
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+          <div className='space-y-2'>
+            <FieldLabel>{t('货币')}</FieldLabel>
+            <input
+              type='text'
+              value={inputs.WaffoCurrency}
+              disabled
+              placeholder='USD'
+              className={inputClass}
+            />
+            <FieldHint>{t('Waffo 当前使用 USD 结算')}</FieldHint>
+          </div>
+          <div className='space-y-2'>
+            <FieldLabel>{t('充值价格（x元/美金）')}</FieldLabel>
+            <input
+              type='number'
+              step='0.01'
+              min={0}
+              value={inputs.WaffoUnitPrice}
+              onChange={(event) => {
+                const raw = event.target.value;
+                setField('WaffoUnitPrice')(raw === '' ? '' : Number(raw));
+              }}
+              placeholder={t('例如：7，就是7元/美金')}
+              className={inputClass}
+            />
+            <FieldHint>{t('按 1 美元对应的站内价格填写')}</FieldHint>
+          </div>
+          <div className='space-y-2'>
+            <FieldLabel>{t('最低充值美元数量')}</FieldLabel>
+            <input
+              type='number'
+              min={1}
+              value={inputs.WaffoMinTopUp}
+              onChange={(event) => {
+                const raw = event.target.value;
+                setField('WaffoMinTopUp')(raw === '' ? '' : Number(raw));
+              }}
+              placeholder={t('例如：2，就是最低充值2$')}
+              className={inputClass}
+            />
+            <FieldHint>{t('用户单次最少可充值的美元数量')}</FieldHint>
+          </div>
+        </div>
+
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          <div className='space-y-2'>
+            <FieldLabel>{t('回调地址')}</FieldLabel>
+            <input
+              type='text'
+              value={inputs.WaffoNotifyUrl}
+              onChange={(event) =>
+                setField('WaffoNotifyUrl')(event.target.value)
+              }
+              placeholder={t(
+                '例如：https://example.com/api/waffo/webhook',
+              )}
+              className={inputClass}
+            />
+            <FieldHint>{t('留空则自动使用当前站点的默认回调地址')}</FieldHint>
           </div>
-          <div>
-            <div style={{ marginBottom: 4 }}>
-              <Text strong>{t('支付方式名称')}</Text>
-            </div>
-            <Input
-              value={payMethodForm.payMethodName}
-              onChange={(val) =>
-                setPayMethodForm({ ...payMethodForm, payMethodName: val })
+          <div className='space-y-2'>
+            <FieldLabel>{t('支付返回地址')}</FieldLabel>
+            <input
+              type='text'
+              value={inputs.WaffoReturnUrl}
+              onChange={(event) =>
+                setField('WaffoReturnUrl')(event.target.value)
               }
-              placeholder={t('可空')}
-              maxLength={64}
+              placeholder={t('例如：https://example.com/console/topup')}
+              className={inputClass}
             />
-            <Text type='tertiary' size='small'>
-              {t('Waffo API 参数，可空（最多64位）')}
-            </Text>
+            <FieldHint>
+              {t('留空则自动使用当前站点的默认充值页地址')}
+            </FieldHint>
           </div>
         </div>
+      </div>
+
+      <div className='space-y-3'>
+        <SectionHeader title={t('支付方式设置')} />
+
+        <div className='text-sm text-muted'>
+          {t(
+            '这里配置 Waffo 下展示给用户的 Card、Apple Pay、Google Pay 等子支付方式。',
+          )}
+        </div>
+
+        <div>
+          <Button onPress={openAddPayMethodModal}>
+            {t('新增支付方式')}
+          </Button>
+        </div>
+
+        <div className='overflow-x-auto rounded-xl border border-border'>
+          <table className='w-full text-sm'>
+            <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+              <tr>
+                <th className='px-4 py-2 text-left font-medium'>
+                  {t('显示名称')}
+                </th>
+                <th className='px-4 py-2 text-left font-medium'>
+                  {t('图标')}
+                </th>
+                <th className='px-4 py-2 text-left font-medium'>
+                  {t('支付方式类型')}
+                </th>
+                <th className='px-4 py-2 text-left font-medium'>
+                  {t('支付方式名称')}
+                </th>
+                <th className='w-[180px] px-4 py-2 text-left font-medium'>
+                  {t('操作')}
+                </th>
+              </tr>
+            </thead>
+            <tbody className='divide-y divide-border'>
+              {waffoPayMethods.length === 0 ? (
+                <tr>
+                  <td
+                    colSpan={5}
+                    className='px-4 py-8 text-center text-sm text-muted'
+                  >
+                    {t('暂无支付方式，点击上方按钮新增')}
+                  </td>
+                </tr>
+              ) : (
+                waffoPayMethods.map((record, index) => (
+                  <tr
+                    key={index}
+                    className='bg-background hover:bg-surface-secondary/60'
+                  >
+                    <td className='px-4 py-3 align-middle text-foreground'>
+                      {record.name || dashSpan}
+                    </td>
+                    <td className='px-4 py-3 align-middle'>
+                      {record.icon ? (
+                        <img
+                          src={record.icon}
+                          alt='icon'
+                          className='h-6 w-6 object-contain'
+                        />
+                      ) : (
+                        dashSpan
+                      )}
+                    </td>
+                    <td className='px-4 py-3 align-middle text-foreground'>
+                      {record.payMethodType || dashSpan}
+                    </td>
+                    <td className='px-4 py-3 align-middle text-foreground'>
+                      {record.payMethodName || dashSpan}
+                    </td>
+                    <td className='px-4 py-3 align-middle'>
+                      <div className='flex gap-2'>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          onPress={() =>
+                            openEditPayMethodModal(record, index)
+                          }
+                        >
+                          {t('编辑')}
+                        </Button>
+                        <Button
+                          size='sm'
+                          variant='flat'
+                          color='danger'
+                          onPress={() => handleDeletePayMethod(index)}
+                        >
+                          {t('删除')}
+                        </Button>
+                      </div>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+
+        <div>
+          <Button color='primary' onPress={submitWaffoSetting}>
+            {t('更新 Waffo 设置')}
+          </Button>
+        </div>
+      </div>
+
+      {/* 新增/编辑支付方式弹窗 */}
+      <Modal state={payMethodModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='lg' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <span>
+                  {editingPayMethodIndex === -1
+                    ? t('新增支付方式')
+                    : t('编辑支付方式')}
+                </span>
+              </ModalHeader>
+              <ModalBody className='space-y-4 px-6 py-5'>
+                <div className='space-y-2'>
+                  <FieldLabel required>{t('显示名称')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={payMethodForm.name}
+                    onChange={(event) =>
+                      setPayMethodForm((prev) => ({
+                        ...prev,
+                        name: event.target.value,
+                      }))
+                    }
+                    placeholder={t('例如：Credit Card')}
+                    className={inputClass}
+                  />
+                  <FieldHint>
+                    {t(
+                      '用户在充值页面看到的支付方式名称，例如：Credit Card',
+                    )}
+                  </FieldHint>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('图标')}</FieldLabel>
+                  <div className='flex flex-wrap items-center gap-2'>
+                    {payMethodForm.icon && (
+                      <img
+                        src={payMethodForm.icon}
+                        alt='preview'
+                        className='h-8 w-8 rounded border border-border object-contain'
+                      />
+                    )}
+                    <input
+                      type='file'
+                      accept='image/*'
+                      ref={iconFileInputRef}
+                      className='hidden'
+                      onChange={handleIconFileChange}
+                    />
+                    <Button
+                      size='sm'
+                      variant='flat'
+                      onPress={() => iconFileInputRef.current?.click()}
+                    >
+                      {payMethodForm.icon
+                        ? t('重新上传')
+                        : t('上传图片')}
+                    </Button>
+                    {payMethodForm.icon && (
+                      <Button
+                        size='sm'
+                        variant='flat'
+                        color='danger'
+                        onPress={() =>
+                          setPayMethodForm((prev) => ({
+                            ...prev,
+                            icon: '',
+                          }))
+                        }
+                      >
+                        {t('清除')}
+                      </Button>
+                    )}
+                  </div>
+                  <FieldHint>
+                    {t('上传 PNG/JPG/SVG 图片，建议尺寸 ≤ 128×128px')}
+                  </FieldHint>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('支付方式类型')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={payMethodForm.payMethodType}
+                    onChange={(event) =>
+                      setPayMethodForm((prev) => ({
+                        ...prev,
+                        payMethodType: event.target.value,
+                      }))
+                    }
+                    placeholder='CREDITCARD,DEBITCARD'
+                    maxLength={64}
+                    className={inputClass}
+                  />
+                  <FieldHint>
+                    {t(
+                      'Waffo API 参数，可空，例如：CREDITCARD,DEBITCARD（最多64位）',
+                    )}
+                  </FieldHint>
+                </div>
+
+                <div className='space-y-2'>
+                  <FieldLabel>{t('支付方式名称')}</FieldLabel>
+                  <input
+                    type='text'
+                    value={payMethodForm.payMethodName}
+                    onChange={(event) =>
+                      setPayMethodForm((prev) => ({
+                        ...prev,
+                        payMethodName: event.target.value,
+                      }))
+                    }
+                    placeholder={t('可空')}
+                    maxLength={64}
+                    className={inputClass}
+                  />
+                  <FieldHint>
+                    {t('Waffo API 参数，可空（最多64位）')}
+                  </FieldHint>
+                </div>
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button
+                  variant='light'
+                  onPress={() => setPayMethodModalVisible(false)}
+                >
+                  {t('取消')}
+                </Button>
+                <Button color='primary' onPress={handlePayMethodModalOk}>
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
-    </Spin>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake.jsx b/web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake.jsx
index 202576dff46..b4f2ef1ddb1 100644
--- a/web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake.jsx
+++ b/web/src/pages/Setting/Payment/SettingsPaymentGatewayWaffoPancake.jsx
@@ -17,8 +17,9 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useRef, useState } from 'react';
-import { Banner, Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
+import { BookOpen, TriangleAlert } from 'lucide-react';
 import {
   API,
   removeTrailingSlash,
@@ -26,7 +27,6 @@ import {
   showSuccess,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
-import { BookOpen, TriangleAlert } from 'lucide-react';
 
 const defaultInputs = {
   WaffoPancakeEnabled: false,
@@ -45,6 +45,83 @@ const defaultInputs = {
 
 const toBoolean = (value) => value === true || value === 'true';
 
+const inputClass =
+  'h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+function Field({ label, value, onChange, placeholder, type = 'text', helper, step }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <Input
+        type={type}
+        value={value === '' || value == null ? '' : String(value)}
+        onChange={(event) => {
+          const v = event.target.value;
+          if (type === 'number') {
+            onChange(v === '' ? '' : Number(v));
+          } else {
+            onChange(v);
+          }
+        }}
+        placeholder={placeholder}
+        step={step}
+        aria-label={label}
+        className={inputClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function TextAreaField({ label, value, onChange, placeholder, helper, rows = 4, type }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <textarea
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        aria-label={label}
+        // For textareas with secret content we render as type=text so users can verify;
+        // upstream label already says "保存后不会回显".
+        data-secret={type === 'password' ? 'true' : undefined}
+        className={textareaClass}
+      />
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
+function ToggleRow({ label, value, onChange, helper }) {
+  return (
+    <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+      <div className='min-w-0 flex-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {helper ? (
+          <div className='mt-1 text-xs leading-snug text-muted'>{helper}</div>
+        ) : null}
+      </div>
+      <Switch
+        isSelected={!!value}
+        onChange={onChange}
+        aria-label={label}
+        size='sm'
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </label>
+  );
+}
+
 export default function SettingsPaymentGatewayWaffoPancake(props) {
   const { t } = useTranslation();
   const sectionTitle = props.hideSectionTitle
@@ -52,12 +129,13 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
     : t('Waffo Pancake 设置');
   const [loading, setLoading] = useState(false);
   const [inputs, setInputs] = useState(defaultInputs);
-  const formApiRef = useRef(null);
 
-  useEffect(() => {
-    if (!props.options || !formApiRef.current) return;
+  const setField = (key) => (value) =>
+    setInputs((prev) => ({ ...prev, [key]: value }));
 
-    const currentInputs = {
+  useEffect(() => {
+    if (!props.options) return;
+    setInputs({
       WaffoPancakeEnabled: toBoolean(props.options.WaffoPancakeEnabled),
       WaffoPancakeSandbox: toBoolean(props.options.WaffoPancakeSandbox),
       WaffoPancakeMerchantID: props.options.WaffoPancakeMerchantID || '',
@@ -78,23 +156,11 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
         props.options.WaffoPancakeMinTopUp !== undefined
           ? parseFloat(props.options.WaffoPancakeMinTopUp)
           : 1,
-    };
-
-    setInputs(currentInputs);
-    formApiRef.current.setValues(currentInputs);
+    });
   }, [props.options]);
 
-  const handleFormChange = (values) => {
-    setInputs(values);
-  };
-
   const submitWaffoPancakeSetting = async () => {
-    const values = {
-      ...inputs,
-      ...(formApiRef.current?.getValues?.() || {}),
-    };
-    values.WaffoPancakeEnabled = toBoolean(values.WaffoPancakeEnabled);
-    values.WaffoPancakeSandbox = toBoolean(values.WaffoPancakeSandbox);
+    const values = inputs;
     const currentWebhookField = values.WaffoPancakeSandbox
       ? 'WaffoPancakeWebhookTestKey'
       : 'WaffoPancakeWebhookPublicKey';
@@ -102,21 +168,18 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
       ? t('Webhook 公钥（测试环境）')
       : t('Webhook 公钥（生产环境）');
 
-      if (values.WaffoPancakeEnabled && !values.WaffoPancakeMerchantID.trim()) {
+    if (values.WaffoPancakeEnabled && !values.WaffoPancakeMerchantID.trim()) {
       showError(t('请输入商户 ID'));
       return;
     }
-
     if (values.WaffoPancakeEnabled && !values.WaffoPancakeStoreID.trim()) {
       showError(t('请输入 Store ID'));
       return;
     }
-
     if (values.WaffoPancakeEnabled && !values.WaffoPancakeProductID.trim()) {
       showError(t('请输入 Product ID'));
       return;
     }
-
     if (
       values.WaffoPancakeEnabled &&
       !String(values[currentWebhookField] || '').trim()
@@ -124,7 +187,6 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
       showError(currentWebhookLabel);
       return;
     }
-
     if (
       values.WaffoPancakeEnabled &&
       Number(values.WaffoPancakeUnitPrice) <= 0
@@ -132,7 +194,6 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
       showError(t('充值价格必须大于 0'));
       return;
     }
-
     if (values.WaffoPancakeEnabled && Number(values.WaffoPancakeMinTopUp) < 1) {
       showError(t('最低充值美元数量必须大于 0'));
       return;
@@ -153,10 +214,7 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
           key: 'WaffoPancakeMerchantID',
           value: values.WaffoPancakeMerchantID || '',
         },
-        {
-          key: 'WaffoPancakeStoreID',
-          value: values.WaffoPancakeStoreID || '',
-        },
+        { key: 'WaffoPancakeStoreID', value: values.WaffoPancakeStoreID || '' },
         {
           key: 'WaffoPancakeProductID',
           value: values.WaffoPancakeProductID || '',
@@ -185,14 +243,12 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
           value: values.WaffoPancakePrivateKey,
         });
       }
-
       if ((values.WaffoPancakeWebhookPublicKey || '').trim()) {
         options.push({
           key: 'WaffoPancakeWebhookPublicKey',
           value: values.WaffoPancakeWebhookPublicKey,
         });
       }
-
       if ((values.WaffoPancakeWebhookTestKey || '').trim()) {
         options.push({
           key: 'WaffoPancakeWebhookTestKey',
@@ -202,19 +258,15 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
 
       const results = await Promise.all(
         options.map((opt) =>
-          API.put('/api/option/', {
-            key: opt.key,
-            value: opt.value,
-          }),
+          API.put('/api/option/', { key: opt.key, value: opt.value }),
         ),
       );
 
-      const errorResults = results.filter((res) => !res.data.success);
+      const errorResults = results.filter((res) => !res.data?.success);
       if (errorResults.length > 0) {
-        errorResults.forEach((res) => showError(res.data.message));
+        errorResults.forEach((res) => showError(res.data?.message));
         return;
       }
-
       showSuccess(t('更新成功'));
       props.refresh?.();
     } catch (error) {
@@ -225,187 +277,165 @@ export default function SettingsPaymentGatewayWaffoPancake(props) {
   };
 
   return (
-    <Spin spinning={loading}>
-      <Form
-        initValues={inputs}
-        onValueChange={handleFormChange}
-        getFormApi={(api) => (formApiRef.current = api)}
-      >
-        <Form.Section text={sectionTitle}>
-          <Banner
-            type='info'
-            icon={<BookOpen size={16} />}
-            description={
-              <>
-                Waffo Pancake 的商户、商品和签名密钥请
-                <a
-                  href='https://docs.waffo.ai'
-                  target='_blank'
-                  rel='noreferrer'
-                >
-                  点击此处
-                </a>
-                获取，建议先在测试环境完成联调。
-                <br />
-                {t('回调地址')}：
-                {props.options.ServerAddress
-                  ? removeTrailingSlash(props.options.ServerAddress)
-                  : t('网站地址')}
-                /api/waffo-pancake/webhook
-              </>
-            }
-            style={{ marginBottom: 12 }}
-          />
-          <Banner
-            type='warning'
-            icon={<TriangleAlert size={16} />}
-            description={t(
-              '请确认 Merchant、Store、Product 和所选环境密钥一致。',
-            )}
-            style={{ marginBottom: 16 }}
-          />
-          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}>
-            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-              <Form.Switch
-                field='WaffoPancakeEnabled'
-                label={t('启用 Waffo Pancake')}
-                checkedText='｜'
-                uncheckedText='〇'
-              />
-            </Col>
-            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-              <Form.Switch
-                field='WaffoPancakeSandbox'
-                label={t('沙盒模式')}
-                checkedText='｜'
-                uncheckedText='〇'
-                extraText={t('用于切换当前下单和回调校验所使用的环境')}
-              />
-            </Col>
-            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='WaffoPancakeCurrency'
-                label={t('货币')}
-                placeholder='USD'
-                extraText={t('默认使用 USD 结算')}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='WaffoPancakeMerchantID'
-                label={t('商户 ID')}
-                placeholder={t('例如：MER_xxx')}
-                extraText={t('请填写当前环境对应的商户 ID')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='WaffoPancakeStoreID'
-                label={t('Store ID')}
-                placeholder={t('例如：STO_xxx')}
-                extraText={t('请填写当前环境对应的 Store ID')}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={8} lg={8} xl={8}>
-              <Form.Input
-                field='WaffoPancakeProductID'
-                label={t('Product ID')}
-                placeholder={t('例如：PROD_xxx')}
-                extraText={t('请填写当前环境对应的 Product ID')}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='WaffoPancakePrivateKey'
-                label={t('API 私钥')}
-                placeholder={t('填写后覆盖当前私钥，留空表示保持当前不变')}
-                extraText={t('保存后不会回显，请填写当前环境对应的 API 私钥')}
-                type='password'
-                autosize={{ minRows: 4, maxRows: 8 }}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.Input
-                field='WaffoPancakeReturnURL'
-                label={t('支付返回地址')}
-                placeholder={t('例如：https://example.com/console/topup')}
-                extraText={t('留空则自动使用当前站点的默认充值页地址')}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='WaffoPancakeWebhookPublicKey'
-                label={t('Webhook 公钥（生产环境）')}
-                placeholder={t(
-                  '填写后覆盖当前生产环境 Webhook 公钥，留空表示保持当前不变',
-                )}
-                extraText={t('用于校验生产环境的 Waffo Pancake Webhook 签名')}
-                type='password'
-                autosize={{ minRows: 4, maxRows: 8 }}
-              />
-            </Col>
-            <Col xs={24} sm={24} md={12} lg={12} xl={12}>
-              <Form.TextArea
-                field='WaffoPancakeWebhookTestKey'
-                label={t('Webhook 公钥（测试环境）')}
-                placeholder={t(
-                  '填写后覆盖当前测试环境 Webhook 公钥，留空表示保持当前不变',
-                )}
-                extraText={t('用于校验测试环境的 Waffo Pancake Webhook 签名')}
-                type='password'
-                autosize={{ minRows: 4, maxRows: 8 }}
-              />
-            </Col>
-          </Row>
-
-          <Row
-            gutter={{ xs: 8, sm: 16, md: 24, lg: 24, xl: 24, xxl: 24 }}
-            style={{ marginTop: 16 }}
-          >
-            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-              <Form.InputNumber
-                field='WaffoPancakeUnitPrice'
-                precision={2}
-                label={t('充值价格（x元/美金）')}
-                placeholder={t('例如：7，就是7元/美金')}
-                extraText={t('按 1 美元对应的站内价格填写')}
-                min={0}
-              />
-            </Col>
-            <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-              <Form.InputNumber
-                field='WaffoPancakeMinTopUp'
-                label={t('最低充值美元数量')}
-                placeholder={t('例如：2，就是最低充值2$')}
-                extraText={t('用户单次最少可充值的美元数量')}
-                min={1}
-              />
-            </Col>
-          </Row>
-
-          <Button onClick={submitWaffoPancakeSetting}>
-            {t('更新 Waffo Pancake 设置')}
-          </Button>
-        </Form.Section>
-      </Form>
-    </Spin>
+    <div className='p-6 space-y-6'>
+      {sectionTitle ? (
+        <div className='text-base font-semibold text-foreground'>
+          {sectionTitle}
+        </div>
+      ) : null}
+
+      <div className='space-y-3'>
+        <div className='flex items-start gap-3 rounded-xl border border-sky-200 bg-sky-50 px-4 py-3 text-sm text-sky-700 dark:border-sky-900/60 dark:bg-sky-950/40 dark:text-sky-200'>
+          <BookOpen size={16} className='mt-0.5 shrink-0' />
+          <div className='space-y-1'>
+            <div>
+              Waffo Pancake 的商户、商品和签名密钥请
+              <a
+                href='https://docs.waffo.ai'
+                target='_blank'
+                rel='noreferrer'
+                className='mx-1 text-primary underline'
+              >
+                点击此处
+              </a>
+              获取，建议先在测试环境完成联调。
+            </div>
+            <div>
+              {t('回调地址')}：
+              {props.options?.ServerAddress
+                ? removeTrailingSlash(props.options.ServerAddress)
+                : t('网站地址')}
+              /api/waffo-pancake/webhook
+            </div>
+          </div>
+        </div>
+
+        <div className='flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-100'>
+          <TriangleAlert size={16} className='mt-0.5 shrink-0' />
+          <div>
+            {t('请确认 Merchant、Store、Product 和所选环境密钥一致。')}
+          </div>
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <ToggleRow
+          label={t('启用 Waffo Pancake')}
+          value={inputs.WaffoPancakeEnabled}
+          onChange={setField('WaffoPancakeEnabled')}
+        />
+        <ToggleRow
+          label={t('沙盒模式')}
+          value={inputs.WaffoPancakeSandbox}
+          onChange={setField('WaffoPancakeSandbox')}
+          helper={t('用于切换当前下单和回调校验所使用的环境')}
+        />
+        <Field
+          label={t('货币')}
+          value={inputs.WaffoPancakeCurrency}
+          onChange={setField('WaffoPancakeCurrency')}
+          placeholder='USD'
+          helper={t('默认使用 USD 结算')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <Field
+          label={t('商户 ID')}
+          value={inputs.WaffoPancakeMerchantID}
+          onChange={setField('WaffoPancakeMerchantID')}
+          placeholder={t('例如：MER_xxx')}
+          helper={t('请填写当前环境对应的商户 ID')}
+        />
+        <Field
+          label={t('Store ID')}
+          value={inputs.WaffoPancakeStoreID}
+          onChange={setField('WaffoPancakeStoreID')}
+          placeholder={t('例如：STO_xxx')}
+          helper={t('请填写当前环境对应的 Store ID')}
+        />
+        <Field
+          label={t('Product ID')}
+          value={inputs.WaffoPancakeProductID}
+          onChange={setField('WaffoPancakeProductID')}
+          placeholder={t('例如：PROD_xxx')}
+          helper={t('请填写当前环境对应的 Product ID')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <TextAreaField
+          label={t('API 私钥')}
+          value={inputs.WaffoPancakePrivateKey}
+          onChange={setField('WaffoPancakePrivateKey')}
+          placeholder={t('填写后覆盖当前私钥，留空表示保持当前不变')}
+          helper={t('保存后不会回显，请填写当前环境对应的 API 私钥')}
+          type='password'
+        />
+        <Field
+          label={t('支付返回地址')}
+          value={inputs.WaffoPancakeReturnURL}
+          onChange={setField('WaffoPancakeReturnURL')}
+          placeholder={t('例如：https://example.com/console/topup')}
+          helper={t('留空则自动使用当前站点的默认充值页地址')}
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <TextAreaField
+          label={t('Webhook 公钥（生产环境）')}
+          value={inputs.WaffoPancakeWebhookPublicKey}
+          onChange={setField('WaffoPancakeWebhookPublicKey')}
+          placeholder={t(
+            '填写后覆盖当前生产环境 Webhook 公钥，留空表示保持当前不变',
+          )}
+          helper={t('用于校验生产环境的 Waffo Pancake Webhook 签名')}
+          type='password'
+        />
+        <TextAreaField
+          label={t('Webhook 公钥（测试环境）')}
+          value={inputs.WaffoPancakeWebhookTestKey}
+          onChange={setField('WaffoPancakeWebhookTestKey')}
+          placeholder={t(
+            '填写后覆盖当前测试环境 Webhook 公钥，留空表示保持当前不变',
+          )}
+          helper={t('用于校验测试环境的 Waffo Pancake Webhook 签名')}
+          type='password'
+        />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+        <Field
+          label={t('充值价格（x元/美金）')}
+          value={inputs.WaffoPancakeUnitPrice}
+          onChange={setField('WaffoPancakeUnitPrice')}
+          placeholder={t('例如：7，就是7元/美金')}
+          helper={t('按 1 美元对应的站内价格填写')}
+          type='number'
+          step='0.01'
+        />
+        <Field
+          label={t('最低充值美元数量')}
+          value={inputs.WaffoPancakeMinTopUp}
+          onChange={setField('WaffoPancakeMinTopUp')}
+          placeholder={t('例如：2，就是最低充值2$')}
+          helper={t('用户单次最少可充值的美元数量')}
+          type='number'
+          step='0.01'
+        />
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={submitWaffoPancakeSetting}
+          isPending={loading}
+          className='min-w-[180px]'
+        >
+          {t('更新 Waffo Pancake 设置')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Performance/SettingsPerformance.jsx b/web/src/pages/Setting/Performance/SettingsPerformance.jsx
index e2767f34460..5d74a66218b 100644
--- a/web/src/pages/Setting/Performance/SettingsPerformance.jsx
+++ b/web/src/pages/Setting/Performance/SettingsPerformance.jsx
@@ -6,34 +6,15 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  Banner,
-  Button,
-  Col,
-  Form,
-  InputNumber,
-  Row,
-  Spin,
-  Progress,
-  Descriptions,
-  Tag,
-  Popconfirm,
-  RadioGroup,
-  Radio,
-  Typography,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Spinner, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -41,11 +22,128 @@ import {
   showSuccess,
   showWarning,
 } from '../../../helpers';
-import { useTranslation } from 'react-i18next';
+import ConfirmDialog from '../../../components/common/ui/ConfirmDialog';
+
+// ----------------------------- helpers -----------------------------
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:cursor-not-allowed disabled:opacity-50';
+
+function FieldLabel({ children }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function InfoBanner({ tone = 'info', children }) {
+  const cls =
+    tone === 'warning'
+      ? 'border-warning/30 bg-warning/5'
+      : 'border-primary/20 bg-primary/5';
+  return (
+    <div
+      className={`flex items-start gap-2 rounded-xl border ${cls} px-3 py-2 text-sm text-foreground`}
+    >
+      <span>{children}</span>
+    </div>
+  );
+}
+
+function SectionHeader({ title }) {
+  if (!title) return null;
+  return (
+    <div className='border-b border-border pb-2 text-base font-semibold text-foreground'>
+      {title}
+    </div>
+  );
+}
 
-const { Text } = Typography;
+function SwitchRow({ label, hint, value, onChange }) {
+  return (
+    <div className='flex items-start justify-between gap-3'>
+      <div className='space-y-1'>
+        <div className='text-sm font-medium text-foreground'>{label}</div>
+        {hint ? <div className='text-xs text-muted'>{hint}</div> : null}
+      </div>
+      <Switch
+        isSelected={!!value}
+        onValueChange={onChange}
+        size='md'
+        aria-label={label}
+      >
+        <Switch.Control>
+          <Switch.Thumb />
+        </Switch.Control>
+      </Switch>
+    </div>
+  );
+}
+
+function StatusChip({ tone, children }) {
+  const cls =
+    tone === 'green'
+      ? 'bg-success/15 text-success'
+      : tone === 'blue'
+        ? 'bg-primary/15 text-primary'
+        : 'bg-surface-secondary text-muted';
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${cls}`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function ProgressBar({ percent, tone = 'primary' }) {
+  const safe = Math.max(0, Math.min(100, Number(percent) || 0));
+  const fill =
+    tone === 'danger'
+      ? 'bg-danger'
+      : tone === 'warning'
+        ? 'bg-warning'
+        : 'bg-primary';
+  return (
+    <div className='flex items-center gap-2'>
+      <div className='h-2 flex-1 overflow-hidden rounded-full bg-surface-secondary'>
+        <div
+          className={`h-full rounded-full transition-[width] duration-200 ${fill}`}
+          style={{ width: `${safe}%` }}
+        />
+      </div>
+      <span className='shrink-0 text-xs font-medium text-foreground'>
+        {Math.round(safe)}%
+      </span>
+    </div>
+  );
+}
+
+function DescList({ rows }) {
+  if (!rows?.length) return null;
+  return (
+    <div className='overflow-hidden rounded-xl border border-border bg-background'>
+      {rows.map((row, idx) => (
+        <div
+          key={`${row.key}-${idx}`}
+          className={`grid grid-cols-[160px_1fr] items-center gap-2 px-3 py-2 text-sm ${
+            idx > 0 ? 'border-t border-border' : ''
+          }`}
+        >
+          <div className='text-xs font-medium text-muted'>{row.key}</div>
+          <div className='break-all text-foreground'>{row.value}</div>
+        </div>
+      ))}
+    </div>
+  );
+}
 
-// 格式化字节大小
 function formatBytes(bytes, decimals = 2) {
   if (bytes === null || bytes === undefined || isNaN(bytes)) return '0 Bytes';
   if (bytes === 0) return '0 Bytes';
@@ -58,33 +156,50 @@ function formatBytes(bytes, decimals = 2) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
 
+const INITIAL_INPUTS = {
+  'performance_setting.disk_cache_enabled': false,
+  'performance_setting.disk_cache_threshold_mb': 10,
+  'performance_setting.disk_cache_max_size_mb': 1024,
+  'performance_setting.disk_cache_path': '',
+  'performance_setting.monitor_enabled': false,
+  'performance_setting.monitor_cpu_threshold': 90,
+  'performance_setting.monitor_memory_threshold': 90,
+  'performance_setting.monitor_disk_threshold': 95,
+};
+
+// ----------------------------- main -----------------------------
+
 export default function SettingsPerformance(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [statsLoading, setStatsLoading] = useState(false);
   const [stats, setStats] = useState(null);
-  const [inputs, setInputs] = useState({
-    'performance_setting.disk_cache_enabled': false,
-    'performance_setting.disk_cache_threshold_mb': 10,
-    'performance_setting.disk_cache_max_size_mb': 1024,
-    'performance_setting.disk_cache_path': '',
-    'performance_setting.monitor_enabled': false,
-    'performance_setting.monitor_cpu_threshold': 90,
-    'performance_setting.monitor_memory_threshold': 90,
-    'performance_setting.monitor_disk_threshold': 95,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
+  const [inputs, setInputs] = useState(INITIAL_INPUTS);
+  const [inputsRow, setInputsRow] = useState(INITIAL_INPUTS);
+
   const [logInfo, setLogInfo] = useState(null);
   const [logCleanupMode, setLogCleanupMode] = useState('by_count');
   const [logCleanupValue, setLogCleanupValue] = useState(10);
   const [logCleanupLoading, setLogCleanupLoading] = useState(false);
 
-  function handleFieldChange(fieldName) {
-    return (value) => {
-      setInputs((inputs) => ({ ...inputs, [fieldName]: value }));
-    };
-  }
+  // ConfirmDialog state
+  const [confirmCleanupLogs, setConfirmCleanupLogs] = useState(false);
+  const [confirmClearCache, setConfirmClearCache] = useState(false);
+
+  const setField = (key) => (value) => {
+    setInputs((prev) => ({ ...prev, [key]: value }));
+  };
+
+  const setNumberField = (key) => (event) => {
+    const raw = event?.target ? event.target.value : event;
+    if (raw === '' || raw === null) {
+      setField(key)('');
+      return;
+    }
+    const num = Number(raw);
+    if (Number.isNaN(num)) return;
+    setField(key)(num);
+  };
 
   function onSubmit() {
     const updateArray = compareObjects(inputs, inputsRow);
@@ -96,10 +211,7 @@ export default function SettingsPerformance(props) {
       } else {
         value = String(inputs[item.key]);
       }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
+      return API.put('/api/option/', { key: item.key, value });
     });
     setLoading(true);
     Promise.all(requestQueue)
@@ -186,7 +298,11 @@ export default function SettingsPerformance(props) {
   }
 
   async function cleanupLogFiles() {
-    if (logCleanupValue == null || isNaN(logCleanupValue) || logCleanupValue < 1) {
+    if (
+      logCleanupValue == null ||
+      isNaN(logCleanupValue) ||
+      logCleanupValue < 1
+    ) {
       showError(t('请输入有效的数值'));
       return;
     }
@@ -216,23 +332,22 @@ export default function SettingsPerformance(props) {
 
   useEffect(() => {
     const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        if (typeof inputs[key] === 'boolean') {
+    for (const key in props.options) {
+      if (Object.keys(INITIAL_INPUTS).includes(key)) {
+        if (typeof INITIAL_INPUTS[key] === 'boolean') {
           currentInputs[key] =
             props.options[key] === 'true' || props.options[key] === true;
-        } else if (typeof inputs[key] === 'number') {
-          currentInputs[key] = parseInt(props.options[key]) || inputs[key];
+        } else if (typeof INITIAL_INPUTS[key] === 'number') {
+          currentInputs[key] =
+            parseInt(props.options[key]) || INITIAL_INPUTS[key];
         } else {
           currentInputs[key] = props.options[key];
         }
       }
     }
-    setInputs({ ...inputs, ...currentInputs });
-    setInputsRow({ ...inputs, ...currentInputs });
-    if (refForm.current) {
-      refForm.current.setValues({ ...inputs, ...currentInputs });
-    }
+    const merged = { ...INITIAL_INPUTS, ...currentInputs };
+    setInputs(merged);
+    setInputsRow(merged);
     fetchStats();
     fetchLogInfo();
   }, [props.options]);
@@ -246,491 +361,451 @@ export default function SettingsPerformance(props) {
         ).toFixed(1)
       : 0;
 
+  const diskCacheEnabled = !!inputs['performance_setting.disk_cache_enabled'];
+  const monitorEnabled = !!inputs['performance_setting.monitor_enabled'];
+
   return (
     <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
-        >
-          <Form.Section text={t('磁盘缓存设置（磁盘换内存）')}>
-            <Banner
-              type='info'
-              description={t(
-                '启用磁盘缓存后，大请求体将临时存储到磁盘而非内存，可显著降低内存占用，适用于处理包含大量图片/文件的请求。建议在 SSD 环境下使用。',
-              )}
-              style={{ marginBottom: 16 }}
+      <div className='relative space-y-8'>
+        {loading && (
+          <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+            <Spinner color='primary' />
+          </div>
+        )}
+
+        {/* 磁盘缓存设置 */}
+        <div className='space-y-4'>
+          <SectionHeader title={t('磁盘缓存设置（磁盘换内存）')} />
+          <InfoBanner>
+            {t(
+              '启用磁盘缓存后，大请求体将临时存储到磁盘而非内存，可显著降低内存占用，适用于处理包含大量图片/文件的请求。建议在 SSD 环境下使用。',
+            )}
+          </InfoBanner>
+          <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3'>
+            <SwitchRow
+              label={t('启用磁盘缓存')}
+              hint={t('将大请求体临时存储到磁盘')}
+              value={inputs['performance_setting.disk_cache_enabled']}
+              onChange={setField('performance_setting.disk_cache_enabled')}
             />
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'performance_setting.disk_cache_enabled'}
-                  label={t('启用磁盘缓存')}
-                  extraText={t('将大请求体临时存储到磁盘')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={handleFieldChange(
-                    'performance_setting.disk_cache_enabled',
-                  )}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  field={'performance_setting.disk_cache_threshold_mb'}
-                  label={t('磁盘缓存阈值 (MB)')}
-                  extraText={t('请求体超过此大小时使用磁盘缓存')}
-                  min={1}
-                  max={1024}
-                  onChange={handleFieldChange(
-                    'performance_setting.disk_cache_threshold_mb',
-                  )}
-                  disabled={!inputs['performance_setting.disk_cache_enabled']}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  field={'performance_setting.disk_cache_max_size_mb'}
-                  label={t('磁盘缓存最大总量 (MB)')}
-                  extraText={
-                    stats?.disk_space_info?.total > 0
-                      ? t('可用空间: {{free}} / 总空间: {{total}}', {
-                          free: formatBytes(stats.disk_space_info.free),
-                          total: formatBytes(stats.disk_space_info.total),
-                        })
-                      : t('磁盘缓存占用的最大空间')
+            <div className='space-y-2'>
+              <FieldLabel>{t('磁盘缓存阈值 (MB)')}</FieldLabel>
+              <input
+                type='number'
+                min={1}
+                max={1024}
+                value={inputs['performance_setting.disk_cache_threshold_mb']}
+                onChange={setNumberField(
+                  'performance_setting.disk_cache_threshold_mb',
+                )}
+                disabled={!diskCacheEnabled}
+                className={inputClass}
+              />
+              <FieldHint>{t('请求体超过此大小时使用磁盘缓存')}</FieldHint>
+            </div>
+            <div className='space-y-2'>
+              <FieldLabel>{t('磁盘缓存最大总量 (MB)')}</FieldLabel>
+              <input
+                type='number'
+                min={100}
+                max={102400}
+                value={inputs['performance_setting.disk_cache_max_size_mb']}
+                onChange={setNumberField(
+                  'performance_setting.disk_cache_max_size_mb',
+                )}
+                disabled={!diskCacheEnabled}
+                className={inputClass}
+              />
+              <FieldHint>
+                {stats?.disk_space_info?.total > 0
+                  ? t('可用空间: {{free}} / 总空间: {{total}}', {
+                      free: formatBytes(stats.disk_space_info.free),
+                      total: formatBytes(stats.disk_space_info.total),
+                    })
+                  : t('磁盘缓存占用的最大空间')}
+              </FieldHint>
+            </div>
+            {!stats?.config?.is_running_in_container && (
+              <div className='space-y-2'>
+                <FieldLabel>{t('缓存目录')}</FieldLabel>
+                <input
+                  type='text'
+                  value={inputs['performance_setting.disk_cache_path']}
+                  onChange={(event) =>
+                    setField('performance_setting.disk_cache_path')(
+                      event.target.value,
+                    )
                   }
-                  min={100}
-                  max={102400}
-                  onChange={handleFieldChange(
-                    'performance_setting.disk_cache_max_size_mb',
-                  )}
-                  disabled={!inputs['performance_setting.disk_cache_enabled']}
+                  placeholder={t('例如 /var/cache/new-api')}
+                  disabled={!diskCacheEnabled}
+                  className={inputClass}
                 />
-              </Col>
-              {/* 只在非容器环境显示缓存目录配置 */}
-              {!stats?.config?.is_running_in_container && (
-                <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                  <Form.Input
-                    field={'performance_setting.disk_cache_path'}
-                    label={t('缓存目录')}
-                    extraText={t('留空使用系统临时目录')}
-                    placeholder={t('例如 /var/cache/new-api')}
-                    onChange={handleFieldChange(
-                      'performance_setting.disk_cache_path',
-                    )}
-                    showClear
-                    disabled={!inputs['performance_setting.disk_cache_enabled']}
-                  />
-                </Col>
-              )}
-            </Row>
-          </Form.Section>
-
-          <Form.Section text={t('系统性能监控')}>
-            <Banner
-              type='info'
-              description={t(
-                '启用性能监控后，当系统资源使用率超过设定阈值时，将拒绝新的 Relay 请求 (/v1, /v1beta 等)，以保护系统稳定性。',
-              )}
-              style={{ marginBottom: 16 }}
-            />
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={6} lg={6} xl={6}>
-                <Form.Switch
-                  field={'performance_setting.monitor_enabled'}
-                  label={t('启用性能监控')}
-                  extraText={t('超过阈值时拒绝新请求')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={handleFieldChange(
-                    'performance_setting.monitor_enabled',
-                  )}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={6} lg={6} xl={6}>
-                <Form.InputNumber
-                  field={'performance_setting.monitor_cpu_threshold'}
-                  label={t('CPU 阈值 (%)')}
-                  extraText={t('CPU 使用率超过此值时拒绝请求')}
-                  min={0}
-                  onChange={handleFieldChange(
-                    'performance_setting.monitor_cpu_threshold',
-                  )}
-                  disabled={!inputs['performance_setting.monitor_enabled']}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={6} lg={6} xl={6}>
-                <Form.InputNumber
-                  field={'performance_setting.monitor_memory_threshold'}
-                  label={t('内存 阈值 (%)')}
-                  extraText={t('内存使用率超过此值时拒绝请求')}
-                  min={0}
-                  max={100}
-                  onChange={handleFieldChange(
-                    'performance_setting.monitor_memory_threshold',
-                  )}
-                  disabled={!inputs['performance_setting.monitor_enabled']}
-                />
-              </Col>
-              <Col xs={24} sm={12} md={6} lg={6} xl={6}>
-                <Form.InputNumber
-                  field={'performance_setting.monitor_disk_threshold'}
-                  label={t('磁盘 阈值 (%)')}
-                  extraText={t('磁盘使用率超过此值时拒绝请求')}
-                  min={0}
-                  max={100}
-                  onChange={handleFieldChange(
-                    'performance_setting.monitor_disk_threshold',
-                  )}
-                  disabled={!inputs['performance_setting.monitor_enabled']}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存性能设置')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-
-      {/* 服务器日志管理 */}
-      <Form.Section text={t('服务器日志管理')}>
-        <Banner
-          type='info'
-          description={t(
-            '管理服务器运行日志文件。日志文件会随运行时间不断累积，建议定期清理以释放磁盘空间。',
-          )}
-          style={{ marginBottom: 16 }}
-        />
-        {logInfo === null ? null : logInfo.enabled ? (
-          <>
-            <Descriptions
-              data={[
-                { key: t('日志目录'), value: logInfo.log_dir },
-                {
-                  key: t('日志文件数'),
-                  value: logInfo.file_count,
-                },
-                {
-                  key: t('日志总大小'),
-                  value: formatBytes(logInfo.total_size),
-                },
-                ...(logInfo.oldest_time && logInfo.newest_time
-                  ? [
-                      {
-                        key: t('日志时间范围'),
-                        value: `${new Date(logInfo.oldest_time).toLocaleDateString()} ~ ${new Date(logInfo.newest_time).toLocaleDateString()}`,
-                      },
-                    ]
-                  : []),
-              ]}
-              style={{ marginBottom: 16 }}
+                <FieldHint>{t('留空使用系统临时目录')}</FieldHint>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* 系统性能监控 */}
+        <div className='space-y-4'>
+          <SectionHeader title={t('系统性能监控')} />
+          <InfoBanner>
+            {t(
+              '启用性能监控后，当系统资源使用率超过设定阈值时，将拒绝新的 Relay 请求 (/v1, /v1beta 等)，以保护系统稳定性。',
+            )}
+          </InfoBanner>
+          <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4'>
+            <SwitchRow
+              label={t('启用性能监控')}
+              hint={t('超过阈值时拒绝新请求')}
+              value={inputs['performance_setting.monitor_enabled']}
+              onChange={setField('performance_setting.monitor_enabled')}
             />
-            <Row gutter={16} style={{ marginBottom: 16 }}>
-              <Col xs={24} sm={12} md={8}>
-                <div style={{ marginBottom: 12 }}>
-                  <Text strong style={{ display: 'block', marginBottom: 8 }}>
-                    {t('清理方式')}
-                  </Text>
-                  <RadioGroup
-                    value={logCleanupMode}
-                    onChange={(e) => setLogCleanupMode(e.target.value)}
-                  >
-                    <Radio value='by_count'>{t('保留最近N个文件')}</Radio>
-                    <Radio value='by_days'>{t('保留最近N天')}</Radio>
-                  </RadioGroup>
+            <div className='space-y-2'>
+              <FieldLabel>{t('CPU 阈值 (%)')}</FieldLabel>
+              <input
+                type='number'
+                min={0}
+                value={inputs['performance_setting.monitor_cpu_threshold']}
+                onChange={setNumberField(
+                  'performance_setting.monitor_cpu_threshold',
+                )}
+                disabled={!monitorEnabled}
+                className={inputClass}
+              />
+              <FieldHint>{t('CPU 使用率超过此值时拒绝请求')}</FieldHint>
+            </div>
+            <div className='space-y-2'>
+              <FieldLabel>{t('内存 阈值 (%)')}</FieldLabel>
+              <input
+                type='number'
+                min={0}
+                max={100}
+                value={inputs['performance_setting.monitor_memory_threshold']}
+                onChange={setNumberField(
+                  'performance_setting.monitor_memory_threshold',
+                )}
+                disabled={!monitorEnabled}
+                className={inputClass}
+              />
+              <FieldHint>{t('内存使用率超过此值时拒绝请求')}</FieldHint>
+            </div>
+            <div className='space-y-2'>
+              <FieldLabel>{t('磁盘 阈值 (%)')}</FieldLabel>
+              <input
+                type='number'
+                min={0}
+                max={100}
+                value={inputs['performance_setting.monitor_disk_threshold']}
+                onChange={setNumberField(
+                  'performance_setting.monitor_disk_threshold',
+                )}
+                disabled={!monitorEnabled}
+                className={inputClass}
+              />
+              <FieldHint>{t('磁盘使用率超过此值时拒绝请求')}</FieldHint>
+            </div>
+          </div>
+          <div>
+            <Button color='primary' onPress={onSubmit}>
+              {t('保存性能设置')}
+            </Button>
+          </div>
+        </div>
+
+        {/* 服务器日志管理 */}
+        <div className='space-y-4'>
+          <SectionHeader title={t('服务器日志管理')} />
+          <InfoBanner>
+            {t(
+              '管理服务器运行日志文件。日志文件会随运行时间不断累积，建议定期清理以释放磁盘空间。',
+            )}
+          </InfoBanner>
+          {logInfo === null ? null : logInfo.enabled ? (
+            <>
+              <DescList
+                rows={[
+                  { key: t('日志目录'), value: logInfo.log_dir },
+                  { key: t('日志文件数'), value: logInfo.file_count },
+                  {
+                    key: t('日志总大小'),
+                    value: formatBytes(logInfo.total_size),
+                  },
+                  ...(logInfo.oldest_time && logInfo.newest_time
+                    ? [
+                        {
+                          key: t('日志时间范围'),
+                          value: `${new Date(logInfo.oldest_time).toLocaleDateString()} ~ ${new Date(logInfo.newest_time).toLocaleDateString()}`,
+                        },
+                      ]
+                    : []),
+                ]}
+              />
+              <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+                <div className='space-y-2'>
+                  <FieldLabel>{t('清理方式')}</FieldLabel>
+                  <div className='inline-flex w-full overflow-hidden rounded-xl border border-border'>
+                    {[
+                      { value: 'by_count', label: t('保留最近N个文件') },
+                      { value: 'by_days', label: t('保留最近N天') },
+                    ].map((mode) => {
+                      const active = mode.value === logCleanupMode;
+                      return (
+                        <button
+                          key={mode.value}
+                          type='button'
+                          onClick={() => setLogCleanupMode(mode.value)}
+                          className={`flex-1 px-3 py-2 text-sm font-medium transition-colors ${
+                            active
+                              ? 'bg-foreground text-background'
+                              : 'bg-background text-muted hover:bg-surface-secondary'
+                          }`}
+                        >
+                          {mode.label}
+                        </button>
+                      );
+                    })}
+                  </div>
                 </div>
-              </Col>
-              <Col xs={24} sm={12} md={8}>
-                <div style={{ marginBottom: 12 }}>
-                  <Text strong style={{ display: 'block', marginBottom: 8 }}>
+                <div className='space-y-2'>
+                  <FieldLabel>
                     {logCleanupMode === 'by_count'
                       ? t('保留文件数')
                       : t('保留天数')}
-                  </Text>
-                  <InputNumber
-                    value={logCleanupValue}
+                  </FieldLabel>
+                  <input
+                    type='number'
                     min={1}
                     max={logCleanupMode === 'by_count' ? 1000 : 3650}
-                    onChange={(value) => setLogCleanupValue(value)}
-                    style={{ width: '100%' }}
+                    value={logCleanupValue}
+                    onChange={(event) => {
+                      const raw = event.target.value;
+                      setLogCleanupValue(raw === '' ? '' : Number(raw));
+                    }}
+                    className={inputClass}
                   />
                 </div>
-              </Col>
-              <Col xs={24} sm={12} md={8}>
-                <div style={{ marginBottom: 12 }}>
-                  <Text
-                    strong
-                    style={{
-                      display: 'block',
-                      marginBottom: 8,
-                      visibility: 'hidden',
-                    }}
+                <div className='flex items-end'>
+                  <Button
+                    color='danger'
+                    isPending={logCleanupLoading}
+                    onPress={() => setConfirmCleanupLogs(true)}
                   >
-                    &nbsp;
-                  </Text>
-                <Popconfirm
-                  title={t('确认清理日志文件？')}
-                  content={
-                    logCleanupMode === 'by_count'
-                      ? t(
-                          '将只保留最近 {{value}} 个日志文件，其余将被删除。',
-                          { value: logCleanupValue },
-                        )
-                      : t('将删除 {{value}} 天前的日志文件。', {
-                          value: logCleanupValue,
-                        })
-                  }
-                  onConfirm={cleanupLogFiles}
-                >
-                  <Button type='danger' loading={logCleanupLoading}>
                     {t('清理日志文件')}
                   </Button>
-                </Popconfirm>
                 </div>
-              </Col>
-            </Row>
-          </>
-        ) : (
-          <Banner
-            type='warning'
-            description={t('服务器日志功能未启用（未配置日志目录）')}
-          />
-        )}
-      </Form.Section>
-
-      {/* 性能统计 */}
-      <Spin spinning={statsLoading}>
-        <Form.Section text={t('性能监控')}>
-          <Row gutter={16} style={{ marginBottom: 16 }}>
-            <Col span={24}>
-              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
-                <Button onClick={fetchStats}>{t('刷新统计')}</Button>
-                <Popconfirm
-                  title={t('确认清理不活跃的磁盘缓存？')}
-                  content={t('这将删除超过 10 分钟未使用的临时缓存文件')}
-                  onConfirm={clearDiskCache}
-                >
-                  <Button type='warning'>{t('清理不活跃缓存')}</Button>
-                </Popconfirm>
-                <Button onClick={resetStats}>{t('重置统计')}</Button>
-                <Button onClick={forceGC}>{t('执行 GC')}</Button>
               </div>
-            </Col>
-          </Row>
+            </>
+          ) : (
+            <InfoBanner tone='warning'>
+              {t('服务器日志功能未启用（未配置日志目录）')}
+            </InfoBanner>
+          )}
+        </div>
+
+        {/* 性能监控 */}
+        <div className='relative space-y-4'>
+          {statsLoading && (
+            <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+              <Spinner color='primary' />
+            </div>
+          )}
+          <SectionHeader title={t('性能监控')} />
 
-          {stats && (
+          <div className='flex flex-wrap items-center gap-2'>
+            <Button variant='flat' onPress={fetchStats}>
+              {t('刷新统计')}
+            </Button>
+            <Button
+              color='warning'
+              onPress={() => setConfirmClearCache(true)}
+            >
+              {t('清理不活跃缓存')}
+            </Button>
+            <Button variant='flat' onPress={resetStats}>
+              {t('重置统计')}
+            </Button>
+            <Button variant='flat' onPress={forceGC}>
+              {t('执行 GC')}
+            </Button>
+          </div>
+
+          {stats && stats.cache_stats && (
             <>
               {/* 缓存使用情况 */}
-              <Row
-                gutter={16}
-                style={{
-                  marginBottom: 16,
-                  display: 'flex',
-                  alignItems: 'stretch',
-                }}
-              >
-                <Col xs={24} md={12} style={{ display: 'flex' }}>
-                  <div
-                    style={{
-                      padding: 16,
-                      background: 'var(--semi-color-fill-0)',
-                      borderRadius: 8,
-                      flex: 1,
-                      display: 'flex',
-                      flexDirection: 'column',
-                    }}
-                  >
-                    <Text strong style={{ marginBottom: 8, display: 'block' }}>
-                      {t('请求体磁盘缓存')}
-                    </Text>
-                    <Progress
+              <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+                <div className='flex h-full flex-col rounded-xl border border-border bg-background p-4'>
+                  <div className='mb-2 text-sm font-semibold text-foreground'>
+                    {t('请求体磁盘缓存')}
+                  </div>
+                  <div className='mb-2'>
+                    <ProgressBar
                       percent={parseFloat(diskCacheUsagePercent)}
-                      showInfo
-                      style={{ marginBottom: 8 }}
-                      stroke={
+                      tone={
                         parseFloat(diskCacheUsagePercent) > 80
-                          ? 'var(--semi-color-danger)'
-                          : 'var(--semi-color-primary)'
+                          ? 'danger'
+                          : 'primary'
                       }
                     />
-                    <div
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        marginBottom: 8,
-                      }}
-                    >
-                      <Text type='tertiary'>
-                        {formatBytes(
-                          stats.cache_stats.current_disk_usage_bytes,
-                        )}{' '}
-                        / {formatBytes(stats.cache_stats.disk_cache_max_bytes)}
-                      </Text>
-                      <Text type='tertiary'>
-                        {t('活跃文件')}: {stats.cache_stats.active_disk_files}
-                      </Text>
-                    </div>
-                    <div style={{ marginTop: 'auto' }}>
-                      <Tag color='blue'>
-                        {t('磁盘命中')}: {stats.cache_stats.disk_cache_hits}
-                      </Tag>
-                    </div>
                   </div>
-                </Col>
-                <Col xs={24} md={12} style={{ display: 'flex' }}>
-                  <div
-                    style={{
-                      padding: 16,
-                      background: 'var(--semi-color-fill-0)',
-                      borderRadius: 8,
-                      flex: 1,
-                      display: 'flex',
-                      flexDirection: 'column',
-                    }}
-                  >
-                    <Text strong style={{ marginBottom: 8, display: 'block' }}>
-                      {t('请求体内存缓存')}
-                    </Text>
-                    <div
-                      style={{
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        marginBottom: 8,
-                      }}
-                    >
-                      <Text>
-                        {t('当前缓存大小')}:{' '}
-                        {formatBytes(
-                          stats.cache_stats.current_memory_usage_bytes,
-                        )}
-                      </Text>
-                      <Text>
-                        {t('活跃缓存数')}:{' '}
-                        {stats.cache_stats.active_memory_buffers}
-                      </Text>
-                    </div>
-                    <div style={{ marginTop: 'auto' }}>
-                      <Tag color='green'>
-                        {t('内存命中')}: {stats.cache_stats.memory_cache_hits}
-                      </Tag>
-                    </div>
+                  <div className='mb-2 flex justify-between text-xs text-muted'>
+                    <span>
+                      {formatBytes(
+                        stats.cache_stats.current_disk_usage_bytes,
+                      )}{' '}
+                      / {formatBytes(stats.cache_stats.disk_cache_max_bytes)}
+                    </span>
+                    <span>
+                      {t('活跃文件')}: {stats.cache_stats.active_disk_files}
+                    </span>
                   </div>
-                </Col>
-              </Row>
+                  <div className='mt-auto'>
+                    <StatusChip tone='blue'>
+                      {t('磁盘命中')}: {stats.cache_stats.disk_cache_hits}
+                    </StatusChip>
+                  </div>
+                </div>
+
+                <div className='flex h-full flex-col rounded-xl border border-border bg-background p-4'>
+                  <div className='mb-2 text-sm font-semibold text-foreground'>
+                    {t('请求体内存缓存')}
+                  </div>
+                  <div className='mb-2 flex justify-between text-sm text-foreground'>
+                    <span>
+                      {t('当前缓存大小')}:{' '}
+                      {formatBytes(
+                        stats.cache_stats.current_memory_usage_bytes,
+                      )}
+                    </span>
+                    <span>
+                      {t('活跃缓存数')}:{' '}
+                      {stats.cache_stats.active_memory_buffers}
+                    </span>
+                  </div>
+                  <div className='mt-auto'>
+                    <StatusChip tone='green'>
+                      {t('内存命中')}: {stats.cache_stats.memory_cache_hits}
+                    </StatusChip>
+                  </div>
+                </div>
+              </div>
 
               {/* 缓存目录磁盘空间 */}
               {stats.disk_space_info?.total > 0 && (
-                <Row gutter={16} style={{ marginBottom: 16 }}>
-                  <Col span={24}>
-                    <div
-                      style={{
-                        padding: 16,
-                        background: 'var(--semi-color-fill-0)',
-                        borderRadius: 8,
-                      }}
-                    >
-                      <Text
-                        strong
-                        style={{ marginBottom: 8, display: 'block' }}
-                      >
-                        {t('缓存目录磁盘空间')}
-                      </Text>
-                      <Progress
-                        percent={parseFloat(
-                          stats.disk_space_info.used_percent.toFixed(1),
-                        )}
-                        showInfo
-                        style={{ marginBottom: 8 }}
-                        stroke={
-                          stats.disk_space_info.used_percent > 90
-                            ? 'var(--semi-color-danger)'
-                            : stats.disk_space_info.used_percent > 70
-                              ? 'var(--semi-color-warning)'
-                              : 'var(--semi-color-primary)'
-                        }
-                      />
-                      <div
-                        style={{
-                          display: 'flex',
-                          justifyContent: 'space-between',
-                          flexWrap: 'wrap',
-                          gap: 8,
-                        }}
-                      >
-                        <Text type='tertiary'>
-                          {t('已用')}: {formatBytes(stats.disk_space_info.used)}
-                        </Text>
-                        <Text type='tertiary'>
-                          {t('可用')}: {formatBytes(stats.disk_space_info.free)}
-                        </Text>
-                        <Text type='tertiary'>
-                          {t('总计')}:{' '}
-                          {formatBytes(stats.disk_space_info.total)}
-                        </Text>
-                      </div>
-                      {stats.disk_space_info.free <
-                        inputs['performance_setting.disk_cache_max_size_mb'] *
-                          1024 *
-                          1024 && (
-                        <Banner
-                          type='warning'
-                          description={t('磁盘可用空间小于缓存最大总量设置')}
-                          style={{ marginTop: 8 }}
-                        />
+                <div className='rounded-xl border border-border bg-background p-4'>
+                  <div className='mb-2 text-sm font-semibold text-foreground'>
+                    {t('缓存目录磁盘空间')}
+                  </div>
+                  <div className='mb-2'>
+                    <ProgressBar
+                      percent={parseFloat(
+                        stats.disk_space_info.used_percent.toFixed(1),
                       )}
+                      tone={
+                        stats.disk_space_info.used_percent > 90
+                          ? 'danger'
+                          : stats.disk_space_info.used_percent > 70
+                            ? 'warning'
+                            : 'primary'
+                      }
+                    />
+                  </div>
+                  <div className='flex flex-wrap justify-between gap-2 text-xs text-muted'>
+                    <span>
+                      {t('已用')}: {formatBytes(stats.disk_space_info.used)}
+                    </span>
+                    <span>
+                      {t('可用')}: {formatBytes(stats.disk_space_info.free)}
+                    </span>
+                    <span>
+                      {t('总计')}: {formatBytes(stats.disk_space_info.total)}
+                    </span>
+                  </div>
+                  {stats.disk_space_info.free <
+                    inputs['performance_setting.disk_cache_max_size_mb'] *
+                      1024 *
+                      1024 && (
+                    <div className='mt-2'>
+                      <InfoBanner tone='warning'>
+                        {t('磁盘可用空间小于缓存最大总量设置')}
+                      </InfoBanner>
                     </div>
-                  </Col>
-                </Row>
+                  )}
+                </div>
               )}
 
               {/* 系统内存统计 */}
-              <Row gutter={16}>
-                <Col span={24}>
-                  <Descriptions
-                    data={[
-                      {
-                        key: t('已分配内存'),
-                        value: formatBytes(stats.memory_stats.alloc),
-                      },
-                      {
-                        key: t('总分配内存'),
-                        value: formatBytes(stats.memory_stats.total_alloc),
-                      },
-                      {
-                        key: t('系统内存'),
-                        value: formatBytes(stats.memory_stats.sys),
-                      },
-                      { key: t('GC 次数'), value: stats.memory_stats.num_gc },
-                      {
-                        key: t('Goroutine 数'),
-                        value: stats.memory_stats.num_goroutine,
-                      },
-                      {
-                        key: t('缓存目录'),
-                        value: stats.disk_cache_info.path,
-                      },
-                      {
-                        key: t('目录文件数'),
-                        value: stats.disk_cache_info.file_count,
-                      },
-                      {
-                        key: t('目录总大小'),
-                        value: formatBytes(stats.disk_cache_info.total_size),
-                      },
-                    ]}
-                  />
-                </Col>
-              </Row>
+              <DescList
+                rows={[
+                  {
+                    key: t('已分配内存'),
+                    value: formatBytes(stats.memory_stats.alloc),
+                  },
+                  {
+                    key: t('总分配内存'),
+                    value: formatBytes(stats.memory_stats.total_alloc),
+                  },
+                  {
+                    key: t('系统内存'),
+                    value: formatBytes(stats.memory_stats.sys),
+                  },
+                  { key: t('GC 次数'), value: stats.memory_stats.num_gc },
+                  {
+                    key: t('Goroutine 数'),
+                    value: stats.memory_stats.num_goroutine,
+                  },
+                  { key: t('缓存目录'), value: stats.disk_cache_info.path },
+                  {
+                    key: t('目录文件数'),
+                    value: stats.disk_cache_info.file_count,
+                  },
+                  {
+                    key: t('目录总大小'),
+                    value: formatBytes(stats.disk_cache_info.total_size),
+                  },
+                ]}
+              />
             </>
           )}
-        </Form.Section>
-      </Spin>
+        </div>
+      </div>
+
+      {/* 清理日志确认 */}
+      <ConfirmDialog
+        visible={confirmCleanupLogs}
+        title={t('确认清理日志文件？')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        danger
+        onCancel={() => setConfirmCleanupLogs(false)}
+        onConfirm={async () => {
+          setConfirmCleanupLogs(false);
+          await cleanupLogFiles();
+        }}
+      >
+        {logCleanupMode === 'by_count'
+          ? t('将只保留最近 {{value}} 个日志文件，其余将被删除。', {
+              value: logCleanupValue,
+            })
+          : t('将删除 {{value}} 天前的日志文件。', {
+              value: logCleanupValue,
+            })}
+      </ConfirmDialog>
+
+      {/* 清理不活跃缓存确认 */}
+      <ConfirmDialog
+        visible={confirmClearCache}
+        title={t('确认清理不活跃的磁盘缓存？')}
+        cancelText={t('取消')}
+        confirmText={t('确认')}
+        onCancel={() => setConfirmClearCache(false)}
+        onConfirm={async () => {
+          setConfirmClearCache(false);
+          await clearDiskCache();
+        }}
+      >
+        {t('这将删除超过 10 分钟未使用的临时缓存文件')}
+      </ConfirmDialog>
     </>
   );
 }
diff --git a/web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.jsx b/web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.jsx
index 12b9763819c..63eb88c8f26 100644
--- a/web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.jsx
+++ b/web/src/pages/Setting/RateLimit/SettingsRequestRateLimit.jsx
@@ -17,8 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import { Button, Col, Form, Row, Spin } from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Input, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -29,214 +29,251 @@ import {
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
 
+const DEFAULT_INPUTS = {
+  ModelRequestRateLimitEnabled: false,
+  ModelRequestRateLimitCount: -1,
+  ModelRequestRateLimitSuccessCount: 1000,
+  ModelRequestRateLimitDurationMinutes: 1,
+  ModelRequestRateLimitGroup: '',
+};
+
+const NUMERIC_FIELDS = new Set([
+  'ModelRequestRateLimitCount',
+  'ModelRequestRateLimitSuccessCount',
+  'ModelRequestRateLimitDurationMinutes',
+]);
+
+function NumberField({ label, value, onChange, suffix, helper, min = 0, max }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <div className='flex items-center gap-2'>
+        <Input
+          type='number'
+          min={min}
+          max={max}
+          step={1}
+          value={value === '' || value == null ? '' : String(value)}
+          onChange={(e) => {
+            const v = e.target.value;
+            onChange(v === '' ? '' : Number(v));
+          }}
+          aria-label={label}
+          className='h-10 w-full rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
+        />
+        {suffix ? (
+          <span className='text-xs text-muted shrink-0'>{suffix}</span>
+        ) : null}
+      </div>
+      {helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export default function RequestRateLimit(props) {
   const { t } = useTranslation();
-
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    ModelRequestRateLimitEnabled: false,
-    ModelRequestRateLimitCount: -1,
-    ModelRequestRateLimitSuccessCount: 1000,
-    ModelRequestRateLimitDurationMinutes: 1,
-    ModelRequestRateLimitGroup: '',
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
-
-  function onSubmit() {
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+  const [groupJsonError, setGroupJsonError] = useState('');
+
+  const setField = (field) => (value) =>
+    setInputs((prev) => ({ ...prev, [field]: value }));
+
+  const onSubmit = async () => {
+    if (
+      inputs.ModelRequestRateLimitGroup &&
+      !verifyJSON(inputs.ModelRequestRateLimitGroup)
+    ) {
+      setGroupJsonError(t('不是合法的 JSON 字符串'));
+      showError(t('不是合法的 JSON 字符串'));
+      return;
+    }
+    setGroupJsonError('');
+
     const updateArray = compareObjects(inputs, inputsRow);
-    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
-    const requestQueue = updateArray.map((item) => {
-      let value = '';
-      if (typeof inputs[item.key] === 'boolean') {
-        value = String(inputs[item.key]);
-      } else {
-        value = inputs[item.key];
-      }
-      return API.put('/api/option/', {
-        key: item.key,
-        value,
-      });
-    });
+    if (!updateArray.length) {
+      showWarning(t('你似乎并没有修改什么'));
+      return;
+    }
     setLoading(true);
-    Promise.all(requestQueue)
-      .then((res) => {
-        if (requestQueue.length === 1) {
-          if (res.includes(undefined)) return;
-        } else if (requestQueue.length > 1) {
-          if (res.includes(undefined))
-            return showError(t('部分保存失败，请重试'));
+    try {
+      const requests = updateArray.map((item) =>
+        API.put('/api/option/', {
+          key: item.key,
+          value:
+            typeof inputs[item.key] === 'boolean'
+              ? String(inputs[item.key])
+              : String(inputs[item.key] ?? ''),
+        }),
+      );
+      const results = await Promise.all(requests);
+      if (results.some((r) => r === undefined)) {
+        if (requests.length > 1) {
+          showError(t('部分保存失败，请重试'));
+          return;
         }
-
-        for (let i = 0; i < res.length; i++) {
-          if (!res[i].data.success) {
-            return showError(res[i].data.message);
-          }
+        return;
+      }
+      for (const r of results) {
+        if (r?.data && !r.data.success) {
+          showError(r.data.message);
+          return;
         }
-
-        showSuccess(t('保存成功'));
-        props.refresh();
-      })
-      .catch(() => {
-        showError(t('保存失败，请重试'));
-      })
-      .finally(() => {
-        setLoading(false);
-      });
-  }
+      }
+      showSuccess(t('保存成功'));
+      setInputsRow(structuredClone(inputs));
+      props.refresh?.();
+    } catch (e) {
+      showError(t('保存失败，请重试'));
+    } finally {
+      setLoading(false);
+    }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
-        currentInputs[key] = props.options[key];
+    if (!props.options) return;
+    const next = { ...DEFAULT_INPUTS };
+    for (const key of Object.keys(DEFAULT_INPUTS)) {
+      if (key in props.options) {
+        const raw = props.options[key];
+        if (key === 'ModelRequestRateLimitEnabled') {
+          next[key] = raw === true || raw === 'true';
+        } else if (NUMERIC_FIELDS.has(key)) {
+          if (raw === '' || raw == null) {
+            next[key] = '';
+          } else {
+            const parsed = Number(raw);
+            next[key] = Number.isFinite(parsed) ? parsed : '';
+          }
+        } else {
+          next[key] = raw ?? '';
+        }
       }
     }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
+    setInputs(next);
+    setInputsRow(structuredClone(next));
   }, [props.options]);
 
   return (
-    <>
-      <Spin spinning={loading}>
-        <Form
-          values={inputs}
-          getFormApi={(formAPI) => (refForm.current = formAPI)}
-          style={{ marginBottom: 15 }}
+    <div className='p-6 space-y-6'>
+      <div>
+        <div className='text-base font-semibold text-foreground'>
+          {t('模型请求速率限制')}
+        </div>
+      </div>
+
+      <label className='flex items-start justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+        <div className='min-w-0 flex-1'>
+          <div className='text-sm font-medium text-foreground'>
+            {t('启用用户模型请求速率限制（可能会影响高并发性能）')}
+          </div>
+        </div>
+        <Switch
+          isSelected={!!inputs.ModelRequestRateLimitEnabled}
+          onChange={setField('ModelRequestRateLimitEnabled')}
+          aria-label={t('启用用户模型请求速率限制')}
+          size='sm'
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </label>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+        <NumberField
+          label={t('限制周期')}
+          value={inputs.ModelRequestRateLimitDurationMinutes}
+          onChange={setField('ModelRequestRateLimitDurationMinutes')}
+          suffix={t('分钟')}
+          helper={t('频率限制的周期（分钟）')}
+        />
+        <NumberField
+          label={t('用户每周期最多请求次数')}
+          value={inputs.ModelRequestRateLimitCount}
+          onChange={setField('ModelRequestRateLimitCount')}
+          suffix={t('次')}
+          helper={t('包括失败请求的次数，0代表不限制')}
+          max={100000000}
+        />
+        <NumberField
+          label={t('用户每周期最多请求完成次数')}
+          value={inputs.ModelRequestRateLimitSuccessCount}
+          onChange={setField('ModelRequestRateLimitSuccessCount')}
+          suffix={t('次')}
+          helper={t('只包括请求成功的次数')}
+          min={1}
+          max={100000000}
+        />
+      </div>
+
+      <div className='space-y-2'>
+        <div className='text-sm font-medium text-foreground'>
+          {t('分组速率限制')}
+        </div>
+        <textarea
+          value={inputs.ModelRequestRateLimitGroup ?? ''}
+          onChange={(e) => {
+            setField('ModelRequestRateLimitGroup')(e.target.value);
+            setGroupJsonError('');
+          }}
+          onBlur={(e) => {
+            const v = e.target.value;
+            if (v && !verifyJSON(v)) {
+              setGroupJsonError(t('不是合法的 JSON 字符串'));
+            } else {
+              setGroupJsonError('');
+            }
+          }}
+          placeholder={'{\n  "default": [200, 100],\n  "vip": [0, 1000]\n}'}
+          rows={6}
+          aria-label={t('分组速率限制')}
+          className={`w-full resize-y rounded-lg border bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-primary ${
+            groupJsonError
+              ? 'border-rose-500'
+              : 'border-[color:var(--app-border)]'
+          }`}
+        />
+        {groupJsonError ? (
+          <div className='text-xs text-rose-600'>{groupJsonError}</div>
+        ) : null}
+        <div className='space-y-1 text-xs leading-snug text-muted'>
+          <div>{t('说明：')}</div>
+          <ul className='list-inside list-disc space-y-0.5'>
+            <li>
+              {t(
+                '使用 JSON 对象格式，格式为：{"组名": [最多请求次数, 最多请求完成次数]}',
+              )}
+            </li>
+            <li>{t('示例：{"default": [200, 100], "vip": [0, 1000]}。')}</li>
+            <li>
+              {t(
+                '[最多请求次数]必须大于等于0，[最多请求完成次数]必须大于等于1。',
+              )}
+            </li>
+            <li>
+              {t('[最多请求次数]和[最多请求完成次数]的最大值为2147483647。')}
+            </li>
+            <li>{t('分组速率配置优先级高于全局速率限制。')}</li>
+            <li>{t('限制周期统一使用上方配置的“限制周期”值。')}</li>
+          </ul>
+        </div>
+      </div>
+
+      <div className='border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          size='md'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[100px]'
         >
-          <Form.Section text={t('模型请求速率限制')}>
-            <Row gutter={16}>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.Switch
-                  field={'ModelRequestRateLimitEnabled'}
-                  label={t('启用用户模型请求速率限制（可能会影响高并发性能）')}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) => {
-                    setInputs({
-                      ...inputs,
-                      ModelRequestRateLimitEnabled: value,
-                    });
-                  }}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('限制周期')}
-                  step={1}
-                  min={0}
-                  suffix={t('分钟')}
-                  extraText={t('频率限制的周期（分钟）')}
-                  field={'ModelRequestRateLimitDurationMinutes'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      ModelRequestRateLimitDurationMinutes: String(value),
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('用户每周期最多请求次数')}
-                  step={1}
-                  min={0}
-                  max={100000000}
-                  suffix={t('次')}
-                  extraText={t('包括失败请求的次数，0代表不限制')}
-                  field={'ModelRequestRateLimitCount'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      ModelRequestRateLimitCount: String(value),
-                    })
-                  }
-                />
-              </Col>
-              <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-                <Form.InputNumber
-                  label={t('用户每周期最多请求完成次数')}
-                  step={1}
-                  min={1}
-                  max={100000000}
-                  suffix={t('次')}
-                  extraText={t('只包括请求成功的次数')}
-                  field={'ModelRequestRateLimitSuccessCount'}
-                  onChange={(value) =>
-                    setInputs({
-                      ...inputs,
-                      ModelRequestRateLimitSuccessCount: String(value),
-                    })
-                  }
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Col xs={24} sm={16}>
-                <Form.TextArea
-                  label={t('分组速率限制')}
-                  placeholder={t(
-                    '{\n  "default": [200, 100],\n  "vip": [0, 1000]\n}',
-                  )}
-                  field={'ModelRequestRateLimitGroup'}
-                  autosize={{ minRows: 5, maxRows: 15 }}
-                  trigger='blur'
-                  stopValidateWithError
-                  rules={[
-                    {
-                      validator: (rule, value) => verifyJSON(value),
-                      message: t('不是合法的 JSON 字符串'),
-                    },
-                  ]}
-                  extraText={
-                    <div>
-                      <p>{t('说明：')}</p>
-                      <ul>
-                        <li>
-                          {t(
-                            '使用 JSON 对象格式，格式为：{"组名": [最多请求次数, 最多请求完成次数]}',
-                          )}
-                        </li>
-                        <li>
-                          {t(
-                            '示例：{"default": [200, 100], "vip": [0, 1000]}。',
-                          )}
-                        </li>
-                        <li>
-                          {t(
-                            '[最多请求次数]必须大于等于0，[最多请求完成次数]必须大于等于1。',
-                          )}
-                        </li>
-                        <li>
-                          {t(
-                            '[最多请求次数]和[最多请求完成次数]的最大值为2147483647。',
-                          )}
-                        </li>
-                        <li>{t('分组速率配置优先级高于全局速率限制。')}</li>
-                        <li>{t('限制周期统一使用上方配置的“限制周期”值。')}</li>
-                      </ul>
-                    </div>
-                  }
-                  onChange={(value) => {
-                    setInputs({ ...inputs, ModelRequestRateLimitGroup: value });
-                  }}
-                />
-              </Col>
-            </Row>
-            <Row>
-              <Button size='default' onClick={onSubmit}>
-                {t('保存模型速率限制')}
-              </Button>
-            </Row>
-          </Form.Section>
-        </Form>
-      </Spin>
-    </>
+          {t('保存模型速率限制')}
+        </Button>
+      </div>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Ratio/GroupRatioSettings.jsx b/web/src/pages/Setting/Ratio/GroupRatioSettings.jsx
index 957cbec502a..5c5c409889e 100644
--- a/web/src/pages/Setting/Ratio/GroupRatioSettings.jsx
+++ b/web/src/pages/Setting/Ratio/GroupRatioSettings.jsx
@@ -6,34 +6,16 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef, useCallback, useMemo } from 'react';
-import {
-  Button,
-  Col,
-  Collapsible,
-  Form,
-  Radio,
-  RadioGroup,
-  Row,
-  SideSheet,
-  Spin,
-  Switch,
-  Tabs,
-  Typography,
-} from '@douyinfe/semi-ui';
-import { IconChevronDown, IconChevronUp } from '@douyinfe/semi-icons';
-import { IconHelpCircle } from '@douyinfe/semi-icons';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Spinner, Switch } from '@heroui/react';
+import { ChevronDown, HelpCircle, X } from 'lucide-react';
 import {
   compareObjects,
   API,
@@ -42,13 +24,77 @@ import {
   showWarning,
   verifyJSON,
 } from '../../../helpers';
-import { useTranslation } from 'react-i18next';
 import GroupTable from './components/GroupTable';
 import AutoGroupList from './components/AutoGroupList';
 import GroupGroupRatioRules from './components/GroupGroupRatioRules';
 import GroupSpecialUsableRules from './components/GroupSpecialUsableRules';
 
-const { Text, Title, Paragraph } = Typography;
+// ----------------------------- helpers -----------------------------
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+const textareaClass =
+  'w-full rounded-xl border border-border bg-background px-3 py-2 font-mono text-xs text-foreground outline-none transition focus:border-primary';
+
+function FieldLabel({ children }) {
+  return (
+    <label className='block text-sm font-medium text-foreground'>
+      {children}
+    </label>
+  );
+}
+
+function FieldHint({ children }) {
+  if (!children) return null;
+  return <div className='mt-1.5 text-xs text-muted'>{children}</div>;
+}
+
+function FieldError({ children }) {
+  if (!children) return null;
+  return <div className='mt-1 text-xs text-danger'>{children}</div>;
+}
+
+function SectionHeader({ title }) {
+  if (!title) return null;
+  return (
+    <div className='border-b border-border pb-2 text-base font-semibold text-foreground'>
+      {title}
+    </div>
+  );
+}
+
+function CodeBlock({ children }) {
+  return (
+    <pre className='my-2 overflow-x-auto whitespace-pre-wrap rounded-md border border-border bg-surface-secondary px-3.5 py-2.5 font-mono text-[13px] leading-7 text-foreground'>
+      {children}
+    </pre>
+  );
+}
+
+function GuideSection({ title, children }) {
+  const [open, setOpen] = useState(false);
+  return (
+    <div className='mt-4'>
+      <button
+        type='button'
+        onClick={() => setOpen((v) => !v)}
+        className='inline-flex items-center gap-1 px-0 py-1 text-sm font-medium text-primary hover:underline'
+      >
+        <ChevronDown
+          size={14}
+          className={`transition-transform ${open ? 'rotate-180' : ''}`}
+        />
+        <span>{title}</span>
+      </button>
+      {open && (
+        <div className='mt-2 rounded-md bg-surface-secondary p-3'>
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
 
 const OPTION_KEYS = [
   'GroupRatio',
@@ -68,22 +114,40 @@ function parseJSONSafe(str, fallback) {
   }
 }
 
+// Validation helpers (replace Semi `<Form.TextArea rules>`)
+const validateJSON = (value) => !value || verifyJSON(value);
+const validateAutoGroups = (value) => {
+  if (!value || value.trim() === '') return true;
+  try {
+    const parsed = JSON.parse(value);
+    if (!Array.isArray(parsed)) return false;
+    return parsed.every((item) => typeof item === 'string');
+  } catch {
+    return false;
+  }
+};
+
+// ----------------------------- main -----------------------------
+
+const INITIAL_INPUTS = {
+  GroupRatio: '',
+  UserUsableGroups: '',
+  GroupGroupRatio: '',
+  'group_ratio_setting.group_special_usable_group': '',
+  AutoGroups: '',
+  DefaultUseAutoGroup: false,
+};
+
 export default function GroupRatioSettings(props) {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [editMode, setEditMode] = useState('visual');
   const [showGuide, setShowGuide] = useState(false);
+  const [guideTab, setGuideTab] = useState('overview');
 
-  const [inputs, setInputs] = useState({
-    GroupRatio: '',
-    UserUsableGroups: '',
-    GroupGroupRatio: '',
-    'group_ratio_setting.group_special_usable_group': '',
-    AutoGroups: '',
-    DefaultUseAutoGroup: false,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
+  const [inputs, setInputs] = useState(INITIAL_INPUTS);
+  const [inputsRow, setInputsRow] = useState(INITIAL_INPUTS);
+  const [errors, setErrors] = useState({});
   const dataVersionRef = useRef(0);
 
   const groupNames = useMemo(() => {
@@ -91,14 +155,42 @@ export default function GroupRatioSettings(props) {
     return Object.keys(ratioMap);
   }, [inputs.GroupRatio]);
 
+  const setField = (key) => (value) => {
+    setInputs((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
+
+  const validateManual = () => {
+    const next = {};
+    if (!validateJSON(inputs.GroupRatio)) {
+      next.GroupRatio = t('不是合法的 JSON 字符串');
+    }
+    if (!validateJSON(inputs.UserUsableGroups)) {
+      next.UserUsableGroups = t('不是合法的 JSON 字符串');
+    }
+    if (!validateJSON(inputs.GroupGroupRatio)) {
+      next.GroupGroupRatio = t('不是合法的 JSON 字符串');
+    }
+    if (
+      !validateJSON(inputs['group_ratio_setting.group_special_usable_group'])
+    ) {
+      next['group_ratio_setting.group_special_usable_group'] = t(
+        '不是合法的 JSON 字符串',
+      );
+    }
+    if (!validateAutoGroups(inputs.AutoGroups)) {
+      next.AutoGroups = t(
+        '必须是有效的 JSON 字符串数组，例如：["g1","g2"]',
+      );
+    }
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
+
   async function onSubmit() {
-    if (editMode === 'manual') {
-      try {
-        await refForm.current.validate();
-      } catch {
-        showError(t('请检查输入'));
-        return;
-      }
+    if (editMode === 'manual' && !validateManual()) {
+      showError(t('请检查输入'));
+      return;
     }
 
     const updateArray = compareObjects(inputs, inputsRow);
@@ -119,9 +211,7 @@ export default function GroupRatioSettings(props) {
       const res = await Promise.all(requestQueue);
       if (res.includes(undefined)) {
         return showError(
-          requestQueue.length > 1
-            ? t('部分保存失败，请重试')
-            : t('保存失败'),
+          requestQueue.length > 1 ? t('部分保存失败，请重试') : t('保存失败'),
         );
       }
       for (let i = 0; i < res.length; i++) {
@@ -141,19 +231,26 @@ export default function GroupRatioSettings(props) {
 
   useEffect(() => {
     const currentInputs = {};
-    for (let key in props.options) {
+    for (const key in props.options) {
       if (OPTION_KEYS.includes(key)) {
         currentInputs[key] = props.options[key];
       }
     }
-    setInputs(currentInputs);
-    setInputsRow(structuredClone(currentInputs));
+    setInputs((prev) => ({ ...prev, ...currentInputs }));
+    setInputsRow({ ...INITIAL_INPUTS, ...structuredClone(currentInputs) });
     dataVersionRef.current += 1;
-    if (refForm.current) {
-      refForm.current.setValues(currentInputs);
-    }
   }, [props.options]);
 
+  // ESC-to-close guide
+  useEffect(() => {
+    if (!showGuide) return;
+    const onKey = (event) => {
+      if (event.key === 'Escape') setShowGuide(false);
+    };
+    document.addEventListener('keydown', onKey);
+    return () => document.removeEventListener('keydown', onKey);
+  }, [showGuide]);
+
   const handleGroupTableChange = useCallback(
     ({ GroupRatio, UserUsableGroups }) => {
       setInputs((prev) => ({ ...prev, GroupRatio, UserUsableGroups }));
@@ -178,581 +275,647 @@ export default function GroupRatioSettings(props) {
 
   const dv = dataVersionRef.current;
 
+  // ---------- Visual mode ---------- //
   const renderVisualMode = () => (
-    <Form key='form-visual' values={inputs} style={{ marginBottom: 15 }}>
-      <Form.Section text={t('分组管理')}>
-        <Text type='tertiary' size='small' style={{ display: 'block', marginBottom: 12 }}>
+    <div className='space-y-6'>
+      <div className='space-y-3'>
+        <SectionHeader title={t('分组管理')} />
+        <div className='text-xs text-muted'>
           {t('倍率用于计费乘数，勾选「用户可选」后用户可在创建令牌时选择该分组')}
-        </Text>
+        </div>
         <GroupTable
           key={`gt_${dv}`}
           groupRatio={inputs.GroupRatio}
           userUsableGroups={inputs.UserUsableGroups}
           onChange={handleGroupTableChange}
         />
-      </Form.Section>
-
-      <Form.Section text={t('自动分组')}>
-        <Text type='tertiary' size='small' style={{ display: 'block', marginBottom: 12 }}>
-          {t('令牌分组设为 auto 时，按以下顺序依次尝试选择可用分组，排在前面的优先级更高')}
-        </Text>
-        <Row gutter={16}>
-          <Col xs={24} sm={12} md={8} lg={8} xl={8}>
-            <Form.Slot label={t('默认使用auto分组')}>
-              <div className='flex items-center gap-2'>
-                <Switch
-                  checked={!!inputs.DefaultUseAutoGroup}
-                  size='default'
-                  checkedText='｜'
-                  uncheckedText='〇'
-                  onChange={(value) =>
-                    setInputs((prev) => ({
-                      ...prev,
-                      DefaultUseAutoGroup: value,
-                    }))
-                  }
-                />
-              </div>
-              <Text type='tertiary' size='small' style={{ marginTop: 4 }}>
-                {t('开启后创建令牌默认选择auto分组，初始令牌也将设为auto')}
-              </Text>
-            </Form.Slot>
-          </Col>
-        </Row>
+      </div>
+
+      <div className='space-y-3'>
+        <SectionHeader title={t('自动分组')} />
+        <div className='text-xs text-muted'>
+          {t(
+            '令牌分组设为 auto 时，按以下顺序依次尝试选择可用分组，排在前面的优先级更高',
+          )}
+        </div>
+        <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3'>
+          <div className='space-y-2'>
+            <FieldLabel>{t('默认使用auto分组')}</FieldLabel>
+            <div className='flex items-center gap-2'>
+              <Switch
+                isSelected={!!inputs.DefaultUseAutoGroup}
+                onValueChange={(value) =>
+                  setInputs((prev) => ({
+                    ...prev,
+                    DefaultUseAutoGroup: value,
+                  }))
+                }
+                size='md'
+                aria-label={t('默认使用auto分组')}
+              >
+                <Switch.Control>
+                  <Switch.Thumb />
+                </Switch.Control>
+              </Switch>
+            </div>
+            <FieldHint>
+              {t('开启后创建令牌默认选择auto分组，初始令牌也将设为auto')}
+            </FieldHint>
+          </div>
+        </div>
         <AutoGroupList
           key={`ag_${dv}`}
           value={inputs.AutoGroups}
           groupNames={groupNames}
           onChange={handleAutoGroupsChange}
         />
-      </Form.Section>
+      </div>
 
-      <Form.Section text={t('分组特殊倍率')}>
-        <Text type='tertiary' size='small' style={{ display: 'block', marginBottom: 12 }}>
-          {t('当某个分组的用户使用另一个分组的令牌时，可设置特殊倍率覆盖基础倍率。例如：vip 分组的用户使用 default 分组时倍率为 0.5')}
-        </Text>
+      <div className='space-y-3'>
+        <SectionHeader title={t('分组特殊倍率')} />
+        <div className='text-xs text-muted'>
+          {t(
+            '当某个分组的用户使用另一个分组的令牌时，可设置特殊倍率覆盖基础倍率。例如：vip 分组的用户使用 default 分组时倍率为 0.5',
+          )}
+        </div>
         <GroupGroupRatioRules
           key={`ggr_${dv}`}
           value={inputs.GroupGroupRatio}
           groupNames={groupNames}
           onChange={handleGroupGroupRatioChange}
         />
-      </Form.Section>
+      </div>
 
-      <Form.Section text={t('分组特殊可用分组')}>
-        <Text type='tertiary' size='small' style={{ display: 'block', marginBottom: 12 }}>
-          {t('为特定用户分组配置可用分组的增减规则。「添加」为该分组新增可用分组，「移除」移除默认可用分组，「追加」直接追加分组')}
-        </Text>
+      <div className='space-y-3'>
+        <SectionHeader title={t('分组特殊可用分组')} />
+        <div className='text-xs text-muted'>
+          {t(
+            '为特定用户分组配置可用分组的增减规则。「添加」为该分组新增可用分组，「移除」移除默认可用分组，「追加」直接追加分组',
+          )}
+        </div>
         <GroupSpecialUsableRules
           key={`gsu_${dv}`}
           value={inputs['group_ratio_setting.group_special_usable_group']}
           groupNames={groupNames}
           onChange={handleSpecialUsableChange}
         />
-      </Form.Section>
-    </Form>
+      </div>
+    </div>
   );
 
-  useEffect(() => {
-    if (editMode === 'manual' && refForm.current) {
-      refForm.current.setValues(inputs);
-    }
-  }, [editMode]);
-
+  // ---------- Manual mode ---------- //
   const renderManualMode = () => (
-    <Form
-      key='form-manual'
-      initValues={inputs}
-      getFormApi={(formAPI) => (refForm.current = formAPI)}
-      style={{ marginBottom: 15 }}
-    >
-      <Form.Section text={t('分组JSON设置')}>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('分组倍率')}
-              placeholder={t('为一个 JSON 文本，键为分组名称，值为倍率')}
-              extraText={t(
-                '分组倍率设置，可以在此处新增分组或修改现有分组的倍率，格式为 JSON 字符串，例如：{"vip": 0.5, "test": 1}，表示 vip 分组的倍率为 0.5，test 分组的倍率为 1',
-              )}
-              field={'GroupRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: t('不是合法的 JSON 字符串'),
-                },
-              ]}
-              onChange={(value) =>
-                setInputs((prev) => ({ ...prev, GroupRatio: value }))
-              }
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('用户可选分组')}
-              placeholder={t(
-                '为一个 JSON 文本，键为分组名称，值为分组描述',
-              )}
-              extraText={t(
-                '用户新建令牌时可选的分组，格式为 JSON 字符串，例如：{"vip": "VIP 用户", "test": "测试"}，表示用户可以选择 vip 分组和 test 分组',
-              )}
-              field={'UserUsableGroups'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: t('不是合法的 JSON 字符串'),
-                },
-              ]}
-              onChange={(value) =>
-                setInputs((prev) => ({ ...prev, UserUsableGroups: value }))
-              }
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('分组特殊倍率')}
-              placeholder={t('为一个 JSON 文本')}
-              extraText={t(
-                '键为分组名称，值为另一个 JSON 对象，键为分组名称，值为该分组的用户的特殊分组倍率，例如：{"vip": {"default": 0.5, "test": 1}}，表示 vip 分组的用户在使用default分组的令牌时倍率为0.5，使用test分组时倍率为1',
-              )}
-              field={'GroupGroupRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: t('不是合法的 JSON 字符串'),
-                },
-              ]}
-              onChange={(value) =>
-                setInputs((prev) => ({ ...prev, GroupGroupRatio: value }))
-              }
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('分组特殊可用分组')}
-              placeholder={t('为一个 JSON 文本')}
-              extraText={t(
-                '键为用户分组名称，值为操作映射对象。内层键以"+:"开头表示添加指定分组（键值为分组名称，值为描述），以"-:"开头表示移除指定分组（键值为分组名称），不带前缀的键直接添加该分组。例如：{"vip": {"+:premium": "高级分组", "special": "特殊分组", "-:default": "默认分组"}}，表示 vip 分组的用户可以使用 premium 和 special 分组，同时移除 default 分组的访问权限',
-              )}
-              field={'group_ratio_setting.group_special_usable_group'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: t('不是合法的 JSON 字符串'),
-                },
-              ]}
-              onChange={(value) =>
-                setInputs((prev) => ({
-                  ...prev,
-                  'group_ratio_setting.group_special_usable_group': value,
-                }))
-              }
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('自动分组auto，从第一个开始选择')}
-              placeholder={t('为一个 JSON 文本')}
-              field={'AutoGroups'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => {
-                    if (!value || value.trim() === '') return true;
-                    try {
-                      const parsed = JSON.parse(value);
-                      if (!Array.isArray(parsed)) return false;
-                      return parsed.every((item) => typeof item === 'string');
-                    } catch {
-                      return false;
-                    }
-                  },
-                  message: t(
-                    '必须是有效的 JSON 字符串数组，例如：["g1","g2"]',
-                  ),
-                },
-              ]}
-              onChange={(value) =>
-                setInputs((prev) => ({ ...prev, AutoGroups: value }))
-              }
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col span={16}>
-            <Form.Switch
-              label={t(
-                '创建令牌默认选择auto分组，初始令牌也将设为auto（否则留空，为用户默认分组）',
-              )}
-              field={'DefaultUseAutoGroup'}
-              onChange={(value) =>
-                setInputs((prev) => ({
-                  ...prev,
-                  DefaultUseAutoGroup: value,
-                }))
-              }
-            />
-          </Col>
-        </Row>
-      </Form.Section>
-    </Form>
-  );
+    <div className='space-y-4'>
+      <SectionHeader title={t('分组JSON设置')} />
+
+      <div className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+        <div className='space-y-2 sm:col-span-2'>
+          <FieldLabel>{t('分组倍率')}</FieldLabel>
+          <textarea
+            rows={6}
+            value={inputs.GroupRatio || ''}
+            onChange={(event) => setField('GroupRatio')(event.target.value)}
+            placeholder={t('为一个 JSON 文本，键为分组名称，值为倍率')}
+            className={textareaClass}
+          />
+          <FieldError>{errors.GroupRatio}</FieldError>
+          <FieldHint>
+            {t(
+              '分组倍率设置，可以在此处新增分组或修改现有分组的倍率，格式为 JSON 字符串，例如：{"vip": 0.5, "test": 1}，表示 vip 分组的倍率为 0.5，test 分组的倍率为 1',
+            )}
+          </FieldHint>
+        </div>
+      </div>
 
-  const GuideSection = ({ title, children }) => {
-    const [open, setOpen] = useState(false);
-    return (
-      <div style={{ marginTop: 16 }}>
-        <Button
-          theme='borderless'
-          size='small'
-          icon={open ? <IconChevronUp /> : <IconChevronDown />}
-          onClick={() => setOpen(!open)}
-          style={{ padding: '4px 0', color: 'var(--semi-color-primary)' }}
-        >
-          {title}
-        </Button>
-        <Collapsible isOpen={open} keepDOM>
-          <div
-            style={{
-              background: 'var(--semi-color-fill-0)',
-              padding: '12px 16px',
-              borderRadius: 8,
-              marginTop: 8,
-            }}
-          >
-            {children}
-          </div>
-        </Collapsible>
+      <div className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+        <div className='space-y-2 sm:col-span-2'>
+          <FieldLabel>{t('用户可选分组')}</FieldLabel>
+          <textarea
+            rows={6}
+            value={inputs.UserUsableGroups || ''}
+            onChange={(event) =>
+              setField('UserUsableGroups')(event.target.value)
+            }
+            placeholder={t('为一个 JSON 文本，键为分组名称，值为分组描述')}
+            className={textareaClass}
+          />
+          <FieldError>{errors.UserUsableGroups}</FieldError>
+          <FieldHint>
+            {t(
+              '用户新建令牌时可选的分组，格式为 JSON 字符串，例如：{"vip": "VIP 用户", "test": "测试"}，表示用户可以选择 vip 分组和 test 分组',
+            )}
+          </FieldHint>
+        </div>
       </div>
-    );
-  };
 
-  const CodeBlock = ({ children }) => (
-    <pre
-      style={{
-        background: 'var(--semi-color-bg-2)',
-        border: '1px solid var(--semi-color-border)',
-        padding: '10px 14px',
-        borderRadius: 6,
-        fontFamily: 'monospace',
-        fontSize: 13,
-        margin: '8px 0',
-        whiteSpace: 'pre-wrap',
-        lineHeight: 1.6,
-        overflowX: 'auto',
-      }}
-    >
-      {children}
-    </pre>
-  );
+      <div className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+        <div className='space-y-2 sm:col-span-2'>
+          <FieldLabel>{t('分组特殊倍率')}</FieldLabel>
+          <textarea
+            rows={6}
+            value={inputs.GroupGroupRatio || ''}
+            onChange={(event) =>
+              setField('GroupGroupRatio')(event.target.value)
+            }
+            placeholder={t('为一个 JSON 文本')}
+            className={textareaClass}
+          />
+          <FieldError>{errors.GroupGroupRatio}</FieldError>
+          <FieldHint>
+            {t(
+              '键为分组名称，值为另一个 JSON 对象，键为分组名称，值为该分组的用户的特殊分组倍率，例如：{"vip": {"default": 0.5, "test": 1}}，表示 vip 分组的用户在使用default分组的令牌时倍率为0.5，使用test分组时倍率为1',
+            )}
+          </FieldHint>
+        </div>
+      </div>
 
-  const renderGuide = () => (
-    <SideSheet
-      title={t('分组设置使用说明')}
-      visible={showGuide}
-      onCancel={() => setShowGuide(false)}
-      width={560}
-      bodyStyle={{ overflow: 'auto', padding: '0 24px 24px' }}
-    >
-      <Tabs type='line' size='small'>
-        <Tabs.TabPane tab={t('概览')} itemKey='overview'>
-          <div style={{ paddingTop: 20 }}>
-            <Title heading={5}>{t('什么是分组？')}</Title>
-            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
-              {t(
-                '分组是用于控制计费倍率和模型访问权限的核心概念。每个用户属于一个分组，每个令牌也可以指定使用某个分组。',
-              )}
-            </Paragraph>
-            <Paragraph style={{ marginTop: 8, lineHeight: 1.8 }}>
-              {t(
-                '通过分组可以实现不同用户等级的差异化定价，例如 VIP 用户享受更低的 API 调用费用。',
-              )}
-            </Paragraph>
-
-            <GuideSection title={t('核心概念')}>
-              <Paragraph style={{ lineHeight: 1.8 }}>
-                <Text strong>{t('用户分组')}</Text>{' — '}
-                {t('由管理员分配，决定用户身份等级（如 default、vip）。')}
-              </Paragraph>
-              <Paragraph style={{ lineHeight: 1.8, marginTop: 4 }}>
-                <Text strong>{t('令牌分组')}</Text>{' — '}
-                {t('用户创建令牌时选择的分组，决定该令牌的实际计费倍率。一个用户可以创建多个令牌，使用不同分组。')}
-              </Paragraph>
-              <Paragraph style={{ lineHeight: 1.8, marginTop: 4 }}>
-                <Text strong>{t('倍率')}</Text>{' — '}
-                {t('计费乘数，倍率越低费用越低。例如倍率 0.5 表示半价。')}
-              </Paragraph>
-              <Paragraph style={{ lineHeight: 1.8, marginTop: 4 }}>
-                <Text strong>{t('用户可选')}</Text>{' — '}
-                {t('勾选后，该分组会出现在用户创建令牌时的下拉菜单中。未勾选的分组只能由管理员分配，用户自己无法选择。')}
-              </Paragraph>
-              <Paragraph style={{ lineHeight: 1.8, marginTop: 4 }}>
-                <Text strong>{t('自动分组')}</Text>{' — '}
-                {t('令牌分组设为 auto 时，系统按优先级顺序自动选择一个可用分组。')}
-              </Paragraph>
-            </GuideSection>
-          </div>
-        </Tabs.TabPane>
-
-        <Tabs.TabPane tab={t('分组管理')} itemKey='groups'>
-          <div style={{ paddingTop: 20 }}>
-            <Title heading={5}>{t('创建和管理分组')}</Title>
-            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
-              {t('每个分组代表一个价格档位。管理员创建分组后，可以选择哪些档位对用户开放自选。')}
-            </Paragraph>
-
-            <GuideSection title={t('查看示例')}>
-              <Paragraph size='small' type='tertiary' style={{ marginBottom: 8 }}>
-                {t('场景：站点提供两个价格档位，用户可以按需选择')}
-              </Paragraph>
-              <CodeBlock>
-                {`${t('分组名')}      ${t('倍率')}    ${t('用户可选')}    ${t('说明')}\n──────────────────────────────────────\nstandard  1.0     ${t('是')}        ${t('标准价格')}\npremium   0.5     ${t('是')}        ${t('高级套餐，半价优惠')}`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 10, lineHeight: 1.8 }}>
-                {t('两个分组都勾选了「用户可选」，所以用户创建令牌时可以看到这两个选项：')}
-              </Paragraph>
-              <CodeBlock>
-                {t('用户创建令牌 → 选择分组下拉框：')}{'\n'}
-                {`  ├─ standard (${t('标准价格')})`}{'\n'}
-                {`  └─ premium  (${t('高级套餐，半价优惠')})`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 10, lineHeight: 1.8 }}>
-                {t('选择 premium 创建的令牌，调用 API 时费用为 standard 的 50%。')}
-              </Paragraph>
-              <Paragraph size='small' style={{ marginTop: 16, lineHeight: 1.8 }}>
-                <Text strong>{t('对比：不勾选「用户可选」的场景')}</Text>
-              </Paragraph>
-              <Paragraph size='small' style={{ marginTop: 4, lineHeight: 1.8 }}>
-                {t('假设再加两个分组 default 和 vip，但不勾选用户可选：')}
-              </Paragraph>
-              <CodeBlock>
-                {`${t('分组名')}      ${t('倍率')}    ${t('用户可选')}    ${t('说明')}\n──────────────────────────────────────\ndefault   1.0     ${t('否')}        ${t('管理员分配的基础分组')}\nvip       0.5     ${t('否')}        ${t('管理员分配的优惠分组')}\nstandard  1.0     ${t('是')}        ${t('标准价格')}\npremium   0.5     ${t('是')}        ${t('高级套餐，半价优惠')}`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 8, lineHeight: 1.8 }}>
-                {t('此时用户创建令牌时只能看到 standard 和 premium：')}
-              </Paragraph>
-              <CodeBlock>
-                {t('用户创建令牌 → 选择分组下拉框：')}{'\n'}
-                {`  ├─ standard (${t('标准价格')})`}{'\n'}
-                {`  └─ premium  (${t('高级套餐，半价优惠')})`}{'\n\n'}
-                {`  ${t('不会出现')} default ${t('和')} vip`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 8, lineHeight: 1.8 }}>
-                {t('default 和 vip 只能由管理员在「用户管理」中分配给用户。适用于按用户等级定价、内部测试等不希望用户自主选择的场景。')}
-              </Paragraph>
-              <Paragraph size='small' style={{ marginTop: 12, lineHeight: 1.8 }}>
-                <Text strong>{t('用户分组的联动作用')}</Text>
-              </Paragraph>
-              <Paragraph size='small' style={{ lineHeight: 1.8 }}>
-                {t('管理员给用户分配的分组（如 vip）不仅决定用户身份，还会影响后续两个功能：')}
-              </Paragraph>
-              <Paragraph size='small' style={{ lineHeight: 1.8, marginTop: 4 }}>
-                {'1. '}<Text strong>{t('特殊倍率')}</Text>{' — '}
-                {t('可以根据用户分组设置不同的计费倍率。例如 vip 用户使用 standard 令牌时倍率从 1.0 降为 0.8。')}
-              </Paragraph>
-              <Paragraph size='small' style={{ lineHeight: 1.8, marginTop: 2 }}>
-                {'2. '}<Text strong>{t('可用分组')}</Text>{' — '}
-                {t('可以根据用户分组增减令牌可选的分组范围。例如 vip 用户额外开放 premium 分组，或移除某个分组的选择权。')}
-              </Paragraph>
-              <Paragraph size='small' type='tertiary' style={{ lineHeight: 1.8, marginTop: 6 }}>
-                {t('详见「特殊倍率」和「可用分组」标签页。')}
-              </Paragraph>
-            </GuideSection>
-
-            <GuideSection title={t('JSON 格式参考')}>
-              <Paragraph size='small' style={{ marginBottom: 4 }}>
-                <Text strong code>GroupRatio</Text>{' — '}{t('分组名称到倍率的映射')}
-              </Paragraph>
-              <CodeBlock>{`{"default": 1, "vip": 0.5, "standard": 1, "premium": 0.5}`}</CodeBlock>
-              <Paragraph size='small' style={{ marginBottom: 4, marginTop: 8 }}>
-                <Text strong code>UserUsableGroups</Text>{' — '}{t('用户可选分组的名称和描述（只包含勾选了用户可选的分组）')}
-              </Paragraph>
-              <CodeBlock>{`{"standard": "${t('标准价格')}", "premium": "${t('高级套餐，半价优惠')}"}`}</CodeBlock>
-            </GuideSection>
-          </div>
-        </Tabs.TabPane>
-
-        <Tabs.TabPane tab={t('自动分组')} itemKey='auto'>
-          <div style={{ paddingTop: 20 }}>
-            <Title heading={5}>{t('自动分组选择')}</Title>
-            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
-              {t('当令牌分组设为 auto 时，系统按列表顺序依次选择可用分组。排在前面的优先级更高。')}
-            </Paragraph>
-
-            <GuideSection title={t('查看示例')}>
-              <Paragraph size='small' type='tertiary' style={{ marginBottom: 6 }}>
-                {t('场景：设置自动选择优先级')}
-              </Paragraph>
-              <CodeBlock>
-                {`1. default    ${t('最高优先级')}\n2. vip`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 6, lineHeight: 1.6 }}>
-                {t('开启「默认使用 auto 分组」后，新建令牌和初始令牌都会自动设为 auto。')}
-              </Paragraph>
-            </GuideSection>
-
-            <GuideSection title={t('JSON 格式参考')}>
-              <Paragraph size='small' style={{ marginBottom: 4 }}>
-                <Text strong code>AutoGroups</Text>{' — '}{t('有序字符串数组')}
-              </Paragraph>
-              <CodeBlock>{`["default", "vip"]`}</CodeBlock>
-            </GuideSection>
-          </div>
-        </Tabs.TabPane>
-
-        <Tabs.TabPane tab={t('特殊倍率')} itemKey='ratios'>
-          <div style={{ paddingTop: 20 }}>
-            <Title heading={5}>{t('跨分组特殊倍率')}</Title>
-            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
-              {t('正常情况下，令牌的计费倍率由令牌所选的分组决定。特殊倍率可以根据「用户所在分组」进一步覆盖这个倍率。')}
-            </Paragraph>
-            <Paragraph style={{ marginTop: 8, lineHeight: 1.8 }}>
-              {t('简单来说：同一个令牌分组，不同等级的用户可以享受不同的价格。')}
-            </Paragraph>
-
-            <GuideSection title={t('查看示例')}>
-              <Paragraph size='small' type='tertiary' style={{ marginBottom: 8 }}>
-                {t('场景：站点有 standard（倍率 1.0）和 premium（倍率 0.5）两个分组，希望 vip 用户使用 standard 令牌时也能享受折扣')}
-              </Paragraph>
-              <Paragraph size='small' style={{ marginBottom: 8, lineHeight: 1.8 }}>
-                <Text strong>{t('不配置特殊倍率时：')}</Text>
-              </Paragraph>
-              <CodeBlock>
-                {`${t('普通用户')} + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('原价')})\nvip ${t('用户')}  + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('原价，和普通用户一样')})`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 10, marginBottom: 8, lineHeight: 1.8 }}>
-                <Text strong>{t('配置特殊倍率后：')}</Text>
-              </Paragraph>
-              <CodeBlock>
-                {`${t('用户分组')}    ${t('使用分组')}    ${t('倍率')}\n────────────────────────────\nvip       standard   0.8\nvip       premium    0.3`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 10, lineHeight: 1.8 }}>
-                {t('配置后的效果：')}
-              </Paragraph>
-              <CodeBlock>
-                {`${t('普通用户')} + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('不变')})\nvip ${t('用户')}  + standard ${t('令牌')} → ${t('倍率')} 0.8  (${t('享受 8 折')})\nvip ${t('用户')}  + premium  ${t('令牌')} → ${t('倍率')} 0.3  (${t('从 0.5 降到 0.3')})`}
-              </CodeBlock>
-              <Paragraph size='small' type='tertiary' style={{ marginTop: 10, lineHeight: 1.8 }}>
-                {t('只有配置了规则的组合才会覆盖，未配置的组合仍使用令牌分组的基础倍率。')}
-              </Paragraph>
-            </GuideSection>
-
-            <GuideSection title={t('JSON 格式参考')}>
-              <Paragraph size='small' style={{ marginBottom: 4 }}>
-                <Text strong code>GroupGroupRatio</Text>{' — '}{t('嵌套映射：用户分组 → 使用分组 → 倍率')}
-              </Paragraph>
-              <CodeBlock>{`{\n  "vip": {\n    "standard": 0.8,\n    "premium": 0.3\n  }\n}`}</CodeBlock>
-            </GuideSection>
-          </div>
-        </Tabs.TabPane>
-
-        <Tabs.TabPane tab={t('可用分组')} itemKey='usable'>
-          <div style={{ paddingTop: 20 }}>
-            <Title heading={5}>{t('特殊可用分组规则')}</Title>
-            <Paragraph style={{ marginTop: 12, lineHeight: 1.8 }}>
-              {t('默认情况下，所有用户创建令牌时看到的可选分组列表是一样的（即「用户可选」列勾选的分组）。')}
-            </Paragraph>
-            <Paragraph style={{ marginTop: 8, lineHeight: 1.8 }}>
-              {t('通过此功能，可以根据用户所在分组，为不同等级的用户展示不同的可选列表。')}
-            </Paragraph>
-
-            <GuideSection title={t('查看示例')}>
-              <Paragraph size='small' type='tertiary' style={{ marginBottom: 8 }}>
-                {t('场景：站点有 standard 和 premium 两个用户可选分组。希望 vip 用户额外看到 exclusive 分组，同时不再看到 standard 分组')}
-              </Paragraph>
-              <Paragraph size='small' style={{ marginBottom: 8, lineHeight: 1.8 }}>
-                <Text strong>{t('不配置规则时，所有用户看到的下拉框一样：')}</Text>
-              </Paragraph>
-              <CodeBlock>
-                {`${t('所有用户')} → ${t('创建令牌可选')}:\n  ├─ standard\n  └─ premium`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 10, marginBottom: 8, lineHeight: 1.8 }}>
-                <Text strong>{t('为 vip 用户配置规则：')}</Text>
-              </Paragraph>
-              <CodeBlock>
-                {`${t('用户分组')}    ${t('操作')}        ${t('目标分组')}    ${t('描述')}\n──────────────────────────────────────────\nvip       ${t('添加')} (+:)   exclusive   ${t('专属分组')}\nvip       ${t('移除')} (-:)   standard    -`}
-              </CodeBlock>
-              <Paragraph size='small' style={{ marginTop: 10, lineHeight: 1.8 }}>
-                {t('配置后的效果：')}
-              </Paragraph>
-              <CodeBlock>
-                {`${t('普通用户')} → ${t('创建令牌可选')}:\n  ├─ standard\n  └─ premium\n\nvip ${t('用户')} → ${t('创建令牌可选')}:\n  ├─ premium     (${t('保留')})\n  └─ exclusive   (${t('新增')})\n\n  ${t('standard 已被移除，vip 用户看不到')}`}
-              </CodeBlock>
-
-              <Paragraph size='small' style={{ marginTop: 14, lineHeight: 1.8 }}>
-                <Text strong>{t('三种操作的区别：')}</Text>
-              </Paragraph>
-              <CodeBlock>
-                {`${t('添加')} (+:)  → ${t('在默认列表基础上新增一个分组')}\n${t('移除')} (-:)  → ${t('从默认列表中去掉一个分组')}\n${t('追加')}       → ${t('直接追加（和添加类似，但无前缀）')}`}
-              </CodeBlock>
-            </GuideSection>
-
-            <GuideSection title={t('JSON 格式参考')}>
-              <Paragraph size='small' style={{ marginBottom: 4 }}>
-                <Text strong code>group_special_usable_group</Text>
-              </Paragraph>
-              <CodeBlock>{`{\n  "vip": {\n    "+:exclusive": "${t('专属分组')}",\n    "-:standard": "remove"\n  }\n}`}</CodeBlock>
-              <Paragraph size='small' type='tertiary' style={{ marginTop: 6, lineHeight: 1.6 }}>
-                {t('键的前缀 +: 表示添加，-: 表示移除，无前缀表示追加。值为分组描述（移除时填 "remove"）。')}
-              </Paragraph>
-            </GuideSection>
-          </div>
-        </Tabs.TabPane>
-      </Tabs>
-    </SideSheet>
+      <div className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+        <div className='space-y-2 sm:col-span-2'>
+          <FieldLabel>{t('分组特殊可用分组')}</FieldLabel>
+          <textarea
+            rows={6}
+            value={
+              inputs['group_ratio_setting.group_special_usable_group'] || ''
+            }
+            onChange={(event) =>
+              setField('group_ratio_setting.group_special_usable_group')(
+                event.target.value,
+              )
+            }
+            placeholder={t('为一个 JSON 文本')}
+            className={textareaClass}
+          />
+          <FieldError>
+            {errors['group_ratio_setting.group_special_usable_group']}
+          </FieldError>
+          <FieldHint>
+            {t(
+              '键为用户分组名称，值为操作映射对象。内层键以"+:"开头表示添加指定分组（键值为分组名称，值为描述），以"-:"开头表示移除指定分组（键值为分组名称），不带前缀的键直接添加该分组。例如：{"vip": {"+:premium": "高级分组", "special": "特殊分组", "-:default": "默认分组"}}，表示 vip 分组的用户可以使用 premium 和 special 分组，同时移除 default 分组的访问权限',
+            )}
+          </FieldHint>
+        </div>
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+        <div className='space-y-2 sm:col-span-2'>
+          <FieldLabel>{t('自动分组auto，从第一个开始选择')}</FieldLabel>
+          <textarea
+            rows={6}
+            value={inputs.AutoGroups || ''}
+            onChange={(event) => setField('AutoGroups')(event.target.value)}
+            placeholder={t('为一个 JSON 文本')}
+            className={textareaClass}
+          />
+          <FieldError>{errors.AutoGroups}</FieldError>
+        </div>
+      </div>
+
+      <div className='space-y-2'>
+        <FieldLabel>
+          {t(
+            '创建令牌默认选择auto分组，初始令牌也将设为auto（否则留空，为用户默认分组）',
+          )}
+        </FieldLabel>
+        <Switch
+          isSelected={!!inputs.DefaultUseAutoGroup}
+          onValueChange={(value) =>
+            setInputs((prev) => ({ ...prev, DefaultUseAutoGroup: value }))
+          }
+          size='md'
+          aria-label={t('默认使用auto分组')}
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </div>
+    </div>
   );
 
-  return (
-    <Spin spinning={loading}>
-      <div style={{ marginBottom: 15 }}>
-        <div className='flex items-center gap-3' style={{ marginTop: 12, marginBottom: 16 }}>
-          <RadioGroup
-            type='button'
-            size='small'
-            value={editMode}
-            onChange={(e) => setEditMode(e.target.value)}
-          >
-            <Radio value='visual'>{t('可视化编辑')}</Radio>
-            <Radio value='manual'>{t('手动编辑')}</Radio>
-          </RadioGroup>
+  // ---------- Guide drawer ---------- //
+  const guideTabs = [
+    { key: 'overview', label: t('概览') },
+    { key: 'groups', label: t('分组管理') },
+    { key: 'auto', label: t('自动分组') },
+    { key: 'ratios', label: t('特殊倍率') },
+    { key: 'usable', label: t('可用分组') },
+  ];
+
+  const renderGuide = () => (
+    <>
+      <div
+        aria-hidden={!showGuide}
+        onClick={() => setShowGuide(false)}
+        className={`fixed inset-0 z-40 bg-black/40 backdrop-blur-sm transition-opacity duration-200 ${
+          showGuide ? 'opacity-100' : 'pointer-events-none opacity-0'
+        }`}
+      />
+      <aside
+        role='dialog'
+        aria-modal='true'
+        aria-hidden={!showGuide}
+        style={{ width: 560 }}
+        className={`fixed bottom-0 right-0 top-0 z-50 flex w-full max-w-full flex-col bg-background shadow-2xl transition-transform duration-300 ease-out ${
+          showGuide ? 'translate-x-0' : 'translate-x-full'
+        }`}
+      >
+        <header className='flex items-center justify-between gap-3 border-b border-border px-5 py-3'>
+          <h4 className='m-0 text-lg font-semibold text-foreground'>
+            {t('分组设置使用说明')}
+          </h4>
           <Button
-            icon={<IconHelpCircle />}
-            theme='borderless'
-            type='tertiary'
-            size='small'
-            onClick={() => setShowGuide(true)}
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('关闭')}
+            onPress={() => setShowGuide(false)}
           >
-            {t('使用说明')}
+            <X size={16} />
           </Button>
+        </header>
+
+        <div className='flex border-b border-border'>
+          {guideTabs.map((tab) => {
+            const active = tab.key === guideTab;
+            return (
+              <button
+                key={tab.key}
+                type='button'
+                onClick={() => setGuideTab(tab.key)}
+                className={`px-3 py-2 text-sm font-medium transition-colors ${
+                  active
+                    ? 'border-b-2 border-primary text-primary'
+                    : 'text-muted hover:text-foreground'
+                }`}
+              >
+                {tab.label}
+              </button>
+            );
+          })}
+        </div>
+
+        <div className='flex-1 overflow-auto px-6 pb-6'>
+          {guideTab === 'overview' && (
+            <div className='pt-5'>
+              <h5 className='m-0 mb-3 text-base font-semibold text-foreground'>
+                {t('什么是分组？')}
+              </h5>
+              <p className='mb-2 text-sm leading-7 text-foreground'>
+                {t(
+                  '分组是用于控制计费倍率和模型访问权限的核心概念。每个用户属于一个分组，每个令牌也可以指定使用某个分组。',
+                )}
+              </p>
+              <p className='text-sm leading-7 text-foreground'>
+                {t(
+                  '通过分组可以实现不同用户等级的差异化定价，例如 VIP 用户享受更低的 API 调用费用。',
+                )}
+              </p>
+
+              <GuideSection title={t('核心概念')}>
+                <p className='leading-7'>
+                  <strong>{t('用户分组')}</strong>{' — '}
+                  {t('由管理员分配，决定用户身份等级（如 default、vip）。')}
+                </p>
+                <p className='mt-1 leading-7'>
+                  <strong>{t('令牌分组')}</strong>{' — '}
+                  {t(
+                    '用户创建令牌时选择的分组，决定该令牌的实际计费倍率。一个用户可以创建多个令牌，使用不同分组。',
+                  )}
+                </p>
+                <p className='mt-1 leading-7'>
+                  <strong>{t('倍率')}</strong>{' — '}
+                  {t('计费乘数，倍率越低费用越低。例如倍率 0.5 表示半价。')}
+                </p>
+                <p className='mt-1 leading-7'>
+                  <strong>{t('用户可选')}</strong>{' — '}
+                  {t(
+                    '勾选后，该分组会出现在用户创建令牌时的下拉菜单中。未勾选的分组只能由管理员分配，用户自己无法选择。',
+                  )}
+                </p>
+                <p className='mt-1 leading-7'>
+                  <strong>{t('自动分组')}</strong>{' — '}
+                  {t(
+                    '令牌分组设为 auto 时，系统按优先级顺序自动选择一个可用分组。',
+                  )}
+                </p>
+              </GuideSection>
+            </div>
+          )}
+
+          {guideTab === 'groups' && (
+            <div className='pt-5'>
+              <h5 className='m-0 mb-3 text-base font-semibold text-foreground'>
+                {t('创建和管理分组')}
+              </h5>
+              <p className='mb-2 text-sm leading-7 text-foreground'>
+                {t(
+                  '每个分组代表一个价格档位。管理员创建分组后，可以选择哪些档位对用户开放自选。',
+                )}
+              </p>
+
+              <GuideSection title={t('查看示例')}>
+                <p className='mb-2 text-xs text-muted'>
+                  {t('场景：站点提供两个价格档位，用户可以按需选择')}
+                </p>
+                <CodeBlock>
+                  {`${t('分组名')}      ${t('倍率')}    ${t('用户可选')}    ${t('说明')}\n──────────────────────────────────────\nstandard  1.0     ${t('是')}        ${t('标准价格')}\npremium   0.5     ${t('是')}        ${t('高级套餐，半价优惠')}`}
+                </CodeBlock>
+                <p className='mt-2 text-xs leading-7'>
+                  {t('两个分组都勾选了「用户可选」，所以用户创建令牌时可以看到这两个选项：')}
+                </p>
+                <CodeBlock>
+                  {t('用户创建令牌 → 选择分组下拉框：')}
+                  {'\n'}
+                  {`  ├─ standard (${t('标准价格')})`}
+                  {'\n'}
+                  {`  └─ premium  (${t('高级套餐，半价优惠')})`}
+                </CodeBlock>
+                <p className='mt-2 text-xs leading-7'>
+                  {t('选择 premium 创建的令牌，调用 API 时费用为 standard 的 50%。')}
+                </p>
+                <p className='mt-3 text-xs leading-7'>
+                  <strong>{t('对比：不勾选「用户可选」的场景')}</strong>
+                </p>
+                <p className='mt-1 text-xs leading-7'>
+                  {t('假设再加两个分组 default 和 vip，但不勾选用户可选：')}
+                </p>
+                <CodeBlock>
+                  {`${t('分组名')}      ${t('倍率')}    ${t('用户可选')}    ${t('说明')}\n──────────────────────────────────────\ndefault   1.0     ${t('否')}        ${t('管理员分配的基础分组')}\nvip       0.5     ${t('否')}        ${t('管理员分配的优惠分组')}\nstandard  1.0     ${t('是')}        ${t('标准价格')}\npremium   0.5     ${t('是')}        ${t('高级套餐，半价优惠')}`}
+                </CodeBlock>
+                <p className='mt-2 text-xs leading-7'>
+                  {t('此时用户创建令牌时只能看到 standard 和 premium：')}
+                </p>
+                <CodeBlock>
+                  {t('用户创建令牌 → 选择分组下拉框：')}
+                  {'\n'}
+                  {`  ├─ standard (${t('标准价格')})`}
+                  {'\n'}
+                  {`  └─ premium  (${t('高级套餐，半价优惠')})`}
+                  {'\n\n'}
+                  {`  ${t('不会出现')} default ${t('和')} vip`}
+                </CodeBlock>
+                <p className='mt-2 text-xs leading-7'>
+                  {t(
+                    'default 和 vip 只能由管理员在「用户管理」中分配给用户。适用于按用户等级定价、内部测试等不希望用户自主选择的场景。',
+                  )}
+                </p>
+                <p className='mt-3 text-xs leading-7'>
+                  <strong>{t('用户分组的联动作用')}</strong>
+                </p>
+                <p className='text-xs leading-7'>
+                  {t('管理员给用户分配的分组（如 vip）不仅决定用户身份，还会影响后续两个功能：')}
+                </p>
+                <p className='mt-1 text-xs leading-7'>
+                  {'1. '}
+                  <strong>{t('特殊倍率')}</strong>{' — '}
+                  {t(
+                    '可以根据用户分组设置不同的计费倍率。例如 vip 用户使用 standard 令牌时倍率从 1.0 降为 0.8。',
+                  )}
+                </p>
+                <p className='mt-0.5 text-xs leading-7'>
+                  {'2. '}
+                  <strong>{t('可用分组')}</strong>{' — '}
+                  {t(
+                    '可以根据用户分组增减令牌可选的分组范围。例如 vip 用户额外开放 premium 分组，或移除某个分组的选择权。',
+                  )}
+                </p>
+                <p className='mt-1.5 text-xs leading-7 text-muted'>
+                  {t('详见「特殊倍率」和「可用分组」标签页。')}
+                </p>
+              </GuideSection>
+
+              <GuideSection title={t('JSON 格式参考')}>
+                <p className='mb-1 text-xs'>
+                  <strong>
+                    <code className='font-mono'>GroupRatio</code>
+                  </strong>
+                  {' — '}
+                  {t('分组名称到倍率的映射')}
+                </p>
+                <CodeBlock>
+                  {`{"default": 1, "vip": 0.5, "standard": 1, "premium": 0.5}`}
+                </CodeBlock>
+                <p className='mb-1 mt-2 text-xs'>
+                  <strong>
+                    <code className='font-mono'>UserUsableGroups</code>
+                  </strong>
+                  {' — '}
+                  {t('用户可选分组的名称和描述（只包含勾选了用户可选的分组）')}
+                </p>
+                <CodeBlock>
+                  {`{"standard": "${t('标准价格')}", "premium": "${t('高级套餐，半价优惠')}"}`}
+                </CodeBlock>
+              </GuideSection>
+            </div>
+          )}
+
+          {guideTab === 'auto' && (
+            <div className='pt-5'>
+              <h5 className='m-0 mb-3 text-base font-semibold text-foreground'>
+                {t('自动分组选择')}
+              </h5>
+              <p className='text-sm leading-7 text-foreground'>
+                {t(
+                  '当令牌分组设为 auto 时，系统按列表顺序依次选择可用分组。排在前面的优先级更高。',
+                )}
+              </p>
+
+              <GuideSection title={t('查看示例')}>
+                <p className='mb-1.5 text-xs text-muted'>
+                  {t('场景：设置自动选择优先级')}
+                </p>
+                <CodeBlock>
+                  {`1. default    ${t('最高优先级')}\n2. vip`}
+                </CodeBlock>
+                <p className='mt-1.5 text-xs leading-6'>
+                  {t('开启「默认使用 auto 分组」后，新建令牌和初始令牌都会自动设为 auto。')}
+                </p>
+              </GuideSection>
+
+              <GuideSection title={t('JSON 格式参考')}>
+                <p className='mb-1 text-xs'>
+                  <strong>
+                    <code className='font-mono'>AutoGroups</code>
+                  </strong>
+                  {' — '}
+                  {t('有序字符串数组')}
+                </p>
+                <CodeBlock>{`["default", "vip"]`}</CodeBlock>
+              </GuideSection>
+            </div>
+          )}
+
+          {guideTab === 'ratios' && (
+            <div className='pt-5'>
+              <h5 className='m-0 mb-3 text-base font-semibold text-foreground'>
+                {t('跨分组特殊倍率')}
+              </h5>
+              <p className='mb-2 text-sm leading-7 text-foreground'>
+                {t(
+                  '正常情况下，令牌的计费倍率由令牌所选的分组决定。特殊倍率可以根据「用户所在分组」进一步覆盖这个倍率。',
+                )}
+              </p>
+              <p className='text-sm leading-7 text-foreground'>
+                {t('简单来说：同一个令牌分组，不同等级的用户可以享受不同的价格。')}
+              </p>
+
+              <GuideSection title={t('查看示例')}>
+                <p className='mb-2 text-xs text-muted'>
+                  {t(
+                    '场景：站点有 standard（倍率 1.0）和 premium（倍率 0.5）两个分组，希望 vip 用户使用 standard 令牌时也能享受折扣',
+                  )}
+                </p>
+                <p className='mb-2 text-xs leading-7'>
+                  <strong>{t('不配置特殊倍率时：')}</strong>
+                </p>
+                <CodeBlock>
+                  {`${t('普通用户')} + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('原价')})\nvip ${t('用户')}  + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('原价，和普通用户一样')})`}
+                </CodeBlock>
+                <p className='mb-2 mt-2 text-xs leading-7'>
+                  <strong>{t('配置特殊倍率后：')}</strong>
+                </p>
+                <CodeBlock>
+                  {`${t('用户分组')}    ${t('使用分组')}    ${t('倍率')}\n────────────────────────────\nvip       standard   0.8\nvip       premium    0.3`}
+                </CodeBlock>
+                <p className='mt-2 text-xs leading-7'>
+                  {t('配置后的效果：')}
+                </p>
+                <CodeBlock>
+                  {`${t('普通用户')} + standard ${t('令牌')} → ${t('倍率')} 1.0  (${t('不变')})\nvip ${t('用户')}  + standard ${t('令牌')} → ${t('倍率')} 0.8  (${t('享受 8 折')})\nvip ${t('用户')}  + premium  ${t('令牌')} → ${t('倍率')} 0.3  (${t('从 0.5 降到 0.3')})`}
+                </CodeBlock>
+                <p className='mt-2 text-xs leading-7 text-muted'>
+                  {t('只有配置了规则的组合才会覆盖，未配置的组合仍使用令牌分组的基础倍率。')}
+                </p>
+              </GuideSection>
+
+              <GuideSection title={t('JSON 格式参考')}>
+                <p className='mb-1 text-xs'>
+                  <strong>
+                    <code className='font-mono'>GroupGroupRatio</code>
+                  </strong>
+                  {' — '}
+                  {t('嵌套映射：用户分组 → 使用分组 → 倍率')}
+                </p>
+                <CodeBlock>{`{\n  "vip": {\n    "standard": 0.8,\n    "premium": 0.3\n  }\n}`}</CodeBlock>
+              </GuideSection>
+            </div>
+          )}
+
+          {guideTab === 'usable' && (
+            <div className='pt-5'>
+              <h5 className='m-0 mb-3 text-base font-semibold text-foreground'>
+                {t('特殊可用分组规则')}
+              </h5>
+              <p className='mb-2 text-sm leading-7 text-foreground'>
+                {t(
+                  '默认情况下，所有用户创建令牌时看到的可选分组列表是一样的（即「用户可选」列勾选的分组）。',
+                )}
+              </p>
+              <p className='text-sm leading-7 text-foreground'>
+                {t('通过此功能，可以根据用户所在分组，为不同等级的用户展示不同的可选列表。')}
+              </p>
+
+              <GuideSection title={t('查看示例')}>
+                <p className='mb-2 text-xs text-muted'>
+                  {t(
+                    '场景：站点有 standard 和 premium 两个用户可选分组。希望 vip 用户额外看到 exclusive 分组，同时不再看到 standard 分组',
+                  )}
+                </p>
+                <p className='mb-2 text-xs leading-7'>
+                  <strong>{t('不配置规则时，所有用户看到的下拉框一样：')}</strong>
+                </p>
+                <CodeBlock>
+                  {`${t('所有用户')} → ${t('创建令牌可选')}:\n  ├─ standard\n  └─ premium`}
+                </CodeBlock>
+                <p className='mb-2 mt-2 text-xs leading-7'>
+                  <strong>{t('为 vip 用户配置规则：')}</strong>
+                </p>
+                <CodeBlock>
+                  {`${t('用户分组')}    ${t('操作')}        ${t('目标分组')}    ${t('描述')}\n──────────────────────────────────────────\nvip       ${t('添加')} (+:)   exclusive   ${t('专属分组')}\nvip       ${t('移除')} (-:)   standard    -`}
+                </CodeBlock>
+                <p className='mt-2 text-xs leading-7'>
+                  {t('配置后的效果：')}
+                </p>
+                <CodeBlock>
+                  {`${t('普通用户')} → ${t('创建令牌可选')}:\n  ├─ standard\n  └─ premium\n\nvip ${t('用户')} → ${t('创建令牌可选')}:\n  ├─ premium     (${t('保留')})\n  └─ exclusive   (${t('新增')})\n\n  ${t('standard 已被移除，vip 用户看不到')}`}
+                </CodeBlock>
+
+                <p className='mt-3 text-xs leading-7'>
+                  <strong>{t('三种操作的区别：')}</strong>
+                </p>
+                <CodeBlock>
+                  {`${t('添加')} (+:)  → ${t('在默认列表基础上新增一个分组')}\n${t('移除')} (-:)  → ${t('从默认列表中去掉一个分组')}\n${t('追加')}       → ${t('直接追加（和添加类似，但无前缀）')}`}
+                </CodeBlock>
+              </GuideSection>
+
+              <GuideSection title={t('JSON 格式参考')}>
+                <p className='mb-1 text-xs'>
+                  <strong>
+                    <code className='font-mono'>group_special_usable_group</code>
+                  </strong>
+                </p>
+                <CodeBlock>{`{\n  "vip": {\n    "+:exclusive": "${t('专属分组')}",\n    "-:standard": "remove"\n  }\n}`}</CodeBlock>
+                <p className='mt-1.5 text-xs leading-6 text-muted'>
+                  {t('键的前缀 +: 表示添加，-: 表示移除，无前缀表示追加。值为分组描述（移除时填 "remove"）。')}
+                </p>
+              </GuideSection>
+            </div>
+          )}
         </div>
-        {editMode === 'visual' ? renderVisualMode() : renderManualMode()}
+      </aside>
+    </>
+  );
+
+  return (
+    <div className='relative space-y-4'>
+      {loading && (
+        <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+          <Spinner color='primary' />
+        </div>
+      )}
+
+      <div className='flex items-center gap-3'>
+        <div className='inline-flex overflow-hidden rounded-xl border border-border'>
+          {[
+            { value: 'visual', label: t('可视化编辑') },
+            { value: 'manual', label: t('手动编辑') },
+          ].map((mode) => {
+            const active = mode.value === editMode;
+            return (
+              <button
+                key={mode.value}
+                type='button'
+                onClick={() => setEditMode(mode.value)}
+                className={`px-3 py-1.5 text-sm font-medium transition-colors ${
+                  active
+                    ? 'bg-foreground text-background'
+                    : 'bg-background text-muted hover:bg-surface-secondary'
+                }`}
+              >
+                {mode.label}
+              </button>
+            );
+          })}
+        </div>
+        <Button
+          variant='light'
+          size='sm'
+          startContent={<HelpCircle size={14} />}
+          onPress={() => setShowGuide(true)}
+        >
+          {t('使用说明')}
+        </Button>
       </div>
-      <Button size='default' onClick={onSubmit}>
-        {t('保存分组相关设置')}
-      </Button>
+
+      {editMode === 'visual' ? renderVisualMode() : renderManualMode()}
+
+      <div>
+        <Button color='primary' onPress={onSubmit}>
+          {t('保存分组相关设置')}
+        </Button>
+      </div>
+
       {renderGuide()}
-    </Spin>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Ratio/ModelPricingCombined.jsx b/web/src/pages/Setting/Ratio/ModelPricingCombined.jsx
index 51dfe27d3a6..e214872e681 100644
--- a/web/src/pages/Setting/Ratio/ModelPricingCombined.jsx
+++ b/web/src/pages/Setting/Ratio/ModelPricingCombined.jsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useState } from 'react';
-import { Radio, RadioGroup } from '@douyinfe/semi-ui';
+import { Button, ButtonGroup } from '@heroui/react';
 import { useTranslation } from 'react-i18next';
 import ModelPricingEditor from './components/ModelPricingEditor';
 import ModelRatioSettings from './ModelRatioSettings';
@@ -29,16 +29,21 @@ export default function ModelPricingCombined({ options, refresh }) {
 
   return (
     <div>
-      <div style={{ marginTop: 12, marginBottom: 16 }}>
-        <RadioGroup
-          type='button'
-          size='small'
-          value={editMode}
-          onChange={(e) => setEditMode(e.target.value)}
-        >
-          <Radio value='visual'>{t('可视化编辑')}</Radio>
-          <Radio value='manual'>{t('手动编辑')}</Radio>
-        </RadioGroup>
+      <div className='mb-4 mt-3'>
+        <ButtonGroup size='sm' variant='outline'>
+          <Button
+            variant={editMode === 'visual' ? 'primary' : 'outline'}
+            onPress={() => setEditMode('visual')}
+          >
+            {t('可视化编辑')}
+          </Button>
+          <Button
+            variant={editMode === 'manual' ? 'primary' : 'outline'}
+            onPress={() => setEditMode('manual')}
+          >
+            {t('手动编辑')}
+          </Button>
+        </ButtonGroup>
       </div>
       {editMode === 'visual' ? (
         <ModelPricingEditor options={options} refresh={refresh} />
diff --git a/web/src/pages/Setting/Ratio/ModelRatioSettings.jsx b/web/src/pages/Setting/Ratio/ModelRatioSettings.jsx
index e9be1978554..807c2f6fc00 100644
--- a/web/src/pages/Setting/Ratio/ModelRatioSettings.jsx
+++ b/web/src/pages/Setting/Ratio/ModelRatioSettings.jsx
@@ -17,16 +17,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useEffect, useState, useRef } from 'react';
-import {
-  Button,
-  Col,
-  Form,
-  Popconfirm,
-  Row,
-  Space,
-  Spin,
-} from '@douyinfe/semi-ui';
+import React, { useEffect, useState } from 'react';
+import { Button, Switch } from '@heroui/react';
 import {
   compareObjects,
   API,
@@ -36,313 +28,269 @@ import {
   verifyJSON,
 } from '../../../helpers';
 import { useTranslation } from 'react-i18next';
+import ConfirmDialog from '@/components/common/ui/ConfirmDialog';
+
+const DEFAULT_INPUTS = {
+  ModelPrice: '',
+  ModelRatio: '',
+  CacheRatio: '',
+  CreateCacheRatio: '',
+  CompletionRatio: '',
+  ImageRatio: '',
+  AudioRatio: '',
+  AudioCompletionRatio: '',
+  ExposeRatioEnabled: false,
+};
+
+const textareaClass =
+  'w-full resize-y rounded-lg border border-[color:var(--app-border)] bg-background px-3 py-2 font-mono text-sm text-foreground outline-none transition focus:border-primary';
+
+function JsonField({ label, value, onChange, placeholder, helper, error, rows = 6 }) {
+  return (
+    <div className='space-y-2'>
+      <div className='text-sm font-medium text-foreground'>{label}</div>
+      <textarea
+        value={value ?? ''}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+        rows={rows}
+        aria-label={label}
+        className={`${textareaClass} ${error ? 'border-red-400 focus:border-red-500' : ''}`}
+      />
+      {error ? (
+        <div className='text-xs text-red-600 dark:text-red-400'>{error}</div>
+      ) : helper ? (
+        <div className='text-xs leading-snug text-muted'>{helper}</div>
+      ) : null}
+    </div>
+  );
+}
 
 export default function ModelRatioSettings(props) {
   const [loading, setLoading] = useState(false);
-  const [inputs, setInputs] = useState({
-    ModelPrice: '',
-    ModelRatio: '',
-    CacheRatio: '',
-    CreateCacheRatio: '',
-    CompletionRatio: '',
-    ImageRatio: '',
-    AudioRatio: '',
-    AudioCompletionRatio: '',
-    ExposeRatioEnabled: false,
-  });
-  const refForm = useRef();
-  const [inputsRow, setInputsRow] = useState(inputs);
+  const [inputs, setInputs] = useState(DEFAULT_INPUTS);
+  const [inputsRow, setInputsRow] = useState(DEFAULT_INPUTS);
+  const [errors, setErrors] = useState({});
+  const [showResetConfirm, setShowResetConfirm] = useState(false);
   const { t } = useTranslation();
 
-  async function onSubmit() {
-    try {
-      await refForm.current
-        .validate()
-        .then(() => {
-          const updateArray = compareObjects(inputs, inputsRow);
-          if (!updateArray.length)
-            return showWarning(t('你似乎并没有修改什么'));
-
-          const requestQueue = updateArray.map((item) => {
-            const value =
-              typeof inputs[item.key] === 'boolean'
-                ? String(inputs[item.key])
-                : inputs[item.key];
-            return API.put('/api/option/', { key: item.key, value });
-          });
+  const setField = (key) => (value) => {
+    setInputs((prev) => ({ ...prev, [key]: value }));
+    if (errors[key]) setErrors((prev) => ({ ...prev, [key]: undefined }));
+  };
 
-          setLoading(true);
-          Promise.all(requestQueue)
-            .then((res) => {
-              if (res.includes(undefined)) {
-                return showError(
-                  requestQueue.length > 1
-                    ? t('部分保存失败，请重试')
-                    : t('保存失败'),
-                );
-              }
-
-              for (let i = 0; i < res.length; i++) {
-                if (!res[i].data.success) {
-                  return showError(res[i].data.message);
-                }
-              }
+  const validate = () => {
+    const next = {};
+    const jsonKeys = [
+      'ModelPrice',
+      'ModelRatio',
+      'CacheRatio',
+      'CreateCacheRatio',
+      'CompletionRatio',
+      'ImageRatio',
+      'AudioRatio',
+      'AudioCompletionRatio',
+    ];
+    for (const key of jsonKeys) {
+      const v = inputs[key];
+      if (v && String(v).trim() !== '' && !verifyJSON(v)) {
+        next[key] = t('不是合法的 JSON 字符串');
+      }
+    }
+    setErrors(next);
+    return Object.keys(next).length === 0;
+  };
 
-              showSuccess(t('保存成功'));
-              props.refresh();
-            })
-            .catch((error) => {
-              console.error('Unexpected error:', error);
-              showError(t('保存失败，请重试'));
-            })
-            .finally(() => {
-              setLoading(false);
-            });
-        })
-        .catch(() => {
-          showError(t('请检查输入'));
-        });
-    } catch (error) {
+  const onSubmit = () => {
+    if (!validate()) {
       showError(t('请检查输入'));
-      console.error(error);
+      return;
     }
-  }
+    const updateArray = compareObjects(inputs, inputsRow);
+    if (!updateArray.length) return showWarning(t('你似乎并没有修改什么'));
+
+    const requestQueue = updateArray.map((item) => {
+      const value =
+        typeof inputs[item.key] === 'boolean'
+          ? String(inputs[item.key])
+          : inputs[item.key];
+      return API.put('/api/option/', { key: item.key, value });
+    });
 
-  async function resetModelRatio() {
+    setLoading(true);
+    Promise.all(requestQueue)
+      .then((res) => {
+        if (res.includes(undefined)) {
+          return showError(
+            requestQueue.length > 1
+              ? t('部分保存失败，请重试')
+              : t('保存失败'),
+          );
+        }
+        for (let i = 0; i < res.length; i++) {
+          if (!res[i].data?.success) {
+            return showError(res[i].data?.message);
+          }
+        }
+        showSuccess(t('保存成功'));
+        props.refresh?.();
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.error('Unexpected error:', error);
+        showError(t('保存失败，请重试'));
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const resetModelRatio = async () => {
     try {
-      let res = await API.post(`/api/option/rest_model_ratio`);
-      if (res.data.success) {
+      const res = await API.post(`/api/option/rest_model_ratio`);
+      if (res.data?.success) {
         showSuccess(res.data.message);
-        props.refresh();
+        props.refresh?.();
       } else {
-        showError(res.data.message);
+        showError(res.data?.message);
       }
     } catch (error) {
       showError(error);
     }
-  }
+  };
 
   useEffect(() => {
-    const currentInputs = {};
-    for (let key in props.options) {
-      if (Object.keys(inputs).includes(key)) {
+    const currentInputs = { ...DEFAULT_INPUTS };
+    for (const key in props.options) {
+      if (Object.prototype.hasOwnProperty.call(DEFAULT_INPUTS, key)) {
         currentInputs[key] = props.options[key];
       }
     }
     setInputs(currentInputs);
     setInputsRow(structuredClone(currentInputs));
-    refForm.current.setValues(currentInputs);
   }, [props.options]);
 
   return (
-    <Spin spinning={loading}>
-      <Form
-        values={inputs}
-        getFormApi={(formAPI) => (refForm.current = formAPI)}
-        style={{ marginBottom: 15 }}
-      >
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('模型固定价格')}
-              extraText={t('一次调用消耗多少刀，优先级大于模型倍率')}
-              placeholder={t(
-                '为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀',
-              )}
-              field={'ModelPrice'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: '不是合法的 JSON 字符串',
-                },
-              ]}
-              onChange={(value) => setInputs({ ...inputs, ModelPrice: value })}
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('模型倍率')}
-              placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
-              field={'ModelRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: '不是合法的 JSON 字符串',
-                },
-              ]}
-              onChange={(value) => setInputs({ ...inputs, ModelRatio: value })}
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('提示缓存倍率')}
-              placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
-              field={'CacheRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: '不是合法的 JSON 字符串',
-                },
-              ]}
-              onChange={(value) => setInputs({ ...inputs, CacheRatio: value })}
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('缓存创建倍率')}
-              extraText={t(
-                '默认为 5m 缓存创建倍率；1h 缓存创建倍率按固定乘法自动计算（当前为 1.6x）',
-              )}
-              placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
-              field={'CreateCacheRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: '不是合法的 JSON 字符串',
-                },
-              ]}
-              onChange={(value) =>
-                setInputs({ ...inputs, CreateCacheRatio: value })
-              }
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('模型补全倍率（仅对自定义模型有效）')}
-              extraText={t('仅对自定义模型有效')}
-              placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
-              field={'CompletionRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: '不是合法的 JSON 字符串',
-                },
-              ]}
-              onChange={(value) =>
-                setInputs({ ...inputs, CompletionRatio: value })
-              }
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('图片输入倍率（仅部分模型支持该计费）')}
-              extraText={t(
-                '图片输入相关的倍率设置，键为模型名称，值为倍率，仅部分模型支持该计费',
-              )}
-              placeholder={t(
-                '为一个 JSON 文本，键为模型名称，值为倍率，例如：{"gpt-image-1": 2}',
-              )}
-              field={'ImageRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: '不是合法的 JSON 字符串',
-                },
-              ]}
-              onChange={(value) => setInputs({ ...inputs, ImageRatio: value })}
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('音频倍率（仅部分模型支持该计费）')}
-              extraText={t('音频输入相关的倍率设置，键为模型名称，值为倍率')}
-              placeholder={t(
-                '为一个 JSON 文本，键为模型名称，值为倍率，例如：{"gpt-4o-audio-preview": 16}',
-              )}
-              field={'AudioRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: '不是合法的 JSON 字符串',
-                },
-              ]}
-              onChange={(value) => setInputs({ ...inputs, AudioRatio: value })}
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col xs={24} sm={16}>
-            <Form.TextArea
-              label={t('音频补全倍率（仅部分模型支持该计费）')}
-              extraText={t(
-                '音频输出补全相关的倍率设置，键为模型名称，值为倍率',
-              )}
-              placeholder={t(
-                '为一个 JSON 文本，键为模型名称，值为倍率，例如：{"gpt-4o-realtime": 2}',
-              )}
-              field={'AudioCompletionRatio'}
-              autosize={{ minRows: 6, maxRows: 12 }}
-              trigger='blur'
-              stopValidateWithError
-              rules={[
-                {
-                  validator: (rule, value) => verifyJSON(value),
-                  message: '不是合法的 JSON 字符串',
-                },
-              ]}
-              onChange={(value) =>
-                setInputs({ ...inputs, AudioCompletionRatio: value })
-              }
-            />
-          </Col>
-        </Row>
-        <Row gutter={16}>
-          <Col span={16}>
-            <Form.Switch
-              label={t('暴露倍率接口')}
-              field={'ExposeRatioEnabled'}
-              onChange={(value) =>
-                setInputs({ ...inputs, ExposeRatioEnabled: value })
-              }
-            />
-          </Col>
-        </Row>
-      </Form>
-      <Space>
-        <Button onClick={onSubmit}>{t('保存模型倍率设置')}</Button>
-        <Popconfirm
-          title={t('确定重置模型倍率吗？')}
-          content={t('此修改将不可逆')}
-          okType={'danger'}
-          position={'top'}
-          onConfirm={resetModelRatio}
+    <div className='space-y-5'>
+      <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+        <JsonField
+          label={t('模型固定价格')}
+          value={inputs.ModelPrice}
+          onChange={setField('ModelPrice')}
+          placeholder={t(
+            '为一个 JSON 文本，键为模型名称，值为一次调用消耗多少刀，比如 "gpt-4-gizmo-*": 0.1，一次消耗0.1刀',
+          )}
+          helper={t('一次调用消耗多少刀，优先级大于模型倍率')}
+          error={errors.ModelPrice}
+        />
+        <JsonField
+          label={t('模型倍率')}
+          value={inputs.ModelRatio}
+          onChange={setField('ModelRatio')}
+          placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
+          error={errors.ModelRatio}
+        />
+        <JsonField
+          label={t('提示缓存倍率')}
+          value={inputs.CacheRatio}
+          onChange={setField('CacheRatio')}
+          placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
+          error={errors.CacheRatio}
+        />
+        <JsonField
+          label={t('缓存创建倍率')}
+          value={inputs.CreateCacheRatio}
+          onChange={setField('CreateCacheRatio')}
+          placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
+          helper={t(
+            '默认为 5m 缓存创建倍率；1h 缓存创建倍率按固定乘法自动计算（当前为 1.6x）',
+          )}
+          error={errors.CreateCacheRatio}
+        />
+        <JsonField
+          label={t('模型补全倍率（仅对自定义模型有效）')}
+          value={inputs.CompletionRatio}
+          onChange={setField('CompletionRatio')}
+          placeholder={t('为一个 JSON 文本，键为模型名称，值为倍率')}
+          helper={t('仅对自定义模型有效')}
+          error={errors.CompletionRatio}
+        />
+        <JsonField
+          label={t('图片输入倍率（仅部分模型支持该计费）')}
+          value={inputs.ImageRatio}
+          onChange={setField('ImageRatio')}
+          placeholder={t(
+            '为一个 JSON 文本，键为模型名称，值为倍率，例如：{"gpt-image-1": 2}',
+          )}
+          helper={t(
+            '图片输入相关的倍率设置，键为模型名称，值为倍率，仅部分模型支持该计费',
+          )}
+          error={errors.ImageRatio}
+        />
+        <JsonField
+          label={t('音频倍率（仅部分模型支持该计费）')}
+          value={inputs.AudioRatio}
+          onChange={setField('AudioRatio')}
+          placeholder={t(
+            '为一个 JSON 文本，键为模型名称，值为倍率，例如：{"gpt-4o-audio-preview": 16}',
+          )}
+          helper={t('音频输入相关的倍率设置，键为模型名称，值为倍率')}
+          error={errors.AudioRatio}
+        />
+        <JsonField
+          label={t('音频补全倍率（仅部分模型支持该计费）')}
+          value={inputs.AudioCompletionRatio}
+          onChange={setField('AudioCompletionRatio')}
+          placeholder={t(
+            '为一个 JSON 文本，键为模型名称，值为倍率，例如：{"gpt-4o-realtime": 2}',
+          )}
+          helper={t('音频输出补全相关的倍率设置，键为模型名称，值为倍率')}
+          error={errors.AudioCompletionRatio}
+        />
+      </div>
+
+      <label className='flex items-center justify-between gap-3 rounded-xl border border-[color:var(--app-border)] bg-[color:var(--app-background)] p-4'>
+        <span className='text-sm font-medium text-foreground'>
+          {t('暴露倍率接口')}
+        </span>
+        <Switch
+          isSelected={!!inputs.ExposeRatioEnabled}
+          onChange={setField('ExposeRatioEnabled')}
+          aria-label={t('暴露倍率接口')}
+          size='sm'
+        >
+          <Switch.Control>
+            <Switch.Thumb />
+          </Switch.Control>
+        </Switch>
+      </label>
+
+      <div className='flex flex-wrap items-center gap-2 border-t border-[color:var(--app-border)] pt-4'>
+        <Button
+          color='primary'
+          onPress={onSubmit}
+          isPending={loading}
+          className='min-w-[140px]'
         >
-          <Button type={'danger'}>{t('重置模型倍率')}</Button>
-        </Popconfirm>
-      </Space>
-    </Spin>
+          {t('保存模型倍率设置')}
+        </Button>
+        <Button color='danger' onPress={() => setShowResetConfirm(true)}>
+          {t('重置模型倍率')}
+        </Button>
+      </div>
+
+      <ConfirmDialog
+        visible={showResetConfirm}
+        title={t('确定重置模型倍率吗？')}
+        cancelText={t('取消')}
+        confirmText={t('确定')}
+        danger
+        onCancel={() => setShowResetConfirm(false)}
+        onConfirm={() => {
+          setShowResetConfirm(false);
+          resetModelRatio();
+        }}
+      >
+        {t('此修改将不可逆')}
+      </ConfirmDialog>
+    </div>
   );
 }
diff --git a/web/src/pages/Setting/Ratio/UpstreamRatioSync.jsx b/web/src/pages/Setting/Ratio/UpstreamRatioSync.jsx
index 20ea45e9ebd..7f89b9a1ffa 100644
--- a/web/src/pages/Setting/Ratio/UpstreamRatioSync.jsx
+++ b/web/src/pages/Setting/Ratio/UpstreamRatioSync.jsx
@@ -6,36 +6,40 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 For commercial licensing, please contact support@quantumnous.com
 */
 
-import React, { useState, useCallback, useMemo, useEffect } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useTranslation } from 'react-i18next';
 import {
   Button,
-  Table,
-  Tag,
-  Empty,
-  Checkbox,
-  Form,
-  Input,
-  Tooltip,
-  Select,
   Modal,
-} from '@douyinfe/semi-ui';
-import { IconSearch } from '@douyinfe/semi-icons';
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
+  Spinner,
+  Tooltip,
+  useOverlayState,
+} from '@heroui/react';
 import {
-  RefreshCcw,
-  CheckSquare,
   AlertTriangle,
   CheckCircle,
+  CheckSquare,
+  Inbox,
+  RefreshCcw,
+  Search,
 } from 'lucide-react';
 import {
   API,
@@ -46,13 +50,78 @@ import {
 } from '../../../helpers';
 import { useIsMobile } from '../../../hooks/common/useIsMobile';
 import { DEFAULT_ENDPOINT } from '../../../constants';
-import { useTranslation } from 'react-i18next';
-import {
-  IllustrationNoResult,
-  IllustrationNoResultDark,
-} from '@douyinfe/semi-illustrations';
 import ChannelSelectorModal from '../../../components/settings/ChannelSelectorModal';
 
+// ----------------------------- helpers -----------------------------
+
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:opacity-50';
+
+function StatusChip({
+  tone = 'grey',
+  bg,
+  color,
+  prefixIcon,
+  children,
+}) {
+  if (bg) {
+    return (
+      <span
+        className='inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold'
+        style={{ background: bg, color }}
+      >
+        {prefixIcon}
+        <span>{children}</span>
+      </span>
+    );
+  }
+  const TONE = {
+    green: 'bg-success/15 text-success',
+    yellow: 'bg-warning/15 text-warning',
+    blue: 'bg-primary/15 text-primary',
+    grey: 'bg-surface-secondary text-muted',
+  };
+  return (
+    <span
+      className={`inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TONE[tone] || TONE.grey
+      }`}
+    >
+      {prefixIcon}
+      <span>{children}</span>
+    </span>
+  );
+}
+
+// Header / row checkbox supporting indeterminate state via DOM ref.
+function CompactCheckbox({
+  checked,
+  indeterminate,
+  onChange,
+  children,
+  ariaLabel,
+}) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (ref.current) ref.current.indeterminate = !!indeterminate && !checked;
+  }, [indeterminate, checked]);
+  return (
+    <label className='inline-flex items-center gap-2 text-sm text-foreground'>
+      <input
+        ref={ref}
+        type='checkbox'
+        checked={!!checked}
+        onChange={(event) => onChange?.(event.target.checked)}
+        aria-label={ariaLabel}
+        className='h-4 w-4 accent-primary'
+      />
+      {children ? <span>{children}</span> : null}
+    </label>
+  );
+}
+
+// ----------------------------- conflict modal -----------------------------
+
 const OFFICIAL_RATIO_PRESET_ID = -100;
 const OFFICIAL_RATIO_PRESET_NAME = '官方倍率预设';
 const OFFICIAL_RATIO_PRESET_BASE_URL = 'https://basellm.github.io';
@@ -65,39 +134,96 @@ const MODELS_DEV_PRESET_ENDPOINT = 'https://models.dev/api.json';
 
 function ConflictConfirmModal({ t, visible, items, onOk, onCancel }) {
   const isMobile = useIsMobile();
-  const columns = [
-    { title: t('渠道'), dataIndex: 'channel' },
-    { title: t('模型'), dataIndex: 'model' },
-    {
-      title: t('当前计费'),
-      dataIndex: 'current',
-      render: (text) => <div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>,
-    },
-    {
-      title: t('修改为'),
-      dataIndex: 'newVal',
-      render: (text) => <div style={{ whiteSpace: 'pre-wrap' }}>{text}</div>,
+  const modalState = useOverlayState({
+    isOpen: visible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) onCancel?.();
     },
-  ];
+  });
 
   return (
-    <Modal
-      title={t('确认冲突项修改')}
-      visible={visible}
-      onCancel={onCancel}
-      onOk={onOk}
-      size={isMobile ? 'full-width' : 'large'}
-    >
-      <Table
-        columns={columns}
-        dataSource={items}
-        pagination={false}
-        size='small'
-      />
+    <Modal state={modalState}>
+      <ModalBackdrop variant='blur'>
+        <ModalContainer
+          size={isMobile ? 'full' : '4xl'}
+          placement='center'
+          className='max-w-[95vw]'
+        >
+          <ModalDialog className='bg-background/95 backdrop-blur'>
+            <ModalHeader className='border-b border-border'>
+              <span>{t('确认冲突项修改')}</span>
+            </ModalHeader>
+            <ModalBody className='px-6 py-5'>
+              <div className='overflow-x-auto rounded-xl border border-border'>
+                <table className='w-full text-sm'>
+                  <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+                    <tr>
+                      <th className='px-3 py-2 text-left font-medium'>
+                        {t('渠道')}
+                      </th>
+                      <th className='px-3 py-2 text-left font-medium'>
+                        {t('模型')}
+                      </th>
+                      <th className='px-3 py-2 text-left font-medium'>
+                        {t('当前计费')}
+                      </th>
+                      <th className='px-3 py-2 text-left font-medium'>
+                        {t('修改为')}
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className='divide-y divide-border'>
+                    {items.length === 0 ? (
+                      <tr>
+                        <td
+                          colSpan={4}
+                          className='px-4 py-8 text-center text-sm text-muted'
+                        >
+                          {t('暂无数据')}
+                        </td>
+                      </tr>
+                    ) : (
+                      items.map((row, idx) => (
+                        <tr
+                          key={idx}
+                          className='bg-background hover:bg-surface-secondary/60'
+                        >
+                          <td className='px-3 py-2 align-top text-foreground'>
+                            {row.channel}
+                          </td>
+                          <td className='px-3 py-2 align-top text-foreground'>
+                            {row.model}
+                          </td>
+                          <td className='px-3 py-2 align-top whitespace-pre-wrap text-foreground'>
+                            {row.current}
+                          </td>
+                          <td className='px-3 py-2 align-top whitespace-pre-wrap text-foreground'>
+                            {row.newVal}
+                          </td>
+                        </tr>
+                      ))
+                    )}
+                  </tbody>
+                </table>
+              </div>
+            </ModalBody>
+            <ModalFooter className='border-t border-border'>
+              <Button variant='light' onPress={onCancel}>
+                {t('取消')}
+              </Button>
+              <Button color='primary' onPress={onOk}>
+                {t('确认')}
+              </Button>
+            </ModalFooter>
+          </ModalDialog>
+        </ModalContainer>
+      </ModalBackdrop>
     </Modal>
   );
 }
 
+// ----------------------------- main -----------------------------
+
 export default function UpstreamRatioSync(props) {
   const { t } = useTranslation();
   const [modalVisible, setModalVisible] = useState(false);
@@ -105,35 +231,23 @@ export default function UpstreamRatioSync(props) {
   const [syncLoading, setSyncLoading] = useState(false);
   const isMobile = useIsMobile();
 
-  // 渠道选择相关
   const [allChannels, setAllChannels] = useState([]);
   const [selectedChannelIds, setSelectedChannelIds] = useState([]);
 
-  // 渠道端点配置
-  const [channelEndpoints, setChannelEndpoints] = useState({}); // { channelId: endpoint }
-
-  // 差异数据和测试结果
+  const [channelEndpoints, setChannelEndpoints] = useState({});
   const [differences, setDifferences] = useState({});
   const [resolutions, setResolutions] = useState({});
-
-  // 是否已经执行过同步
   const [hasSynced, setHasSynced] = useState(false);
 
-  // 分页相关状态
   const [currentPage, setCurrentPage] = useState(1);
   const [pageSize, setPageSize] = useState(10);
-
-  // 搜索相关状态
   const [searchKeyword, setSearchKeyword] = useState('');
-
-  // 倍率类型过滤
   const [ratioTypeFilter, setRatioTypeFilter] = useState('');
 
-  // 冲突确认弹窗相关
   const [confirmVisible, setConfirmVisible] = useState(false);
-  const [conflictItems, setConflictItems] = useState([]); // {channel, model, current, newVal, ratioType}
+  const [conflictItems, setConflictItems] = useState([]);
 
-  const channelSelectorRef = React.useRef(null);
+  const channelSelectorRef = useRef(null);
 
   useEffect(() => {
     setCurrentPage(1);
@@ -143,10 +257,8 @@ export default function UpstreamRatioSync(props) {
     setLoading(true);
     try {
       const res = await API.get('/api/ratio_sync/channels');
-
       if (res.data.success) {
         const channels = res.data.data || [];
-
         const transferData = channels.map((channel) => ({
           key: channel.id,
           label: channel.name,
@@ -154,10 +266,8 @@ export default function UpstreamRatioSync(props) {
           disabled: false,
           _originalData: channel,
         }));
-
         setAllChannels(transferData);
 
-        // 合并已有 endpoints，避免每次打开弹窗都重置
         setChannelEndpoints((prev) => {
           const merged = { ...prev };
           transferData.forEach((channel) => {
@@ -222,14 +332,10 @@ export default function UpstreamRatioSync(props) {
       endpoint: channelEndpoints[ch.id] || DEFAULT_ENDPOINT,
     }));
 
-    const payload = {
-      upstreams: upstreams,
-      timeout: 10,
-    };
+    const payload = { upstreams, timeout: 10 };
 
     try {
       const res = await API.post('/api/ratio_sync/fetch', payload);
-
       if (!res.data.success) {
         showError(res.data.message || t('后端请求失败'));
         setSyncLoading(false);
@@ -264,28 +370,95 @@ export default function UpstreamRatioSync(props) {
     return ratioType === 'model_price' ? 'price' : 'ratio';
   }
 
-  const selectValue = useCallback(
-    (model, ratioType, value) => {
-      const category = getBillingCategory(ratioType);
+  const selectValue = useCallback((model, ratioType, value) => {
+    const category = getBillingCategory(ratioType);
+    setResolutions((prev) => {
+      const newModelRes = { ...(prev[model] || {}) };
+      Object.keys(newModelRes).forEach((rt) => {
+        if (getBillingCategory(rt) !== category) {
+          delete newModelRes[rt];
+        }
+      });
+      newModelRes[ratioType] = value;
+      return { ...prev, [model]: newModelRes };
+    });
+  }, []);
 
-      setResolutions((prev) => {
-        const newModelRes = { ...(prev[model] || {}) };
+  const performSync = useCallback(
+    async (currentRatios) => {
+      const finalRatios = {
+        ModelRatio: { ...currentRatios.ModelRatio },
+        CompletionRatio: { ...currentRatios.CompletionRatio },
+        CacheRatio: { ...currentRatios.CacheRatio },
+        ModelPrice: { ...currentRatios.ModelPrice },
+      };
 
-        Object.keys(newModelRes).forEach((rt) => {
-          if (getBillingCategory(rt) !== category) {
-            delete newModelRes[rt];
-          }
-        });
+      Object.entries(resolutions).forEach(([model, ratios]) => {
+        const selectedTypes = Object.keys(ratios);
+        const hasPrice = selectedTypes.includes('model_price');
+        const hasRatio = selectedTypes.some((rt) => rt !== 'model_price');
 
-        newModelRes[ratioType] = value;
+        if (hasPrice) {
+          delete finalRatios.ModelRatio[model];
+          delete finalRatios.CompletionRatio[model];
+          delete finalRatios.CacheRatio[model];
+        }
+        if (hasRatio) {
+          delete finalRatios.ModelPrice[model];
+        }
 
-        return {
-          ...prev,
-          [model]: newModelRes,
-        };
+        Object.entries(ratios).forEach(([ratioType, value]) => {
+          const optionKey = ratioType
+            .split('_')
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
+          finalRatios[optionKey][model] = parseFloat(value);
+        });
       });
+
+      setLoading(true);
+      try {
+        const updates = Object.entries(finalRatios).map(([key, value]) =>
+          API.put('/api/option/', {
+            key,
+            value: JSON.stringify(value, null, 2),
+          }),
+        );
+        const results = await Promise.all(updates);
+        if (results.every((res) => res.data.success)) {
+          showSuccess(t('同步成功'));
+          props.refresh();
+
+          setDifferences((prevDifferences) => {
+            const newDifferences = { ...prevDifferences };
+            Object.entries(resolutions).forEach(([model, ratios]) => {
+              Object.keys(ratios).forEach((ratioType) => {
+                if (
+                  newDifferences[model] &&
+                  newDifferences[model][ratioType]
+                ) {
+                  delete newDifferences[model][ratioType];
+                  if (Object.keys(newDifferences[model]).length === 0) {
+                    delete newDifferences[model];
+                  }
+                }
+              });
+            });
+            return newDifferences;
+          });
+
+          setResolutions({});
+        } else {
+          showError(t('部分保存失败'));
+        }
+      } catch (error) {
+        showError(t('保存失败'));
+      } finally {
+        setLoading(false);
+      }
     },
-    [setResolutions],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [resolutions, props.options, props.refresh],
   );
 
   const applySync = async () => {
@@ -360,484 +533,145 @@ export default function UpstreamRatioSync(props) {
     await performSync(currentRatios);
   };
 
-  const performSync = useCallback(
-    async (currentRatios) => {
-      const finalRatios = {
-        ModelRatio: { ...currentRatios.ModelRatio },
-        CompletionRatio: { ...currentRatios.CompletionRatio },
-        CacheRatio: { ...currentRatios.CacheRatio },
-        ModelPrice: { ...currentRatios.ModelPrice },
-      };
-
-      Object.entries(resolutions).forEach(([model, ratios]) => {
-        const selectedTypes = Object.keys(ratios);
-        const hasPrice = selectedTypes.includes('model_price');
-        const hasRatio = selectedTypes.some((rt) => rt !== 'model_price');
-
-        if (hasPrice) {
-          delete finalRatios.ModelRatio[model];
-          delete finalRatios.CompletionRatio[model];
-          delete finalRatios.CacheRatio[model];
-        }
-        if (hasRatio) {
-          delete finalRatios.ModelPrice[model];
-        }
-
-        Object.entries(ratios).forEach(([ratioType, value]) => {
-          const optionKey = ratioType
-            .split('_')
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join('');
-          finalRatios[optionKey][model] = parseFloat(value);
+  // ----------------------------- table -----------------------------
+
+  const dataSource = useMemo(() => {
+    const tmp = [];
+    Object.entries(differences).forEach(([model, ratioTypes]) => {
+      const hasPrice = 'model_price' in ratioTypes;
+      const hasOtherRatio = [
+        'model_ratio',
+        'completion_ratio',
+        'cache_ratio',
+      ].some((rt) => rt in ratioTypes);
+      const billingConflict = hasPrice && hasOtherRatio;
+
+      Object.entries(ratioTypes).forEach(([ratioType, diff]) => {
+        tmp.push({
+          key: `${model}_${ratioType}`,
+          model,
+          ratioType,
+          current: diff.current,
+          upstreams: diff.upstreams,
+          confidence: diff.confidence || {},
+          billingConflict,
         });
       });
+    });
+    return tmp;
+  }, [differences]);
+
+  const filteredDataSource = useMemo(() => {
+    if (!searchKeyword.trim() && !ratioTypeFilter) return dataSource;
+    return dataSource.filter((item) => {
+      const matchesKeyword =
+        !searchKeyword.trim() ||
+        item.model
+          .toLowerCase()
+          .includes(searchKeyword.toLowerCase().trim());
+      const matchesRatioType =
+        !ratioTypeFilter || item.ratioType === ratioTypeFilter;
+      return matchesKeyword && matchesRatioType;
+    });
+  }, [dataSource, searchKeyword, ratioTypeFilter]);
 
-      setLoading(true);
-      try {
-        const updates = Object.entries(finalRatios).map(([key, value]) =>
-          API.put('/api/option/', {
-            key,
-            value: JSON.stringify(value, null, 2),
-          }),
-        );
-
-        const results = await Promise.all(updates);
-
-        if (results.every((res) => res.data.success)) {
-          showSuccess(t('同步成功'));
-          props.refresh();
-
-          setDifferences((prevDifferences) => {
-            const newDifferences = { ...prevDifferences };
-
-            Object.entries(resolutions).forEach(([model, ratios]) => {
-              Object.keys(ratios).forEach((ratioType) => {
-                if (newDifferences[model] && newDifferences[model][ratioType]) {
-                  delete newDifferences[model][ratioType];
-
-                  if (Object.keys(newDifferences[model]).length === 0) {
-                    delete newDifferences[model];
-                  }
-                }
-              });
-            });
-
-            return newDifferences;
-          });
-
-          setResolutions({});
-        } else {
-          showError(t('部分保存失败'));
+  const upstreamNames = useMemo(() => {
+    const set = new Set();
+    filteredDataSource.forEach((row) => {
+      Object.keys(row.upstreams || {}).forEach((name) => set.add(name));
+    });
+    return Array.from(set);
+  }, [filteredDataSource]);
+
+  const channelStatsMap = useMemo(() => {
+    const map = {};
+    upstreamNames.forEach((upName) => {
+      let selectableCount = 0;
+      let selectedCount = 0;
+      filteredDataSource.forEach((row) => {
+        const upstreamVal = row.upstreams?.[upName];
+        if (
+          upstreamVal !== null &&
+          upstreamVal !== undefined &&
+          upstreamVal !== 'same'
+        ) {
+          selectableCount++;
+          if (resolutions[row.model]?.[row.ratioType] === upstreamVal) {
+            selectedCount++;
+          }
         }
-      } catch (error) {
-        showError(t('保存失败'));
-      } finally {
-        setLoading(false);
-      }
-    },
-    [resolutions, props.options, props.refresh],
-  );
-
-  const getCurrentPageData = (dataSource) => {
-    const startIndex = (currentPage - 1) * pageSize;
-    const endIndex = startIndex + pageSize;
-    return dataSource.slice(startIndex, endIndex);
-  };
-
-  const renderHeader = () => (
-    <div className='flex flex-col w-full'>
-      <div className='flex flex-col md:flex-row justify-between items-center gap-4 w-full'>
-        <div className='flex flex-col md:flex-row gap-2 w-full md:w-auto order-2 md:order-1'>
-          <Button
-            icon={<RefreshCcw size={14} />}
-            className='w-full md:w-auto mt-2'
-            onClick={() => {
-              setModalVisible(true);
-              if (allChannels.length === 0) {
-                fetchAllChannels();
-              }
-            }}
-          >
-            {t('选择同步渠道')}
-          </Button>
-
-          {(() => {
-            const hasSelections = Object.keys(resolutions).length > 0;
-
-            return (
-              <Button
-                icon={<CheckSquare size={14} />}
-                type='secondary'
-                onClick={applySync}
-                disabled={!hasSelections}
-                className='w-full md:w-auto mt-2'
-              >
-                {t('应用同步')}
-              </Button>
-            );
-          })()}
-
-          <div className='flex flex-col sm:flex-row gap-2 w-full md:w-auto mt-2'>
-            <Input
-              prefix={<IconSearch size={14} />}
-              placeholder={t('搜索模型名称')}
-              value={searchKeyword}
-              onChange={setSearchKeyword}
-              className='w-full sm:w-64'
-              showClear
-            />
-
-            <Select
-              placeholder={t('按倍率类型筛选')}
-              value={ratioTypeFilter}
-              onChange={setRatioTypeFilter}
-              className='w-full sm:w-48'
-              showClear
-              onClear={() => setRatioTypeFilter('')}
-            >
-              <Select.Option value='model_ratio'>{t('模型倍率')}</Select.Option>
-              <Select.Option value='completion_ratio'>
-                {t('补全倍率')}
-              </Select.Option>
-              <Select.Option value='cache_ratio'>{t('缓存倍率')}</Select.Option>
-              <Select.Option value='model_price'>{t('固定价格')}</Select.Option>
-            </Select>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  const renderDifferenceTable = () => {
-    const dataSource = useMemo(() => {
-      const tmp = [];
-
-      Object.entries(differences).forEach(([model, ratioTypes]) => {
-        const hasPrice = 'model_price' in ratioTypes;
-        const hasOtherRatio = [
-          'model_ratio',
-          'completion_ratio',
-          'cache_ratio',
-        ].some((rt) => rt in ratioTypes);
-        const billingConflict = hasPrice && hasOtherRatio;
-
-        Object.entries(ratioTypes).forEach(([ratioType, diff]) => {
-          tmp.push({
-            key: `${model}_${ratioType}`,
-            model,
-            ratioType,
-            current: diff.current,
-            upstreams: diff.upstreams,
-            confidence: diff.confidence || {},
-            billingConflict,
-          });
-        });
       });
+      map[upName] = {
+        selectableCount,
+        selectedCount,
+        allSelected:
+          selectableCount > 0 && selectedCount === selectableCount,
+        partiallySelected:
+          selectedCount > 0 && selectedCount < selectableCount,
+        hasSelectableItems: selectableCount > 0,
+      };
+    });
+    return map;
+  }, [filteredDataSource, upstreamNames, resolutions]);
 
-      return tmp;
-    }, [differences]);
-
-    const filteredDataSource = useMemo(() => {
-      if (!searchKeyword.trim() && !ratioTypeFilter) {
-        return dataSource;
-      }
-
-      return dataSource.filter((item) => {
-        const matchesKeyword =
-          !searchKeyword.trim() ||
-          item.model.toLowerCase().includes(searchKeyword.toLowerCase().trim());
-
-        const matchesRatioType =
-          !ratioTypeFilter || item.ratioType === ratioTypeFilter;
-
-        return matchesKeyword && matchesRatioType;
-      });
-    }, [dataSource, searchKeyword, ratioTypeFilter]);
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredDataSource.length / pageSize),
+  );
+  const pageData = filteredDataSource.slice(
+    (currentPage - 1) * pageSize,
+    currentPage * pageSize,
+  );
+  const startIndex =
+    filteredDataSource.length === 0 ? 0 : (currentPage - 1) * pageSize + 1;
+  const endIndex = Math.min(
+    currentPage * pageSize,
+    filteredDataSource.length,
+  );
 
-    const upstreamNames = useMemo(() => {
-      const set = new Set();
+  const handleBulkSelect = (upName, checked) => {
+    if (checked) {
       filteredDataSource.forEach((row) => {
-        Object.keys(row.upstreams || {}).forEach((name) => set.add(name));
+        const upstreamVal = row.upstreams?.[upName];
+        if (
+          upstreamVal !== null &&
+          upstreamVal !== undefined &&
+          upstreamVal !== 'same'
+        ) {
+          selectValue(row.model, row.ratioType, upstreamVal);
+        }
       });
-      return Array.from(set);
-    }, [filteredDataSource]);
-
-    if (filteredDataSource.length === 0) {
-      return (
-        <Empty
-          image={<IllustrationNoResult style={{ width: 150, height: 150 }} />}
-          darkModeImage={
-            <IllustrationNoResultDark style={{ width: 150, height: 150 }} />
-          }
-          description={
-            searchKeyword.trim()
-              ? t('未找到匹配的模型')
-              : Object.keys(differences).length === 0
-                ? hasSynced
-                  ? t('暂无差异化倍率显示')
-                  : t('请先选择同步渠道')
-                : t('请先选择同步渠道')
+    } else {
+      setResolutions((prev) => {
+        const newRes = { ...prev };
+        filteredDataSource.forEach((row) => {
+          if (newRes[row.model]) {
+            delete newRes[row.model][row.ratioType];
+            if (Object.keys(newRes[row.model]).length === 0) {
+              delete newRes[row.model];
+            }
           }
-          style={{ padding: 30 }}
-        />
-      );
+        });
+        return newRes;
+      });
     }
+  };
 
-    const columns = [
-      {
-        title: t('模型'),
-        dataIndex: 'model',
-        fixed: 'left',
-      },
-      {
-        title: t('倍率类型'),
-        dataIndex: 'ratioType',
-        render: (text, record) => {
-          const typeMap = {
-            model_ratio: t('模型倍率'),
-            completion_ratio: t('补全倍率'),
-            cache_ratio: t('缓存倍率'),
-            model_price: t('固定价格'),
-          };
-          const baseTag = (
-            <Tag color={stringToColor(text)} shape='circle'>
-              {typeMap[text] || text}
-            </Tag>
-          );
-          if (record?.billingConflict) {
-            return (
-              <div className='flex items-center gap-1'>
-                {baseTag}
-                <Tooltip
-                  position='top'
-                  content={t(
-                    '该模型存在固定价格与倍率计费方式冲突，请确认选择',
-                  )}
-                >
-                  <AlertTriangle size={14} className='text-yellow-500' />
-                </Tooltip>
-              </div>
-            );
-          }
-          return baseTag;
-        },
-      },
-      {
-        title: t('置信度'),
-        dataIndex: 'confidence',
-        render: (_, record) => {
-          const allConfident = Object.values(record.confidence || {}).every(
-            (v) => v !== false,
-          );
-
-          if (allConfident) {
-            return (
-              <Tooltip content={t('所有上游数据均可信')}>
-                <Tag
-                  color='green'
-                  shape='circle'
-                  type='light'
-                  prefixIcon={<CheckCircle size={14} />}
-                >
-                  {t('可信')}
-                </Tag>
-              </Tooltip>
-            );
-          } else {
-            const untrustedSources = Object.entries(record.confidence || {})
-              .filter(([_, isConfident]) => isConfident === false)
-              .map(([name]) => name)
-              .join(', ');
-
-            return (
-              <Tooltip
-                content={t('以下上游数据可能不可信：') + untrustedSources}
-              >
-                <Tag
-                  color='yellow'
-                  shape='circle'
-                  type='light'
-                  prefixIcon={<AlertTriangle size={14} />}
-                >
-                  {t('谨慎')}
-                </Tag>
-              </Tooltip>
-            );
-          }
-        },
-      },
-      {
-        title: t('当前值'),
-        dataIndex: 'current',
-        render: (text) => (
-          <Tag
-            color={text !== null && text !== undefined ? 'blue' : 'default'}
-            shape='circle'
-          >
-            {text !== null && text !== undefined ? String(text) : t('未设置')}
-          </Tag>
-        ),
-      },
-      ...upstreamNames.map((upName) => {
-        const channelStats = (() => {
-          let selectableCount = 0;
-          let selectedCount = 0;
-
-          filteredDataSource.forEach((row) => {
-            const upstreamVal = row.upstreams?.[upName];
-            if (
-              upstreamVal !== null &&
-              upstreamVal !== undefined &&
-              upstreamVal !== 'same'
-            ) {
-              selectableCount++;
-              const isSelected =
-                resolutions[row.model]?.[row.ratioType] === upstreamVal;
-              if (isSelected) {
-                selectedCount++;
-              }
-            }
-          });
-
-          return {
-            selectableCount,
-            selectedCount,
-            allSelected:
-              selectableCount > 0 && selectedCount === selectableCount,
-            partiallySelected:
-              selectedCount > 0 && selectedCount < selectableCount,
-            hasSelectableItems: selectableCount > 0,
-          };
-        })();
-
-        const handleBulkSelect = (checked) => {
-          if (checked) {
-            filteredDataSource.forEach((row) => {
-              const upstreamVal = row.upstreams?.[upName];
-              if (
-                upstreamVal !== null &&
-                upstreamVal !== undefined &&
-                upstreamVal !== 'same'
-              ) {
-                selectValue(row.model, row.ratioType, upstreamVal);
-              }
-            });
-          } else {
-            setResolutions((prev) => {
-              const newRes = { ...prev };
-              filteredDataSource.forEach((row) => {
-                if (newRes[row.model]) {
-                  delete newRes[row.model][row.ratioType];
-                  if (Object.keys(newRes[row.model]).length === 0) {
-                    delete newRes[row.model];
-                  }
-                }
-              });
-              return newRes;
-            });
+  const handleRowSelect = (model, ratioType, upstreamVal, checked) => {
+    if (checked) {
+      selectValue(model, ratioType, upstreamVal);
+    } else {
+      setResolutions((prev) => {
+        const newRes = { ...prev };
+        if (newRes[model]) {
+          delete newRes[model][ratioType];
+          if (Object.keys(newRes[model]).length === 0) {
+            delete newRes[model];
           }
-        };
-
-        return {
-          title: channelStats.hasSelectableItems ? (
-            <Checkbox
-              checked={channelStats.allSelected}
-              indeterminate={channelStats.partiallySelected}
-              onChange={(e) => handleBulkSelect(e.target.checked)}
-            >
-              {upName}
-            </Checkbox>
-          ) : (
-            <span>{upName}</span>
-          ),
-          dataIndex: upName,
-          render: (_, record) => {
-            const upstreamVal = record.upstreams?.[upName];
-            const isConfident = record.confidence?.[upName] !== false;
-
-            if (upstreamVal === null || upstreamVal === undefined) {
-              return (
-                <Tag color='default' shape='circle'>
-                  {t('未设置')}
-                </Tag>
-              );
-            }
-
-            if (upstreamVal === 'same') {
-              return (
-                <Tag color='blue' shape='circle'>
-                  {t('与本地相同')}
-                </Tag>
-              );
-            }
-
-            const isSelected =
-              resolutions[record.model]?.[record.ratioType] === upstreamVal;
-
-            return (
-              <div className='flex items-center gap-2'>
-                <Checkbox
-                  checked={isSelected}
-                  onChange={(e) => {
-                    const isChecked = e.target.checked;
-                    if (isChecked) {
-                      selectValue(record.model, record.ratioType, upstreamVal);
-                    } else {
-                      setResolutions((prev) => {
-                        const newRes = { ...prev };
-                        if (newRes[record.model]) {
-                          delete newRes[record.model][record.ratioType];
-                          if (Object.keys(newRes[record.model]).length === 0) {
-                            delete newRes[record.model];
-                          }
-                        }
-                        return newRes;
-                      });
-                    }
-                  }}
-                >
-                  {String(upstreamVal)}
-                </Checkbox>
-                {!isConfident && (
-                  <Tooltip
-                    position='left'
-                    content={t('该数据可能不可信，请谨慎使用')}
-                  >
-                    <AlertTriangle size={16} className='text-yellow-500' />
-                  </Tooltip>
-                )}
-              </div>
-            );
-          },
-        };
-      }),
-    ];
-
-    return (
-      <Table
-        columns={columns}
-        dataSource={getCurrentPageData(filteredDataSource)}
-        pagination={{
-          currentPage: currentPage,
-          pageSize: pageSize,
-          total: filteredDataSource.length,
-          showSizeChanger: true,
-          showQuickJumper: true,
-          pageSizeOptions: ['5', '10', '20', '50'],
-          onChange: (page, size) => {
-            setCurrentPage(page);
-            setPageSize(size);
-          },
-          onShowSizeChange: (current, size) => {
-            setCurrentPage(1);
-            setPageSize(size);
-          },
-        }}
-        scroll={{ x: 'max-content' }}
-        size='middle'
-        loading={loading || syncLoading}
-      />
-    );
+        }
+        return newRes;
+      });
+    }
   };
 
   const updateChannelEndpoint = useCallback((channelId, endpoint) => {
@@ -851,11 +685,361 @@ export default function UpstreamRatioSync(props) {
     }
   };
 
+  const RATIO_TYPE_OPTIONS = [
+    { value: '', label: t('按倍率类型筛选') },
+    { value: 'model_ratio', label: t('模型倍率') },
+    { value: 'completion_ratio', label: t('补全倍率') },
+    { value: 'cache_ratio', label: t('缓存倍率') },
+    { value: 'model_price', label: t('固定价格') },
+  ];
+
+  const ratioTypeLabel = {
+    model_ratio: t('模型倍率'),
+    completion_ratio: t('补全倍率'),
+    cache_ratio: t('缓存倍率'),
+    model_price: t('固定价格'),
+  };
+
+  const renderEmpty = () => (
+    <div className='flex flex-col items-center gap-2 px-4 py-10 text-center'>
+      <Inbox size={36} className='text-muted/60' />
+      <div className='text-sm text-muted'>
+        {searchKeyword.trim()
+          ? t('未找到匹配的模型')
+          : Object.keys(differences).length === 0
+            ? hasSynced
+              ? t('暂无差异化倍率显示')
+              : t('请先选择同步渠道')
+            : t('请先选择同步渠道')}
+      </div>
+    </div>
+  );
+
+  const tableLoading = loading || syncLoading;
+  const hasSelections = Object.keys(resolutions).length > 0;
+
   return (
     <>
-      <Form.Section text={renderHeader()}>
-        {renderDifferenceTable()}
-      </Form.Section>
+      <div className='space-y-3'>
+        {/* Toolbar */}
+        <div className='flex flex-col gap-2 md:flex-row md:items-center md:justify-between'>
+          <div className='flex w-full flex-col gap-2 md:w-auto md:flex-row'>
+            <Button
+              variant='flat'
+              startContent={<RefreshCcw size={14} />}
+              onPress={() => {
+                setModalVisible(true);
+                if (allChannels.length === 0) fetchAllChannels();
+              }}
+              className='w-full md:w-auto'
+            >
+              {t('选择同步渠道')}
+            </Button>
+            <Button
+              variant='flat'
+              color='primary'
+              startContent={<CheckSquare size={14} />}
+              isDisabled={!hasSelections}
+              onPress={applySync}
+              className='w-full md:w-auto'
+            >
+              {t('应用同步')}
+            </Button>
+
+            <div className='flex w-full flex-col gap-2 sm:flex-row md:w-auto'>
+              <div className='relative w-full sm:w-64'>
+                <Search
+                  size={14}
+                  className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+                />
+                <input
+                  type='text'
+                  value={searchKeyword}
+                  onChange={(event) =>
+                    setSearchKeyword(event.target.value)
+                  }
+                  placeholder={t('搜索模型名称')}
+                  className={`${inputClass} pl-8`}
+                />
+              </div>
+              <select
+                value={ratioTypeFilter}
+                onChange={(event) =>
+                  setRatioTypeFilter(event.target.value)
+                }
+                className={`${inputClass} w-full sm:w-48`}
+              >
+                {RATIO_TYPE_OPTIONS.map((option) => (
+                  <option key={option.value || 'all'} value={option.value}>
+                    {option.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </div>
+
+        {/* Table */}
+        <div className='relative overflow-x-auto rounded-xl border border-border'>
+          {tableLoading && (
+            <div className='absolute inset-0 z-10 flex items-center justify-center bg-background/60 backdrop-blur-[1px]'>
+              <Spinner color='primary' />
+            </div>
+          )}
+
+          {filteredDataSource.length === 0 ? (
+            renderEmpty()
+          ) : (
+            <table className='w-full text-sm'>
+              <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+                <tr>
+                  <th className='sticky left-0 bg-surface-secondary px-3 py-2 text-left font-medium'>
+                    {t('模型')}
+                  </th>
+                  <th className='px-3 py-2 text-left font-medium'>
+                    {t('倍率类型')}
+                  </th>
+                  <th className='px-3 py-2 text-left font-medium'>
+                    {t('置信度')}
+                  </th>
+                  <th className='px-3 py-2 text-left font-medium'>
+                    {t('当前值')}
+                  </th>
+                  {upstreamNames.map((upName) => {
+                    const stats = channelStatsMap[upName] || {};
+                    return (
+                      <th
+                        key={upName}
+                        className='whitespace-nowrap px-3 py-2 text-left font-medium normal-case'
+                      >
+                        {stats.hasSelectableItems ? (
+                          <CompactCheckbox
+                            checked={!!stats.allSelected}
+                            indeterminate={!!stats.partiallySelected}
+                            onChange={(checked) =>
+                              handleBulkSelect(upName, checked)
+                            }
+                            ariaLabel={upName}
+                          >
+                            {upName}
+                          </CompactCheckbox>
+                        ) : (
+                          <span>{upName}</span>
+                        )}
+                      </th>
+                    );
+                  })}
+                </tr>
+              </thead>
+              <tbody className='divide-y divide-border'>
+                {pageData.map((record) => {
+                  const allConfident = Object.values(
+                    record.confidence || {},
+                  ).every((v) => v !== false);
+                  const tagBg = stringToColor(record.ratioType) || undefined;
+                  return (
+                    <tr
+                      key={record.key}
+                      className='bg-background hover:bg-surface-secondary/60'
+                    >
+                      <td className='sticky left-0 bg-background px-3 py-2 align-top text-foreground'>
+                        {record.model}
+                      </td>
+                      <td className='px-3 py-2 align-top'>
+                        <div className='flex items-center gap-1'>
+                          <StatusChip
+                            bg={tagBg}
+                            color={tagBg ? '#fff' : undefined}
+                          >
+                            {ratioTypeLabel[record.ratioType] ||
+                              record.ratioType}
+                          </StatusChip>
+                          {record.billingConflict ? (
+                            <Tooltip
+                              content={t(
+                                '该模型存在固定价格与倍率计费方式冲突，请确认选择',
+                              )}
+                            >
+                              <AlertTriangle
+                                size={14}
+                                className='text-warning'
+                              />
+                            </Tooltip>
+                          ) : null}
+                        </div>
+                      </td>
+                      <td className='px-3 py-2 align-top'>
+                        {allConfident ? (
+                          <Tooltip content={t('所有上游数据均可信')}>
+                            <StatusChip
+                              tone='green'
+                              prefixIcon={<CheckCircle size={12} />}
+                            >
+                              {t('可信')}
+                            </StatusChip>
+                          </Tooltip>
+                        ) : (() => {
+                          const untrustedSources = Object.entries(
+                            record.confidence || {},
+                          )
+                            .filter(([_, isConfident]) => isConfident === false)
+                            .map(([name]) => name)
+                            .join(', ');
+                          return (
+                            <Tooltip
+                              content={
+                                t('以下上游数据可能不可信：') +
+                                untrustedSources
+                              }
+                            >
+                              <StatusChip
+                                tone='yellow'
+                                prefixIcon={<AlertTriangle size={12} />}
+                              >
+                                {t('谨慎')}
+                              </StatusChip>
+                            </Tooltip>
+                          );
+                        })()}
+                      </td>
+                      <td className='px-3 py-2 align-top'>
+                        <StatusChip
+                          tone={
+                            record.current !== null &&
+                            record.current !== undefined
+                              ? 'blue'
+                              : 'grey'
+                          }
+                        >
+                          {record.current !== null &&
+                          record.current !== undefined
+                            ? String(record.current)
+                            : t('未设置')}
+                        </StatusChip>
+                      </td>
+                      {upstreamNames.map((upName) => {
+                        const upstreamVal = record.upstreams?.[upName];
+                        const isConfident =
+                          record.confidence?.[upName] !== false;
+
+                        if (
+                          upstreamVal === null ||
+                          upstreamVal === undefined
+                        ) {
+                          return (
+                            <td key={upName} className='px-3 py-2 align-top'>
+                              <StatusChip tone='grey'>
+                                {t('未设置')}
+                              </StatusChip>
+                            </td>
+                          );
+                        }
+                        if (upstreamVal === 'same') {
+                          return (
+                            <td key={upName} className='px-3 py-2 align-top'>
+                              <StatusChip tone='blue'>
+                                {t('与本地相同')}
+                              </StatusChip>
+                            </td>
+                          );
+                        }
+
+                        const isSelected =
+                          resolutions[record.model]?.[record.ratioType] ===
+                          upstreamVal;
+
+                        return (
+                          <td key={upName} className='px-3 py-2 align-top'>
+                            <div className='flex items-center gap-2'>
+                              <CompactCheckbox
+                                checked={isSelected}
+                                onChange={(checked) =>
+                                  handleRowSelect(
+                                    record.model,
+                                    record.ratioType,
+                                    upstreamVal,
+                                    checked,
+                                  )
+                                }
+                                ariaLabel={`${record.model} ${upName}`}
+                              >
+                                {String(upstreamVal)}
+                              </CompactCheckbox>
+                              {!isConfident && (
+                                <Tooltip
+                                  content={t(
+                                    '该数据可能不可信，请谨慎使用',
+                                  )}
+                                >
+                                  <AlertTriangle
+                                    size={14}
+                                    className='text-warning'
+                                  />
+                                </Tooltip>
+                              )}
+                            </div>
+                          </td>
+                        );
+                      })}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
+
+          {filteredDataSource.length > 0 && (
+            <div className='flex flex-wrap items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs text-muted'>
+              <span>
+                {t('共 {{total}} 项，当前显示 {{start}}-{{end}} 项', {
+                  total: filteredDataSource.length,
+                  start: startIndex,
+                  end: endIndex,
+                })}
+              </span>
+              <div className='flex items-center gap-2'>
+                <select
+                  value={pageSize}
+                  onChange={(event) => {
+                    setPageSize(Number(event.target.value));
+                    setCurrentPage(1);
+                  }}
+                  className='h-8 rounded-xl border border-border bg-background px-2 text-xs text-foreground outline-none focus:border-primary'
+                >
+                  {[5, 10, 20, 50].map((size) => (
+                    <option key={size} value={size}>
+                      {size} / {t('页')}
+                    </option>
+                  ))}
+                </select>
+                <Button
+                  size='sm'
+                  variant='light'
+                  isDisabled={currentPage <= 1}
+                  onPress={() =>
+                    setCurrentPage(Math.max(1, currentPage - 1))
+                  }
+                >
+                  {t('上一页')}
+                </Button>
+                <span>
+                  {currentPage} / {totalPages}
+                </span>
+                <Button
+                  size='sm'
+                  variant='light'
+                  isDisabled={currentPage >= totalPages}
+                  onPress={() =>
+                    setCurrentPage(Math.min(totalPages, currentPage + 1))
+                  }
+                >
+                  {t('下一页')}
+                </Button>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
 
       <ChannelSelectorModal
         ref={channelSelectorRef}
@@ -878,7 +1062,9 @@ export default function UpstreamRatioSync(props) {
           setConfirmVisible(false);
           const curRatios = {
             ModelRatio: JSON.parse(props.options.ModelRatio || '{}'),
-            CompletionRatio: JSON.parse(props.options.CompletionRatio || '{}'),
+            CompletionRatio: JSON.parse(
+              props.options.CompletionRatio || '{}',
+            ),
             CacheRatio: JSON.parse(props.options.CacheRatio || '{}'),
             ModelPrice: JSON.parse(props.options.ModelPrice || '{}'),
           };
diff --git a/web/src/pages/Setting/Ratio/components/AutoGroupList.jsx b/web/src/pages/Setting/Ratio/components/AutoGroupList.jsx
index 64d4c8298bc..c5c6b4b0374 100644
--- a/web/src/pages/Setting/Ratio/components/AutoGroupList.jsx
+++ b/web/src/pages/Setting/Ratio/components/AutoGroupList.jsx
@@ -1,21 +1,8 @@
 import React, { useState, useCallback, useMemo } from 'react';
-import {
-  Button,
-  Select,
-  Typography,
-  Popconfirm,
-  Tag,
-} from '@douyinfe/semi-ui';
-import {
-  IconPlus,
-  IconDelete,
-  IconChevronUp,
-  IconChevronDown,
-} from '@douyinfe/semi-icons';
+import { Button } from '@heroui/react';
+import { Plus, Trash2, ChevronUp, ChevronDown } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-const { Text } = Typography;
-
 let _idCounter = 0;
 const uid = () => `ag_${++_idCounter}`;
 
@@ -39,7 +26,6 @@ function serializeAutoGroups(items) {
 
 export default function AutoGroupList({ value, groupNames = [], onChange }) {
   const { t } = useTranslation();
-
   const [items, setItems] = useState(() => parseAutoGroups(value));
 
   const emitChange = useCallback(
@@ -61,9 +47,13 @@ export default function AutoGroupList({ value, groupNames = [], onChange }) {
 
   const removeItem = useCallback(
     (id) => {
+      // eslint-disable-next-line no-alert
+      if (typeof window !== 'undefined' && !window.confirm(t('确认移除？'))) {
+        return;
+      }
       emitChange(items.filter((i) => i._id !== id));
     },
-    [items, emitChange],
+    [items, emitChange, t],
   );
 
   const updateItem = useCallback(
@@ -96,11 +86,16 @@ export default function AutoGroupList({ value, groupNames = [], onChange }) {
   if (items.length === 0) {
     return (
       <div>
-        <Text type='tertiary' className='block text-center py-4'>
+        <div className='block py-4 text-center text-sm text-muted'>
           {t('暂无自动分组，点击下方按钮添加')}
-        </Text>
+        </div>
         <div className='mt-2 flex justify-center'>
-          <Button icon={<IconPlus />} theme='outline' onClick={addItem}>
+          <Button
+            variant='bordered'
+            startContent={<Plus size={14} />}
+            onPress={addItem}
+            size='sm'
+          >
             {t('添加分组')}
           </Button>
         </div>
@@ -112,55 +107,66 @@ export default function AutoGroupList({ value, groupNames = [], onChange }) {
     <div>
       <div className='space-y-2'>
         {items.map((item, index) => (
-          <div
-            key={item._id}
-            className='flex items-center gap-2'
-          >
-            <Tag size='small' color='blue' className='shrink-0'>
+          <div key={item._id} className='flex items-center gap-2'>
+            <span className='inline-flex h-6 min-w-[1.5rem] shrink-0 items-center justify-center rounded-full bg-sky-100 px-1.5 text-xs font-semibold text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'>
               {index + 1}
-            </Tag>
-            <Select
-              size='small'
-              filter
-              value={item.name || undefined}
+            </span>
+            <input
+              type='text'
+              list={`autogroup-options-${item._id}`}
+              value={item.name || ''}
               placeholder={t('选择分组')}
-              optionList={groupOptions}
-              onChange={(v) => updateItem(item._id, v)}
-              style={{ flex: 1 }}
-              allowCreate
-              position='bottomLeft'
+              onChange={(event) => updateItem(item._id, event.target.value)}
+              aria-label={t('分组名称')}
+              className='h-9 flex-1 rounded-lg border border-[color:var(--app-border)] bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary'
             />
+            <datalist id={`autogroup-options-${item._id}`}>
+              {groupOptions.map((opt) => (
+                <option key={opt.value} value={opt.value}>
+                  {opt.label}
+                </option>
+              ))}
+            </datalist>
             <Button
-              icon={<IconChevronUp />}
-              theme='borderless'
-              size='small'
-              disabled={index === 0}
-              onClick={() => moveUp(index)}
-            />
+              isIconOnly
+              variant='light'
+              size='sm'
+              isDisabled={index === 0}
+              onPress={() => moveUp(index)}
+              aria-label={t('上移')}
+            >
+              <ChevronUp size={14} />
+            </Button>
             <Button
-              icon={<IconChevronDown />}
-              theme='borderless'
-              size='small'
-              disabled={index === items.length - 1}
-              onClick={() => moveDown(index)}
-            />
-            <Popconfirm
-              title={t('确认移除？')}
-              onConfirm={() => removeItem(item._id)}
-              position='left'
+              isIconOnly
+              variant='light'
+              size='sm'
+              isDisabled={index === items.length - 1}
+              onPress={() => moveDown(index)}
+              aria-label={t('下移')}
+            >
+              <ChevronDown size={14} />
+            </Button>
+            <Button
+              isIconOnly
+              variant='light'
+              color='danger'
+              size='sm'
+              onPress={() => removeItem(item._id)}
+              aria-label={t('移除')}
             >
-              <Button
-                icon={<IconDelete />}
-                type='danger'
-                theme='borderless'
-                size='small'
-              />
-            </Popconfirm>
+              <Trash2 size={14} />
+            </Button>
           </div>
         ))}
       </div>
       <div className='mt-3 flex justify-center'>
-        <Button icon={<IconPlus />} theme='outline' onClick={addItem}>
+        <Button
+          variant='bordered'
+          startContent={<Plus size={14} />}
+          onPress={addItem}
+          size='sm'
+        >
           {t('添加分组')}
         </Button>
       </div>
diff --git a/web/src/pages/Setting/Ratio/components/GroupGroupRatioRules.jsx b/web/src/pages/Setting/Ratio/components/GroupGroupRatioRules.jsx
index 6bfa148e57a..3b33727ee2c 100644
--- a/web/src/pages/Setting/Ratio/components/GroupGroupRatioRules.jsx
+++ b/web/src/pages/Setting/Ratio/components/GroupGroupRatioRules.jsx
@@ -1,24 +1,13 @@
 import React, { useState, useCallback, useMemo } from 'react';
+import { Button, Input } from '@heroui/react';
 import {
-  Button,
-  Collapsible,
-  Input,
-  InputNumber,
-  Select,
-  Tag,
-  Typography,
-  Popconfirm,
-} from '@douyinfe/semi-ui';
-import {
-  IconPlus,
-  IconDelete,
-  IconChevronDown,
-  IconChevronUp,
-} from '@douyinfe/semi-icons';
+  Plus,
+  Trash2,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-const { Text } = Typography;
-
 let _idCounter = 0;
 const uid = () => `ggr_${++_idCounter}`;
 
@@ -64,94 +53,128 @@ export function serializeGroupGroupRatio(rules) {
     : JSON.stringify(nested, null, 2);
 }
 
-function GroupSection({ groupName, items, groupOptions, onUpdate, onRemove, onAdd, t }) {
+const inputClass =
+  'h-8 w-full rounded-md border border-[color:var(--app-border)] bg-background px-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+function GroupSection({
+  groupName,
+  items,
+  groupOptions,
+  onUpdate,
+  onRemove,
+  onAdd,
+  t,
+}) {
   const [open, setOpen] = useState(false);
 
+  const removeAll = () => {
+    if (typeof window !== 'undefined' && !window.confirm(t('确认删除该分组的所有规则？'))) {
+      return;
+    }
+    items.forEach((item) => onRemove(item._id));
+  };
+
+  const removeOne = (id) => {
+    if (typeof window !== 'undefined' && !window.confirm(t('确认删除该规则？'))) {
+      return;
+    }
+    onRemove(id);
+  };
+
   return (
-    <div
-      style={{
-        border: '1px solid var(--semi-color-border)',
-        borderRadius: 8,
-        overflow: 'hidden',
-      }}
-    >
+    <div className='overflow-hidden rounded-lg border border-[color:var(--app-border)]'>
       <div
-        className='flex items-center justify-between cursor-pointer'
-        style={{
-          padding: '8px 12px',
-          background: 'var(--semi-color-fill-0)',
-        }}
-        onClick={() => setOpen(!open)}
+        className='flex cursor-pointer items-center justify-between bg-[color:var(--app-background)] px-3 py-2'
+        onClick={() => setOpen((prev) => !prev)}
       >
         <div className='flex items-center gap-2'>
-          {open ? <IconChevronUp size='small' /> : <IconChevronDown size='small' />}
-          <Text strong>{groupName}</Text>
-          <Tag size='small' color='blue'>{items.length} {t('条规则')}</Tag>
+          {open ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+          <span className='text-sm font-semibold text-foreground'>
+            {groupName}
+          </span>
+          <span className='inline-flex items-center rounded-full bg-sky-100 px-2 py-0.5 text-[11px] font-medium text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'>
+            {items.length} {t('条规则')}
+          </span>
         </div>
-        <div className='flex items-center gap-1' onClick={(e) => e.stopPropagation()}>
+        <div
+          className='flex items-center gap-1'
+          onClick={(event) => event.stopPropagation()}
+        >
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('添加')}
+            onPress={() => onAdd(groupName)}
+          >
+            <Plus size={14} />
+          </Button>
           <Button
-            icon={<IconPlus />}
-            size='small'
-            theme='borderless'
-            onClick={() => onAdd(groupName)}
-          />
-          <Popconfirm
-            title={t('确认删除该分组的所有规则？')}
-            onConfirm={() => items.forEach((item) => onRemove(item._id))}
-            position='left'
+            isIconOnly
+            variant='light'
+            color='danger'
+            size='sm'
+            aria-label={t('删除该分组')}
+            onPress={removeAll}
           >
-            <Button
-              icon={<IconDelete />}
-              size='small'
-              type='danger'
-              theme='borderless'
-            />
-          </Popconfirm>
+            <Trash2 size={14} />
+          </Button>
         </div>
       </div>
-      <Collapsible isOpen={open} keepDOM>
-        <div style={{ padding: '8px 12px' }}>
+      {open ? (
+        <div className='space-y-1.5 px-3 py-2'>
           {items.map((rule) => (
-            <div
-              key={rule._id}
-              className='flex items-center gap-2'
-              style={{ marginBottom: 6 }}
-            >
-              <Select
-                size='small'
-                filter
-                value={rule.usingGroup || undefined}
-                placeholder={t('选择使用分组')}
-                optionList={groupOptions}
-                onChange={(v) => onUpdate(rule._id, 'usingGroup', v)}
-                style={{ flex: 1 }}
-                allowCreate
-                position='bottomLeft'
-              />
-              <InputNumber
-                size='small'
+            <div key={rule._id} className='flex items-center gap-2'>
+              <div className='flex-1'>
+                <input
+                  type='text'
+                  list={`group-options-${rule._id}`}
+                  value={rule.usingGroup || ''}
+                  placeholder={t('选择使用分组')}
+                  onChange={(event) =>
+                    onUpdate(rule._id, 'usingGroup', event.target.value)
+                  }
+                  aria-label={t('使用分组')}
+                  className={inputClass}
+                />
+                <datalist id={`group-options-${rule._id}`}>
+                  {groupOptions.map((opt) => (
+                    <option key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </option>
+                  ))}
+                </datalist>
+              </div>
+              <Input
+                type='number'
+                value={
+                  rule.ratio === '' || rule.ratio == null
+                    ? ''
+                    : String(rule.ratio)
+                }
                 min={0}
                 step={0.1}
-                value={rule.ratio}
-                style={{ width: 100 }}
-                onChange={(v) => onUpdate(rule._id, 'ratio', v ?? 0)}
+                onChange={(event) => {
+                  const v = event.target.value;
+                  onUpdate(rule._id, 'ratio', v === '' ? 0 : Number(v));
+                }}
+                aria-label={t('倍率')}
+                className='h-8 w-24 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-sm text-foreground outline-none transition focus:border-primary'
               />
-              <Popconfirm
-                title={t('确认删除该规则？')}
-                onConfirm={() => onRemove(rule._id)}
-                position='left'
+              <Button
+                isIconOnly
+                variant='light'
+                color='danger'
+                size='sm'
+                aria-label={t('删除该规则')}
+                onPress={() => removeOne(rule._id)}
               >
-                <Button
-                  icon={<IconDelete />}
-                  type='danger'
-                  theme='borderless'
-                  size='small'
-                />
-              </Popconfirm>
+                <Trash2 size={14} />
+              </Button>
             </div>
           ))}
         </div>
-      </Collapsible>
+      ) : null}
     </div>
   );
 }
@@ -226,28 +249,44 @@ export default function GroupGroupRatioRules({
     return order.map((name) => ({ name, items: map[name] }));
   }, [rules]);
 
+  const newGroupListId = 'group-group-ratio-new-options';
+
+  const adder = (
+    <div className='mt-3 flex justify-center gap-2'>
+      <input
+        type='text'
+        list={newGroupListId}
+        value={newGroupName}
+        onChange={(event) => setNewGroupName(event.target.value)}
+        placeholder={t('选择用户分组')}
+        aria-label={t('用户分组')}
+        className='h-8 w-52 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-sm text-foreground outline-none transition focus:border-primary'
+      />
+      <datalist id={newGroupListId}>
+        {groupOptions.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </datalist>
+      <Button
+        variant='bordered'
+        startContent={<Plus size={14} />}
+        onPress={addNewGroup}
+        size='sm'
+      >
+        {t('添加分组规则')}
+      </Button>
+    </div>
+  );
+
   if (grouped.length === 0 && rules.length === 0) {
     return (
       <div>
-        <Text type='tertiary' className='block text-center py-4'>
+        <div className='block py-4 text-center text-sm text-muted'>
           {t('暂无规则，点击下方按钮添加')}
-        </Text>
-        <div className='mt-2 flex justify-center gap-2'>
-          <Select
-            size='small'
-            filter
-            allowCreate
-            placeholder={t('选择用户分组')}
-            optionList={groupOptions}
-            value={newGroupName || undefined}
-            onChange={setNewGroupName}
-            style={{ width: 200 }}
-            position='bottomLeft'
-          />
-          <Button icon={<IconPlus />} theme='outline' onClick={addNewGroup}>
-            {t('添加分组规则')}
-          </Button>
         </div>
+        {adder}
       </div>
     );
   }
@@ -266,22 +305,7 @@ export default function GroupGroupRatioRules({
           t={t}
         />
       ))}
-      <div className='mt-3 flex justify-center gap-2'>
-        <Select
-          size='small'
-          filter
-          allowCreate
-          placeholder={t('选择用户分组')}
-          optionList={groupOptions}
-          value={newGroupName || undefined}
-          onChange={setNewGroupName}
-          style={{ width: 200 }}
-          position='bottomLeft'
-        />
-        <Button icon={<IconPlus />} theme='outline' onClick={addNewGroup}>
-          {t('添加分组规则')}
-        </Button>
-      </div>
+      {adder}
     </div>
   );
 }
diff --git a/web/src/pages/Setting/Ratio/components/GroupSpecialUsableRules.jsx b/web/src/pages/Setting/Ratio/components/GroupSpecialUsableRules.jsx
index 20ec872a958..3deeea90b36 100644
--- a/web/src/pages/Setting/Ratio/components/GroupSpecialUsableRules.jsx
+++ b/web/src/pages/Setting/Ratio/components/GroupSpecialUsableRules.jsx
@@ -17,25 +17,15 @@ along with this program. If not, see <https://www.gnu.org/licenses/>.
 For commercial licensing, please contact support@quantumnous.com
 */
 import React, { useState, useCallback, useMemo } from 'react';
+import { Button, Input } from '@heroui/react';
 import {
-  Button,
-  Collapsible,
-  Input,
-  Select,
-  Tag,
-  Typography,
-  Popconfirm,
-} from '@douyinfe/semi-ui';
-import {
-  IconPlus,
-  IconDelete,
-  IconChevronDown,
-  IconChevronUp,
-} from '@douyinfe/semi-icons';
+  Plus,
+  Trash2,
+  ChevronDown,
+  ChevronUp,
+} from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 
-const { Text } = Typography;
-
 let _idCounter = 0;
 const uid = () => `gsu_${++_idCounter}`;
 
@@ -57,7 +47,11 @@ function toRawKey(op, groupName) {
 
 function parseJSON(str) {
   if (!str || !str.trim()) return {};
-  try { return JSON.parse(str); } catch { return {}; }
+  try {
+    return JSON.parse(str);
+  } catch {
+    return {};
+  }
 }
 
 function flattenRules(nested) {
@@ -71,7 +65,8 @@ function flattenRules(nested) {
         userGroup,
         op,
         targetGroup: groupName,
-        description: op === OP_REMOVE ? 'remove' : (typeof desc === 'string' ? desc : ''),
+        description:
+          op === OP_REMOVE ? 'remove' : typeof desc === 'string' ? desc : '',
       });
     }
   }
@@ -90,115 +85,149 @@ function nestRules(rules) {
 
 export function serializeGroupSpecialUsable(rules) {
   const nested = nestRules(rules);
-  return Object.keys(nested).length === 0 ? '' : JSON.stringify(nested, null, 2);
+  return Object.keys(nested).length === 0
+    ? ''
+    : JSON.stringify(nested, null, 2);
 }
 
-const OP_TAG_MAP = {
-  [OP_ADD]: { color: 'green', label: '添加 (+:)' },
-  [OP_REMOVE]: { color: 'red', label: '移除 (-:)' },
-  [OP_APPEND]: { color: 'blue', label: '追加' },
+const inputClass =
+  'h-8 w-full rounded-md border border-[color:var(--app-border)] bg-background px-2 text-sm text-foreground outline-none transition focus:border-primary';
+
+const opStyles = {
+  [OP_ADD]:
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300',
+  [OP_REMOVE]:
+    'bg-red-100 text-red-700 dark:bg-red-950/40 dark:text-red-300',
+  [OP_APPEND]:
+    'bg-sky-100 text-sky-700 dark:bg-sky-950/40 dark:text-sky-300',
 };
 
-function UsableGroupSection({ groupName, items, opOptions, onUpdate, onRemove, onAdd, t }) {
+function UsableGroupSection({
+  groupName,
+  items,
+  opOptions,
+  onUpdate,
+  onRemove,
+  onAdd,
+  t,
+}) {
   const [open, setOpen] = useState(false);
 
+  const removeAll = () => {
+    if (typeof window !== 'undefined' && !window.confirm(t('确认删除该分组的所有规则？'))) {
+      return;
+    }
+    items.forEach((item) => onRemove(item._id));
+  };
+
+  const removeOne = (id) => {
+    if (typeof window !== 'undefined' && !window.confirm(t('确认删除该规则？'))) {
+      return;
+    }
+    onRemove(id);
+  };
+
   return (
-    <div
-      style={{
-        border: '1px solid var(--semi-color-border)',
-        borderRadius: 8,
-        overflow: 'hidden',
-      }}
-    >
+    <div className='overflow-hidden rounded-lg border border-[color:var(--app-border)]'>
       <div
-        className='flex items-center justify-between cursor-pointer'
-        style={{
-          padding: '8px 12px',
-          background: 'var(--semi-color-fill-0)',
-        }}
-        onClick={() => setOpen(!open)}
+        className='flex cursor-pointer items-center justify-between bg-[color:var(--app-background)] px-3 py-2'
+        onClick={() => setOpen((prev) => !prev)}
       >
         <div className='flex items-center gap-2'>
-          {open ? <IconChevronUp size='small' /> : <IconChevronDown size='small' />}
-          <Text strong>{groupName}</Text>
-          <Tag size='small' color='blue'>{items.length} {t('条规则')}</Tag>
+          {open ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
+          <span className='text-sm font-semibold text-foreground'>
+            {groupName}
+          </span>
+          <span className='inline-flex items-center rounded-full bg-sky-100 px-2 py-0.5 text-[11px] font-medium text-sky-700 dark:bg-sky-950/40 dark:text-sky-300'>
+            {items.length} {t('条规则')}
+          </span>
         </div>
-        <div className='flex items-center gap-1' onClick={(e) => e.stopPropagation()}>
+        <div
+          className='flex items-center gap-1'
+          onClick={(event) => event.stopPropagation()}
+        >
+          <Button
+            isIconOnly
+            variant='light'
+            size='sm'
+            aria-label={t('添加')}
+            onPress={() => onAdd(groupName)}
+          >
+            <Plus size={14} />
+          </Button>
           <Button
-            icon={<IconPlus />}
-            size='small'
-            theme='borderless'
-            onClick={() => onAdd(groupName)}
-          />
-          <Popconfirm
-            title={t('确认删除该分组的所有规则？')}
-            onConfirm={() => items.forEach((item) => onRemove(item._id))}
-            position='left'
+            isIconOnly
+            variant='light'
+            color='danger'
+            size='sm'
+            aria-label={t('删除该分组')}
+            onPress={removeAll}
           >
-            <Button
-              icon={<IconDelete />}
-              size='small'
-              type='danger'
-              theme='borderless'
-            />
-          </Popconfirm>
+            <Trash2 size={14} />
+          </Button>
         </div>
       </div>
-      <Collapsible isOpen={open} keepDOM>
-        <div style={{ padding: '8px 12px' }}>
-          {items.map((rule) => (
-            <div
-              key={rule._id}
-              className='flex items-center gap-2'
-              style={{ marginBottom: 6 }}
-            >
-              <Select
-                size='small'
-                value={rule.op}
-                optionList={opOptions}
-                onChange={(v) => onUpdate(rule._id, 'op', v)}
-                style={{ width: 120 }}
-                renderSelectedItem={(optionNode) => {
-                  const info = OP_TAG_MAP[optionNode.value] || {};
-                  return <Tag size='small' color={info.color}>{optionNode.label}</Tag>;
-                }}
-              />
-              <Input
-                size='small'
-                value={rule.targetGroup}
-                placeholder={t('分组名称')}
-                onChange={(v) => onUpdate(rule._id, 'targetGroup', v)}
-                style={{ flex: 1 }}
-              />
-              {rule.op !== OP_REMOVE ? (
+      {open ? (
+        <div className='space-y-1.5 px-3 py-2'>
+          {items.map((rule) => {
+            const opStyle = opStyles[rule.op] || '';
+            return (
+              <div key={rule._id} className='flex items-center gap-2'>
+                <div className='relative w-32'>
+                  <select
+                    value={rule.op}
+                    onChange={(event) =>
+                      onUpdate(rule._id, 'op', event.target.value)
+                    }
+                    aria-label={t('操作')}
+                    className={`h-8 w-full appearance-none rounded-md border border-[color:var(--app-border)] bg-background px-2 text-xs font-medium text-foreground outline-none transition focus:border-primary ${opStyle}`}
+                  >
+                    {opOptions.map((opt) => (
+                      <option key={opt.value} value={opt.value}>
+                        {opt.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
                 <Input
-                  size='small'
-                  value={rule.description}
-                  placeholder={t('分组描述')}
-                  onChange={(v) => onUpdate(rule._id, 'description', v)}
-                  style={{ flex: 1 }}
+                  type='text'
+                  value={rule.targetGroup || ''}
+                  placeholder={t('分组名称')}
+                  onChange={(event) =>
+                    onUpdate(rule._id, 'targetGroup', event.target.value)
+                  }
+                  aria-label={t('分组名称')}
+                  className={`${inputClass} flex-1`}
                 />
-              ) : (
-                <div style={{ flex: 1 }}>
-                  <Text type='tertiary' size='small'>-</Text>
-                </div>
-              )}
-              <Popconfirm
-                title={t('确认删除该规则？')}
-                onConfirm={() => onRemove(rule._id)}
-                position='left'
-              >
+                {rule.op !== OP_REMOVE ? (
+                  <Input
+                    type='text'
+                    value={rule.description || ''}
+                    placeholder={t('分组描述')}
+                    onChange={(event) =>
+                      onUpdate(rule._id, 'description', event.target.value)
+                    }
+                    aria-label={t('分组描述')}
+                    className={`${inputClass} flex-1`}
+                  />
+                ) : (
+                  <div className='flex-1 text-sm text-muted'>-</div>
+                )}
                 <Button
-                  icon={<IconDelete />}
-                  type='danger'
-                  theme='borderless'
-                  size='small'
-                />
-              </Popconfirm>
-            </div>
-          ))}
+                  isIconOnly
+                  variant='light'
+                  color='danger'
+                  size='sm'
+                  aria-label={t('删除该规则')}
+                  onPress={() => removeOne(rule._id)}
+                >
+                  <Trash2 size={14} />
+                </Button>
+              </div>
+            );
+          })}
         </div>
-      </Collapsible>
+      ) : null}
     </div>
   );
 }
@@ -246,7 +275,13 @@ export default function GroupSpecialUsableRules({
     (groupName) => {
       emitChange([
         ...rules,
-        { _id: uid(), userGroup: groupName, op: OP_APPEND, targetGroup: '', description: '' },
+        {
+          _id: uid(),
+          userGroup: groupName,
+          op: OP_APPEND,
+          targetGroup: '',
+          description: '',
+        },
       ]);
     },
     [rules, emitChange],
@@ -257,7 +292,13 @@ export default function GroupSpecialUsableRules({
     if (!name) return;
     emitChange([
       ...rules,
-      { _id: uid(), userGroup: name, op: OP_APPEND, targetGroup: '', description: '' },
+      {
+        _id: uid(),
+        userGroup: name,
+        op: OP_APPEND,
+        targetGroup: '',
+        description: '',
+      },
     ]);
     setNewGroupName('');
   }, [rules, emitChange, newGroupName]);
@@ -290,28 +331,44 @@ export default function GroupSpecialUsableRules({
     return order.map((name) => ({ name, items: map[name] }));
   }, [rules]);
 
+  const newGroupListId = 'group-special-usable-new-options';
+
+  const adder = (
+    <div className='mt-3 flex justify-center gap-2'>
+      <input
+        type='text'
+        list={newGroupListId}
+        value={newGroupName}
+        onChange={(event) => setNewGroupName(event.target.value)}
+        placeholder={t('选择用户分组')}
+        aria-label={t('用户分组')}
+        className='h-8 w-52 rounded-md border border-[color:var(--app-border)] bg-background px-2 text-sm text-foreground outline-none transition focus:border-primary'
+      />
+      <datalist id={newGroupListId}>
+        {groupOptions.map((opt) => (
+          <option key={opt.value} value={opt.value}>
+            {opt.label}
+          </option>
+        ))}
+      </datalist>
+      <Button
+        variant='bordered'
+        startContent={<Plus size={14} />}
+        onPress={addNewGroup}
+        size='sm'
+      >
+        {t('添加分组规则')}
+      </Button>
+    </div>
+  );
+
   if (grouped.length === 0 && rules.length === 0) {
     return (
       <div>
-        <Text type='tertiary' className='block text-center py-4'>
+        <div className='block py-4 text-center text-sm text-muted'>
           {t('暂无规则，点击下方按钮添加')}
-        </Text>
-        <div className='mt-2 flex justify-center gap-2'>
-          <Select
-            size='small'
-            filter
-            allowCreate
-            placeholder={t('选择用户分组')}
-            optionList={groupOptions}
-            value={newGroupName || undefined}
-            onChange={setNewGroupName}
-            style={{ width: 200 }}
-            position='bottomLeft'
-          />
-          <Button icon={<IconPlus />} theme='outline' onClick={addNewGroup}>
-            {t('添加分组规则')}
-          </Button>
         </div>
+        {adder}
       </div>
     );
   }
@@ -330,22 +387,7 @@ export default function GroupSpecialUsableRules({
           t={t}
         />
       ))}
-      <div className='mt-3 flex justify-center gap-2'>
-        <Select
-          size='small'
-          filter
-          allowCreate
-          placeholder={t('选择用户分组')}
-          optionList={groupOptions}
-          value={newGroupName || undefined}
-          onChange={setNewGroupName}
-          style={{ width: 200 }}
-          position='bottomLeft'
-        />
-        <Button icon={<IconPlus />} theme='outline' onClick={addNewGroup}>
-          {t('添加分组规则')}
-        </Button>
-      </div>
+      {adder}
     </div>
   );
 }
diff --git a/web/src/pages/Setting/Ratio/components/GroupTable.jsx b/web/src/pages/Setting/Ratio/components/GroupTable.jsx
index 3594d3e8d66..66fe04c8eed 100644
--- a/web/src/pages/Setting/Ratio/components/GroupTable.jsx
+++ b/web/src/pages/Setting/Ratio/components/GroupTable.jsx
@@ -1,18 +1,9 @@
 import React, { useState, useCallback, useMemo, useRef } from 'react';
-import {
-  Button,
-  Input,
-  InputNumber,
-  Checkbox,
-  Typography,
-  Popconfirm,
-} from '@douyinfe/semi-ui';
-import { IconPlus, IconDelete } from '@douyinfe/semi-icons';
+import { Button, Input } from '@heroui/react';
+import { Plus, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import CardTable from '../../../../components/common/ui/CardTable';
 
-const { Text } = Typography;
-
 let _idCounter = 0;
 const uid = () => `gr_${++_idCounter}`;
 
@@ -61,6 +52,9 @@ export function serializeGroupTable(rows) {
   };
 }
 
+const baseInputClass =
+  'h-8 w-full rounded-md border border-[color:var(--app-border)] bg-background px-2 text-sm text-foreground outline-none transition focus:border-primary';
+
 export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
   const { t } = useTranslation();
 
@@ -68,9 +62,6 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
     buildRows(groupRatio, userUsableGroups),
   );
 
-  // Use functional setRows to keep updateRow/addRow/removeRow referentially
-  // stable, preventing columns useMemo from rebuilding on every keystroke
-  // which causes the Input cursor to jump to end (cursor reset bug).
   const onChangeRef = useRef(onChange);
   onChangeRef.current = onChange;
 
@@ -115,9 +106,13 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
 
   const removeRow = useCallback(
     (id) => {
+      // eslint-disable-next-line no-alert
+      if (typeof window !== 'undefined' && !window.confirm(t('确认删除该分组？'))) {
+        return;
+      }
       emitAndSet((prev) => prev.filter((r) => r._id !== id));
     },
-    [emitAndSet],
+    [emitAndSet, t],
   );
 
   const groupNames = useMemo(() => rows.map((r) => r.name), [rows]);
@@ -130,8 +125,6 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
     return new Set(Object.keys(counts).filter((k) => counts[k] > 1));
   }, [groupNames]);
 
-  // Use ref so column render functions always read the latest duplicate set
-  // without adding duplicateNames to columns deps (which would break cursor).
   const duplicateNamesRef = useRef(duplicateNames);
   duplicateNamesRef.current = duplicateNames;
 
@@ -142,16 +135,20 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
         dataIndex: 'name',
         key: 'name',
         width: 180,
-        render: (_, record) => (
-          <Input
-            size='small'
-            value={record.name}
-            status={
-              duplicateNamesRef.current.has(record.name) ? 'warning' : undefined
-            }
-            onChange={(v) => updateRow(record._id, 'name', v)}
-          />
-        ),
+        render: (_, record) => {
+          const isDup = duplicateNamesRef.current.has(record.name);
+          return (
+            <Input
+              type='text'
+              value={record.name}
+              onChange={(event) => updateRow(record._id, 'name', event.target.value)}
+              aria-label={t('分组名称')}
+              className={`${baseInputClass} ${
+                isDup ? 'border-amber-400 focus:border-amber-500' : ''
+              }`}
+            />
+          );
+        },
       },
       {
         title: t('倍率'),
@@ -159,13 +156,17 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
         key: 'ratio',
         width: 120,
         render: (_, record) => (
-          <InputNumber
-            size='small'
+          <Input
+            type='number'
+            value={record.ratio === '' || record.ratio == null ? '' : String(record.ratio)}
             min={0}
             step={0.1}
-            value={record.ratio}
-            style={{ width: '100%' }}
-            onChange={(v) => updateRow(record._id, 'ratio', v ?? 0)}
+            onChange={(event) => {
+              const v = event.target.value;
+              updateRow(record._id, 'ratio', v === '' ? 0 : Number(v));
+            }}
+            aria-label={t('倍率')}
+            className={baseInputClass}
           />
         ),
       },
@@ -176,11 +177,14 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
         width: 90,
         align: 'center',
         render: (_, record) => (
-          <Checkbox
-            checked={record.selectable}
-            onChange={(e) =>
-              updateRow(record._id, 'selectable', e.target.checked)
+          <input
+            type='checkbox'
+            checked={!!record.selectable}
+            onChange={(event) =>
+              updateRow(record._id, 'selectable', event.target.checked)
             }
+            aria-label={t('用户可选')}
+            className='h-4 w-4 accent-primary'
           />
         ),
       },
@@ -191,15 +195,17 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
         render: (_, record) =>
           record.selectable ? (
             <Input
-              size='small'
-              value={record.description}
+              type='text'
+              value={record.description || ''}
               placeholder={t('分组描述')}
-              onChange={(v) => updateRow(record._id, 'description', v)}
+              onChange={(event) =>
+                updateRow(record._id, 'description', event.target.value)
+              }
+              aria-label={t('分组描述')}
+              className={baseInputClass}
             />
           ) : (
-            <Text type='tertiary' size='small'>
-              -
-            </Text>
+            <span className='text-sm text-muted'>-</span>
           ),
       },
       {
@@ -207,18 +213,16 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
         key: 'actions',
         width: 50,
         render: (_, record) => (
-          <Popconfirm
-            title={t('确认删除该分组？')}
-            onConfirm={() => removeRow(record._id)}
-            position='left'
+          <Button
+            isIconOnly
+            variant='light'
+            color='danger'
+            size='sm'
+            onPress={() => removeRow(record._id)}
+            aria-label={t('删除该分组')}
           >
-            <Button
-              icon={<IconDelete />}
-              type='danger'
-              theme='borderless'
-              size='small'
-            />
-          </Popconfirm>
+            <Trash2 size={14} />
+          </Button>
         ),
       },
     ],
@@ -233,18 +237,27 @@ export default function GroupTable({ groupRatio, userUsableGroups, onChange }) {
         rowKey='_id'
         hidePagination
         size='small'
-        empty={<Text type='tertiary'>{t('暂无分组，点击下方按钮添加')}</Text>}
+        empty={
+          <span className='text-sm text-muted'>
+            {t('暂无分组，点击下方按钮添加')}
+          </span>
+        }
       />
       <div className='mt-3 flex justify-center'>
-        <Button icon={<IconPlus />} theme='outline' onClick={addRow}>
+        <Button
+          variant='bordered'
+          startContent={<Plus size={14} />}
+          onPress={addRow}
+          size='sm'
+        >
           {t('添加分组')}
         </Button>
       </div>
       {duplicateNames.size > 0 && (
-        <Text type='warning' size='small' className='mt-2 block'>
+        <div className='mt-2 text-xs text-amber-600 dark:text-amber-300'>
           {t('存在重复的分组名称：')}
           {Array.from(duplicateNames).join(', ')}
-        </Text>
+        </div>
       )}
     </div>
   );
diff --git a/web/src/pages/Setting/Ratio/components/ModelPricingEditor.jsx b/web/src/pages/Setting/Ratio/components/ModelPricingEditor.jsx
index 5028a3ffdba..9c791cb87d2 100644
--- a/web/src/pages/Setting/Ratio/components/ModelPricingEditor.jsx
+++ b/web/src/pages/Setting/Ratio/components/ModelPricingEditor.jsx
@@ -6,11 +6,6 @@ it under the terms of the GNU Affero General Public License as
 published by the Free Software Foundation, either version 3 of the
 License, or (at your option) any later version.
 
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <https://www.gnu.org/licenses/>.
 
@@ -19,27 +14,20 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useMemo, useState } from 'react';
 import {
-  Banner,
   Button,
   Card,
-  Checkbox,
-  Empty,
   Input,
   Modal,
-  Radio,
-  RadioGroup,
-  Space,
+  ModalBackdrop,
+  ModalBody,
+  ModalContainer,
+  ModalDialog,
+  ModalFooter,
+  ModalHeader,
   Switch,
-  Table,
-  Tag,
-  Typography,
-} from '@douyinfe/semi-ui';
-import {
-  IconDelete,
-  IconPlus,
-  IconSave,
-  IconSearch,
-} from '@douyinfe/semi-icons';
+  useOverlayState,
+} from '@heroui/react';
+import { AlertTriangle, Plus, Save, Search, Trash2 } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import {
   PAGE_SIZE,
@@ -50,9 +38,59 @@ import {
 } from '../hooks/useModelPricingEditorState';
 import { useIsMobile } from '../../../../hooks/common/useIsMobile';
 
-const { Text } = Typography;
 const EMPTY_CANDIDATE_MODEL_NAMES = [];
 
+const inputClass =
+  'h-10 w-full rounded-xl border border-border bg-background px-3 text-sm text-foreground outline-none transition focus:border-primary disabled:cursor-not-allowed disabled:opacity-50';
+
+const TAG_TONE = {
+  green: 'bg-success/15 text-success',
+  red: 'bg-danger/15 text-danger',
+  blue: 'bg-primary/15 text-primary',
+  teal: 'bg-[color-mix(in_oklab,var(--app-success)_18%,transparent)] text-success',
+  violet:
+    'bg-[color-mix(in_oklab,var(--app-primary)_18%,transparent)] text-primary',
+};
+
+function StatusChip({ tone = 'blue', children }) {
+  return (
+    <span
+      className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${
+        TAG_TONE[tone] || TAG_TONE.blue
+      }`}
+    >
+      {children}
+    </span>
+  );
+}
+
+function InfoBanner({ tone = 'warning', title, description }) {
+  const cls =
+    tone === 'warning'
+      ? 'border-warning/30 bg-warning/5'
+      : 'border-primary/20 bg-primary/5';
+  return (
+    <div
+      className={`mb-3 flex items-start gap-2 rounded-xl border ${cls} px-3 py-2 text-sm text-foreground`}
+    >
+      <AlertTriangle
+        size={16}
+        className={
+          tone === 'warning'
+            ? 'mt-0.5 shrink-0 text-warning'
+            : 'mt-0.5 shrink-0 text-primary'
+        }
+      />
+      <div className='flex-1'>
+        {title ? (
+          <div className='mb-0.5 font-semibold'>{title}</div>
+        ) : null}
+        {description ? <div className='text-xs'>{description}</div> : null}
+      </div>
+    </div>
+  );
+}
+
 const PriceInput = ({
   label,
   value,
@@ -64,22 +102,30 @@ const PriceInput = ({
   headerAction = null,
   hidden = false,
 }) => (
-  <div style={{ marginBottom: 16 }}>
-    <div className='mb-1 font-medium text-gray-700 flex items-center justify-between gap-3'>
+  <div className='mb-4'>
+    <div className='mb-1 flex items-center justify-between gap-3 font-medium text-foreground'>
       <span>{label}</span>
       {headerAction}
     </div>
     {!hidden ? (
-      <Input
-        value={value}
-        placeholder={placeholder}
-        onChange={onChange}
-        suffix={suffix}
-        disabled={disabled}
-      />
+      <div className='relative'>
+        <input
+          type='text'
+          value={value ?? ''}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={(event) => onChange?.(event.target.value)}
+          className={`${inputClass} pr-20`}
+        />
+        {suffix ? (
+          <span className='pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-xs text-muted'>
+            {suffix}
+          </span>
+        ) : null}
+      </div>
     ) : null}
     {extraText ? (
-      <div className='mt-1 text-xs text-gray-500'>{extraText}</div>
+      <div className='mt-1 text-xs text-muted'>{extraText}</div>
     ) : null}
   </div>
 );
@@ -135,85 +181,21 @@ export default function ModelPricingEditor({
     filterMode,
   });
 
-  const columns = useMemo(
-    () => [
-      {
-        title: t('模型名称'),
-        dataIndex: 'name',
-        key: 'name',
-        render: (text, record) => (
-          <Space>
-            <Button
-              theme='borderless'
-              type='tertiary'
-              onClick={() => setSelectedModelName(record.name)}
-              style={{
-                padding: 0,
-                color:
-                  record.name === selectedModelName
-                    ? 'var(--semi-color-primary)'
-                    : undefined,
-              }}
-            >
-              {text}
-            </Button>
-            {selectedModelNames.includes(record.name) ? (
-              <Tag color='green' shape='circle'>
-                {t('已勾选')}
-              </Tag>
-            ) : null}
-            {record.hasConflict ? (
-              <Tag color='red' shape='circle'>
-                {t('矛盾')}
-              </Tag>
-            ) : null}
-          </Space>
-        ),
-      },
-      {
-        title: t('计费方式'),
-        dataIndex: 'billingMode',
-        key: 'billingMode',
-        render: (_, record) => (
-          <Tag color={record.billingMode === 'per-request' ? 'teal' : 'violet'}>
-            {record.billingMode === 'per-request'
-              ? t('按次计费')
-              : t('按量计费')}
-          </Tag>
-        ),
-      },
-      {
-        title: t('价格摘要'),
-        dataIndex: 'summary',
-        key: 'summary',
-        render: (_, record) => buildSummaryText(record, t),
-      },
-      {
-        title: t('操作'),
-        key: 'action',
-        render: (_, record) => (
-          <Space>
-            {allowDeleteModel ? (
-              <Button
-                size='small'
-                type='danger'
-                icon={<IconDelete />}
-                onClick={() => deleteModel(record.name)}
-              />
-            ) : null}
-          </Space>
-        ),
-      },
-    ],
-    [
-      allowDeleteModel,
-      deleteModel,
-      selectedModelName,
-      selectedModelNames,
-      setSelectedModelName,
-      t,
-    ],
-  );
+  const addModalState = useOverlayState({
+    isOpen: addVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) {
+        setAddVisible(false);
+        setNewModelName('');
+      }
+    },
+  });
+  const batchModalState = useOverlayState({
+    isOpen: batchVisible,
+    onOpenChange: (isOpen) => {
+      if (!isOpen) setBatchVisible(false);
+    },
+  });
 
   const handleAddModel = () => {
     if (addModel(newModelName)) {
@@ -222,517 +204,893 @@ export default function ModelPricingEditor({
     }
   };
 
-  const rowSelection = {
-    selectedRowKeys: selectedModelNames,
-    onChange: (selectedRowKeys) => setSelectedModelNames(selectedRowKeys),
+  const totalPages = Math.max(
+    1,
+    Math.ceil(filteredModels.length / PAGE_SIZE),
+  );
+  const startIndex = (currentPage - 1) * PAGE_SIZE + 1;
+  const endIndex = Math.min(
+    currentPage * PAGE_SIZE,
+    filteredModels.length,
+  );
+
+  const allOnPageSelected =
+    pagedData.length > 0 &&
+    pagedData.every((row) => selectedModelNames.includes(row.name));
+  const someOnPageSelected =
+    pagedData.some((row) => selectedModelNames.includes(row.name)) &&
+    !allOnPageSelected;
+
+  const togglePageSelection = (checked) => {
+    const pageNames = pagedData.map((row) => row.name);
+    if (checked) {
+      const merged = [...new Set([...selectedModelNames, ...pageNames])];
+      setSelectedModelNames(merged);
+    } else {
+      const next = selectedModelNames.filter(
+        (name) => !pageNames.includes(name),
+      );
+      setSelectedModelNames(next);
+    }
+  };
+
+  const toggleRow = (name, checked) => {
+    if (checked) {
+      if (selectedModelNames.includes(name)) return;
+      setSelectedModelNames([...selectedModelNames, name]);
+    } else {
+      setSelectedModelNames(selectedModelNames.filter((n) => n !== name));
+    }
+  };
+
+  const HeaderCheckbox = () => {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+      if (ref.current) ref.current.indeterminate = someOnPageSelected;
+    }, []);
+    return (
+      <input
+        ref={ref}
+        type='checkbox'
+        checked={allOnPageSelected}
+        onChange={(event) => togglePageSelection(event.target.checked)}
+        aria-label={t('全选')}
+        className='h-4 w-4 accent-primary'
+      />
+    );
   };
 
   return (
     <>
-      <Space vertical align='start' style={{ width: '100%' }}>
-        <Space wrap className='mt-2'>
+      <div className='flex w-full flex-col gap-3'>
+        {/* Toolbar */}
+        <div className='flex flex-wrap items-center gap-2'>
           {allowAddModel ? (
             <Button
-              icon={<IconPlus />}
-              onClick={() => setAddVisible(true)}
-              style={isMobile ? { width: '100%' } : undefined}
+              variant='flat'
+              startContent={<Plus size={14} />}
+              onPress={() => setAddVisible(true)}
+              className={isMobile ? 'w-full' : ''}
             >
               {t('添加模型')}
             </Button>
           ) : null}
           <Button
-            type='primary'
-            icon={<IconSave />}
-            loading={loading}
-            onClick={handleSubmit}
-            style={isMobile ? { width: '100%' } : undefined}
+            color='primary'
+            isPending={loading}
+            startContent={<Save size={14} />}
+            onPress={handleSubmit}
+            className={isMobile ? 'w-full' : ''}
           >
             {t('应用更改')}
           </Button>
           <Button
-            disabled={!selectedModel || selectedModelNames.length === 0}
-            onClick={() => setBatchVisible(true)}
-            style={isMobile ? { width: '100%' } : undefined}
+            variant='flat'
+            isDisabled={
+              !selectedModel || selectedModelNames.length === 0
+            }
+            onPress={() => setBatchVisible(true)}
+            className={isMobile ? 'w-full' : ''}
           >
             {t('批量应用当前模型价格')}
-            {selectedModelNames.length > 0 ? ` (${selectedModelNames.length})` : ''}
+            {selectedModelNames.length > 0
+              ? ` (${selectedModelNames.length})`
+              : ''}
           </Button>
-          <Input
-            prefix={<IconSearch />}
-            placeholder={t('搜索模型名称')}
-            value={searchText}
-            onChange={(value) => setSearchText(value)}
+
+          <div
+            className='relative'
             style={{ width: isMobile ? '100%' : 220 }}
-            showClear
-          />
+          >
+            <Search
+              size={14}
+              className='pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted'
+            />
+            <input
+              type='text'
+              value={searchText}
+              onChange={(event) => setSearchText(event.target.value)}
+              placeholder={t('搜索模型名称')}
+              className={`${inputClass} pl-8`}
+            />
+          </div>
           {showConflictFilter ? (
-            <Checkbox
-              checked={conflictOnly}
-              onChange={(event) => setConflictOnly(event.target.checked)}
-            >
-              {t('仅显示矛盾倍率')}
-            </Checkbox>
+            <label className='flex items-center gap-2 text-sm text-foreground'>
+              <input
+                type='checkbox'
+                checked={!!conflictOnly}
+                onChange={(event) =>
+                  setConflictOnly(event.target.checked)
+                }
+                className='h-4 w-4 accent-primary'
+              />
+              <span>{t('仅显示矛盾倍率')}</span>
+            </label>
           ) : null}
-        </Space>
+        </div>
 
         {listDescription ? (
-          <div className='text-sm text-gray-500'>{listDescription}</div>
+          <div className='text-sm text-muted'>{listDescription}</div>
         ) : null}
+
         {selectedModelNames.length > 0 ? (
-          <div
-            style={{
-              width: '100%',
-              padding: '10px 12px',
-              borderRadius: 8,
-              background: 'var(--semi-color-primary-light-default)',
-              border: '1px solid var(--semi-color-primary)',
-              color: 'var(--semi-color-primary)',
-              fontWeight: 600,
-            }}
-          >
-            {t('已勾选 {{count}} 个模型', { count: selectedModelNames.length })}
+          <div className='w-full rounded-xl border border-primary bg-primary/10 px-3 py-2 text-sm font-semibold text-primary'>
+            {t('已勾选 {{count}} 个模型', {
+              count: selectedModelNames.length,
+            })}
           </div>
         ) : null}
 
         <div
-          style={{
-            width: '100%',
-            display: 'grid',
-            gap: 16,
-            gridTemplateColumns: isMobile
-              ? 'minmax(0, 1fr)'
-              : 'minmax(360px, 1.1fr) minmax(420px, 1fr)',
-          }}
+          className={`grid w-full gap-4 ${
+            isMobile
+              ? 'grid-cols-1'
+              : 'grid-cols-[minmax(360px,1.1fr)_minmax(420px,1fr)]'
+          }`}
         >
-          <Card
-            bodyStyle={{ padding: 0 }}
-            style={isMobile ? { order: 2 } : undefined}
-          >
-            <div style={{ overflowX: 'auto' }}>
-              <Table
-                columns={columns}
-                dataSource={pagedData}
-                rowKey='name'
-                rowSelection={rowSelection}
-                pagination={{
-                  currentPage,
-                  pageSize: PAGE_SIZE,
-                  total: filteredModels.length,
-                  onPageChange: (page) => setCurrentPage(page),
-                  showTotal: true,
-                  showSizeChanger: false,
-                }}
-                empty={
-                  <div style={{ textAlign: 'center', padding: '20px' }}>
-                    {emptyTitle || t('暂无模型')}
-                  </div>
-                }
-                onRow={(record) => ({
-                  style: {
-                    background: selectedModelNames.includes(record.name)
-                      ? 'var(--semi-color-success-light-default)'
-                      : record.name === selectedModelName
-                        ? 'var(--semi-color-primary-light-default)'
-                        : undefined,
-                    boxShadow: selectedModelNames.includes(record.name)
-                      ? 'inset 4px 0 0 var(--semi-color-success)'
-                      : record.name === selectedModelName
-                        ? 'inset 4px 0 0 var(--semi-color-primary)'
-                        : undefined,
-                    transition: 'background 0.2s ease, box-shadow 0.2s ease',
-                  },
-                  onClick: () => setSelectedModelName(record.name),
-                })}
-                scroll={isMobile ? { x: 720 } : undefined}
-              />
-            </div>
-          </Card>
-
-          <Card
-            style={isMobile ? { order: 1 } : undefined}
-            title={selectedModel ? selectedModel.name : t('模型计费编辑器')}
-            headerExtraContent={
-              selectedModel ? (
-                <Tag color='blue'>
-                  {selectedModel.billingMode === 'per-request'
-                    ? t('按次计费')
-                    : t('按量计费')}
-                </Tag>
-              ) : null
-            }
-          >
-            {!selectedModel ? (
-              <Empty
-                title={emptyTitle || t('暂无模型')}
-                description={
-                  emptyDescription || t('请先新增模型或从左侧列表选择一个模型')
-                }
-              />
-            ) : (
-              <div>
-                <div className='mb-4'>
-                  <div className='mb-2 font-medium text-gray-700'>
-                    {t('计费方式')}
+          {/* Left: model list */}
+          <div className={isMobile ? 'order-2' : ''}>
+            <Card>
+              <Card.Content className='p-0'>
+                <div className='overflow-x-auto'>
+                  <table className='w-full text-sm'>
+                    <thead className='bg-surface-secondary text-xs uppercase tracking-wide text-muted'>
+                      <tr>
+                        <th className='w-12 px-3 py-2 text-left font-medium'>
+                          <HeaderCheckbox />
+                        </th>
+                        <th className='px-3 py-2 text-left font-medium'>
+                          {t('模型名称')}
+                        </th>
+                        <th className='px-3 py-2 text-left font-medium'>
+                          {t('计费方式')}
+                        </th>
+                        <th className='px-3 py-2 text-left font-medium'>
+                          {t('价格摘要')}
+                        </th>
+                        <th className='w-[80px] px-3 py-2 text-left font-medium'>
+                          {t('操作')}
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody className='divide-y divide-border'>
+                      {pagedData.length === 0 ? (
+                        <tr>
+                          <td
+                            colSpan={5}
+                            className='px-4 py-10 text-center text-sm text-muted'
+                          >
+                            {emptyTitle || t('暂无模型')}
+                          </td>
+                        </tr>
+                      ) : (
+                        pagedData.map((record) => {
+                          const isChecked = selectedModelNames.includes(
+                            record.name,
+                          );
+                          const isFocused =
+                            record.name === selectedModelName;
+                          const rowBg = isChecked
+                            ? 'bg-success/10'
+                            : isFocused
+                              ? 'bg-primary/10'
+                              : 'bg-background hover:bg-surface-secondary/60';
+                          const rowAccent = isChecked
+                            ? 'shadow-[inset_4px_0_0_var(--app-success)]'
+                            : isFocused
+                              ? 'shadow-[inset_4px_0_0_var(--app-primary)]'
+                              : '';
+                          return (
+                            <tr
+                              key={record.name}
+                              className={`cursor-pointer transition-colors ${rowBg} ${rowAccent}`}
+                              onClick={() =>
+                                setSelectedModelName(record.name)
+                              }
+                            >
+                              <td
+                                className='px-3 py-3 align-middle'
+                                onClick={(event) => event.stopPropagation()}
+                              >
+                                <input
+                                  type='checkbox'
+                                  checked={isChecked}
+                                  onChange={(event) =>
+                                    toggleRow(
+                                      record.name,
+                                      event.target.checked,
+                                    )
+                                  }
+                                  aria-label={record.name}
+                                  className='h-4 w-4 accent-primary'
+                                />
+                              </td>
+                              <td className='px-3 py-3 align-middle'>
+                                <div className='flex flex-wrap items-center gap-2'>
+                                  <button
+                                    type='button'
+                                    onClick={(event) => {
+                                      event.stopPropagation();
+                                      setSelectedModelName(record.name);
+                                    }}
+                                    className={`p-0 text-sm ${
+                                      isFocused
+                                        ? 'text-primary'
+                                        : 'text-foreground hover:text-primary'
+                                    }`}
+                                  >
+                                    {record.name}
+                                  </button>
+                                  {isChecked ? (
+                                    <StatusChip tone='green'>
+                                      {t('已勾选')}
+                                    </StatusChip>
+                                  ) : null}
+                                  {record.hasConflict ? (
+                                    <StatusChip tone='red'>
+                                      {t('矛盾')}
+                                    </StatusChip>
+                                  ) : null}
+                                </div>
+                              </td>
+                              <td className='px-3 py-3 align-middle'>
+                                <StatusChip
+                                  tone={
+                                    record.billingMode === 'per-request'
+                                      ? 'teal'
+                                      : 'violet'
+                                  }
+                                >
+                                  {record.billingMode === 'per-request'
+                                    ? t('按次计费')
+                                    : t('按量计费')}
+                                </StatusChip>
+                              </td>
+                              <td className='px-3 py-3 align-middle text-foreground'>
+                                {buildSummaryText(record, t)}
+                              </td>
+                              <td
+                                className='px-3 py-3 align-middle'
+                                onClick={(event) => event.stopPropagation()}
+                              >
+                                {allowDeleteModel ? (
+                                  <Button
+                                    isIconOnly
+                                    size='sm'
+                                    variant='light'
+                                    color='danger'
+                                    aria-label={t('删除')}
+                                    onPress={() => deleteModel(record.name)}
+                                  >
+                                    <Trash2 size={14} />
+                                  </Button>
+                                ) : null}
+                              </td>
+                            </tr>
+                          );
+                        })
+                      )}
+                    </tbody>
+                  </table>
+                </div>
+
+                {filteredModels.length > 0 && (
+                  <div className='flex flex-wrap items-center justify-between gap-3 border-t border-border px-4 py-2 text-xs text-muted'>
+                    <span>
+                      {t('共 {{total}} 项，当前显示 {{start}}-{{end}} 项', {
+                        total: filteredModels.length,
+                        start: filteredModels.length === 0 ? 0 : startIndex,
+                        end: endIndex,
+                      })}
+                    </span>
+                    <div className='flex items-center gap-2'>
+                      <Button
+                        size='sm'
+                        variant='light'
+                        isDisabled={currentPage <= 1}
+                        onPress={() =>
+                          setCurrentPage(Math.max(1, currentPage - 1))
+                        }
+                      >
+                        {t('上一页')}
+                      </Button>
+                      <span>
+                        {currentPage} / {totalPages}
+                      </span>
+                      <Button
+                        size='sm'
+                        variant='light'
+                        isDisabled={currentPage >= totalPages}
+                        onPress={() =>
+                          setCurrentPage(
+                            Math.min(totalPages, currentPage + 1),
+                          )
+                        }
+                      >
+                        {t('下一页')}
+                      </Button>
+                    </div>
                   </div>
-                  <RadioGroup
-                    type='button'
-                    value={selectedModel.billingMode}
-                    onChange={(event) => handleBillingModeChange(event.target.value)}
-                  >
-                    <Radio value='per-token'>{t('按量计费')}</Radio>
-                    <Radio value='per-request'>{t('按次计费')}</Radio>
-                  </RadioGroup>
-                  <div className='mt-2 text-xs text-gray-500'>
-                    {t(
-                      '这个界面默认按价格填写，保存时会自动换算回后端需要的倍率 JSON。',
-                    )}
+                )}
+              </Card.Content>
+            </Card>
+          </div>
+
+          {/* Right: editor card */}
+          <div className={isMobile ? 'order-1' : ''}>
+            <Card>
+              <Card.Content className='p-5'>
+                <div className='mb-4 flex items-center justify-between gap-2'>
+                  <div className='text-base font-semibold text-foreground'>
+                    {selectedModel
+                      ? selectedModel.name
+                      : t('模型计费编辑器')}
                   </div>
+                  {selectedModel ? (
+                    <StatusChip tone='blue'>
+                      {selectedModel.billingMode === 'per-request'
+                        ? t('按次计费')
+                        : t('按量计费')}
+                    </StatusChip>
+                  ) : null}
                 </div>
 
-                {selectedWarnings.length > 0 ? (
-                  <Card
-                    bodyStyle={{ padding: 12 }}
-                    style={{
-                      marginBottom: 16,
-                      background: 'var(--semi-color-warning-light-default)',
-                    }}
-                  >
-                    <div className='font-medium mb-2'>{t('当前提示')}</div>
-                    {selectedWarnings.map((warning) => (
-                      <div key={warning} className='text-sm text-gray-700 mb-1'>
-                        {warning}
+                {!selectedModel ? (
+                  <div className='flex flex-col items-center gap-2 px-4 py-10 text-center'>
+                    <div className='text-sm font-semibold text-foreground'>
+                      {emptyTitle || t('暂无模型')}
+                    </div>
+                    <div className='text-xs text-muted'>
+                      {emptyDescription ||
+                        t('请先新增模型或从左侧列表选择一个模型')}
+                    </div>
+                  </div>
+                ) : (
+                  <div>
+                    <div className='mb-4'>
+                      <div className='mb-2 font-medium text-foreground'>
+                        {t('计费方式')}
                       </div>
-                    ))}
-                  </Card>
-                ) : null}
+                      <div className='inline-flex overflow-hidden rounded-xl border border-border'>
+                        {[
+                          { value: 'per-token', label: t('按量计费') },
+                          { value: 'per-request', label: t('按次计费') },
+                        ].map((option) => {
+                          const active =
+                            option.value === selectedModel.billingMode;
+                          return (
+                            <button
+                              key={option.value}
+                              type='button'
+                              onClick={() =>
+                                handleBillingModeChange(option.value)
+                              }
+                              className={`px-4 py-1.5 text-sm font-medium transition-colors ${
+                                active
+                                  ? 'bg-foreground text-background'
+                                  : 'bg-background text-muted hover:bg-surface-secondary'
+                              }`}
+                            >
+                              {option.label}
+                            </button>
+                          );
+                        })}
+                      </div>
+                      <div className='mt-2 text-xs text-muted'>
+                        {t(
+                          '这个界面默认按价格填写，保存时会自动换算回后端需要的倍率 JSON。',
+                        )}
+                      </div>
+                    </div>
 
-                {selectedModel.billingMode === 'per-request' ? (
-                  <PriceInput
-                    label={t('固定价格')}
-                    value={selectedModel.fixedPrice}
-                    placeholder={t('输入每次调用价格')}
-                    suffix={t('$/次')}
-                    onChange={(value) => handleNumericFieldChange('fixedPrice', value)}
-                    extraText={t('适合 MJ / 任务类等按次收费模型。')}
-                  />
-                ) : (
-                  <>
-                    <Card
-                      bodyStyle={{ padding: 16 }}
-                      style={{
-                        marginBottom: 16,
-                        background: 'var(--semi-color-fill-0)',
-                      }}
-                    >
-                      <div className='font-medium mb-3'>{t('基础价格')}</div>
-                      <PriceInput
-                        label={t('输入价格')}
-                        value={selectedModel.inputPrice}
-                        placeholder={t('输入 $/1M tokens')}
-                        onChange={(value) => handleNumericFieldChange('inputPrice', value)}
-                      />
-                      {selectedModel.completionRatioLocked ? (
-                        <Banner
-                          type='warning'
-                          bordered
-                          fullMode={false}
-                          closeIcon={null}
-                          style={{ marginBottom: 12 }}
-                          title={t('补全价格已锁定')}
-                          description={t(
-                            '该模型补全倍率由后端固定为 {{ratio}}。补全价格不能在这里修改。',
-                            {
-                              ratio: selectedModel.lockedCompletionRatio || '-',
-                            },
-                          )}
-                        />
-                      ) : null}
+                    {selectedWarnings.length > 0 ? (
+                      <div className='mb-4 rounded-xl bg-warning/10 p-3'>
+                        <div className='mb-2 font-medium text-foreground'>
+                          {t('当前提示')}
+                        </div>
+                        {selectedWarnings.map((warning) => (
+                          <div
+                            key={warning}
+                            className='mb-1 text-sm text-foreground'
+                          >
+                            {warning}
+                          </div>
+                        ))}
+                      </div>
+                    ) : null}
+
+                    {selectedModel.billingMode === 'per-request' ? (
                       <PriceInput
-                        label={t('补全价格')}
-                        value={selectedModel.completionPrice}
-                        placeholder={t('输入 $/1M tokens')}
+                        label={t('固定价格')}
+                        value={selectedModel.fixedPrice}
+                        placeholder={t('输入每次调用价格')}
+                        suffix={t('$/次')}
                         onChange={(value) =>
-                          handleNumericFieldChange('completionPrice', value)
+                          handleNumericFieldChange('fixedPrice', value)
                         }
-                        headerAction={
-                          <Switch
-                            size='small'
-                            checked={isOptionalFieldEnabled(
-                              selectedModel,
-                              'completionPrice',
-                            )}
-                            disabled={selectedModel.completionRatioLocked}
-                            onChange={(checked) =>
-                              handleOptionalFieldToggle('completionPrice', checked)
+                        extraText={t('适合 MJ / 任务类等按次收费模型。')}
+                      />
+                    ) : (
+                      <>
+                        {/* 基础价格 */}
+                        <div className='mb-4 rounded-xl bg-surface-secondary p-4'>
+                          <div className='mb-3 font-medium text-foreground'>
+                            {t('基础价格')}
+                          </div>
+                          <PriceInput
+                            label={t('输入价格')}
+                            value={selectedModel.inputPrice}
+                            placeholder={t('输入 $/1M tokens')}
+                            onChange={(value) =>
+                              handleNumericFieldChange('inputPrice', value)
                             }
                           />
-                        }
-                        hidden={
-                          !isOptionalFieldEnabled(selectedModel, 'completionPrice')
-                        }
-                        disabled={
-                          !hasValue(selectedModel.inputPrice) ||
-                          selectedModel.completionRatioLocked
-                        }
-                        extraText={
-                          selectedModel.completionRatioLocked
-                            ? t(
-                                '后端固定倍率：{{ratio}}。该字段仅展示换算后的价格。',
+                          {selectedModel.completionRatioLocked ? (
+                            <InfoBanner
+                              tone='warning'
+                              title={t('补全价格已锁定')}
+                              description={t(
+                                '该模型补全倍率由后端固定为 {{ratio}}。补全价格不能在这里修改。',
                                 {
-                                  ratio: selectedModel.lockedCompletionRatio || '-',
+                                  ratio:
+                                    selectedModel.lockedCompletionRatio || '-',
                                 },
+                              )}
+                            />
+                          ) : null}
+                          <PriceInput
+                            label={t('补全价格')}
+                            value={selectedModel.completionPrice}
+                            placeholder={t('输入 $/1M tokens')}
+                            onChange={(value) =>
+                              handleNumericFieldChange(
+                                'completionPrice',
+                                value,
                               )
-                            : !isOptionalFieldEnabled(
+                            }
+                            headerAction={
+                              <Switch
+                                size='sm'
+                                isSelected={isOptionalFieldEnabled(
                                   selectedModel,
                                   'completionPrice',
-                                )
-                              ? t('当前未启用，需要时再打开即可。')
-                              : ''
-                        }
-                      />
-                      <PriceInput
-                        label={t('缓存读取价格')}
-                        value={selectedModel.cachePrice}
-                        placeholder={t('输入 $/1M tokens')}
-                        onChange={(value) => handleNumericFieldChange('cachePrice', value)}
-                        headerAction={
-                          <Switch
-                            size='small'
-                            checked={isOptionalFieldEnabled(selectedModel, 'cachePrice')}
-                            onChange={(checked) =>
-                              handleOptionalFieldToggle('cachePrice', checked)
+                                )}
+                                isDisabled={
+                                  selectedModel.completionRatioLocked
+                                }
+                                onValueChange={(checked) =>
+                                  handleOptionalFieldToggle(
+                                    'completionPrice',
+                                    checked,
+                                  )
+                                }
+                                aria-label={t('补全价格')}
+                              >
+                                <Switch.Control>
+                                  <Switch.Thumb />
+                                </Switch.Control>
+                              </Switch>
+                            }
+                            hidden={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'completionPrice',
+                              )
+                            }
+                            disabled={
+                              !hasValue(selectedModel.inputPrice) ||
+                              selectedModel.completionRatioLocked
+                            }
+                            extraText={
+                              selectedModel.completionRatioLocked
+                                ? t(
+                                    '后端固定倍率：{{ratio}}。该字段仅展示换算后的价格。',
+                                    {
+                                      ratio:
+                                        selectedModel.lockedCompletionRatio ||
+                                        '-',
+                                    },
+                                  )
+                                : !isOptionalFieldEnabled(
+                                      selectedModel,
+                                      'completionPrice',
+                                    )
+                                  ? t('当前未启用，需要时再打开即可。')
+                                  : ''
                             }
                           />
-                        }
-                        hidden={!isOptionalFieldEnabled(selectedModel, 'cachePrice')}
-                        disabled={!hasValue(selectedModel.inputPrice)}
-                        extraText={
-                          !isOptionalFieldEnabled(selectedModel, 'cachePrice')
-                            ? t('当前未启用，需要时再打开即可。')
-                            : ''
-                        }
-                      />
-                      <PriceInput
-                        label={t('缓存创建价格')}
-                        value={selectedModel.createCachePrice}
-                        placeholder={t('输入 $/1M tokens')}
-                        onChange={(value) =>
-                          handleNumericFieldChange('createCachePrice', value)
-                        }
-                        headerAction={
-                          <Switch
-                            size='small'
-                            checked={isOptionalFieldEnabled(
-                              selectedModel,
-                              'createCachePrice',
-                            )}
-                            onChange={(checked) =>
-                              handleOptionalFieldToggle('createCachePrice', checked)
+                          <PriceInput
+                            label={t('缓存读取价格')}
+                            value={selectedModel.cachePrice}
+                            placeholder={t('输入 $/1M tokens')}
+                            onChange={(value) =>
+                              handleNumericFieldChange('cachePrice', value)
+                            }
+                            headerAction={
+                              <Switch
+                                size='sm'
+                                isSelected={isOptionalFieldEnabled(
+                                  selectedModel,
+                                  'cachePrice',
+                                )}
+                                onValueChange={(checked) =>
+                                  handleOptionalFieldToggle(
+                                    'cachePrice',
+                                    checked,
+                                  )
+                                }
+                                aria-label={t('缓存读取价格')}
+                              >
+                                <Switch.Control>
+                                  <Switch.Thumb />
+                                </Switch.Control>
+                              </Switch>
+                            }
+                            hidden={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'cachePrice',
+                              )
+                            }
+                            disabled={!hasValue(selectedModel.inputPrice)}
+                            extraText={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'cachePrice',
+                              )
+                                ? t('当前未启用，需要时再打开即可。')
+                                : ''
                             }
                           />
-                        }
-                        hidden={
-                          !isOptionalFieldEnabled(selectedModel, 'createCachePrice')
-                        }
-                        disabled={!hasValue(selectedModel.inputPrice)}
-                        extraText={
-                          !isOptionalFieldEnabled(
-                            selectedModel,
-                            'createCachePrice',
-                          )
-                            ? t('当前未启用，需要时再打开即可。')
-                            : ''
-                        }
-                      />
-                    </Card>
-
-                    <Card
-                      bodyStyle={{ padding: 16 }}
-                      style={{
-                        marginBottom: 16,
-                        background: 'var(--semi-color-fill-0)',
-                      }}
-                    >
-                      <div className='mb-3'>
-                        <div className='font-medium'>{t('扩展价格')}</div>
-                        <div className='text-xs text-gray-500 mt-1'>
-                          {t('这些价格都是可选项，不填也可以。')}
-                        </div>
-                      </div>
-                      <PriceInput
-                        label={t('图片输入价格')}
-                        value={selectedModel.imagePrice}
-                        placeholder={t('输入 $/1M tokens')}
-                        onChange={(value) => handleNumericFieldChange('imagePrice', value)}
-                        headerAction={
-                          <Switch
-                            size='small'
-                            checked={isOptionalFieldEnabled(selectedModel, 'imagePrice')}
-                            onChange={(checked) =>
-                              handleOptionalFieldToggle('imagePrice', checked)
+                          <PriceInput
+                            label={t('缓存创建价格')}
+                            value={selectedModel.createCachePrice}
+                            placeholder={t('输入 $/1M tokens')}
+                            onChange={(value) =>
+                              handleNumericFieldChange(
+                                'createCachePrice',
+                                value,
+                              )
+                            }
+                            headerAction={
+                              <Switch
+                                size='sm'
+                                isSelected={isOptionalFieldEnabled(
+                                  selectedModel,
+                                  'createCachePrice',
+                                )}
+                                onValueChange={(checked) =>
+                                  handleOptionalFieldToggle(
+                                    'createCachePrice',
+                                    checked,
+                                  )
+                                }
+                                aria-label={t('缓存创建价格')}
+                              >
+                                <Switch.Control>
+                                  <Switch.Thumb />
+                                </Switch.Control>
+                              </Switch>
+                            }
+                            hidden={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'createCachePrice',
+                              )
+                            }
+                            disabled={!hasValue(selectedModel.inputPrice)}
+                            extraText={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'createCachePrice',
+                              )
+                                ? t('当前未启用，需要时再打开即可。')
+                                : ''
                             }
                           />
-                        }
-                        hidden={!isOptionalFieldEnabled(selectedModel, 'imagePrice')}
-                        disabled={!hasValue(selectedModel.inputPrice)}
-                        extraText={
-                          !isOptionalFieldEnabled(selectedModel, 'imagePrice')
-                            ? t('当前未启用，需要时再打开即可。')
-                            : ''
-                        }
-                      />
-                      <PriceInput
-                        label={t('音频输入价格')}
-                        value={selectedModel.audioInputPrice}
-                        placeholder={t('输入 $/1M tokens')}
-                        onChange={(value) =>
-                          handleNumericFieldChange('audioInputPrice', value)
-                        }
-                        headerAction={
-                          <Switch
-                            size='small'
-                            checked={isOptionalFieldEnabled(
-                              selectedModel,
-                              'audioInputPrice',
-                            )}
-                            onChange={(checked) =>
-                              handleOptionalFieldToggle('audioInputPrice', checked)
+                        </div>
+
+                        {/* 扩展价格 */}
+                        <div className='mb-4 rounded-xl bg-surface-secondary p-4'>
+                          <div className='mb-3'>
+                            <div className='font-medium text-foreground'>
+                              {t('扩展价格')}
+                            </div>
+                            <div className='mt-1 text-xs text-muted'>
+                              {t('这些价格都是可选项，不填也可以。')}
+                            </div>
+                          </div>
+                          <PriceInput
+                            label={t('图片输入价格')}
+                            value={selectedModel.imagePrice}
+                            placeholder={t('输入 $/1M tokens')}
+                            onChange={(value) =>
+                              handleNumericFieldChange('imagePrice', value)
+                            }
+                            headerAction={
+                              <Switch
+                                size='sm'
+                                isSelected={isOptionalFieldEnabled(
+                                  selectedModel,
+                                  'imagePrice',
+                                )}
+                                onValueChange={(checked) =>
+                                  handleOptionalFieldToggle(
+                                    'imagePrice',
+                                    checked,
+                                  )
+                                }
+                                aria-label={t('图片输入价格')}
+                              >
+                                <Switch.Control>
+                                  <Switch.Thumb />
+                                </Switch.Control>
+                              </Switch>
+                            }
+                            hidden={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'imagePrice',
+                              )
+                            }
+                            disabled={!hasValue(selectedModel.inputPrice)}
+                            extraText={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'imagePrice',
+                              )
+                                ? t('当前未启用，需要时再打开即可。')
+                                : ''
                             }
                           />
-                        }
-                        hidden={!isOptionalFieldEnabled(selectedModel, 'audioInputPrice')}
-                        disabled={!hasValue(selectedModel.inputPrice)}
-                        extraText={
-                          !isOptionalFieldEnabled(
-                            selectedModel,
-                            'audioInputPrice',
-                          )
-                            ? t('当前未启用，需要时再打开即可。')
-                            : ''
-                        }
-                      />
-                      <PriceInput
-                        label={t('音频补全价格')}
-                        value={selectedModel.audioOutputPrice}
-                        placeholder={t('输入 $/1M tokens')}
-                        onChange={(value) =>
-                          handleNumericFieldChange('audioOutputPrice', value)
-                        }
-                        headerAction={
-                          <Switch
-                            size='small'
-                            checked={isOptionalFieldEnabled(
-                              selectedModel,
-                              'audioOutputPrice',
-                            )}
-                            disabled={!isOptionalFieldEnabled(
-                              selectedModel,
-                              'audioInputPrice',
-                            )}
-                            onChange={(checked) =>
-                              handleOptionalFieldToggle('audioOutputPrice', checked)
+                          <PriceInput
+                            label={t('音频输入价格')}
+                            value={selectedModel.audioInputPrice}
+                            placeholder={t('输入 $/1M tokens')}
+                            onChange={(value) =>
+                              handleNumericFieldChange(
+                                'audioInputPrice',
+                                value,
+                              )
+                            }
+                            headerAction={
+                              <Switch
+                                size='sm'
+                                isSelected={isOptionalFieldEnabled(
+                                  selectedModel,
+                                  'audioInputPrice',
+                                )}
+                                onValueChange={(checked) =>
+                                  handleOptionalFieldToggle(
+                                    'audioInputPrice',
+                                    checked,
+                                  )
+                                }
+                                aria-label={t('音频输入价格')}
+                              >
+                                <Switch.Control>
+                                  <Switch.Thumb />
+                                </Switch.Control>
+                              </Switch>
+                            }
+                            hidden={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'audioInputPrice',
+                              )
+                            }
+                            disabled={!hasValue(selectedModel.inputPrice)}
+                            extraText={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'audioInputPrice',
+                              )
+                                ? t('当前未启用，需要时再打开即可。')
+                                : ''
                             }
                           />
-                        }
-                        hidden={
-                          !isOptionalFieldEnabled(selectedModel, 'audioOutputPrice')
-                        }
-                        disabled={!hasValue(selectedModel.audioInputPrice)}
-                        extraText={
-                          !isOptionalFieldEnabled(
-                            selectedModel,
-                            'audioInputPrice',
-                          )
-                            ? t('请先开启并填写音频输入价格。')
-                            : !isOptionalFieldEnabled(
+                          <PriceInput
+                            label={t('音频补全价格')}
+                            value={selectedModel.audioOutputPrice}
+                            placeholder={t('输入 $/1M tokens')}
+                            onChange={(value) =>
+                              handleNumericFieldChange(
+                                'audioOutputPrice',
+                                value,
+                              )
+                            }
+                            headerAction={
+                              <Switch
+                                size='sm'
+                                isSelected={isOptionalFieldEnabled(
                                   selectedModel,
                                   'audioOutputPrice',
-                                )
-                              ? t('当前未启用，需要时再打开即可。')
-                              : ''
-                        }
-                      />
-                    </Card>
-                  </>
-                )}
-
-                <Card
-                  bodyStyle={{ padding: 16 }}
-                  style={{ background: 'var(--semi-color-fill-0)' }}
-                >
-                  <div className='font-medium mb-3'>{t('保存预览')}</div>
-                  <div className='text-xs text-gray-500 mb-3'>
-                    {t(
-                      '下面展示这个模型保存后会写入哪些后端字段，便于和原始 JSON 编辑框保持一致。',
+                                )}
+                                isDisabled={
+                                  !isOptionalFieldEnabled(
+                                    selectedModel,
+                                    'audioInputPrice',
+                                  )
+                                }
+                                onValueChange={(checked) =>
+                                  handleOptionalFieldToggle(
+                                    'audioOutputPrice',
+                                    checked,
+                                  )
+                                }
+                                aria-label={t('音频补全价格')}
+                              >
+                                <Switch.Control>
+                                  <Switch.Thumb />
+                                </Switch.Control>
+                              </Switch>
+                            }
+                            hidden={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'audioOutputPrice',
+                              )
+                            }
+                            disabled={
+                              !hasValue(selectedModel.audioInputPrice)
+                            }
+                            extraText={
+                              !isOptionalFieldEnabled(
+                                selectedModel,
+                                'audioInputPrice',
+                              )
+                                ? t('请先开启并填写音频输入价格。')
+                                : !isOptionalFieldEnabled(
+                                      selectedModel,
+                                      'audioOutputPrice',
+                                    )
+                                  ? t('当前未启用，需要时再打开即可。')
+                                  : ''
+                            }
+                          />
+                        </div>
+                      </>
                     )}
+
+                    <div className='rounded-xl bg-surface-secondary p-4'>
+                      <div className='mb-3 font-medium text-foreground'>
+                        {t('保存预览')}
+                      </div>
+                      <div className='mb-3 text-xs text-muted'>
+                        {t(
+                          '下面展示这个模型保存后会写入哪些后端字段，便于和原始 JSON 编辑框保持一致。',
+                        )}
+                      </div>
+                      <div className='grid grid-cols-[minmax(140px,180px)_1fr] gap-2'>
+                        {previewRows.map((row) => (
+                          <React.Fragment key={row.key}>
+                            <span className='text-sm font-semibold text-foreground'>
+                              {row.label}
+                            </span>
+                            <span className='text-sm text-foreground'>
+                              {row.value}
+                            </span>
+                          </React.Fragment>
+                        ))}
+                      </div>
+                    </div>
                   </div>
-                  <div
-                    style={{
-                      display: 'grid',
-                      gridTemplateColumns: 'minmax(140px, 180px) 1fr',
-                      gap: 8,
-                    }}
-                  >
-                    {previewRows.map((row) => (
-                      <React.Fragment key={row.key}>
-                        <Text strong>{row.label}</Text>
-                        <Text>{row.value}</Text>
-                      </React.Fragment>
-                    ))}
-                  </div>
-                </Card>
-              </div>
-            )}
-          </Card>
+                )}
+              </Card.Content>
+            </Card>
+          </div>
         </div>
-      </Space>
+      </div>
 
+      {/* 添加模型 modal */}
       {allowAddModel ? (
-        <Modal
-          title={t('添加模型')}
-          visible={addVisible}
-          onCancel={() => {
-            setAddVisible(false);
-            setNewModelName('');
-          }}
-          onOk={handleAddModel}
-        >
-          <Input
-            value={newModelName}
-            placeholder={t('输入模型名称，例如 gpt-4.1')}
-            onChange={(value) => setNewModelName(value)}
-          />
+        <Modal state={addModalState}>
+          <ModalBackdrop variant='blur'>
+            <ModalContainer size='md' placement='center'>
+              <ModalDialog className='bg-background/95 backdrop-blur'>
+                <ModalHeader className='border-b border-border'>
+                  <span>{t('添加模型')}</span>
+                </ModalHeader>
+                <ModalBody className='px-6 py-5'>
+                  <Input
+                    value={newModelName}
+                    onValueChange={setNewModelName}
+                    placeholder={t('输入模型名称，例如 gpt-4.1')}
+                  >
+                    <Input.Control>
+                      <Input.Element />
+                    </Input.Control>
+                  </Input>
+                </ModalBody>
+                <ModalFooter className='border-t border-border'>
+                  <Button
+                    variant='light'
+                    onPress={() => {
+                      setAddVisible(false);
+                      setNewModelName('');
+                    }}
+                  >
+                    {t('取消')}
+                  </Button>
+                  <Button color='primary' onPress={handleAddModel}>
+                    {t('确定')}
+                  </Button>
+                </ModalFooter>
+              </ModalDialog>
+            </ModalContainer>
+          </ModalBackdrop>
         </Modal>
       ) : null}
 
-      <Modal
-        title={t('批量应用当前模型价格')}
-        visible={batchVisible}
-        onCancel={() => setBatchVisible(false)}
-        onOk={() => {
-          if (applySelectedModelPricing()) {
-            setBatchVisible(false);
-          }
-        }}
-      >
-        <div className='text-sm text-gray-600'>
-          {selectedModel
-            ? t(
-                '将把当前编辑中的模型 {{name}} 的价格配置，批量应用到已勾选的 {{count}} 个模型。',
-                {
-                  name: selectedModel.name,
-                  count: selectedModelNames.length,
-                },
-              )
-            : t('请先选择一个作为模板的模型')}
-        </div>
-        {selectedModel ? (
-          <div className='text-xs text-gray-500 mt-3'>
-            {t(
-              '适合同系列模型一起定价，例如把 gpt-5.1 的价格批量同步到 gpt-5.1-high、gpt-5.1-low 等模型。',
-            )}
-          </div>
-        ) : null}
+      {/* 批量应用 modal */}
+      <Modal state={batchModalState}>
+        <ModalBackdrop variant='blur'>
+          <ModalContainer size='md' placement='center'>
+            <ModalDialog className='bg-background/95 backdrop-blur'>
+              <ModalHeader className='border-b border-border'>
+                <span>{t('批量应用当前模型价格')}</span>
+              </ModalHeader>
+              <ModalBody className='space-y-3 px-6 py-5'>
+                <div className='text-sm text-muted'>
+                  {selectedModel
+                    ? t(
+                        '将把当前编辑中的模型 {{name}} 的价格配置，批量应用到已勾选的 {{count}} 个模型。',
+                        {
+                          name: selectedModel.name,
+                          count: selectedModelNames.length,
+                        },
+                      )
+                    : t('请先选择一个作为模板的模型')}
+                </div>
+                {selectedModel ? (
+                  <div className='text-xs text-muted'>
+                    {t(
+                      '适合同系列模型一起定价，例如把 gpt-5.1 的价格批量同步到 gpt-5.1-high、gpt-5.1-low 等模型。',
+                    )}
+                  </div>
+                ) : null}
+              </ModalBody>
+              <ModalFooter className='border-t border-border'>
+                <Button
+                  variant='light'
+                  onPress={() => setBatchVisible(false)}
+                >
+                  {t('取消')}
+                </Button>
+                <Button
+                  color='primary'
+                  onPress={() => {
+                    if (applySelectedModelPricing()) {
+                      setBatchVisible(false);
+                    }
+                  }}
+                >
+                  {t('确定')}
+                </Button>
+              </ModalFooter>
+            </ModalDialog>
+          </ModalContainer>
+        </ModalBackdrop>
       </Modal>
     </>
   );
diff --git a/web/src/pages/Setting/index.jsx b/web/src/pages/Setting/index.jsx
index 5f537945d4f..0809ddd6bd4 100644
--- a/web/src/pages/Setting/index.jsx
+++ b/web/src/pages/Setting/index.jsx
@@ -18,7 +18,6 @@ For commercial licensing, please contact support@quantumnous.com
 */
 
 import React, { useEffect, useState } from 'react';
-import { Layout, TabPane, Tabs } from '@douyinfe/semi-ui';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import {
@@ -54,7 +53,7 @@ const Setting = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const location = useLocation();
-  const [tabActiveKey, setTabActiveKey] = useState('1');
+  const [tabActiveKey, setTabActiveKey] = useState('operation');
   let panes = [];
 
   if (isRoot()) {
@@ -181,35 +180,49 @@ const Setting = () => {
   }
   const onChangeTab = (key) => {
     setTabActiveKey(key);
-    navigate(`?tab=${key}`);
+    navigate(`/console/setting?tab=${key}`, { replace: false });
   };
+
   useEffect(() => {
-    const searchParams = new URLSearchParams(window.location.search);
+    const searchParams = new URLSearchParams(location.search);
     const tab = searchParams.get('tab');
-    if (tab) {
+    if (tab && panes.some((pane) => pane.itemKey === tab)) {
       setTabActiveKey(tab);
     } else {
-      onChangeTab('operation');
+      setTabActiveKey('operation');
+      if (location.search !== '?tab=operation') {
+        navigate('/console/setting?tab=operation', { replace: true });
+      }
     }
-  }, [location.search]);
+  }, [location.search, navigate]);
+
+  const activePane = panes.find((pane) => pane.itemKey === tabActiveKey) || panes[0];
+
   return (
     <div className='mt-[60px] px-2'>
-      <Layout>
-        <Layout.Content>
-          <Tabs
-            type='card'
-            collapsible
-            activeKey={tabActiveKey}
-            onChange={(key) => onChangeTab(key)}
-          >
-            {panes.map((pane) => (
-              <TabPane itemKey={pane.itemKey} tab={pane.tab} key={pane.itemKey}>
-                {tabActiveKey === pane.itemKey && pane.content}
-              </TabPane>
-            ))}
-          </Tabs>
-        </Layout.Content>
-      </Layout>
+      <main className='min-w-0'>
+        <div className='mb-4 flex flex-wrap items-center gap-2'>
+          {panes.map((pane) => {
+            const selected = pane.itemKey === tabActiveKey;
+            return (
+              <button
+                key={pane.itemKey}
+                type='button'
+                className={`rounded-full px-4 py-2 text-sm transition ${
+                  selected
+                    ? 'bg-foreground text-background'
+                    : 'bg-surface-secondary text-muted'
+                }`}
+                aria-current={selected ? 'page' : undefined}
+                onClick={() => onChangeTab(pane.itemKey)}
+              >
+                {pane.tab}
+              </button>
+            );
+          })}
+        </div>
+        <div key={activePane?.itemKey}>{activePane?.content}</div>
+      </main>
     </div>
   );
 };
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 62bb501d58e..37a9c9d818e 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -20,128 +20,22 @@ For commercial licensing, please contact support@quantumnous.com
 export default {
   content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
   theme: {
-    colors: {
-      'semi-color-white': 'var(--semi-color-white)',
-      'semi-color-black': 'var(--semi-color-black)',
-      'semi-color-primary': 'var(--semi-color-primary)',
-      'semi-color-primary-hover': 'var(--semi-color-primary-hover)',
-      'semi-color-primary-active': 'var(--semi-color-primary-active)',
-      'semi-color-primary-disabled': 'var(--semi-color-primary-disabled)',
-      'semi-color-primary-light-default':
-        'var(--semi-color-primary-light-default)',
-      'semi-color-primary-light-hover': 'var(--semi-color-primary-light-hover)',
-      'semi-color-primary-light-active':
-        'var(--semi-color-primary-light-active)',
-      'semi-color-secondary': 'var(--semi-color-secondary)',
-      'semi-color-secondary-hover': 'var(--semi-color-secondary-hover)',
-      'semi-color-secondary-active': 'var(--semi-color-secondary-active)',
-      'semi-color-secondary-disabled': 'var(--semi-color-secondary-disabled)',
-      'semi-color-secondary-light-default':
-        'var(--semi-color-secondary-light-default)',
-      'semi-color-secondary-light-hover':
-        'var(--semi-color-secondary-light-hover)',
-      'semi-color-secondary-light-active':
-        'var(--semi-color-secondary-light-active)',
-      'semi-color-tertiary': 'var(--semi-color-tertiary)',
-      'semi-color-tertiary-hover': 'var(--semi-color-tertiary-hover)',
-      'semi-color-tertiary-active': 'var(--semi-color-tertiary-active)',
-      'semi-color-tertiary-light-default':
-        'var(--semi-color-tertiary-light-default)',
-      'semi-color-tertiary-light-hover':
-        'var(--semi-color-tertiary-light-hover)',
-      'semi-color-tertiary-light-active':
-        'var(--semi-color-tertiary-light-active)',
-      'semi-color-default': 'var(--semi-color-default)',
-      'semi-color-default-hover': 'var(--semi-color-default-hover)',
-      'semi-color-default-active': 'var(--semi-color-default-active)',
-      'semi-color-info': 'var(--semi-color-info)',
-      'semi-color-info-hover': 'var(--semi-color-info-hover)',
-      'semi-color-info-active': 'var(--semi-color-info-active)',
-      'semi-color-info-disabled': 'var(--semi-color-info-disabled)',
-      'semi-color-info-light-default': 'var(--semi-color-info-light-default)',
-      'semi-color-info-light-hover': 'var(--semi-color-info-light-hover)',
-      'semi-color-info-light-active': 'var(--semi-color-info-light-active)',
-      'semi-color-success': 'var(--semi-color-success)',
-      'semi-color-success-hover': 'var(--semi-color-success-hover)',
-      'semi-color-success-active': 'var(--semi-color-success-active)',
-      'semi-color-success-disabled': 'var(--semi-color-success-disabled)',
-      'semi-color-success-light-default':
-        'var(--semi-color-success-light-default)',
-      'semi-color-success-light-hover': 'var(--semi-color-success-light-hover)',
-      'semi-color-success-light-active':
-        'var(--semi-color-success-light-active)',
-      'semi-color-danger': 'var(--semi-color-danger)',
-      'semi-color-danger-hover': 'var(--semi-color-danger-hover)',
-      'semi-color-danger-active': 'var(--semi-color-danger-active)',
-      'semi-color-danger-light-default':
-        'var(--semi-color-danger-light-default)',
-      'semi-color-danger-light-hover': 'var(--semi-color-danger-light-hover)',
-      'semi-color-danger-light-active': 'var(--semi-color-danger-light-active)',
-      'semi-color-warning': 'var(--semi-color-warning)',
-      'semi-color-warning-hover': 'var(--semi-color-warning-hover)',
-      'semi-color-warning-active': 'var(--semi-color-warning-active)',
-      'semi-color-warning-light-default':
-        'var(--semi-color-warning-light-default)',
-      'semi-color-warning-light-hover': 'var(--semi-color-warning-light-hover)',
-      'semi-color-warning-light-active':
-        'var(--semi-color-warning-light-active)',
-      'semi-color-focus-border': 'var(--semi-color-focus-border)',
-      'semi-color-disabled-text': 'var(--semi-color-disabled-text)',
-      'semi-color-disabled-border': 'var(--semi-color-disabled-border)',
-      'semi-color-disabled-bg': 'var(--semi-color-disabled-bg)',
-      'semi-color-disabled-fill': 'var(--semi-color-disabled-fill)',
-      'semi-color-shadow': 'var(--semi-color-shadow)',
-      'semi-color-link': 'var(--semi-color-link)',
-      'semi-color-link-hover': 'var(--semi-color-link-hover)',
-      'semi-color-link-active': 'var(--semi-color-link-active)',
-      'semi-color-link-visited': 'var(--semi-color-link-visited)',
-      'semi-color-border': 'var(--semi-color-border)',
-      'semi-color-nav-bg': 'var(--semi-color-nav-bg)',
-      'semi-color-overlay-bg': 'var(--semi-color-overlay-bg)',
-      'semi-color-fill-0': 'var(--semi-color-fill-0)',
-      'semi-color-fill-1': 'var(--semi-color-fill-1)',
-      'semi-color-fill-2': 'var(--semi-color-fill-2)',
-      'semi-color-bg-0': 'var(--semi-color-bg-0)',
-      'semi-color-bg-1': 'var(--semi-color-bg-1)',
-      'semi-color-bg-2': 'var(--semi-color-bg-2)',
-      'semi-color-bg-3': 'var(--semi-color-bg-3)',
-      'semi-color-bg-4': 'var(--semi-color-bg-4)',
-      'semi-color-text-0': 'var(--semi-color-text-0)',
-      'semi-color-text-1': 'var(--semi-color-text-1)',
-      'semi-color-text-2': 'var(--semi-color-text-2)',
-      'semi-color-text-3': 'var(--semi-color-text-3)',
-      'semi-color-highlight-bg': 'var(--semi-color-highlight-bg)',
-      'semi-color-highlight': 'var(--semi-color-highlight)',
-      'semi-color-data-0': 'var(--semi-color-data-0)',
-      'semi-color-data-1': 'var(--semi-color-data-1)',
-      'semi-color-data-2': 'var(--semi-color-data-2)',
-      'semi-color-data-3': 'var(--semi-color-data-3)',
-      'semi-color-data-4': 'var(--semi-color-data-4)',
-      'semi-color-data-5': 'var(--semi-color-data-5)',
-      'semi-color-data-6': 'var(--semi-color-data-6)',
-      'semi-color-data-7': 'var(--semi-color-data-7)',
-      'semi-color-data-8': 'var(--semi-color-data-8)',
-      'semi-color-data-9': 'var(--semi-color-data-9)',
-      'semi-color-data-10': 'var(--semi-color-data-10)',
-      'semi-color-data-11': 'var(--semi-color-data-11)',
-      'semi-color-data-12': 'var(--semi-color-data-12)',
-      'semi-color-data-13': 'var(--semi-color-data-13)',
-      'semi-color-data-14': 'var(--semi-color-data-14)',
-      'semi-color-data-15': 'var(--semi-color-data-15)',
-      'semi-color-data-16': 'var(--semi-color-data-16)',
-      'semi-color-data-17': 'var(--semi-color-data-17)',
-      'semi-color-data-18': 'var(--semi-color-data-18)',
-      'semi-color-data-19': 'var(--semi-color-data-19)',
-    },
     extend: {
+      colors: {
+        background: 'var(--app-background)',
+        foreground: 'var(--app-foreground)',
+        muted: 'var(--app-muted)',
+        border: 'var(--app-border)',
+        primary: 'var(--app-primary)',
+        success: 'var(--app-success)',
+        warning: 'var(--app-warning)',
+        danger: 'var(--app-danger)',
+      },
       borderRadius: {
-        'semi-border-radius-extra-small':
-          'var(--semi-border-radius-extra-small)',
-        'semi-border-radius-small': 'var(--semi-border-radius-small)',
-        'semi-border-radius-medium': 'var(--semi-border-radius-medium)',
-        'semi-border-radius-large': 'var(--semi-border-radius-large)',
-        'semi-border-radius-circle': 'var(--semi-border-radius-circle)',
-        'semi-border-radius-full': 'var(--semi-border-radius-full)',
+        app: '1rem',
+      },
+      boxShadow: {
+        app: '0 20px 50px rgba(15, 23, 42, 0.12)',
       },
     },
   },
diff --git a/web/vite.config.js b/web/vite.config.js
index 73e46212a58..b18a1c885d6 100644
--- a/web/vite.config.js
+++ b/web/vite.config.js
@@ -19,12 +19,9 @@ For commercial licensing, please contact support@quantumnous.com
 
 import react from '@vitejs/plugin-react';
 import { defineConfig, transformWithEsbuild } from 'vite';
-import pkg from '@douyinfe/vite-plugin-semi';
 import path from 'path';
 import { codeInspectorPlugin } from 'code-inspector-plugin';
-const { vitePluginSemi } = pkg;
 
-// https://vitejs.dev/config/
 export default defineConfig({
   resolve: {
     alias: {
@@ -42,8 +39,6 @@ export default defineConfig({
           return null;
         }
 
-        // Use the exposed transform from vite, instead of directly
-        // transforming with esbuild
         return transformWithEsbuild(code, id, {
           loader: 'jsx',
           jsx: 'automatic',
@@ -51,9 +46,6 @@ export default defineConfig({
       },
     },
     react(),
-    vitePluginSemi({
-      cssLayer: true,
-    }),
   ],
   optimizeDeps: {
     force: true,
@@ -69,13 +61,12 @@ export default defineConfig({
       output: {
         manualChunks: {
           'react-core': ['react', 'react-dom', 'react-router-dom'],
-          'semi-ui': ['@douyinfe/semi-icons', '@douyinfe/semi-ui'],
+          heroui: ['@heroui/react'],
           tools: ['axios', 'history', 'marked'],
           'react-components': [
             'react-dropzone',
             'react-fireworks',
             'react-telegram-login',
-            'react-toastify',
             'react-turnstile',
           ],
           i18n: [