From 9389be8b97c0b51fb7c6dce94416422520d1b07b Mon Sep 17 00:00:00 2001
From: leowang <leowang9863@gmail.com>
Date: Sun, 24 May 2026 10:38:02 +0800
Subject: [PATCH] Refactor UI toward HeroUI

---
 public/sw.js                                  |    2 +-
 src/__mocks__/heroui-react.tsx                |  127 +-
 src/app/admin/page.tsx                        | 3509 +++++++----------
 src/app/douban/page.tsx                       |   17 +-
 src/app/globals.css                           |  624 +--
 src/app/live/page.tsx                         |  375 +-
 src/app/login/page.tsx                        |   62 +-
 src/app/page.tsx                              |  215 +-
 src/app/play/page.tsx                         |  320 +-
 src/app/search/page.tsx                       |  174 +-
 src/app/shortdrama/page.tsx                   |   13 +-
 src/app/warning/page.tsx                      |   90 +-
 src/app/warning/warning-client.tsx            |   72 +
 src/components/BackButton.tsx                 |    3 +-
 src/components/ChatModal.tsx                  | 1204 +++---
 src/components/ContinueWatching.tsx           |   33 +-
 src/components/DataMigration.tsx              |  253 +-
 src/components/DoubanCustomSelector.tsx       |   55 +-
 src/components/DoubanSelector.tsx             |  167 +-
 src/components/EpgScrollableRow.tsx           |  114 +-
 src/components/EpisodeSelector.tsx            |   75 +-
 src/components/GlobalErrorIndicator.tsx       |   44 +-
 src/components/MobileActionSheet.tsx          |   41 +-
 src/components/MobileBottomNav.tsx            |   65 +-
 src/components/MobileHeader.tsx               |   20 +-
 src/components/MultiLevelSelector.tsx         |  107 +-
 src/components/ScrollableRow.tsx              |   21 +-
 src/components/SearchResultFilter.tsx         |  130 +-
 src/components/SearchSuggestions.tsx          |   33 +-
 src/components/ShortDramaSelector.tsx         |   38 +-
 src/components/Sidebar.tsx                    |  228 +-
 src/components/ThemeManager.tsx               |  236 +-
 src/components/ThemeToggle.tsx                |   17 +-
 src/components/UserMenu.tsx                   | 1092 ++---
 src/components/VersionPanel.tsx               |  400 +-
 src/components/VideoCard.tsx                  |  232 +-
 src/components/WeekdaySelector.tsx            |   15 +-
 .../__tests__/MultiLevelSelector.test.tsx     |    5 +-
 .../__tests__/SearchResultFilter.test.tsx     |   30 +-
 .../__tests__/WeekdaySelector.test.tsx        |    8 +-
 src/components/ui/HeroPrimitives.tsx          |   78 +-
 41 files changed, 3902 insertions(+), 6442 deletions(-)
 create mode 100644 src/app/warning/warning-client.tsx

diff --git a/public/sw.js b/public/sw.js
index 41f368c..980cb97 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -1 +1 @@
-if(!self.define){let e,a={};const s=(s,i)=>(s=new URL(s+".js",i).href,a[s]||new Promise(a=>{if("document"in self){const e=document.createElement("script");e.src=s,e.onload=a,document.head.appendChild(e)}else e=s,importScripts(s),a()}).then(()=>{let e=a[s];if(!e)throw new Error(`Module ${s} didn’t register its module`);return e}));self.define=(i,t)=>{const n=e||("document"in self?document.currentScript.src:"")||location.href;if(a[n])return;let c={};const r=e=>s(e,n),d={module:{uri:n},exports:c,require:r};a[n]=Promise.all(i.map(e=>d[e]||r(e))).then(e=>(t(...e),c))}}define(["./workbox-e9849328"],function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/app-build-manifest.json",revision:"77fad10ad50663097c31428d5b12a1e5"},{url:"/_next/static/chunks/1508-3c73cf19686cadb0.js",revision:"3c73cf19686cadb0"},{url:"/_next/static/chunks/173-1669782a013aeaf3.js",revision:"1669782a013aeaf3"},{url:"/_next/static/chunks/212-c92804cd5c36ccfe.js",revision:"c92804cd5c36ccfe"},{url:"/_next/static/chunks/2552-a2762fb5fbd854a1.js",revision:"a2762fb5fbd854a1"},{url:"/_next/static/chunks/3743-8a860a8640d68ebf.js",revision:"8a860a8640d68ebf"},{url:"/_next/static/chunks/3951-22078bdcaa5d4c34.js",revision:"22078bdcaa5d4c34"},{url:"/_next/static/chunks/5688-7cf3621a969b7c92.js",revision:"7cf3621a969b7c92"},{url:"/_next/static/chunks/569-d2b86132bd89d967.js",revision:"d2b86132bd89d967"},{url:"/_next/static/chunks/7870.7199854d4bfb7214.js",revision:"7199854d4bfb7214"},{url:"/_next/static/chunks/8280-6752c64629143d2d.js",revision:"6752c64629143d2d"},{url:"/_next/static/chunks/835-1311a5ac1bc1a551.js",revision:"1311a5ac1bc1a551"},{url:"/_next/static/chunks/861965c9-56382d4621d981d6.js",revision:"56382d4621d981d6"},{url:"/_next/static/chunks/8964-6d97c60ba451925c.js",revision:"6d97c60ba451925c"},{url:"/_next/static/chunks/91-d548b42997c8e531.js",revision:"d548b42997c8e531"},{url:"/_next/static/chunks/app/_not-found/page-78c67c2f5e3ce386.js",revision:"78c67c2f5e3ce386"},{url:"/_next/static/chunks/app/admin/page-02e3de5347e83d30.js",revision:"02e3de5347e83d30"},{url:"/_next/static/chunks/app/api/admin/category/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/config/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/config_file/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/config_subscription/fetch/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/data_migration/export/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/data_migration/import/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/live/refresh/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/live/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/reset/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/site/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/source/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/source/validate/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/theme/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/admin/user/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/avatar/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/change-password/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/chat/conversations/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/chat/friend-requests/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/chat/friends/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/chat/messages/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/chat/online-users/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/chat/search-users/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/chat/send-message/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/cron/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/danmu/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/detail/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/douban/categories/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/douban/recommends/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/douban/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/favorites/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/health/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/image-proxy/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/live/channels/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/live/epg/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/live/precheck/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/live/sources/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/login/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/logout/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/machine-code/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/playrecords/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/proxy/key/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/proxy/logo/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/proxy/m3u8/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/proxy/segment/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/proxy/video/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/proxy/video/test/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/search/one/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/search/resources/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/search/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/search/suggestions/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/search/ws/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/searchhistory/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/server-config/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/shortdrama/categories/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/shortdrama/latest/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/shortdrama/list/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/shortdrama/parse/all/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/shortdrama/parse/batch/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/shortdrama/parse/single/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/shortdrama/recommend/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/shortdrama/search/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/skipconfigs/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/api/websocket/route-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/app/douban/page-68a0f171df154de1.js",revision:"68a0f171df154de1"},{url:"/_next/static/chunks/app/layout-eee56bff5d56971d.js",revision:"eee56bff5d56971d"},{url:"/_next/static/chunks/app/live/page-c79dcfda0db9759f.js",revision:"c79dcfda0db9759f"},{url:"/_next/static/chunks/app/login/page-ce9a811dbe356faa.js",revision:"ce9a811dbe356faa"},{url:"/_next/static/chunks/app/page-9238457484c64e40.js",revision:"9238457484c64e40"},{url:"/_next/static/chunks/app/play/page-e93a3711ebc430b1.js",revision:"e93a3711ebc430b1"},{url:"/_next/static/chunks/app/search/page-7bda0bb1bce38bbc.js",revision:"7bda0bb1bce38bbc"},{url:"/_next/static/chunks/app/shortdrama/page-8e9d000974aeee47.js",revision:"8e9d000974aeee47"},{url:"/_next/static/chunks/app/warning/page-99ed47280272a40e.js",revision:"99ed47280272a40e"},{url:"/_next/static/chunks/deb030d4-c5209a2ceb93feb3.js",revision:"c5209a2ceb93feb3"},{url:"/_next/static/chunks/framework-38d00379d7a41d4e.js",revision:"38d00379d7a41d4e"},{url:"/_next/static/chunks/main-80d1b284ea08d4a6.js",revision:"80d1b284ea08d4a6"},{url:"/_next/static/chunks/main-app-2a0dd42e958c98cd.js",revision:"2a0dd42e958c98cd"},{url:"/_next/static/chunks/pages/_app-31f2fea9e30ebfdd.js",revision:"31f2fea9e30ebfdd"},{url:"/_next/static/chunks/pages/_error-55c33958c98286e9.js",revision:"55c33958c98286e9"},{url:"/_next/static/chunks/polyfills-42372ed130431b0a.js",revision:"846118c33b2c0e922d7b3a7676f81f6f"},{url:"/_next/static/chunks/webpack-4638d3f2b0151932.js",revision:"4638d3f2b0151932"},{url:"/_next/static/css/7d61d42bc9dabdcf.css",revision:"7d61d42bc9dabdcf"},{url:"/_next/static/css/ccce47fdcedd91d2.css",revision:"ccce47fdcedd91d2"},{url:"/_next/static/jB8ZT4m_Flo1Q5ANENOf0/_buildManifest.js",revision:"4740a4478df99a73dadc7052247a6d6d"},{url:"/_next/static/jB8ZT4m_Flo1Q5ANENOf0/_ssgManifest.js",revision:"b6652df95db52feb4daf4eca35380933"},{url:"/favicon.ico",revision:"27cf5167605c37fe0dc1624590c96b7a"},{url:"/icons/icon-192x192.png",revision:"e214d3db80d2eb6ef7a911b3f9433b81"},{url:"/icons/icon-256x256.png",revision:"a5cd7490191373b684033f1b33c9d9da"},{url:"/icons/icon-384x384.png",revision:"8540e29a41812989d2d5bf8f61e1e755"},{url:"/icons/icon-512x512.png",revision:"3e5597604f2c5d99d7ab62b02f6863d3"},{url:"/logo.png",revision:"3da704450f5c0807a0c8ad9840461521"},{url:"/manifest.json",revision:"46f3847d5e244fb9c639fa86902e15db"},{url:"/robots.txt",revision:"0483b37fb6cf7455cefe516197e39241"},{url:"/screenshot1.png",revision:"d7de3a25686c5b9c9d8c8675bc6109fc"},{url:"/screenshot2.png",revision:"b0b715a3018d2f02aba5d94762473bb6"},{url:"/screenshot3.png",revision:"7e454c28e110e291ee12f494fb3cf40c"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaches(),e.registerRoute("/",new e.NetworkFirst({cacheName:"start-url",plugins:[{cacheWillUpdate:async({request:e,response:a,event:s,state:i})=>a&&"opaqueredirect"===a.type?new Response(a.body,{status:200,statusText:"OK",headers:a.headers}):a}]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,new e.CacheFirst({cacheName:"google-fonts-webfonts",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:31536e3})]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,new e.StaleWhileRevalidate({cacheName:"google-fonts-stylesheets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new e.StaleWhileRevalidate({cacheName:"static-font-assets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new e.StaleWhileRevalidate({cacheName:"static-image-assets",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/image\?url=.+$/i,new e.StaleWhileRevalidate({cacheName:"next-image",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp3|wav|ogg)$/i,new e.CacheFirst({cacheName:"static-audio-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp4)$/i,new e.CacheFirst({cacheName:"static-video-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:js)$/i,new e.StaleWhileRevalidate({cacheName:"static-js-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:css|less)$/i,new e.StaleWhileRevalidate({cacheName:"static-style-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/data\/.+\/.+\.json$/i,new e.StaleWhileRevalidate({cacheName:"next-data",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:json|xml|csv)$/i,new e.NetworkFirst({cacheName:"static-data-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>{if(!(self.origin===e.origin))return!1;const a=e.pathname;return!a.startsWith("/api/auth/")&&!!a.startsWith("/api/")},new e.NetworkFirst({cacheName:"apis",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:16,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>{if(!(self.origin===e.origin))return!1;return!e.pathname.startsWith("/api/")},new e.NetworkFirst({cacheName:"others",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>!(self.origin===e.origin),new e.NetworkFirst({cacheName:"cross-origin",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:3600})]}),"GET")});
+if(!self.define){let e,a={};const s=(s,c)=>(s=new URL(s+".js",c).href,a[s]||new Promise(a=>{if("document"in self){const e=document.createElement("script");e.src=s,e.onload=a,document.head.appendChild(e)}else e=s,importScripts(s),a()}).then(()=>{let e=a[s];if(!e)throw new Error(`Module ${s} didn’t register its module`);return e}));self.define=(c,i)=>{const t=e||("document"in self?document.currentScript.src:"")||location.href;if(a[t])return;let n={};const r=e=>s(e,t),o={module:{uri:t},exports:n,require:r};a[t]=Promise.all(c.map(e=>o[e]||r(e))).then(e=>(i(...e),n))}}define(["./workbox-e9849328"],function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/app-build-manifest.json",revision:"d2019de4567fa49ebf790c101ad36a37"},{url:"/_next/static/AOD2poraHkhTOa43IALRS/_buildManifest.js",revision:"4740a4478df99a73dadc7052247a6d6d"},{url:"/_next/static/AOD2poraHkhTOa43IALRS/_ssgManifest.js",revision:"b6652df95db52feb4daf4eca35380933"},{url:"/_next/static/chunks/1214-239f55f0a9968ae6.js",revision:"239f55f0a9968ae6"},{url:"/_next/static/chunks/212-c92804cd5c36ccfe.js",revision:"c92804cd5c36ccfe"},{url:"/_next/static/chunks/260-1e4d5095326f1929.js",revision:"1e4d5095326f1929"},{url:"/_next/static/chunks/394-ed74bf23acf690cd.js",revision:"ed74bf23acf690cd"},{url:"/_next/static/chunks/4707-a33a49083c72c92d.js",revision:"a33a49083c72c92d"},{url:"/_next/static/chunks/5688-7cf3621a969b7c92.js",revision:"7cf3621a969b7c92"},{url:"/_next/static/chunks/569-39bc114fdf6847db.js",revision:"39bc114fdf6847db"},{url:"/_next/static/chunks/6247-0803ce791127ffc4.js",revision:"0803ce791127ffc4"},{url:"/_next/static/chunks/6837-0542749c23ed2959.js",revision:"0542749c23ed2959"},{url:"/_next/static/chunks/7422-b8e062ed75f815a0.js",revision:"b8e062ed75f815a0"},{url:"/_next/static/chunks/7678-2c39a82db7ab4d79.js",revision:"2c39a82db7ab4d79"},{url:"/_next/static/chunks/7809-e061e97228be14bd.js",revision:"e061e97228be14bd"},{url:"/_next/static/chunks/7870.7199854d4bfb7214.js",revision:"7199854d4bfb7214"},{url:"/_next/static/chunks/835-1311a5ac1bc1a551.js",revision:"1311a5ac1bc1a551"},{url:"/_next/static/chunks/861965c9-56382d4621d981d6.js",revision:"56382d4621d981d6"},{url:"/_next/static/chunks/8964-a51299cec5301680.js",revision:"a51299cec5301680"},{url:"/_next/static/chunks/app/_not-found/page-eaf37efff24851e5.js",revision:"eaf37efff24851e5"},{url:"/_next/static/chunks/app/admin/page-0f29387e2be4272e.js",revision:"0f29387e2be4272e"},{url:"/_next/static/chunks/app/api/admin/category/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/config/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/config_file/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/config_subscription/fetch/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/data_migration/export/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/data_migration/import/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/live/refresh/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/live/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/reset/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/site/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/source/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/source/validate/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/theme/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/admin/user/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/avatar/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/change-password/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/chat/conversations/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/chat/friend-requests/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/chat/friends/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/chat/messages/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/chat/online-users/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/chat/search-users/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/chat/send-message/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/cron/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/danmu/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/detail/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/douban/categories/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/douban/recommends/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/douban/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/favorites/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/health/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/image-proxy/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/live/channels/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/live/epg/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/live/precheck/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/live/sources/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/login/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/logout/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/machine-code/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/playrecords/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/proxy/key/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/proxy/logo/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/proxy/m3u8/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/proxy/segment/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/proxy/video/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/proxy/video/test/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/search/one/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/search/resources/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/search/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/search/suggestions/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/search/ws/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/searchhistory/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/server-config/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/shortdrama/categories/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/shortdrama/latest/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/shortdrama/list/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/shortdrama/parse/all/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/shortdrama/parse/batch/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/shortdrama/parse/single/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/shortdrama/recommend/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/shortdrama/search/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/skipconfigs/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/api/websocket/route-86f2c28a81077b9d.js",revision:"86f2c28a81077b9d"},{url:"/_next/static/chunks/app/douban/page-f54a581a7ad3f486.js",revision:"f54a581a7ad3f486"},{url:"/_next/static/chunks/app/layout-91dc4f35c822836a.js",revision:"91dc4f35c822836a"},{url:"/_next/static/chunks/app/live/page-5317e86b4e682269.js",revision:"5317e86b4e682269"},{url:"/_next/static/chunks/app/login/page-4cea8d8ecc9cdf94.js",revision:"4cea8d8ecc9cdf94"},{url:"/_next/static/chunks/app/page-e783191d2c33ca32.js",revision:"e783191d2c33ca32"},{url:"/_next/static/chunks/app/play/page-f7b5e4a15ca70bf8.js",revision:"f7b5e4a15ca70bf8"},{url:"/_next/static/chunks/app/search/page-2d08139976f3568c.js",revision:"2d08139976f3568c"},{url:"/_next/static/chunks/app/shortdrama/page-103d01c7dd76fc57.js",revision:"103d01c7dd76fc57"},{url:"/_next/static/chunks/app/warning/page-7e49052845300dc2.js",revision:"7e49052845300dc2"},{url:"/_next/static/chunks/deb030d4-c5209a2ceb93feb3.js",revision:"c5209a2ceb93feb3"},{url:"/_next/static/chunks/framework-38d00379d7a41d4e.js",revision:"38d00379d7a41d4e"},{url:"/_next/static/chunks/main-80d1b284ea08d4a6.js",revision:"80d1b284ea08d4a6"},{url:"/_next/static/chunks/main-app-2a0dd42e958c98cd.js",revision:"2a0dd42e958c98cd"},{url:"/_next/static/chunks/pages/_app-31f2fea9e30ebfdd.js",revision:"31f2fea9e30ebfdd"},{url:"/_next/static/chunks/pages/_error-55c33958c98286e9.js",revision:"55c33958c98286e9"},{url:"/_next/static/chunks/polyfills-42372ed130431b0a.js",revision:"846118c33b2c0e922d7b3a7676f81f6f"},{url:"/_next/static/chunks/webpack-4638d3f2b0151932.js",revision:"4638d3f2b0151932"},{url:"/_next/static/css/ccce47fdcedd91d2.css",revision:"ccce47fdcedd91d2"},{url:"/_next/static/css/e4073aa98cbbf8c1.css",revision:"e4073aa98cbbf8c1"},{url:"/favicon.ico",revision:"27cf5167605c37fe0dc1624590c96b7a"},{url:"/icons/icon-192x192.png",revision:"e214d3db80d2eb6ef7a911b3f9433b81"},{url:"/icons/icon-256x256.png",revision:"a5cd7490191373b684033f1b33c9d9da"},{url:"/icons/icon-384x384.png",revision:"8540e29a41812989d2d5bf8f61e1e755"},{url:"/icons/icon-512x512.png",revision:"3e5597604f2c5d99d7ab62b02f6863d3"},{url:"/logo.png",revision:"3da704450f5c0807a0c8ad9840461521"},{url:"/manifest.json",revision:"46f3847d5e244fb9c639fa86902e15db"},{url:"/robots.txt",revision:"0483b37fb6cf7455cefe516197e39241"},{url:"/screenshot1.png",revision:"d7de3a25686c5b9c9d8c8675bc6109fc"},{url:"/screenshot2.png",revision:"b0b715a3018d2f02aba5d94762473bb6"},{url:"/screenshot3.png",revision:"7e454c28e110e291ee12f494fb3cf40c"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaches(),e.registerRoute("/",new e.NetworkFirst({cacheName:"start-url",plugins:[{cacheWillUpdate:async({request:e,response:a,event:s,state:c})=>a&&"opaqueredirect"===a.type?new Response(a.body,{status:200,statusText:"OK",headers:a.headers}):a}]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,new e.CacheFirst({cacheName:"google-fonts-webfonts",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:31536e3})]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,new e.StaleWhileRevalidate({cacheName:"google-fonts-stylesheets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new e.StaleWhileRevalidate({cacheName:"static-font-assets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new e.StaleWhileRevalidate({cacheName:"static-image-assets",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/image\?url=.+$/i,new e.StaleWhileRevalidate({cacheName:"next-image",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp3|wav|ogg)$/i,new e.CacheFirst({cacheName:"static-audio-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp4)$/i,new e.CacheFirst({cacheName:"static-video-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:js)$/i,new e.StaleWhileRevalidate({cacheName:"static-js-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:css|less)$/i,new e.StaleWhileRevalidate({cacheName:"static-style-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/data\/.+\/.+\.json$/i,new e.StaleWhileRevalidate({cacheName:"next-data",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:json|xml|csv)$/i,new e.NetworkFirst({cacheName:"static-data-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>{if(!(self.origin===e.origin))return!1;const a=e.pathname;return!a.startsWith("/api/auth/")&&!!a.startsWith("/api/")},new e.NetworkFirst({cacheName:"apis",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:16,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>{if(!(self.origin===e.origin))return!1;return!e.pathname.startsWith("/api/")},new e.NetworkFirst({cacheName:"others",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(({url:e})=>!(self.origin===e.origin),new e.NetworkFirst({cacheName:"cross-origin",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:3600})]}),"GET")});
diff --git a/src/__mocks__/heroui-react.tsx b/src/__mocks__/heroui-react.tsx
index c2abb70..11ff17d 100644
--- a/src/__mocks__/heroui-react.tsx
+++ b/src/__mocks__/heroui-react.tsx
@@ -10,6 +10,10 @@ const MenuActionContext = createContext<{
   onAction?: (key: React.Key) => void;
   selectedKeys?: Iterable<React.Key>;
 }>({});
+const SelectContext = createContext<{
+  value?: React.Key | React.Key[] | null;
+  onChange?: (value: React.Key | React.Key[] | null) => void;
+}>({});
 
 type OverlayStateValue = {
   isOpen: boolean;
@@ -370,11 +374,132 @@ export const Dropdown = Object.assign(DropdownRoot, {
   ItemIndicator: () => <span aria-hidden='true' />,
 });
 
-export const ScrollShadow = ({
+const SelectRoot = ({
+  children,
+  value,
+  onChange,
+  fullWidth: _fullWidth,
+  isDisabled: _isDisabled,
+  variant: _variant,
+  placeholder: _placeholder,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  value?: React.Key | React.Key[] | null;
+  onChange?: (value: React.Key | React.Key[] | null) => void;
+  fullWidth?: boolean;
+  isDisabled?: boolean;
+  variant?: string;
+  placeholder?: string;
+}) => (
+  <SelectContext.Provider value={{ value, onChange }}>
+    <div {...props}>{children}</div>
+  </SelectContext.Provider>
+);
+
+const SelectTrigger = ({
+  children,
+  ...props
+}: React.ButtonHTMLAttributes<HTMLButtonElement>) => (
+  <button type='button' role='combobox' aria-expanded='true' {...props}>
+    {children}
+  </button>
+);
+
+const SelectValue = ({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => <span {...props}>{children}</span>;
+
+const SelectIndicator = ({
+  children,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => (
+  <span aria-hidden='true' {...props}>
+    {children}
+  </span>
+);
+
+const SelectPopover = ({
   children,
   ...props
 }: React.HTMLAttributes<HTMLDivElement>) => <div {...props}>{children}</div>;
 
+const ListBoxRoot = ({
+  children,
+  selectionMode: _selectionMode,
+  selectedKeys: _selectedKeys,
+  onSelectionChange: _onSelectionChange,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  selectionMode?: string;
+  selectedKeys?: Iterable<React.Key>;
+  onSelectionChange?: (keys: Iterable<React.Key>) => void;
+}) => (
+  <div role='listbox' {...props}>
+    {children}
+  </div>
+);
+
+const ListBoxItem = ({
+  children,
+  id,
+  textValue,
+  isDisabled,
+  ...props
+}: React.HTMLAttributes<HTMLButtonElement> & {
+  id: React.Key;
+  textValue?: string;
+  isDisabled?: boolean;
+}) => {
+  const { value, onChange } = useContext(SelectContext);
+  const selected = Array.isArray(value)
+    ? value.includes(id)
+    : value === id;
+
+  return (
+    <button
+      type='button'
+      role='option'
+      aria-label={textValue}
+      aria-selected={selected}
+      disabled={isDisabled}
+      {...props}
+      onClick={() => onChange?.(id)}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const Select = Object.assign(SelectRoot, {
+  Root: SelectRoot,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Indicator: SelectIndicator,
+  Popover: SelectPopover,
+});
+
+export const ListBox = Object.assign(ListBoxRoot, {
+  Root: ListBoxRoot,
+  Item: Object.assign(ListBoxItem, {
+    Indicator: () => <span aria-hidden='true' />,
+  }),
+  ItemIndicator: () => <span aria-hidden='true' />,
+  Section: ({ children, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div {...props}>{children}</div>
+  ),
+});
+
+export const ScrollShadow = ({
+  children,
+  hideScrollBar: _hideScrollBar,
+  orientation: _orientation,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & {
+  hideScrollBar?: boolean;
+  orientation?: string;
+}) => <div {...props}>{children}</div>;
+
 export const Spinner = (props: React.HTMLAttributes<HTMLSpanElement>) => (
   <span role='status' {...props} />
 );
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index ae4523a..816d84f 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -39,9 +39,8 @@ import {
   Video,
 } from 'lucide-react';
 import { GripVertical, Palette } from 'lucide-react';
-import Image from 'next/image';
+import { Alert, Avatar, Button, Card, Checkbox, Chip, Input, Label, Skeleton, Switch, Table, TextArea, TextField } from '@heroui/react';
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 
 import { AdminConfig, AdminConfigResult } from '../../lib/admin.types';
 import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
@@ -49,6 +48,7 @@ import { getAuthInfoFromBrowserCookie } from '@/lib/auth';
 import DataMigration from '@/components/DataMigration';
 import ThemeManager from '@/components/ThemeManager';
 import PageLayout from '@/components/PageLayout';
+import { AppDialog, AppFilterSelect } from '@/components/ui/HeroPrimitives';
 
 // 统一按钮样式系统
 const buttonStyles = {
@@ -92,6 +92,85 @@ const buttonStyles = {
   quickAction: 'px-3 py-1.5 text-xs font-medium text-muted bg-surface border border-border hover:bg-surface-secondary rounded-lg transition-colors',
 };
 
+const AdminTable = ({
+  ariaLabel,
+  minWidth = 'min-w-[900px]',
+  children,
+}: {
+  ariaLabel: string;
+  minWidth?: string;
+  children: React.ReactNode;
+}) => (
+  <Table variant='secondary' className='overflow-visible'>
+    <Table.ScrollContainer>
+      <Table.Content aria-label={ariaLabel} className={minWidth}>
+        {children}
+      </Table.Content>
+    </Table.ScrollContainer>
+  </Table>
+);
+
+const AdminCheckbox = ({
+  ariaLabel,
+  isSelected,
+  onChange,
+  isDisabled,
+}: {
+  ariaLabel: string;
+  isSelected: boolean;
+  onChange: (isSelected: boolean) => void;
+  isDisabled?: boolean;
+}) => (
+  <Checkbox
+    aria-label={ariaLabel}
+    isSelected={isSelected}
+    isDisabled={isDisabled}
+    slot='selection'
+    variant='secondary'
+    onChange={onChange}
+  >
+    <Checkbox.Control>
+      <Checkbox.Indicator />
+    </Checkbox.Control>
+  </Checkbox>
+);
+
+const AdminChip = ({
+  children,
+  color = 'default',
+}: {
+  children: React.ReactNode;
+  color?: 'default' | 'accent' | 'success' | 'warning' | 'danger';
+}) => (
+  <Chip size='sm' color={color} variant='soft'>
+    <Chip.Label>{children}</Chip.Label>
+  </Chip>
+);
+
+const AdminSettingSwitch = ({
+  label,
+  description,
+  isSelected,
+  onChange,
+}: {
+  label: string;
+  description: string;
+  isSelected: boolean;
+  onChange: (isSelected: boolean) => void;
+}) => (
+  <div className='flex items-start justify-between gap-4'>
+    <div className='space-y-1'>
+      <Label className='text-sm'>{label}</Label>
+      <p className='text-xs text-muted'>{description}</p>
+    </div>
+    <Switch aria-label={label} isSelected={isSelected} onChange={onChange}>
+      <Switch.Control>
+        <Switch.Thumb />
+      </Switch.Control>
+    </Switch>
+  </div>
+);
+
 // 获取用户头像的函数
 const getUserAvatar = async (username: string): Promise<string | null> => {
   try {
@@ -127,36 +206,20 @@ const UserAvatar = ({ username, size = 'sm' }: UserAvatarProps) => {
     fetchAvatar();
   }, [username]);
 
-  const sizeClasses = {
-    sm: 'w-8 h-8',
-    md: 'w-10 h-10',
-    lg: 'w-12 h-12'
-  };
-
-  const iconSizeClasses = {
-    sm: 'w-4 h-4',
-    md: 'w-5 h-5',
-    lg: 'w-6 h-6'
-  };
-
   return (
-    <div className={`${sizeClasses[size]} rounded-full overflow-hidden relative flex-shrink-0`}>
+    <Avatar size={size}>
       {loading ? (
-        <div className='w-full h-full bg-gray-100 dark:bg-gray-800 animate-pulse' />
+        <Avatar.Fallback>
+          <Skeleton className='h-full w-full' />
+        </Avatar.Fallback>
       ) : avatarUrl ? (
-        <Image
-          src={avatarUrl}
-          alt={`${username} 的头像`}
-          fill
-          sizes={size === 'sm' ? '32px' : size === 'md' ? '40px' : '48px'}
-          className='object-cover'
-        />
+        <Avatar.Image src={avatarUrl} alt={`${username} 的头像`} />
       ) : (
-        <div className='w-full h-full bg-blue-100 dark:bg-blue-900/40 flex items-center justify-center'>
-          <User className={`${iconSizeClasses[size]} text-blue-500 dark:text-blue-400`} />
-        </div>
+        <Avatar.Fallback>
+          <User className='h-4 w-4' />
+        </Avatar.Fallback>
       )}
-    </div>
+    </Avatar>
   );
 };
 
@@ -183,27 +246,11 @@ const MachineCodeCell = ({ username, canManage, machineCodeData, onRefresh, show
 
     const element = codeRef.current;
     const rect = element.getBoundingClientRect();
-    const tableContainer = element.closest('[data-table="user-list"]');
-
-    if (tableContainer) {
-      const containerRect = tableContainer.getBoundingClientRect();
-      const elementCenterY = rect.top + rect.height / 2;
-      const containerCenterY = containerRect.top + containerRect.height / 2;
-
-      // 如果元素在容器上半部分，悬浮框向下显示；否则向上显示
-      if (elementCenterY < containerCenterY) {
-        setTooltipPosition('bottom');
-      } else {
-        setTooltipPosition('top');
-      }
+    const viewportHeight = window.innerHeight;
+    if (rect.top < viewportHeight / 2) {
+      setTooltipPosition('bottom');
     } else {
-      // 后备方案：根据视口位置决定
-      const viewportHeight = window.innerHeight;
-      if (rect.top < viewportHeight / 2) {
-        setTooltipPosition('bottom');
-      } else {
-        setTooltipPosition('top');
-      }
+      setTooltipPosition('top');
     }
   }, []);
 
@@ -258,7 +305,7 @@ const MachineCodeCell = ({ username, canManage, machineCodeData, onRefresh, show
   if (!machineCodeInfo) {
     return (
       <div className="flex items-center space-x-2">
-        <span className="text-sm text-gray-500 dark:text-gray-400">未绑定</span>
+        <span className="text-sm text-muted">未绑定</span>
       </div>
     );
   }
@@ -269,7 +316,7 @@ const MachineCodeCell = ({ username, canManage, machineCodeData, onRefresh, show
         <div className="group relative" onMouseEnter={handleMouseEnter}>
           <code
             ref={codeRef}
-            className="text-xs font-mono text-gray-700 dark:text-gray-300 cursor-help"
+            className="text-xs font-mono text-foreground cursor-help"
           >
             {formatMachineCode(machineCodeInfo.machineCode).substring(0, 12)}...
           </code>
@@ -300,20 +347,18 @@ const MachineCodeCell = ({ username, canManage, machineCodeData, onRefresh, show
           </div>
         </div>
         {canManage && (
-          <button
-            onClick={handleUnbind}
-            disabled={unbinding}
-            className={`${buttonStyles.roundedDanger} ${unbinding ? 'opacity-50 cursor-not-allowed' : ''}`}
-            title="解绑机器码"
+          <Button
+            size='sm'
+            variant='danger-soft'
+            onPress={handleUnbind}
+            isDisabled={unbinding}
           >
             {unbinding ? '解绑中...' : '解绑'}
-          </button>
+          </Button>
         )}
       </div>
       <div className="flex items-center space-x-1">
-        <span className="inline-flex items-center px-2 py-0.5 rounded-full text-xs bg-green-100 text-green-800 dark:bg-green-900/20 dark:text-green-300">
-          已绑定
-        </span>
+        <AdminChip color='success'>已绑定</AdminChip>
       </div>
     </div>
   );
@@ -339,79 +384,57 @@ const AlertModal = ({
   timer,
   showConfirm = false
 }: AlertModalProps) => {
-  const [isVisible, setIsVisible] = useState(false);
-
   useEffect(() => {
-    if (isOpen) {
-      setIsVisible(true);
-      if (timer) {
-        setTimeout(() => {
-          onClose();
-        }, timer);
-      }
-    } else {
-      setIsVisible(false);
+    if (isOpen && timer) {
+      const timeout = setTimeout(onClose, timer);
+      return () => clearTimeout(timeout);
     }
   }, [isOpen, timer, onClose]);
 
-  if (!isOpen) return null;
-
   const getIcon = () => {
     switch (type) {
       case 'success':
-        return <CheckCircle className="w-8 h-8 text-blue-500" />;
+        return <CheckCircle className="w-5 h-5" />;
       case 'error':
-        return <AlertCircle className="w-8 h-8 text-red-500" />;
+        return <AlertCircle className="w-5 h-5" />;
       case 'warning':
-        return <AlertTriangle className="w-8 h-8 text-yellow-500" />;
+        return <AlertTriangle className="w-5 h-5" />;
       default:
         return null;
     }
   };
 
-  const getBgColor = () => {
+  const getStatus = () => {
     switch (type) {
       case 'success':
-        return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800';
+        return 'success';
       case 'error':
-        return 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
+        return 'danger';
       case 'warning':
-        return 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800';
+        return 'warning';
       default:
-        return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800';
+        return 'accent';
     }
   };
 
-  return createPortal(
-    <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 transition-opacity duration-200 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
-      <div className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-sm w-full border ${getBgColor()} transition-all duration-200 ${isVisible ? 'scale-100' : 'scale-95'}`}>
-        <div className="p-6 text-center">
-          <div className="flex justify-center mb-4">
-            {getIcon()}
-          </div>
-
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
-            {title}
-          </h3>
-
-          {message && (
-            <p className="text-gray-600 dark:text-gray-400 mb-4">
-              {message}
-            </p>
-          )}
-
-          {showConfirm && (
-            <button
-              onClick={onClose}
-              className={`px-4 py-2 text-sm font-medium ${buttonStyles.primary}`}
-            >
-              确定
-            </button>
-          )}
-        </div>
-      </div>
-    </div>,
-    document.body
+  return (
+    <AppDialog
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      title={title}
+      icon={getIcon()}
+      footer={
+        showConfirm ? (
+          <Button variant='primary' onPress={onClose}>
+            确定
+          </Button>
+        ) : null
+      }
+    >
+      {message ? <Alert status={getStatus()}>{message}</Alert> : null}
+    </AppDialog>
   );
 };
 
@@ -548,10 +571,12 @@ const CollapsibleTab = ({
   children,
 }: CollapsibleTabProps) => {
   return (
-    <div className='mb-4 overflow-hidden rounded-3xl border border-border/70 bg-surface/80 shadow-sm backdrop-blur-md'>
-      <button
-        onClick={onToggle}
-        className='flex w-full items-center justify-between bg-surface-secondary/70 px-6 py-4 transition-colors hover:bg-surface-tertiary/70'
+    <Card variant='default' className='mb-4 overflow-hidden'>
+      <Button
+        fullWidth
+        variant='tertiary'
+        className='h-auto justify-between px-6 py-4'
+        onPress={onToggle}
       >
         <div className='flex items-center gap-3'>
           {icon}
@@ -562,10 +587,10 @@ const CollapsibleTab = ({
         <div className='text-muted'>
           {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
         </div>
-      </button>
+      </Button>
 
       {isExpanded && <div className='px-6 py-4'>{children}</div>}
-    </div>
+    </Card>
   );
 };
 
@@ -1016,11 +1041,11 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
         <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-3'>
           用户统计
         </h4>
-        <div className='p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800'>
-          <div className='text-2xl font-bold text-blue-800 dark:text-blue-300'>
+        <div className='p-4 bg-accent/10 rounded-lg border border-accent/20'>
+          <div className='text-2xl font-bold text-accent'>
             {config.UserConfig.Users.length}
           </div>
-          <div className='text-sm text-blue-600 dark:text-blue-400'>
+          <div className='text-sm text-accent'>
             总用户数
           </div>
         </div>
@@ -1034,78 +1059,69 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
           <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
             用户组管理
           </h4>
-          <button
-            onClick={() => {
+          <Button
+            size='sm'
+            variant={showAddUserGroupForm ? 'secondary' : 'primary'}
+            onPress={() => {
               setShowAddUserGroupForm(!showAddUserGroupForm);
               if (showEditUserGroupForm) {
                 setShowEditUserGroupForm(false);
                 setEditingUserGroup(null);
               }
             }}
-            className={showAddUserGroupForm ? buttonStyles.secondary : buttonStyles.primary}
           >
             {showAddUserGroupForm ? '取消' : '添加用户组'}
-          </button>
+          </Button>
         </div>
 
         {/* 用户组列表 */}
-        <div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[20rem] overflow-y-auto overflow-x-auto relative'>
-          <table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
-            <thead className='bg-gray-50 dark:bg-gray-900 sticky top-0 z-10'>
-              <tr>
-                <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
-                  用户组名称
-                </th>
-                <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
-                  可用视频源
-                </th>
-                <th className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
-                  操作
-                </th>
-              </tr>
-            </thead>
-            <tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
+        <AdminTable ariaLabel='用户组列表'>
+          <Table.Header>
+            <Table.Column isRowHeader>用户组名称</Table.Column>
+            <Table.Column>可用视频源</Table.Column>
+            <Table.Column className='text-right'>操作</Table.Column>
+          </Table.Header>
+          <Table.Body>
               {userGroups.map((group) => (
-                <tr key={group.name} className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors'>
-                  <td className='px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100'>
+                <Table.Row key={group.name} id={group.name}>
+                  <Table.Cell className='font-medium'>
                     {group.name}
-                  </td>
-                  <td className='px-6 py-4 whitespace-nowrap'>
-                    <div className='flex items-center space-x-2'>
-                      <span className='text-sm text-gray-900 dark:text-gray-100'>
-                        {group.enabledApis && group.enabledApis.length > 0
-                          ? `${group.enabledApis.length} 个源`
-                          : '无限制'}
-                      </span>
-                    </div>
-                  </td>
-                  <td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
-                    <button
-                      onClick={() => handleStartEditUserGroup(group)}
-                      disabled={isLoading(`userGroup_edit_${group.name}`)}
-                      className={`${buttonStyles.roundedPrimary} ${isLoading(`userGroup_edit_${group.name}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                  </Table.Cell>
+                  <Table.Cell>
+                    {group.enabledApis && group.enabledApis.length > 0
+                      ? `${group.enabledApis.length} 个源`
+                      : '无限制'}
+                  </Table.Cell>
+                  <Table.Cell>
+                    <div className='flex justify-end gap-2'>
+                    <Button
+                      size='sm'
+                      variant='secondary'
+                      onPress={() => handleStartEditUserGroup(group)}
+                      isDisabled={isLoading(`userGroup_edit_${group.name}`)}
                     >
                       编辑
-                    </button>
-                    <button
-                      onClick={() => handleDeleteUserGroup(group.name)}
-                      className={buttonStyles.roundedDanger}
+                    </Button>
+                    <Button
+                      size='sm'
+                      variant='danger-soft'
+                      onPress={() => handleDeleteUserGroup(group.name)}
                     >
                       删除
-                    </button>
-                  </td>
-                </tr>
+                    </Button>
+                    </div>
+                  </Table.Cell>
+                </Table.Row>
               ))}
               {userGroups.length === 0 && (
-                <tr>
-                  <td colSpan={3} className='px-6 py-8 text-center text-sm text-gray-500 dark:text-gray-400'>
+                <Table.Row id='empty-user-groups'>
+                  <Table.Cell colSpan={3} className='py-8 text-center text-muted'>
                     暂无用户组，请添加用户组来管理用户权限
-                  </td>
-                </tr>
+                  </Table.Cell>
+                </Table.Row>
               )}
-            </tbody>
-          </table>
-        </div>
+          </Table.Body>
+        </AdminTable>
       </div>
 
       {/* 用户列表 */}
@@ -1122,155 +1138,146 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
                   <span className='text-sm text-gray-600 dark:text-gray-400'>
                     已选择 {selectedUsers.size} 个用户
                   </span>
-                  <button
-                    onClick={() => setShowBatchUserGroupModal(true)}
-                    className={buttonStyles.primary}
+                  <Button
+                    size='sm'
+                    variant='primary'
+                    onPress={() => setShowBatchUserGroupModal(true)}
                   >
                     批量设置用户组
-                  </button>
+                  </Button>
                 </div>
                 <div className='w-px h-6 bg-gray-300 dark:bg-gray-600'></div>
               </>
             )}
-            <button
-              onClick={() => {
+            <Button
+              size='sm'
+              variant={showAddUserForm ? 'secondary' : 'primary'}
+              onPress={() => {
                 setShowAddUserForm(!showAddUserForm);
                 if (showChangePasswordForm) {
                   setShowChangePasswordForm(false);
                   setChangePasswordUser({ username: '', password: '' });
                 }
               }}
-              className={showAddUserForm ? buttonStyles.secondary : buttonStyles.success}
             >
               {showAddUserForm ? '取消' : '添加用户'}
-            </button>
+            </Button>
           </div>
         </div>
 
         {/* 添加用户表单 */}
         {showAddUserForm && (
-          <div className='mb-4 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700'>
+          <Card variant='secondary' className='mb-4 p-4'>
             <div className='space-y-4'>
               <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
-                <input
-                  type='text'
-                  placeholder='用户名'
-                  value={newUser.username}
-                  onChange={(e) =>
-                    setNewUser((prev) => ({ ...prev, username: e.target.value }))
-                  }
-                  className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
-                />
-                <input
-                  type='password'
-                  placeholder='密码'
-                  value={newUser.password}
-                  onChange={(e) =>
-                    setNewUser((prev) => ({ ...prev, password: e.target.value }))
-                  }
-                  className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
-                />
-              </div>
-              <div>
-                <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-                  用户组（可选）
-                </label>
-                <select
-                  value={newUser.userGroup}
-                  onChange={(e) =>
-                    setNewUser((prev) => ({ ...prev, userGroup: e.target.value }))
-                  }
-                  className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
-                >
-                  <option value=''>无用户组（无限制）</option>
-                  {userGroups.map((group) => (
-                    <option key={group.name} value={group.name}>
-                      {group.name} ({group.enabledApis && group.enabledApis.length > 0 ? `${group.enabledApis.length} 个源` : '无限制'})
-                    </option>
-                  ))}
-                </select>
+                <TextField fullWidth>
+                  <Label>用户名</Label>
+                  <Input
+                    type='text'
+                    placeholder='用户名'
+                    value={newUser.username}
+                    onChange={(e) =>
+                      setNewUser((prev) => ({ ...prev, username: e.target.value }))
+                    }
+                  />
+                </TextField>
+                <TextField fullWidth>
+                  <Label>密码</Label>
+                  <Input
+                    type='password'
+                    placeholder='密码'
+                    value={newUser.password}
+                    onChange={(e) =>
+                      setNewUser((prev) => ({ ...prev, password: e.target.value }))
+                    }
+                  />
+                </TextField>
               </div>
+              <AppFilterSelect
+                label='用户组（可选）'
+                value={newUser.userGroup}
+                placeholder='无用户组（无限制）'
+                options={[
+                  { label: '无用户组（无限制）', value: '' },
+                  ...userGroups.map((group) => ({
+                    label: `${group.name} (${group.enabledApis && group.enabledApis.length > 0 ? `${group.enabledApis.length} 个源` : '无限制'})`,
+                    value: group.name,
+                  })),
+                ]}
+                onChange={(value) =>
+                  setNewUser((prev) => ({ ...prev, userGroup: value }))
+                }
+              />
               <div className='flex justify-end'>
-                <button
-                  onClick={handleAddUser}
-                  disabled={!newUser.username || !newUser.password || isLoading('addUser')}
-                  className={!newUser.username || !newUser.password || isLoading('addUser') ? buttonStyles.disabled : buttonStyles.success}
+                <Button
+                  variant='primary'
+                  onPress={handleAddUser}
+                  isDisabled={!newUser.username || !newUser.password || isLoading('addUser')}
                 >
                   {isLoading('addUser') ? '添加中...' : '添加'}
-                </button>
+                </Button>
               </div>
             </div>
-          </div>
+          </Card>
         )}
 
         {/* 修改密码表单 */}
         {showChangePasswordForm && (
-          <div className='mb-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700'>
-            <h5 className='text-sm font-medium text-blue-800 dark:text-blue-300 mb-3'>
+          <div className='mb-4 p-4 bg-accent/10 rounded-lg border border-accent/20'>
+            <h5 className='text-sm font-medium text-accent mb-3'>
               修改用户密码
             </h5>
             <div className='flex flex-col sm:flex-row gap-4 sm:gap-3'>
-              <input
-                type='text'
-                placeholder='用户名'
-                value={changePasswordUser.username}
-                disabled
-                className='flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 cursor-not-allowed'
-              />
-              <input
-                type='password'
-                placeholder='新密码'
-                value={changePasswordUser.password}
-                onChange={(e) =>
-                  setChangePasswordUser((prev) => ({
-                    ...prev,
-                    password: e.target.value,
-                  }))
-                }
-                className='flex-1 px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
-              />
-              <button
-                onClick={handleChangePassword}
-                disabled={!changePasswordUser.password || isLoading(`changePassword_${changePasswordUser.username}`)}
-                className={`w-full sm:w-auto ${!changePasswordUser.password || isLoading(`changePassword_${changePasswordUser.username}`) ? buttonStyles.disabled : buttonStyles.primary}`}
+              <TextField className='flex-1'>
+                <Label>用户名</Label>
+                <Input
+                  type='text'
+                  placeholder='用户名'
+                  value={changePasswordUser.username}
+                  disabled
+                />
+              </TextField>
+              <TextField className='flex-1'>
+                <Label>新密码</Label>
+                <Input
+                  type='password'
+                  placeholder='新密码'
+                  value={changePasswordUser.password}
+                  onChange={(e) =>
+                    setChangePasswordUser((prev) => ({
+                      ...prev,
+                      password: e.target.value,
+                    }))
+                  }
+                />
+              </TextField>
+              <Button
+                className='w-full sm:w-auto'
+                variant='primary'
+                onPress={handleChangePassword}
+                isDisabled={!changePasswordUser.password || isLoading(`changePassword_${changePasswordUser.username}`)}
               >
                 {isLoading(`changePassword_${changePasswordUser.username}`) ? '修改中...' : '修改密码'}
-              </button>
-              <button
-                onClick={() => {
+              </Button>
+              <Button
+                className='w-full sm:w-auto'
+                variant='secondary'
+                onPress={() => {
                   setShowChangePasswordForm(false);
                   setChangePasswordUser({ username: '', password: '' });
                 }}
-                className={`w-full sm:w-auto ${buttonStyles.secondary}`}
               >
                 取消
-              </button>
+              </Button>
             </div>
           </div>
         )}
 
         {/* 用户列表 */}
-        <div
-          className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative'
-          data-table="user-list"
-          style={{
-            scrollbarWidth: 'thin',
-            scrollbarColor: '#cbd5e0 transparent',
-          }}
-          onMouseEnter={(e) => {
-            const target = e.currentTarget;
-            target.style.setProperty('scrollbar-color', '#94a3b8 #f1f5f9');
-          }}
-          onMouseLeave={(e) => {
-            const target = e.currentTarget;
-            target.style.setProperty('scrollbar-color', '#cbd5e0 transparent');
-          }}
-        >
-          <table className='min-w-[1200px] w-full divide-y divide-gray-200 dark:divide-gray-700'>
-            <thead className='bg-gray-50 dark:bg-gray-900 sticky top-0 z-10'>
-              <tr>
-                <th className='w-4' />
-                <th className='w-10 px-1 py-3 text-center'>
+        <AdminTable ariaLabel='用户列表' minWidth='min-w-[1200px]'>
+          <Table.Header>
+                <Table.Column className='w-4' />
+                <Table.Column className='w-10 text-center'>
                   {(() => {
                     // 检查是否有权限操作任何用户
                     const hasAnyPermission = config?.UserConfig?.Users?.some(user =>
@@ -1281,61 +1288,38 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
                     );
 
                     return hasAnyPermission ? (
-                      <input
-                        type='checkbox'
-                        checked={selectAllUsers}
-                        onChange={(e) => handleSelectAllUsers(e.target.checked)}
-                        className='w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+                      <AdminCheckbox
+                        ariaLabel='选择全部用户'
+                        isSelected={selectAllUsers}
+                        onChange={handleSelectAllUsers}
                       />
                     ) : (
                       <div className='w-4 h-4' />
                     );
                   })()}
-                </th>
-                <th
-                  scope='col'
-                  className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
-                >
+                </Table.Column>
+                <Table.Column isRowHeader>
                   用户名
-                </th>
-                <th
-                  scope='col'
-                  className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
-                >
+                </Table.Column>
+                <Table.Column>
                   角色
-                </th>
-                <th
-                  scope='col'
-                  className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
-                >
+                </Table.Column>
+                <Table.Column>
                   状态
-                </th>
-                <th
-                  scope='col'
-                  className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
-                >
+                </Table.Column>
+                <Table.Column>
                   用户组
-                </th>
-                <th
-                  scope='col'
-                  className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
-                >
+                </Table.Column>
+                <Table.Column>
                   采集源权限
-                </th>
-                <th
-                  scope='col'
-                  className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
-                >
+                </Table.Column>
+                <Table.Column>
                   机器码
-                </th>
-                <th
-                  scope='col'
-                  className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'
-                >
+                </Table.Column>
+                <Table.Column className='text-right'>
                   操作
-                </th>
-              </tr>
-            </thead>
+                </Table.Column>
+          </Table.Header>
             {/* 按规则排序用户：自己 -> 站长(若非自己) -> 管理员 -> 其他 */}
             {(() => {
               const sortedUsers = [...config.UserConfig.Users].sort((a, b) => {
@@ -1349,7 +1333,7 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
                 return priority(a) - priority(b);
               });
               return (
-                <tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
+                <Table.Body>
                   {sortedUsers.map((user) => {
                     // 修改密码权限：站长可修改管理员和普通用户密码，管理员可修改普通用户和自己的密码，但任何人都不能修改站长密码
                     const canChangePassword =
@@ -1371,61 +1355,48 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
                       (role === 'owner' ||
                         (role === 'admin' && user.role === 'user'));
                     return (
-                      <tr
+                      <Table.Row
                         key={user.username}
-                        className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors'
+                        id={user.username}
                       >
-                        <td className='w-4' />
-                        <td className='w-10 px-1 py-3 text-center'>
+                        <Table.Cell className='w-4' />
+                        <Table.Cell className='w-10 text-center'>
                           {(role === 'owner' ||
                             (role === 'admin' &&
                               (user.role === 'user' ||
                                 user.username === currentUsername))) ? (
-                            <input
-                              type='checkbox'
-                              checked={selectedUsers.has(user.username)}
-                              onChange={(e) => handleSelectUser(user.username, e.target.checked)}
-                              className='w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+                            <AdminCheckbox
+                              ariaLabel={`选择用户 ${user.username}`}
+                              isSelected={selectedUsers.has(user.username)}
+                              onChange={(selected) => handleSelectUser(user.username, selected)}
                             />
                           ) : (
                             <div className='w-4 h-4' />
                           )}
-                        </td>
-                        <td className='px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-100'>
+                        </Table.Cell>
+                        <Table.Cell className='font-medium'>
                           <div className='flex items-center gap-3'>
                             <UserAvatar username={user.username} size="sm" />
                             <span>{user.username}</span>
                           </div>
-                        </td>
-                        <td className='px-6 py-4 whitespace-nowrap'>
-                          <span
-                            className={`px-2 py-1 text-xs rounded-full ${user.role === 'owner'
-                              ? 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300'
-                              : user.role === 'admin'
-                                ? 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300'
-                                : 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
-                              }`}
-                          >
+                        </Table.Cell>
+                        <Table.Cell>
+                          <AdminChip color={user.role === 'owner' ? 'warning' : user.role === 'admin' ? 'accent' : 'default'}>
                             {user.role === 'owner'
                               ? '站长'
                               : user.role === 'admin'
                                 ? '管理员'
                                 : '普通用户'}
-                          </span>
-                        </td>
-                        <td className='px-6 py-4 whitespace-nowrap'>
-                          <span
-                            className={`px-2 py-1 text-xs rounded-full ${!user.banned
-                              ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
-                              : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
-                              }`}
-                          >
+                          </AdminChip>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <AdminChip color={!user.banned ? 'success' : 'danger'}>
                             {!user.banned ? '正常' : '已封禁'}
-                          </span>
-                        </td>
-                        <td className='px-6 py-4 whitespace-nowrap'>
+                          </AdminChip>
+                        </Table.Cell>
+                        <Table.Cell>
                           <div className='flex items-center space-x-2'>
-                            <span className='text-sm text-gray-900 dark:text-gray-100'>
+                            <span className='text-sm'>
                               {user.tags && user.tags.length > 0
                                 ? user.tags.join(', ')
                                 : '无用户组'}
@@ -1435,18 +1406,19 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
                               (role === 'admin' &&
                                 (user.role === 'user' ||
                                   user.username === currentUsername))) && (
-                                <button
-                                  onClick={() => handleConfigureUserGroup(user)}
-                                  className={buttonStyles.roundedPrimary}
+                                <Button
+                                  size='sm'
+                                  variant='secondary'
+                                  onPress={() => handleConfigureUserGroup(user)}
                                 >
                                   配置
-                                </button>
+                                </Button>
                               )}
                           </div>
-                        </td>
-                        <td className='px-6 py-4 whitespace-nowrap'>
+                        </Table.Cell>
+                        <Table.Cell>
                           <div className='flex items-center space-x-2'>
-                            <span className='text-sm text-gray-900 dark:text-gray-100'>
+                            <span className='text-sm'>
                               {user.enabledApis && user.enabledApis.length > 0
                                 ? `${user.enabledApis.length} 个源`
                                 : '无限制'}
@@ -1456,16 +1428,17 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
                               (role === 'admin' &&
                                 (user.role === 'user' ||
                                   user.username === currentUsername))) && (
-                                <button
-                                  onClick={() => handleConfigureUserApis(user)}
-                                  className={buttonStyles.roundedPrimary}
+                                <Button
+                                  size='sm'
+                                  variant='secondary'
+                                  onPress={() => handleConfigureUserApis(user)}
                                 >
                                   配置
-                                </button>
+                                </Button>
                               )}
                           </div>
-                        </td>
-                        <td className='px-6 py-4 whitespace-nowrap'>
+                        </Table.Cell>
+                        <Table.Cell>
                           <MachineCodeCell
                             username={user.username}
                             canManage={canOperate}
@@ -1473,801 +1446,626 @@ const UserConfig = ({ config, role, refreshConfig, machineCodeUsers, fetchMachin
                             onRefresh={fetchMachineCodeUsers}
                             showAlert={showAlert}
                           />
-                        </td>
-                        <td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
+                        </Table.Cell>
+                        <Table.Cell>
+                          <div className='flex flex-wrap justify-end gap-2'>
                           {/* 修改密码按钮 */}
                           {canChangePassword && (
-                            <button
-                              onClick={() =>
+                            <Button
+                              size='sm'
+                              variant='secondary'
+                              onPress={() =>
                                 handleShowChangePasswordForm(user.username)
                               }
-                              className={buttonStyles.roundedPrimary}
                             >
                               修改密码
-                            </button>
+                            </Button>
                           )}
                           {canOperate && (
                             <>
                               {/* 其他操作按钮 */}
                               {user.role === 'user' && (
-                                <button
-                                  onClick={() => handleSetAdmin(user.username)}
-                                  disabled={isLoading(`setAdmin_${user.username}`)}
-                                  className={`${buttonStyles.roundedPurple} ${isLoading(`setAdmin_${user.username}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                <Button
+                                  size='sm'
+                                  variant='secondary'
+                                  onPress={() => handleSetAdmin(user.username)}
+                                  isDisabled={isLoading(`setAdmin_${user.username}`)}
                                 >
                                   设为管理
-                                </button>
+                                </Button>
                               )}
                               {user.role === 'admin' && (
-                                <button
-                                  onClick={() =>
+                                <Button
+                                  size='sm'
+                                  variant='secondary'
+                                  onPress={() =>
                                     handleRemoveAdmin(user.username)
                                   }
-                                  disabled={isLoading(`removeAdmin_${user.username}`)}
-                                  className={`${buttonStyles.roundedSecondary} ${isLoading(`removeAdmin_${user.username}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                  isDisabled={isLoading(`removeAdmin_${user.username}`)}
                                 >
                                   取消管理
-                                </button>
+                                </Button>
                               )}
                               {user.role !== 'owner' &&
                                 (!user.banned ? (
-                                  <button
-                                    onClick={() => handleBanUser(user.username)}
-                                    disabled={isLoading(`banUser_${user.username}`)}
-                                    className={`${buttonStyles.roundedDanger} ${isLoading(`banUser_${user.username}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                  <Button
+                                    size='sm'
+                                    variant='danger-soft'
+                                    onPress={() => handleBanUser(user.username)}
+                                    isDisabled={isLoading(`banUser_${user.username}`)}
                                   >
                                     封禁
-                                  </button>
+                                  </Button>
                                 ) : (
-                                  <button
-                                    onClick={() =>
+                                  <Button
+                                    size='sm'
+                                    variant='secondary'
+                                    onPress={() =>
                                       handleUnbanUser(user.username)
                                     }
-                                    disabled={isLoading(`unbanUser_${user.username}`)}
-                                    className={`${buttonStyles.roundedSuccess} ${isLoading(`unbanUser_${user.username}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+                                    isDisabled={isLoading(`unbanUser_${user.username}`)}
                                   >
                                     解封
-                                  </button>
+                                  </Button>
                                 ))}
                             </>
                           )}
                           {/* 删除用户按钮 - 放在最后，使用更明显的红色样式 */}
                           {canDeleteUser && (
-                            <button
-                              onClick={() => handleDeleteUser(user.username)}
-                              className={buttonStyles.roundedDanger}
+                            <Button
+                              size='sm'
+                              variant='danger-soft'
+                              onPress={() => handleDeleteUser(user.username)}
                             >
                               删除用户
-                            </button>
+                            </Button>
                           )}
-                        </td>
-                      </tr>
+                          </div>
+                        </Table.Cell>
+                      </Table.Row>
                     );
                   })}
-                </tbody>
+                </Table.Body>
               );
             })()}
-          </table>
-        </div>
+        </AdminTable>
       </div>
 
       {/* 配置用户采集源权限弹窗 */}
-      {showConfigureApisModal && selectedUser && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowConfigureApisModal(false);
-          setSelectedUser(null);
-          setSelectedApis([]);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  配置用户采集源权限 - {selectedUser.username}
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowConfigureApisModal(false);
-                    setSelectedUser(null);
-                    setSelectedApis([]);
+      <AppDialog
+        isOpen={showConfigureApisModal && Boolean(selectedUser)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowConfigureApisModal(false);
+            setSelectedUser(null);
+            setSelectedApis([]);
+          }
+        }}
+        title={`配置用户采集源权限${selectedUser ? ` - ${selectedUser.username}` : ''}`}
+        size='lg'
+        footer={
+          selectedUser ? (
+            <>
+              <Button
+                variant='secondary'
+                onPress={() => {
+                  setShowConfigureApisModal(false);
+                  setSelectedUser(null);
+                  setSelectedApis([]);
+                }}
+              >
+                取消
+              </Button>
+              <Button
+                variant='primary'
+                onPress={handleSaveUserApis}
+                isDisabled={isLoading(`saveUserApis_${selectedUser.username}`)}
+              >
+                {isLoading(`saveUserApis_${selectedUser.username}`) ? '配置中...' : '确认配置'}
+              </Button>
+            </>
+          ) : null
+        }
+      >
+        <div className='space-y-6'>
+          <Alert status='accent'>
+            <Alert.Content>
+              <Alert.Title>配置说明</Alert.Title>
+              <Alert.Description>
+                提示：全不选为无限制，选中的采集源将限制用户只能访问这些源
+              </Alert.Description>
+            </Alert.Content>
+          </Alert>
+
+          <section>
+            <h4 className='mb-4 text-sm font-medium'>选择可用的采集源：</h4>
+            <div className='grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3'>
+              {config?.SourceConfig?.map((source) => (
+                <Checkbox
+                  key={source.key}
+                  isSelected={selectedApis.includes(source.key)}
+                  onChange={(isSelected) => {
+                    if (isSelected) {
+                      setSelectedApis([...selectedApis, source.key]);
+                    } else {
+                      setSelectedApis(selectedApis.filter(api => api !== source.key));
+                    }
                   }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
                 >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                    </svg>
-                    <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
-                      配置说明
-                    </span>
-                  </div>
-                  <p className='text-sm text-blue-700 dark:text-blue-400 mt-1'>
-                    提示：全不选为无限制，选中的采集源将限制用户只能访问这些源
-                  </p>
-                </div>
-              </div>
-
-              {/* 采集源选择 - 多列布局 */}
-              <div className='mb-6'>
-                <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
-                  选择可用的采集源：
-                </h4>
-                <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
-                  {config?.SourceConfig?.map((source) => (
-                    <label key={source.key} className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'>
-                      <input
-                        type='checkbox'
-                        checked={selectedApis.includes(source.key)}
-                        onChange={(e) => {
-                          if (e.target.checked) {
-                            setSelectedApis([...selectedApis, source.key]);
-                          } else {
-                            setSelectedApis(selectedApis.filter(api => api !== source.key));
-                          }
-                        }}
-                        className='rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700'
-                      />
-                      <div className='flex-1 min-w-0'>
-                        <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
-                          {source.name}
+                  <Checkbox.Control>
+                    <Checkbox.Indicator />
+                  </Checkbox.Control>
+                  <Checkbox.Content>
+                    <div className='min-w-0'>
+                      <div className='truncate text-sm font-medium'>{source.name}</div>
+                      {source.api ? (
+                        <div className='truncate text-xs text-muted'>
+                          {extractDomain(source.api)}
                         </div>
-                        {source.api && (
-                          <div className='text-xs text-gray-500 dark:text-gray-400 truncate'>
-                            {extractDomain(source.api)}
-                          </div>
-                        )}
-                      </div>
-                    </label>
-                  ))}
-                </div>
-              </div>
+                      ) : null}
+                    </div>
+                  </Checkbox.Content>
+                </Checkbox>
+              ))}
+            </div>
+          </section>
 
-              {/* 快速操作按钮 */}
-              <div className='flex flex-wrap items-center justify-between mb-6 p-4 bg-gray-50 dark:bg-gray-900 rounded-lg'>
-                <div className='flex space-x-2'>
-                  <button
-                    onClick={() => setSelectedApis([])}
-                    className={buttonStyles.quickAction}
-                  >
-                    全不选（无限制）
-                  </button>
-                  <button
-                    onClick={() => {
-                      const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
-                      setSelectedApis(allApis);
-                    }}
-                    className={buttonStyles.quickAction}
-                  >
-                    全选
-                  </button>
-                </div>
-                <div className='text-sm text-gray-600 dark:text-gray-400'>
-                  已选择：<span className='font-medium text-blue-600 dark:text-blue-400'>
-                    {selectedApis.length > 0 ? `${selectedApis.length} 个源` : '无限制'}
-                  </span>
-                </div>
-              </div>
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => {
-                    setShowConfigureApisModal(false);
-                    setSelectedUser(null);
-                    setSelectedApis([]);
+          <Card variant='secondary' className='p-4'>
+            <div className='flex flex-wrap items-center justify-between gap-3'>
+              <div className='flex gap-2'>
+                <Button size='sm' variant='secondary' onPress={() => setSelectedApis([])}>
+                  全不选（无限制）
+                </Button>
+                <Button
+                  size='sm'
+                  variant='secondary'
+                  onPress={() => {
+                    const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
+                    setSelectedApis(allApis);
                   }}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
                 >
-                  取消
-                </button>
-                <button
-                  onClick={handleSaveUserApis}
-                  disabled={isLoading(`saveUserApis_${selectedUser?.username}`)}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading(`saveUserApis_${selectedUser?.username}`) ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  {isLoading(`saveUserApis_${selectedUser?.username}`) ? '配置中...' : '确认配置'}
-                </button>
+                  全选
+                </Button>
+              </div>
+              <div className='text-sm text-muted'>
+                已选择：<span className='font-medium text-accent'>
+                  {selectedApis.length > 0 ? `${selectedApis.length} 个源` : '无限制'}
+                </span>
               </div>
             </div>
-          </div>
-        </div>,
-        document.body
-      )}
+          </Card>
+        </div>
+      </AppDialog>
 
       {/* 添加用户组弹窗 */}
-      {showAddUserGroupForm && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowAddUserGroupForm(false);
-          setNewUserGroup({ name: '', enabledApis: [] });
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  添加新用户组
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowAddUserGroupForm(false);
-                    setNewUserGroup({ name: '', enabledApis: [] });
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
+      <AppDialog
+        isOpen={showAddUserGroupForm}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowAddUserGroupForm(false);
+            setNewUserGroup({ name: '', enabledApis: [] });
+          }
+        }}
+        title='添加新用户组'
+        size='lg'
+        footer={
+          <>
+            <Button
+              variant='secondary'
+              onPress={() => {
+                setShowAddUserGroupForm(false);
+                setNewUserGroup({ name: '', enabledApis: [] });
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              variant='primary'
+              onPress={handleAddUserGroup}
+              isDisabled={!newUserGroup.name.trim() || isLoading('userGroup_add_new')}
+            >
+              {isLoading('userGroup_add_new') ? '添加中...' : '添加用户组'}
+            </Button>
+          </>
+        }
+      >
+        <div className='space-y-6'>
+          <TextField>
+            <Label>用户组名称</Label>
+            <Input
+              type='text'
+              placeholder='请输入用户组名称'
+              value={newUserGroup.name}
+              onChange={(e) =>
+                setNewUserGroup((prev) => ({ ...prev, name: e.target.value }))
+              }
+            />
+          </TextField>
 
-              <div className='space-y-6'>
-                {/* 用户组名称 */}
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-                    用户组名称
-                  </label>
-                  <input
-                    type='text'
-                    placeholder='请输入用户组名称'
-                    value={newUserGroup.name}
-                    onChange={(e) =>
-                      setNewUserGroup((prev) => ({ ...prev, name: e.target.value }))
+          <section>
+            <Label>可用视频源</Label>
+            <div className='mt-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3'>
+              {config?.SourceConfig?.map((source) => (
+                <Checkbox
+                  key={source.key}
+                  isSelected={newUserGroup.enabledApis.includes(source.key)}
+                  onChange={(isSelected) => {
+                    if (isSelected) {
+                      setNewUserGroup(prev => ({
+                        ...prev,
+                        enabledApis: [...prev.enabledApis, source.key]
+                      }));
+                    } else {
+                      setNewUserGroup(prev => ({
+                        ...prev,
+                        enabledApis: prev.enabledApis.filter(api => api !== source.key)
+                      }));
                     }
-                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
-                  />
-                </div>
-
-                {/* 可用视频源 */}
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
-                    可用视频源
-                  </label>
-                  <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
-                    {config?.SourceConfig?.map((source) => (
-                      <label key={source.key} className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'>
-                        <input
-                          type='checkbox'
-                          checked={newUserGroup.enabledApis.includes(source.key)}
-                          onChange={(e) => {
-                            if (e.target.checked) {
-                              setNewUserGroup(prev => ({
-                                ...prev,
-                                enabledApis: [...prev.enabledApis, source.key]
-                              }));
-                            } else {
-                              setNewUserGroup(prev => ({
-                                ...prev,
-                                enabledApis: prev.enabledApis.filter(api => api !== source.key)
-                              }));
-                            }
-                          }}
-                          className='rounded border-gray-300 text-blue-600 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700'
-                        />
-                        <div className='flex-1 min-w-0'>
-                          <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
-                            {source.name}
-                          </div>
-                          {source.api && (
-                            <div className='text-xs text-gray-500 dark:text-gray-400 truncate'>
-                              {extractDomain(source.api)}
-                            </div>
-                          )}
+                  }}
+                >
+                  <Checkbox.Control>
+                    <Checkbox.Indicator />
+                  </Checkbox.Control>
+                  <Checkbox.Content>
+                    <div className='min-w-0'>
+                      <div className='truncate text-sm font-medium'>{source.name}</div>
+                      {source.api ? (
+                        <div className='truncate text-xs text-muted'>
+                          {extractDomain(source.api)}
                         </div>
-                      </label>
-                    ))}
-                  </div>
-
-                  {/* 快速操作按钮 */}
-                  <div className='mt-4 flex space-x-2'>
-                    <button
-                      onClick={() => setNewUserGroup(prev => ({ ...prev, enabledApis: [] }))}
-                      className={buttonStyles.quickAction}
-                    >
-                      全不选（无限制）
-                    </button>
-                    <button
-                      onClick={() => {
-                        const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
-                        setNewUserGroup(prev => ({ ...prev, enabledApis: allApis }));
-                      }}
-                      className={buttonStyles.quickAction}
-                    >
-                      全选
-                    </button>
-                  </div>
-                </div>
-
-                {/* 操作按钮 */}
-                <div className='flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700'>
-                  <button
-                    onClick={() => {
-                      setShowAddUserGroupForm(false);
-                      setNewUserGroup({ name: '', enabledApis: [] });
-                    }}
-                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                  >
-                    取消
-                  </button>
-                  <button
-                    onClick={handleAddUserGroup}
-                    disabled={!newUserGroup.name.trim() || isLoading('userGroup_add_new')}
-                    className={`px-6 py-2.5 text-sm font-medium ${!newUserGroup.name.trim() || isLoading('userGroup_add_new') ? buttonStyles.disabled : buttonStyles.primary}`}
-                  >
-                    {isLoading('userGroup_add_new') ? '添加中...' : '添加用户组'}
-                  </button>
-                </div>
-              </div>
+                      ) : null}
+                    </div>
+                  </Checkbox.Content>
+                </Checkbox>
+              ))}
             </div>
-          </div>
-        </div>,
-        document.body
-      )}
+
+            <div className='mt-4 flex gap-2'>
+              <Button
+                size='sm'
+                variant='secondary'
+                onPress={() => setNewUserGroup(prev => ({ ...prev, enabledApis: [] }))}
+              >
+                全不选（无限制）
+              </Button>
+              <Button
+                size='sm'
+                variant='secondary'
+                onPress={() => {
+                  const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
+                  setNewUserGroup(prev => ({ ...prev, enabledApis: allApis }));
+                }}
+              >
+                全选
+              </Button>
+            </div>
+          </section>
+        </div>
+      </AppDialog>
 
       {/* 编辑用户组弹窗 */}
-      {showEditUserGroupForm && editingUserGroup && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowEditUserGroupForm(false);
-          setEditingUserGroup(null);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  编辑用户组 - {editingUserGroup.name}
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowEditUserGroupForm(false);
-                    setEditingUserGroup(null);
+      <AppDialog
+        isOpen={showEditUserGroupForm && Boolean(editingUserGroup)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowEditUserGroupForm(false);
+            setEditingUserGroup(null);
+          }
+        }}
+        title={`编辑用户组${editingUserGroup ? ` - ${editingUserGroup.name}` : ''}`}
+        size='lg'
+        footer={
+          editingUserGroup ? (
+            <>
+              <Button
+                variant='secondary'
+                onPress={() => {
+                  setShowEditUserGroupForm(false);
+                  setEditingUserGroup(null);
+                }}
+              >
+                取消
+              </Button>
+              <Button
+                variant='primary'
+                onPress={handleEditUserGroup}
+                isDisabled={isLoading(`userGroup_edit_${editingUserGroup.name}`)}
+              >
+                {isLoading(`userGroup_edit_${editingUserGroup.name}`) ? '保存中...' : '保存修改'}
+              </Button>
+            </>
+          ) : null
+        }
+      >
+        {editingUserGroup ? (
+          <section>
+            <Label>可用视频源</Label>
+            <div className='mt-4 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3'>
+              {config?.SourceConfig?.map((source) => (
+                <Checkbox
+                  key={source.key}
+                  isSelected={editingUserGroup.enabledApis.includes(source.key)}
+                  onChange={(isSelected) => {
+                    if (isSelected) {
+                      setEditingUserGroup(prev => prev ? {
+                        ...prev,
+                        enabledApis: [...prev.enabledApis, source.key]
+                      } : null);
+                    } else {
+                      setEditingUserGroup(prev => prev ? {
+                        ...prev,
+                        enabledApis: prev.enabledApis.filter(api => api !== source.key)
+                      } : null);
+                    }
                   }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
                 >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='space-y-6'>
-                {/* 可用视频源 */}
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-4'>
-                    可用视频源
-                  </label>
-                  <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3'>
-                    {config?.SourceConfig?.map((source) => (
-                      <label key={source.key} className='flex items-center space-x-3 p-3 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer transition-colors'>
-                        <input
-                          type='checkbox'
-                          checked={editingUserGroup.enabledApis.includes(source.key)}
-                          onChange={(e) => {
-                            if (e.target.checked) {
-                              setEditingUserGroup(prev => prev ? {
-                                ...prev,
-                                enabledApis: [...prev.enabledApis, source.key]
-                              } : null);
-                            } else {
-                              setEditingUserGroup(prev => prev ? {
-                                ...prev,
-                                enabledApis: prev.enabledApis.filter(api => api !== source.key)
-                              } : null);
-                            }
-                          }}
-                          className='rounded border-gray-300 text-purple-600 focus:ring-purple-500 dark:border-gray-600 dark:bg-gray-700'
-                        />
-                        <div className='flex-1 min-w-0'>
-                          <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
-                            {source.name}
-                          </div>
-                          {source.api && (
-                            <div className='text-xs text-gray-500 dark:text-gray-400 truncate'>
-                              {extractDomain(source.api)}
-                            </div>
-                          )}
+                  <Checkbox.Control>
+                    <Checkbox.Indicator />
+                  </Checkbox.Control>
+                  <Checkbox.Content>
+                    <div className='min-w-0'>
+                      <div className='truncate text-sm font-medium'>{source.name}</div>
+                      {source.api ? (
+                        <div className='truncate text-xs text-muted'>
+                          {extractDomain(source.api)}
                         </div>
-                      </label>
-                    ))}
-                  </div>
-
-                  {/* 快速操作按钮 */}
-                  <div className='mt-4 flex space-x-2'>
-                    <button
-                      onClick={() => setEditingUserGroup(prev => prev ? { ...prev, enabledApis: [] } : null)}
-                      className={buttonStyles.quickAction}
-                    >
-                      全不选（无限制）
-                    </button>
-                    <button
-                      onClick={() => {
-                        const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
-                        setEditingUserGroup(prev => prev ? { ...prev, enabledApis: allApis } : null);
-                      }}
-                      className={buttonStyles.quickAction}
-                    >
-                      全选
-                    </button>
-                  </div>
-                </div>
-
-                {/* 操作按钮 */}
-                <div className='flex justify-end space-x-3 pt-4 border-t border-gray-200 dark:border-gray-700'>
-                  <button
-                    onClick={() => {
-                      setShowEditUserGroupForm(false);
-                      setEditingUserGroup(null);
-                    }}
-                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                  >
-                    取消
-                  </button>
-                  <button
-                    onClick={handleEditUserGroup}
-                    disabled={isLoading(`userGroup_edit_${editingUserGroup?.name}`)}
-                    className={`px-6 py-2.5 text-sm font-medium ${isLoading(`userGroup_edit_${editingUserGroup?.name}`) ? buttonStyles.disabled : buttonStyles.primary}`}
-                  >
-                    {isLoading(`userGroup_edit_${editingUserGroup?.name}`) ? '保存中...' : '保存修改'}
-                  </button>
-                </div>
-              </div>
+                      ) : null}
+                    </div>
+                  </Checkbox.Content>
+                </Checkbox>
+              ))}
             </div>
-          </div>
-        </div>,
-        document.body
-      )}
+
+            <div className='mt-4 flex gap-2'>
+              <Button
+                size='sm'
+                variant='secondary'
+                onPress={() => setEditingUserGroup(prev => prev ? { ...prev, enabledApis: [] } : null)}
+              >
+                全不选（无限制）
+              </Button>
+              <Button
+                size='sm'
+                variant='secondary'
+                onPress={() => {
+                  const allApis = config?.SourceConfig?.filter(source => !source.disabled).map(s => s.key) || [];
+                  setEditingUserGroup(prev => prev ? { ...prev, enabledApis: allApis } : null);
+                }}
+              >
+                全选
+              </Button>
+            </div>
+          </section>
+        ) : null}
+      </AppDialog>
 
       {/* 配置用户组弹窗 */}
-      {showConfigureUserGroupModal && selectedUserForGroup && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowConfigureUserGroupModal(false);
-          setSelectedUserForGroup(null);
-          setSelectedUserGroups([]);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-4xl w-full max-h-[80vh] overflow-y-auto' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  配置用户组 - {selectedUserForGroup.username}
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowConfigureUserGroupModal(false);
-                    setSelectedUserForGroup(null);
-                    setSelectedUserGroups([]);
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                    </svg>
-                    <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
-                      配置说明
-                    </span>
-                  </div>
-                  <p className='text-sm text-blue-700 dark:text-blue-400 mt-1'>
-                    提示：选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
-                  </p>
-                </div>
-              </div>
-
-              {/* 用户组选择 - 下拉选择器 */}
-              <div className='mb-6'>
-                <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-                  选择用户组：
-                </label>
-                <select
-                  value={selectedUserGroups.length > 0 ? selectedUserGroups[0] : ''}
-                  onChange={(e) => {
-                    const value = e.target.value;
-                    setSelectedUserGroups(value ? [value] : []);
-                  }}
-                  className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors'
-                >
-                  <option value=''>无用户组（无限制）</option>
-                  {userGroups.map((group) => (
-                    <option key={group.name} value={group.name}>
-                      {group.name} {group.enabledApis && group.enabledApis.length > 0 ? `(${group.enabledApis.length} 个源)` : ''}
-                    </option>
-                  ))}
-                </select>
-                <p className='mt-2 text-xs text-gray-500 dark:text-gray-400'>
-                  选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
-                </p>
-              </div>
-
-
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => {
-                    setShowConfigureUserGroupModal(false);
-                    setSelectedUserForGroup(null);
-                    setSelectedUserGroups([]);
-                  }}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleSaveUserGroups}
-                  disabled={isLoading(`saveUserGroups_${selectedUserForGroup?.username}`)}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading(`saveUserGroups_${selectedUserForGroup?.username}`) ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  {isLoading(`saveUserGroups_${selectedUserForGroup?.username}`) ? '配置中...' : '确认配置'}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+      <AppDialog
+        isOpen={showConfigureUserGroupModal && Boolean(selectedUserForGroup)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowConfigureUserGroupModal(false);
+            setSelectedUserForGroup(null);
+            setSelectedUserGroups([]);
+          }
+        }}
+        title={`配置用户组${selectedUserForGroup ? ` - ${selectedUserForGroup.username}` : ''}`}
+        size='lg'
+        footer={
+          selectedUserForGroup ? (
+            <>
+              <Button
+                variant='secondary'
+                onPress={() => {
+                  setShowConfigureUserGroupModal(false);
+                  setSelectedUserForGroup(null);
+                  setSelectedUserGroups([]);
+                }}
+              >
+                取消
+              </Button>
+              <Button
+                variant='primary'
+                onPress={handleSaveUserGroups}
+                isDisabled={isLoading(`saveUserGroups_${selectedUserForGroup.username}`)}
+              >
+                {isLoading(`saveUserGroups_${selectedUserForGroup.username}`) ? '配置中...' : '确认配置'}
+              </Button>
+            </>
+          ) : null
+        }
+      >
+        <div className='space-y-6'>
+          <Alert status='accent'>
+            <Alert.Content>
+              <Alert.Title>配置说明</Alert.Title>
+              <Alert.Description>
+                提示：选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
+              </Alert.Description>
+            </Alert.Content>
+          </Alert>
+          <AppFilterSelect
+            label='选择用户组'
+            value={selectedUserGroups.length > 0 ? selectedUserGroups[0] : ''}
+            options={[
+              { value: '', label: '无用户组（无限制）' },
+              ...userGroups.map((group) => ({
+                value: group.name,
+                label: `${group.name} ${group.enabledApis && group.enabledApis.length > 0 ? `(${group.enabledApis.length} 个源)` : ''}`,
+              })),
+            ]}
+            onChange={(value) => setSelectedUserGroups(value ? [value] : [])}
+          />
+          <p className='text-xs text-muted'>
+            选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
+          </p>
+        </div>
+      </AppDialog>
 
       {/* 删除用户组确认弹窗 */}
-      {showDeleteUserGroupModal && deletingUserGroup && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowDeleteUserGroupModal(false);
-          setDeletingUserGroup(null);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  确认删除用户组
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowDeleteUserGroupModal(false);
-                    setDeletingUserGroup(null);
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-red-600 dark:text-red-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z' />
-                    </svg>
-                    <span className='text-sm font-medium text-red-800 dark:text-red-300'>
-                      危险操作警告
-                    </span>
-                  </div>
-                  <p className='text-sm text-red-700 dark:text-red-400'>
-                    删除用户组 <strong>{deletingUserGroup.name}</strong> 将影响所有使用该组的用户，此操作不可恢复！
-                  </p>
-                </div>
-
-                {deletingUserGroup.affectedUsers.length > 0 ? (
-                  <div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4'>
-                    <div className='flex items-center space-x-2 mb-2'>
-                      <svg className='w-5 h-5 text-yellow-600 dark:text-yellow-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                      </svg>
-                      <span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
-                        ⚠️ 将影响 {deletingUserGroup.affectedUsers.length} 个用户：
-                      </span>
-                    </div>
+      <AppDialog
+        isOpen={showDeleteUserGroupModal && Boolean(deletingUserGroup)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowDeleteUserGroupModal(false);
+            setDeletingUserGroup(null);
+          }
+        }}
+        title='确认删除用户组'
+        footer={
+          deletingUserGroup ? (
+            <>
+              <Button
+                variant='secondary'
+                onPress={() => {
+                  setShowDeleteUserGroupModal(false);
+                  setDeletingUserGroup(null);
+                }}
+              >
+                取消
+              </Button>
+              <Button
+                variant='primary'
+                onPress={handleConfirmDeleteUserGroup}
+                isDisabled={isLoading(`userGroup_delete_${deletingUserGroup.name}`)}
+              >
+                {isLoading(`userGroup_delete_${deletingUserGroup.name}`) ? '删除中...' : '确认删除'}
+              </Button>
+            </>
+          ) : null
+        }
+      >
+        {deletingUserGroup ? (
+          <div className='space-y-4'>
+            <Alert status='danger'>
+              <Alert.Content>
+                <Alert.Title>危险操作警告</Alert.Title>
+                <Alert.Description>
+                  删除用户组 <strong>{deletingUserGroup.name}</strong> 将影响所有使用该组的用户，此操作不可恢复！
+                </Alert.Description>
+              </Alert.Content>
+            </Alert>
+            {deletingUserGroup.affectedUsers.length > 0 ? (
+              <Alert status='warning'>
+                <Alert.Content>
+                  <Alert.Title>
+                    将影响 {deletingUserGroup.affectedUsers.length} 个用户
+                  </Alert.Title>
+                  <Alert.Description>
                     <div className='space-y-1'>
                       {deletingUserGroup.affectedUsers.map((user, index) => (
-                        <div key={index} className='text-sm text-yellow-700 dark:text-yellow-300'>
+                        <div key={index}>
                           • {user.username} ({user.role})
                         </div>
                       ))}
                     </div>
-                    <p className='text-xs text-yellow-600 dark:text-yellow-400 mt-2'>
-                      这些用户的用户组将被自动移除
-                    </p>
-                  </div>
-                ) : (
-                  <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
-                    <div className='flex items-center space-x-2'>
-                      <svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                        <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M5 13l4 4L19 7' />
-                      </svg>
-                      <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
-                        ✅ 当前没有用户使用此用户组
-                      </span>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => {
-                    setShowDeleteUserGroupModal(false);
-                    setDeletingUserGroup(null);
-                  }}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleConfirmDeleteUserGroup}
-                  disabled={isLoading(`userGroup_delete_${deletingUserGroup?.name}`)}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading(`userGroup_delete_${deletingUserGroup?.name}`) ? buttonStyles.disabled : buttonStyles.danger}`}
-                >
-                  {isLoading(`userGroup_delete_${deletingUserGroup?.name}`) ? '删除中...' : '确认删除'}
-                </button>
-              </div>
-            </div>
+                    <p className='mt-2 text-xs'>这些用户的用户组将被自动移除</p>
+                  </Alert.Description>
+                </Alert.Content>
+              </Alert>
+            ) : (
+              <Alert status='success'>
+                当前没有用户使用此用户组
+              </Alert>
+            )}
           </div>
-        </div>,
-        document.body
-      )}
+        ) : null}
+      </AppDialog>
 
       {/* 删除用户确认弹窗 */}
-      {showDeleteUserModal && deletingUser && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowDeleteUserModal(false);
-          setDeletingUser(null);
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  确认删除用户
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowDeleteUserModal(false);
-                    setDeletingUser(null);
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-red-600 dark:text-red-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z' />
-                    </svg>
-                    <span className='text-sm font-medium text-red-800 dark:text-red-300'>
-                      危险操作警告
-                    </span>
-                  </div>
-                  <p className='text-sm text-red-700 dark:text-red-400'>
-                    删除用户 <strong>{deletingUser}</strong> 将同时删除其搜索历史、播放记录和收藏夹，此操作不可恢复！
-                  </p>
-                </div>
-
-                {/* 操作按钮 */}
-                <div className='flex justify-end space-x-3'>
-                  <button
-                    onClick={() => {
-                      setShowDeleteUserModal(false);
-                      setDeletingUser(null);
-                    }}
-                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                  >
-                    取消
-                  </button>
-                  <button
-                    onClick={handleConfirmDeleteUser}
-                    className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.danger}`}
-                  >
-                    确认删除
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+      <AppDialog
+        isOpen={showDeleteUserModal && Boolean(deletingUser)}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowDeleteUserModal(false);
+            setDeletingUser(null);
+          }
+        }}
+        title='确认删除用户'
+        footer={
+          <>
+            <Button
+              variant='secondary'
+              onPress={() => {
+                setShowDeleteUserModal(false);
+                setDeletingUser(null);
+              }}
+            >
+              取消
+            </Button>
+            <Button variant='primary' onPress={handleConfirmDeleteUser}>
+              确认删除
+            </Button>
+          </>
+        }
+      >
+        <Alert status='danger'>
+          <Alert.Content>
+            <Alert.Title>危险操作警告</Alert.Title>
+            <Alert.Description>
+              删除用户 <strong>{deletingUser}</strong> 将同时删除其搜索历史、播放记录和收藏夹，此操作不可恢复！
+            </Alert.Description>
+          </Alert.Content>
+        </Alert>
+      </AppDialog>
 
       {/* 批量设置用户组弹窗 */}
-      {showBatchUserGroupModal && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => {
-          setShowBatchUserGroupModal(false);
-          setSelectedUserGroup('');
-        }}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  批量设置用户组
-                </h3>
-                <button
-                  onClick={() => {
-                    setShowBatchUserGroupModal(false);
-                    setSelectedUserGroup('');
-                  }}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4 mb-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-blue-600 dark:text-blue-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                    </svg>
-                    <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>
-                      批量操作说明
-                    </span>
-                  </div>
-                  <p className='text-sm text-blue-700 dark:text-blue-400'>
-                    将为选中的 <strong>{selectedUsers.size} 个用户</strong> 设置用户组，选择"无用户组"为无限制
-                  </p>
-                </div>
-
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-                    选择用户组：
-                  </label>
-                  <select
-                    onChange={(e) => setSelectedUserGroup(e.target.value)}
-                    className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors'
-                    value={selectedUserGroup}
-                  >
-                    <option value=''>无用户组（无限制）</option>
-                    {userGroups.map((group) => (
-                      <option key={group.name} value={group.name}>
-                        {group.name} {group.enabledApis && group.enabledApis.length > 0 ? `(${group.enabledApis.length} 个源)` : ''}
-                      </option>
-                    ))}
-                  </select>
-                  <p className='mt-2 text-xs text-gray-500 dark:text-gray-400'>
-                    选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
-                  </p>
-                </div>
-              </div>
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => {
-                    setShowBatchUserGroupModal(false);
-                    setSelectedUserGroup('');
-                  }}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={() => handleBatchSetUserGroup(selectedUserGroup)}
-                  disabled={isLoading('batchSetUserGroup')}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading('batchSetUserGroup') ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  {isLoading('batchSetUserGroup') ? '设置中...' : '确认设置'}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+      <AppDialog
+        isOpen={showBatchUserGroupModal}
+        onOpenChange={(open) => {
+          if (!open) {
+            setShowBatchUserGroupModal(false);
+            setSelectedUserGroup('');
+          }
+        }}
+        title='批量设置用户组'
+        footer={
+          <>
+            <Button
+              variant='secondary'
+              onPress={() => {
+                setShowBatchUserGroupModal(false);
+                setSelectedUserGroup('');
+              }}
+            >
+              取消
+            </Button>
+            <Button
+              variant='primary'
+              onPress={() => handleBatchSetUserGroup(selectedUserGroup)}
+              isDisabled={isLoading('batchSetUserGroup')}
+            >
+              {isLoading('batchSetUserGroup') ? '设置中...' : '确认设置'}
+            </Button>
+          </>
+        }
+      >
+        <div className='space-y-6'>
+          <Alert status='accent'>
+            <Alert.Content>
+              <Alert.Title>批量操作说明</Alert.Title>
+              <Alert.Description>
+                将为选中的 <strong>{selectedUsers.size} 个用户</strong> 设置用户组，选择"无用户组"为无限制
+              </Alert.Description>
+            </Alert.Content>
+          </Alert>
+          <AppFilterSelect
+            label='选择用户组'
+            value={selectedUserGroup}
+            options={[
+              { value: '', label: '无用户组（无限制）' },
+              ...userGroups.map((group) => ({
+                value: group.name,
+                label: `${group.name} ${group.enabledApis && group.enabledApis.length > 0 ? `(${group.enabledApis.length} 个源)` : ''}`,
+              })),
+            ]}
+            onChange={setSelectedUserGroup}
+          />
+          <p className='text-xs text-muted'>
+            选择"无用户组"为无限制，选择特定用户组将限制用户只能访问该用户组允许的采集源
+          </p>
+        </div>
+      </AppDialog>
 
       {/* 通用弹窗组件 */}
       <AlertModal
@@ -2756,14 +2554,14 @@ const VideoSourceConfig = ({
       case 'validating':
         return {
           text: '检测中',
-          className: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300',
+          className: 'bg-accent/10 text-accent',
           icon: '⟳',
           message: result.message
         };
       case 'valid':
         return {
           text: '有效',
-          className: 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300',
+          className: 'bg-accent/10 text-accent',
           icon: '✓',
           message: result.message
         };
@@ -2797,106 +2595,97 @@ const VideoSourceConfig = ({
     } as React.CSSProperties;
 
     return (
-      <tr
+      <Table.Row
         ref={setNodeRef}
         style={style}
-        className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors select-none'
+        id={source.key}
+        className='select-none'
       >
-        <td
-          className='px-2 py-4 cursor-grab text-gray-400'
+        <Table.Cell
+          className='cursor-grab text-muted'
           style={{ touchAction: 'none' }}
           {...attributes}
           {...listeners}
         >
           <GripVertical size={16} />
-        </td>
-        <td className='px-2 py-4 text-center'>
-          <input
-            type='checkbox'
-            checked={selectedSources.has(source.key)}
-            onChange={(e) => handleSelectSource(source.key, e.target.checked)}
-            className='w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+        </Table.Cell>
+        <Table.Cell className='text-center'>
+          <AdminCheckbox
+            ariaLabel={`选择视频源 ${source.name}`}
+            isSelected={selectedSources.has(source.key)}
+            onChange={(selected) => handleSelectSource(source.key, selected)}
           />
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
+        </Table.Cell>
+        <Table.Cell>
           {source.name}
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
+        </Table.Cell>
+        <Table.Cell>
           {source.key}
-        </td>
-        <td
-          className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[12rem] truncate'
-          title={source.api}
-        >
-          {source.api}
-        </td>
-        <td
-          className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[8rem] truncate'
-          title={source.detail || '-'}
-        >
-          {source.detail || '-'}
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap max-w-[1rem]'>
-          <span
-            className={`px-2 py-1 text-xs rounded-full ${!source.disabled
-              ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
-              : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
-              }`}
-          >
-            {!source.disabled ? '启用中' : '已禁用'}
+        </Table.Cell>
+        <Table.Cell className='max-w-[12rem]'>
+          <span className='block truncate' title={source.api}>
+            {source.api}
           </span>
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap max-w-[1rem]'>
+        </Table.Cell>
+        <Table.Cell className='max-w-[8rem]'>
+          <span className='block truncate' title={source.detail || '-'}>
+            {source.detail || '-'}
+          </span>
+        </Table.Cell>
+        <Table.Cell>
+          <AdminChip color={!source.disabled ? 'success' : 'danger'}>
+            {!source.disabled ? '启用中' : '已禁用'}
+          </AdminChip>
+        </Table.Cell>
+        <Table.Cell>
           {(() => {
             const status = getValidationStatus(source.key);
             if (!status) {
               return (
-                <span className='px-2 py-1 text-xs rounded-full bg-gray-100 dark:bg-gray-900/20 text-gray-600 dark:text-gray-400'>
-                  未检测
-                </span>
+                <AdminChip>未检测</AdminChip>
               );
             }
             return (
-              <span className={`px-2 py-1 text-xs rounded-full ${status.className}`} title={status.message}>
+              <AdminChip color={status.text === '无效' ? 'danger' : status.text === '无法搜索' ? 'warning' : 'success'}>
                 {status.icon} {status.text}
-              </span>
+              </AdminChip>
             );
           })()}
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
-          <button
-            onClick={() => handleToggleEnable(source.key)}
-            disabled={isLoading(`toggleSource_${source.key}`)}
-            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${!source.disabled
-              ? buttonStyles.roundedDanger
-              : buttonStyles.roundedSuccess
-              } transition-colors ${isLoading(`toggleSource_${source.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+        </Table.Cell>
+        <Table.Cell>
+          <div className='flex justify-end gap-2'>
+          <Button
+            size='sm'
+            variant={!source.disabled ? 'danger-soft' : 'secondary'}
+            onPress={() => handleToggleEnable(source.key)}
+            isDisabled={isLoading(`toggleSource_${source.key}`)}
           >
             {!source.disabled ? '禁用' : '启用'}
-          </button>
-          <button
-            onClick={() => {
+          </Button>
+          <Button
+            size='sm'
+            variant='secondary'
+            onPress={() => {
               setEditingSource(source);
               // 清除之前的检测结果
               setSingleValidationResult({ status: null, message: '' });
               setIsSingleValidating(false);
             }}
-            disabled={isLoading(`editSource_${source.key}`)}
-            className={`${buttonStyles.roundedPrimary} ${isLoading(`editSource_${source.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
-            title='编辑此视频源'
+            isDisabled={isLoading(`editSource_${source.key}`)}
           >
             编辑
-          </button>
-          <button
-            onClick={() => handleDelete(source.key)}
-            disabled={isLoading(`deleteSource_${source.key}`)}
-            className={`${buttonStyles.roundedSecondary} ${isLoading(`deleteSource_${source.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
-            title='删除此视频源'
+          </Button>
+          <Button
+            size='sm'
+            variant='danger-soft'
+            onPress={() => handleDelete(source.key)}
+            isDisabled={isLoading(`deleteSource_${source.key}`)}
           >
             删除
-          </button>
-        </td>
-      </tr>
+          </Button>
+          </div>
+        </Table.Cell>
+      </Table.Row>
     );
   };
 
@@ -2995,61 +2784,62 @@ const VideoSourceConfig = ({
                   <span className='sm:hidden'>已选 {selectedSources.size}</span>
                   <span className='hidden sm:inline'>已选择 {selectedSources.size} 个视频源</span>
                 </span>
-                <button
-                  onClick={() => handleBatchOperation('batch_enable')}
-                  disabled={isLoading('batchSource_batch_enable')}
-                  className={`px-3 py-1 text-sm ${isLoading('batchSource_batch_enable') ? buttonStyles.disabled : buttonStyles.success}`}
+                <Button
+                  size='sm'
+                  variant='primary'
+                  onPress={() => handleBatchOperation('batch_enable')}
+                  isDisabled={isLoading('batchSource_batch_enable')}
                 >
                   {isLoading('batchSource_batch_enable') ? '启用中...' : '批量启用'}
-                </button>
-                <button
-                  onClick={() => handleBatchOperation('batch_disable')}
-                  disabled={isLoading('batchSource_batch_disable')}
-                  className={`px-3 py-1 text-sm ${isLoading('batchSource_batch_disable') ? buttonStyles.disabled : buttonStyles.warning}`}
+                </Button>
+                <Button
+                  size='sm'
+                  variant='secondary'
+                  onPress={() => handleBatchOperation('batch_disable')}
+                  isDisabled={isLoading('batchSource_batch_disable')}
                 >
                   {isLoading('batchSource_batch_disable') ? '禁用中...' : '批量禁用'}
-                </button>
-                <button
-                  onClick={() => handleBatchOperation('batch_delete')}
-                  disabled={isLoading('batchSource_batch_delete')}
-                  className={`px-3 py-1 text-sm ${isLoading('batchSource_batch_delete') ? buttonStyles.disabled : buttonStyles.danger}`}
+                </Button>
+                <Button
+                  size='sm'
+                  variant='danger-soft'
+                  onPress={() => handleBatchOperation('batch_delete')}
+                  isDisabled={isLoading('batchSource_batch_delete')}
                 >
                   {isLoading('batchSource_batch_delete') ? '删除中...' : '批量删除'}
-                </button>
+                </Button>
               </div>
               <div className='hidden sm:block w-px h-6 bg-gray-300 dark:bg-gray-600 order-2'></div>
             </>
           )}
           <div className='flex items-center gap-2 order-1 sm:order-2'>
-            <button
-              onClick={() => setShowValidationModal(true)}
-              disabled={isValidating}
-              className={`px-3 py-1 text-sm rounded-lg transition-colors flex items-center space-x-1 ${isValidating
-                ? buttonStyles.disabled
-                : buttonStyles.primary
-                }`}
+            <Button
+              size='sm'
+              variant='primary'
+              onPress={() => setShowValidationModal(true)}
+              isDisabled={isValidating}
             >
               {isValidating ? (
                 <>
-                  <div className='w-3 h-3 border border-white border-t-transparent rounded-full animate-spin'></div>
                   <span>检测中...</span>
                 </>
               ) : (
                 '有效性检测'
               )}
-            </button>
-            <button
-              onClick={() => {
+            </Button>
+            <Button
+              size='sm'
+              variant={showAddForm ? 'secondary' : 'primary'}
+              onPress={() => {
                 setShowAddForm(!showAddForm);
                 // 切换表单时清除检测结果
                 if (!showAddForm) {
                   clearNewSourceValidation();
                 }
               }}
-              className={showAddForm ? buttonStyles.secondary : buttonStyles.success}
             >
               {showAddForm ? '取消' : '添加视频源'}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
@@ -3105,7 +2895,7 @@ const VideoSourceConfig = ({
                     className={`px-2 py-1 text-xs rounded-full ${newSourceValidationResult.status === 'valid'
                       ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
                       : newSourceValidationResult.status === 'validating'
-                        ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
+                        ? 'bg-accent/10 text-accent'
                         : newSourceValidationResult.status === 'no_results'
                           ? 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300'
                           : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
@@ -3233,7 +3023,7 @@ const VideoSourceConfig = ({
                       className={`px-2 py-1 text-xs rounded-full ${singleValidationResult.status === 'valid'
                         ? 'bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-300'
                         : singleValidationResult.status === 'validating'
-                          ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
+                          ? 'bg-accent/10 text-accent'
                           : singleValidationResult.status === 'no_results'
                             ? 'bg-yellow-100 dark:bg-yellow-900/20 text-yellow-800 dark:text-yellow-300'
                             : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
@@ -3294,42 +3084,38 @@ const VideoSourceConfig = ({
 
 
       {/* 视频源表格 */}
-      <div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative' data-table="source-list">
-        <table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
-          <thead className='bg-gray-50 dark:bg-gray-900 sticky top-0 z-10'>
-            <tr>
-              <th className='w-8' />
-              <th className='w-12 px-2 py-3 text-center'>
-                <input
-                  type='checkbox'
-                  checked={selectAll}
-                  onChange={(e) => handleSelectAll(e.target.checked)}
-                  className='w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
+      <AdminTable ariaLabel='视频源列表' minWidth='min-w-[1100px]'>
+          <Table.Header>
+              <Table.Column className='w-8' />
+              <Table.Column className='w-12 text-center'>
+                <AdminCheckbox
+                  ariaLabel='选择全部视频源'
+                  isSelected={selectAll}
+                  onChange={handleSelectAll}
                 />
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column isRowHeader>
                 名称
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 Key
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 API 地址
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 Detail 地址
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 状态
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 有效性
-              </th>
-              <th className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column className='text-right'>
                 操作
-              </th>
-            </tr>
-          </thead>
+              </Table.Column>
+          </Table.Header>
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
@@ -3341,68 +3127,61 @@ const VideoSourceConfig = ({
               items={sources.map((s) => s.key)}
               strategy={verticalListSortingStrategy}
             >
-              <tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
+              <Table.Body>
                 {sources.map((source) => (
                   <DraggableRow key={source.key} source={source} />
                 ))}
-              </tbody>
+              </Table.Body>
             </SortableContext>
           </DndContext>
-        </table>
-      </div>
+      </AdminTable>
 
       {/* 保存排序按钮 */}
       {orderChanged && (
         <div className='flex justify-end'>
-          <button
-            onClick={handleSaveOrder}
-            disabled={isLoading('saveSourceOrder')}
-            className={`px-3 py-1.5 text-sm ${isLoading('saveSourceOrder') ? buttonStyles.disabled : buttonStyles.primary}`}
+          <Button
+            size='sm'
+            variant='primary'
+            onPress={handleSaveOrder}
+            isDisabled={isLoading('saveSourceOrder')}
           >
             {isLoading('saveSourceOrder') ? '保存中...' : '保存排序'}
-          </button>
+          </Button>
         </div>
       )}
 
       {/* 有效性检测弹窗 */}
-      {showValidationModal && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50' onClick={() => setShowValidationModal(false)}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg p-6 w-full max-w-md mx-4' onClick={(e) => e.stopPropagation()}>
-            <h3 className='text-lg font-medium text-gray-900 dark:text-gray-100 mb-4'>
-              视频源有效性检测
-            </h3>
-            <p className='text-sm text-gray-600 dark:text-gray-400 mb-4'>
-              请输入检测用的搜索关键词
-            </p>
-            <div className='space-y-4'>
-              <input
-                type='text'
-                placeholder='请输入搜索关键词'
-                value={searchKeyword}
-                onChange={(e) => setSearchKeyword(e.target.value)}
-                className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
-                onKeyPress={(e) => e.key === 'Enter' && handleValidateSources()}
-              />
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => setShowValidationModal(false)}
-                  className='px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors'
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleValidateSources}
-                  disabled={!searchKeyword.trim()}
-                  className={`px-4 py-2 ${!searchKeyword.trim() ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  开始检测
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+      <AppDialog
+        isOpen={showValidationModal}
+        onOpenChange={setShowValidationModal}
+        title='视频源有效性检测'
+        description='请输入检测用的搜索关键词'
+        footer={
+          <>
+            <Button variant='secondary' onPress={() => setShowValidationModal(false)}>
+              取消
+            </Button>
+            <Button
+              variant='primary'
+              onPress={handleValidateSources}
+              isDisabled={!searchKeyword.trim()}
+            >
+              开始检测
+            </Button>
+          </>
+        }
+      >
+        <TextField>
+          <Label>搜索关键词</Label>
+          <Input
+            type='text'
+            placeholder='请输入搜索关键词'
+            value={searchKeyword}
+            onChange={(e) => setSearchKeyword(e.target.value)}
+            onKeyDown={(e) => e.key === 'Enter' && handleValidateSources()}
+          />
+        </TextField>
+      </AppDialog>
 
       {/* 通用弹窗组件 */}
       <AlertModal
@@ -3416,51 +3195,28 @@ const VideoSourceConfig = ({
       />
 
       {/* 批量操作确认弹窗 */}
-      {confirmModal.isOpen && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={confirmModal.onCancel}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-4'>
-                <h3 className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
-                  {confirmModal.title}
-                </h3>
-                <button
-                  onClick={confirmModal.onCancel}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-5 h-5' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <p className='text-sm text-gray-600 dark:text-gray-400'>
-                  {confirmModal.message}
-                </p>
-              </div>
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={confirmModal.onCancel}
-                  className={`px-4 py-2 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={confirmModal.onConfirm}
-                  disabled={isLoading('batchSource_batch_enable') || isLoading('batchSource_batch_disable') || isLoading('batchSource_batch_delete')}
-                  className={`px-4 py-2 text-sm font-medium ${isLoading('batchSource_batch_enable') || isLoading('batchSource_batch_disable') || isLoading('batchSource_batch_delete') ? buttonStyles.disabled : buttonStyles.primary}`}
-                >
-                  {isLoading('batchSource_batch_enable') || isLoading('batchSource_batch_disable') || isLoading('batchSource_batch_delete') ? '操作中...' : '确认'}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+      <AppDialog
+        isOpen={confirmModal.isOpen}
+        onOpenChange={(open) => {
+          if (!open) confirmModal.onCancel();
+        }}
+        title={confirmModal.title}
+        description={confirmModal.message}
+        footer={
+          <>
+            <Button variant='secondary' onPress={confirmModal.onCancel}>
+              取消
+            </Button>
+            <Button
+              variant='primary'
+              onPress={confirmModal.onConfirm}
+              isDisabled={isLoading('batchSource_batch_enable') || isLoading('batchSource_batch_disable') || isLoading('batchSource_batch_delete')}
+            >
+              {isLoading('batchSource_batch_enable') || isLoading('batchSource_batch_disable') || isLoading('batchSource_batch_delete') ? '操作中...' : '确认'}
+            </Button>
+          </>
+        }
+      />
     </div>
   );
 };
@@ -3604,71 +3360,62 @@ const CategoryConfig = ({
     } as React.CSSProperties;
 
     return (
-      <tr
+      <Table.Row
         ref={setNodeRef}
         style={style}
-        className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors select-none'
+        id={`${category.query}:${category.type}`}
+        className='select-none'
       >
-        <td
-          className="px-2 py-4 cursor-grab text-gray-400"
+        <Table.Cell
+          className="cursor-grab text-muted"
           style={{ touchAction: 'none' }}
           {...{ ...attributes, ...listeners }}
         >
           <GripVertical size={16} />
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
+        </Table.Cell>
+        <Table.Cell>
           {category.name || '-'}
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
-          <span
-            className={`px-2 py-1 text-xs rounded-full ${category.type === 'movie'
-              ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
-              : 'bg-purple-100 dark:bg-purple-900/20 text-purple-800 dark:text-purple-300'
-              }`}
-          >
+        </Table.Cell>
+        <Table.Cell>
+          <AdminChip color={category.type === 'movie' ? 'accent' : 'default'}>
             {category.type === 'movie' ? '电影' : '电视剧'}
+          </AdminChip>
+        </Table.Cell>
+        <Table.Cell className='max-w-[12rem]'>
+          <span className='block truncate' title={category.query}>
+            {category.query}
           </span>
-        </td>
-        <td
-          className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[12rem] truncate'
-          title={category.query}
-        >
-          {category.query}
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap max-w-[1rem]'>
-          <span
-            className={`px-2 py-1 text-xs rounded-full ${!category.disabled
-              ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
-              : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
-              }`}
-          >
+        </Table.Cell>
+        <Table.Cell>
+          <AdminChip color={!category.disabled ? 'success' : 'danger'}>
             {!category.disabled ? '启用中' : '已禁用'}
-          </span>
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
-          <button
-            onClick={() =>
+          </AdminChip>
+        </Table.Cell>
+        <Table.Cell>
+          <div className='flex justify-end gap-2'>
+          <Button
+            size='sm'
+            variant={!category.disabled ? 'danger-soft' : 'secondary'}
+            onPress={() =>
               handleToggleEnable(category.query, category.type)
             }
-            disabled={isLoading(`toggleCategory_${category.query}_${category.type}`)}
-            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${!category.disabled
-              ? buttonStyles.roundedDanger
-              : buttonStyles.roundedSuccess
-              } transition-colors ${isLoading(`toggleCategory_${category.query}_${category.type}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+            isDisabled={isLoading(`toggleCategory_${category.query}_${category.type}`)}
           >
             {!category.disabled ? '禁用' : '启用'}
-          </button>
+          </Button>
           {category.from !== 'config' && (
-            <button
-              onClick={() => handleDelete(category.query, category.type)}
-              disabled={isLoading(`deleteCategory_${category.query}_${category.type}`)}
-              className={`${buttonStyles.roundedSecondary} ${isLoading(`deleteCategory_${category.query}_${category.type}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+            <Button
+              size='sm'
+              variant='danger-soft'
+              onPress={() => handleDelete(category.query, category.type)}
+              isDisabled={isLoading(`deleteCategory_${category.query}_${category.type}`)}
             >
               删除
-            </button>
+            </Button>
           )}
-        </td>
-      </tr>
+          </div>
+        </Table.Cell>
+      </Table.Row>
     );
   };
 
@@ -3687,84 +3434,90 @@ const CategoryConfig = ({
         <h4 className='text-sm font-medium text-gray-700 dark:text-gray-300'>
           自定义分类列表
         </h4>
-        <button
-          onClick={() => setShowAddForm(!showAddForm)}
-          className={`px-3 py-1 text-sm rounded-lg transition-colors ${showAddForm ? buttonStyles.secondary : buttonStyles.success}`}
+        <Button
+          size='sm'
+          variant={showAddForm ? 'secondary' : 'primary'}
+          onPress={() => setShowAddForm(!showAddForm)}
         >
           {showAddForm ? '取消' : '添加分类'}
-        </button>
+        </Button>
       </div>
 
       {showAddForm && (
-        <div className='p-4 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700 space-y-4'>
+        <Card variant='secondary' className='p-4'>
+        <div className='space-y-4'>
           <div className='grid grid-cols-1 sm:grid-cols-2 gap-4'>
-            <input
-              type='text'
-              placeholder='分类名称'
-              value={newCategory.name}
-              onChange={(e) =>
-                setNewCategory((prev) => ({ ...prev, name: e.target.value }))
-              }
-              className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
-            />
-            <select
+            <TextField fullWidth>
+              <Label>分类名称</Label>
+              <Input
+                type='text'
+                placeholder='分类名称'
+                value={newCategory.name}
+                onChange={(e) =>
+                  setNewCategory((prev) => ({ ...prev, name: e.target.value }))
+                }
+              />
+            </TextField>
+            <AppFilterSelect
+              label='类型'
               value={newCategory.type}
-              onChange={(e) =>
+              options={[
+                { label: '电影', value: 'movie' },
+                { label: '电视剧', value: 'tv' },
+              ]}
+              onChange={(value) =>
                 setNewCategory((prev) => ({
                   ...prev,
-                  type: e.target.value as 'movie' | 'tv',
+                  type: value as 'movie' | 'tv',
                 }))
               }
-              className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
-            >
-              <option value='movie'>电影</option>
-              <option value='tv'>电视剧</option>
-            </select>
-            <input
-              type='text'
-              placeholder='搜索关键词'
-              value={newCategory.query}
-              onChange={(e) =>
-                setNewCategory((prev) => ({ ...prev, query: e.target.value }))
-              }
-              className='px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100'
             />
+            <TextField fullWidth>
+              <Label>搜索关键词</Label>
+              <Input
+                type='text'
+                placeholder='搜索关键词'
+                value={newCategory.query}
+                onChange={(e) =>
+                  setNewCategory((prev) => ({ ...prev, query: e.target.value }))
+                }
+              />
+            </TextField>
           </div>
           <div className='flex justify-end'>
-            <button
-              onClick={handleAddCategory}
-              disabled={!newCategory.name || !newCategory.query || isLoading('addCategory')}
-              className={`w-full sm:w-auto px-4 py-2 ${!newCategory.name || !newCategory.query || isLoading('addCategory') ? buttonStyles.disabled : buttonStyles.success}`}
+            <Button
+              className='w-full sm:w-auto'
+              variant='primary'
+              onPress={handleAddCategory}
+              isDisabled={!newCategory.name || !newCategory.query || isLoading('addCategory')}
             >
               {isLoading('addCategory') ? '添加中...' : '添加'}
-            </button>
+            </Button>
           </div>
         </div>
+        </Card>
       )}
 
       {/* 分类表格 */}
-      <div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative'>
-        <table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
-          <thead className='bg-gray-50 dark:bg-gray-900 sticky top-0 z-10'>
-            <tr>
-              <th className='w-8' />
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+      <AdminTable ariaLabel='分类列表'>
+          <Table.Header>
+              <Table.Column className='w-8' />
+              <Table.Column isRowHeader>
                 分类名称
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 类型
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 搜索关键词
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 状态
-              </th>
-              <th className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column className='text-right'>
                 操作
-              </th>
-            </tr>
-          </thead>
+              </Table.Column>
+          </Table.Header>
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
@@ -3776,29 +3529,29 @@ const CategoryConfig = ({
               items={categories.map((c) => `${c.query}:${c.type}`)}
               strategy={verticalListSortingStrategy}
             >
-              <tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
+              <Table.Body>
                 {categories.map((category) => (
                   <DraggableRow
                     key={`${category.query}:${category.type}`}
                     category={category}
                   />
                 ))}
-              </tbody>
+              </Table.Body>
             </SortableContext>
           </DndContext>
-        </table>
-      </div>
+      </AdminTable>
 
       {/* 保存排序按钮 */}
       {orderChanged && (
         <div className='flex justify-end'>
-          <button
-            onClick={handleSaveOrder}
-            disabled={isLoading('saveCategoryOrder')}
-            className={`px-3 py-1.5 text-sm ${isLoading('saveCategoryOrder') ? buttonStyles.disabled : buttonStyles.primary}`}
+          <Button
+            size='sm'
+            variant='primary'
+            onPress={handleSaveOrder}
+            isDisabled={isLoading('saveCategoryOrder')}
           >
             {isLoading('saveCategoryOrder') ? '保存中...' : '保存排序'}
-          </button>
+          </Button>
         </div>
       )}
 
@@ -3919,120 +3672,81 @@ const ConfigFileComponent = ({ config, refreshConfig }: { config: AdminConfig |
   return (
     <div className='space-y-4'>
       {/* 配置订阅区域 */}
-      <div className='bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 shadow-sm'>
-        <div className='flex items-center justify-between mb-6'>
-          <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-            配置订阅
-          </h3>
-          <div className='text-sm text-gray-500 dark:text-gray-400 px-3 py-1.5 rounded-full'>
+      <Card variant='default'>
+        <Card.Header className='flex items-center justify-between gap-4'>
+          <Card.Title>配置订阅</Card.Title>
+          <Card.Description className='text-right'>
             最后更新: {lastCheckTime ? new Date(lastCheckTime).toLocaleString('zh-CN') : '从未更新'}
-          </div>
-        </div>
-
-        <div className='space-y-6'>
-          {/* 订阅URL输入 */}
-          <div>
-            <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3'>
-              订阅URL
-            </label>
-            <input
-              type='url'
+          </Card.Description>
+        </Card.Header>
+        <Card.Content className='space-y-6'>
+          <TextField fullWidth type='url'>
+            <Label>订阅URL</Label>
+            <Input
               value={subscriptionUrl}
               onChange={(e) => setSubscriptionUrl(e.target.value)}
               placeholder='https://example.com/config.json'
-              disabled={false}
-              className='w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 shadow-sm hover:border-gray-400 dark:hover:border-gray-500'
+              variant='secondary'
             />
-            <p className='mt-2 text-xs text-gray-500 dark:text-gray-400'>
+            <p className='text-xs text-muted'>
               输入配置文件的订阅地址，要求 JSON 格式，且使用 Base58 编码
             </p>
-          </div>
+          </TextField>
 
-          {/* 拉取配置按钮 */}
-          <div className='pt-2'>
-            <button
-              onClick={handleFetchConfig}
-              disabled={isLoading('fetchConfig') || !subscriptionUrl.trim()}
-              className={`w-full px-6 py-3 rounded-lg font-medium transition-all duration-200 ${isLoading('fetchConfig') || !subscriptionUrl.trim()
-                ? buttonStyles.disabled
-                : buttonStyles.success
-                }`}
-            >
-              {isLoading('fetchConfig') ? (
-                <div className='flex items-center justify-center gap-2'>
-                  <div className='w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin'></div>
-                  拉取中…
-                </div>
-              ) : (
-                '拉取配置'
-              )}
-            </button>
-          </div>
+          <Button
+            fullWidth
+            isDisabled={isLoading('fetchConfig') || !subscriptionUrl.trim()}
+            isPending={isLoading('fetchConfig')}
+            onPress={() => void handleFetchConfig()}
+          >
+            {isLoading('fetchConfig') ? '拉取中…' : '拉取配置'}
+          </Button>
 
-          {/* 自动更新开关 */}
-          <div className='flex items-center justify-between'>
-            <div>
-              <label className='text-sm font-medium text-gray-700 dark:text-gray-300'>
-                自动更新
-              </label>
-              <p className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
-                启用后系统将定期自动拉取最新配置
-              </p>
-            </div>
-            <button
-              type='button'
-              onClick={() => setAutoUpdate(!autoUpdate)}
-              disabled={false}
-              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${autoUpdate
-                ? buttonStyles.toggleOn
-                : buttonStyles.toggleOff
-                }`}
-            >
-              <span
-                className={`inline-block h-4 w-4 transform rounded-full ${buttonStyles.toggleThumb} transition-transform ${autoUpdate
-                  ? buttonStyles.toggleThumbOn
-                  : buttonStyles.toggleThumbOff
-                  }`}
-              />
-            </button>
-          </div>
-        </div>
-      </div>
+          <AdminSettingSwitch
+            label='自动更新'
+            description='启用后系统将定期自动拉取最新配置'
+            isSelected={autoUpdate}
+            onChange={setAutoUpdate}
+          />
+        </Card.Content>
+      </Card>
 
       {/* 配置文件编辑区域 */}
-      <div className='space-y-4'>
-        <div className='relative'>
-          <textarea
-            value={configContent}
-            onChange={(e) => setConfigContent(e.target.value)}
-            rows={20}
-            placeholder='请输入配置文件内容（JSON 格式）...'
-            disabled={false}
-            className='w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono text-sm leading-relaxed resize-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 hover:border-gray-400 dark:hover:border-gray-500'
-            style={{
-              fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
-            }}
-            spellCheck={false}
-            data-gramm={false}
-          />
-        </div>
-
-        <div className='flex items-center justify-between'>
-          <div className='text-xs text-gray-500 dark:text-gray-400'>
-            支持 JSON 格式，用于配置视频源和自定义分类
+      <Card variant='default'>
+        <Card.Content className='space-y-4'>
+          <div className='space-y-2'>
+            <Label htmlFor='admin-config-file-content'>配置文件内容</Label>
+            <TextArea
+              id='admin-config-file-content'
+              aria-label='配置文件内容'
+              value={configContent}
+              onChange={(e) => setConfigContent(e.target.value)}
+              rows={20}
+              placeholder='请输入配置文件内容（JSON 格式）...'
+              className='font-mono text-sm leading-relaxed'
+              fullWidth
+              variant='secondary'
+              style={{
+                fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace'
+              }}
+              spellCheck={false}
+              data-gramm={false}
+            />
           </div>
-          <button
-            onClick={handleSave}
-            disabled={isLoading('saveConfig')}
-            className={`px-4 py-2 rounded-lg transition-colors ${isLoading('saveConfig')
-              ? buttonStyles.disabled
-              : buttonStyles.success
-              }`}
-          >
-            {isLoading('saveConfig') ? '保存中…' : '保存'}
-          </button>
-        </div>
-      </div>
+
+          <div className='flex items-center justify-between gap-4'>
+            <Card.Description>
+              支持 JSON 格式，用于配置视频源和自定义分类
+            </Card.Description>
+            <Button
+              isPending={isLoading('saveConfig')}
+              onPress={() => void handleSave()}
+            >
+              {isLoading('saveConfig') ? '保存中…' : '保存'}
+            </Button>
+          </div>
+        </Card.Content>
+      </Card>
 
       {/* 通用弹窗组件 */}
       <AlertModal
@@ -4066,11 +3780,6 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
     RequireDeviceCode: true,
   });
 
-  // 豆瓣数据源相关状态
-  const [isDoubanDropdownOpen, setIsDoubanDropdownOpen] = useState(false);
-  const [isDoubanImageProxyDropdownOpen, setIsDoubanImageProxyDropdownOpen] =
-    useState(false);
-
   // 豆瓣数据源选项
   const doubanDataSourceOptions = [
     { value: 'direct', label: '直连（服务器直接请求豆瓣）' },
@@ -4131,41 +3840,6 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
     }
   }, [config]);
 
-  // 点击外部区域关闭下拉框
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (isDoubanDropdownOpen) {
-        const target = event.target as Element;
-        if (!target.closest('[data-dropdown="douban-datasource"]')) {
-          setIsDoubanDropdownOpen(false);
-        }
-      }
-    };
-
-    if (isDoubanDropdownOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () =>
-        document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isDoubanDropdownOpen]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (isDoubanImageProxyDropdownOpen) {
-        const target = event.target as Element;
-        if (!target.closest('[data-dropdown="douban-image-proxy"]')) {
-          setIsDoubanImageProxyDropdownOpen(false);
-        }
-      }
-    };
-
-    if (isDoubanImageProxyDropdownOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () =>
-        document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isDoubanImageProxyDropdownOpen]);
-
   // 处理豆瓣数据源变化
   const handleDoubanDataSourceChange = (value: string) => {
     setSiteSettings((prev) => ({
@@ -4216,31 +3890,22 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
 
   return (
     <div className='space-y-6'>
-      {/* 站点名称 */}
-      <div>
-        <label
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-        >
-          站点名称
-        </label>
-        <input
-          type='text'
+      <TextField fullWidth>
+        <Label>站点名称</Label>
+        <Input
           value={siteSettings.SiteName}
           onChange={(e) =>
             setSiteSettings((prev) => ({ ...prev, SiteName: e.target.value }))
           }
-          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          variant='secondary'
         />
-      </div>
+      </TextField>
 
-      {/* 站点公告 */}
-      <div>
-        <label
-          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-        >
-          站点公告
-        </label>
-        <textarea
+      <div className='space-y-2'>
+        <Label htmlFor='site-announcement'>站点公告</Label>
+        <TextArea
+          id='site-announcement'
+          aria-label='站点公告'
           value={siteSettings.Announcement}
           onChange={(e) =>
             setSiteSettings((prev) => ({
@@ -4249,101 +3914,40 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
             }))
           }
           rows={3}
-          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          fullWidth
+          variant='secondary'
         />
       </div>
 
-      {/* 豆瓣数据源设置 */}
       <div className='space-y-3'>
-        <div>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        <AppFilterSelect
+          label='豆瓣数据代理'
+          value={siteSettings.DoubanProxyType}
+          options={doubanDataSourceOptions}
+          onChange={handleDoubanDataSourceChange}
+        />
+        <p className='text-xs text-muted'>选择获取豆瓣数据的方式</p>
+
+        {getThanksInfo(siteSettings.DoubanProxyType) && (
+          <Button
+            fullWidth
+            variant='ghost'
+            onPress={() =>
+              window.open(
+                getThanksInfo(siteSettings.DoubanProxyType)!.url,
+                '_blank'
+              )
+            }
           >
-            豆瓣数据代理
-          </label>
-          <div className='relative' data-dropdown='douban-datasource'>
-            {/* 自定义下拉选择框 */}
-            <button
-              type='button'
-              onClick={() => setIsDoubanDropdownOpen(!isDoubanDropdownOpen)}
-              className="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 text-left"
-            >
-              {
-                doubanDataSourceOptions.find(
-                  (option) => option.value === siteSettings.DoubanProxyType
-                )?.label
-              }
-            </button>
+            {getThanksInfo(siteSettings.DoubanProxyType)!.text}
+            <ExternalLink className='w-3.5' />
+          </Button>
+        )}
 
-            {/* 下拉箭头 */}
-            <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-              <ChevronDown
-                className={`w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200 ${isDoubanDropdownOpen ? 'rotate-180' : ''
-                  }`}
-              />
-            </div>
-
-            {/* 下拉选项列表 */}
-            {isDoubanDropdownOpen && (
-              <div className='absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                {doubanDataSourceOptions.map((option) => (
-                  <button
-                    key={option.value}
-                    type='button'
-                    onClick={() => {
-                      handleDoubanDataSourceChange(option.value);
-                      setIsDoubanDropdownOpen(false);
-                    }}
-                    className={`w-full px-3 py-2.5 text-left text-sm transition-colors duration-150 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 ${siteSettings.DoubanProxyType === option.value
-                      ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
-                      : 'text-gray-900 dark:text-gray-100'
-                      }`}
-                  >
-                    <span className='truncate'>{option.label}</span>
-                    {siteSettings.DoubanProxyType === option.value && (
-                      <Check className='w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 ml-2' />
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-          <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
-            选择获取豆瓣数据的方式
-          </p>
-
-          {/* 感谢信息 */}
-          {getThanksInfo(siteSettings.DoubanProxyType) && (
-            <div className='mt-3'>
-              <button
-                type='button'
-                onClick={() =>
-                  window.open(
-                    getThanksInfo(siteSettings.DoubanProxyType)!.url,
-                    '_blank'
-                  )
-                }
-                className='flex items-center justify-center gap-1.5 w-full px-3 text-xs text-gray-500 dark:text-gray-400 cursor-pointer'
-              >
-                <span className='font-medium'>
-                  {getThanksInfo(siteSettings.DoubanProxyType)!.text}
-                </span>
-                <ExternalLink className='w-3.5 opacity-70' />
-              </button>
-            </div>
-          )}
-        </div>
-
-        {/* 豆瓣代理地址设置 - 仅在选择自定义代理时显示 */}
         {siteSettings.DoubanProxyType === 'custom' && (
-          <div>
-            <label
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-            >
-              豆瓣代理地址
-            </label>
-            <input
-              type='text'
+          <TextField fullWidth>
+            <Label>豆瓣代理地址</Label>
+            <Input
               placeholder='例如: https://proxy.example.com/fetch?url='
               value={siteSettings.DoubanProxy}
               onChange={(e) =>
@@ -4352,110 +3956,42 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                   DoubanProxy: e.target.value,
                 }))
               }
-              className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 shadow-sm hover:border-gray-400 dark:hover:border-gray-500"
+              variant='secondary'
             />
-            <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
-              自定义代理服务器地址
-            </p>
-          </div>
+            <p className='text-xs text-muted'>自定义代理服务器地址</p>
+          </TextField>
         )}
       </div>
 
-      {/* 豆瓣图片代理设置 */}
       <div className='space-y-3'>
-        <div>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        <AppFilterSelect
+          label='豆瓣图片代理'
+          value={siteSettings.DoubanImageProxyType}
+          options={doubanImageProxyTypeOptions}
+          onChange={handleDoubanImageProxyChange}
+        />
+        <p className='text-xs text-muted'>选择获取豆瓣图片的方式</p>
+
+        {getThanksInfo(siteSettings.DoubanImageProxyType) && (
+          <Button
+            fullWidth
+            variant='ghost'
+            onPress={() =>
+              window.open(
+                getThanksInfo(siteSettings.DoubanImageProxyType)!.url,
+                '_blank'
+              )
+            }
           >
-            豆瓣图片代理
-          </label>
-          <div className='relative' data-dropdown='douban-image-proxy'>
-            {/* 自定义下拉选择框 */}
-            <button
-              type='button'
-              onClick={() =>
-                setIsDoubanImageProxyDropdownOpen(
-                  !isDoubanImageProxyDropdownOpen
-                )
-              }
-              className="w-full px-3 py-2.5 pr-10 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm hover:border-gray-400 dark:hover:border-gray-500 text-left"
-            >
-              {
-                doubanImageProxyTypeOptions.find(
-                  (option) => option.value === siteSettings.DoubanImageProxyType
-                )?.label
-              }
-            </button>
+            {getThanksInfo(siteSettings.DoubanImageProxyType)!.text}
+            <ExternalLink className='w-3.5' />
+          </Button>
+        )}
 
-            {/* 下拉箭头 */}
-            <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-              <ChevronDown
-                className={`w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform duration-200 ${isDoubanImageProxyDropdownOpen ? 'rotate-180' : ''
-                  }`}
-              />
-            </div>
-
-            {/* 下拉选项列表 */}
-            {isDoubanImageProxyDropdownOpen && (
-              <div className='absolute z-50 w-full mt-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                {doubanImageProxyTypeOptions.map((option) => (
-                  <button
-                    key={option.value}
-                    type='button'
-                    onClick={() => {
-                      handleDoubanImageProxyChange(option.value);
-                      setIsDoubanImageProxyDropdownOpen(false);
-                    }}
-                    className={`w-full px-3 py-2.5 text-left text-sm transition-colors duration-150 flex items-center justify-between hover:bg-gray-100 dark:hover:bg-gray-700 ${siteSettings.DoubanImageProxyType === option.value
-                      ? 'bg-blue-50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400'
-                      : 'text-gray-900 dark:text-gray-100'
-                      }`}
-                  >
-                    <span className='truncate'>{option.label}</span>
-                    {siteSettings.DoubanImageProxyType === option.value && (
-                      <Check className='w-4 h-4 text-blue-600 dark:text-blue-400 flex-shrink-0 ml-2' />
-                    )}
-                  </button>
-                ))}
-              </div>
-            )}
-          </div>
-          <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
-            选择获取豆瓣图片的方式
-          </p>
-
-          {/* 感谢信息 */}
-          {getThanksInfo(siteSettings.DoubanImageProxyType) && (
-            <div className='mt-3'>
-              <button
-                type='button'
-                onClick={() =>
-                  window.open(
-                    getThanksInfo(siteSettings.DoubanImageProxyType)!.url,
-                    '_blank'
-                  )
-                }
-                className='flex items-center justify-center gap-1.5 w-full px-3 text-xs text-gray-500 dark:text-gray-400 cursor-pointer'
-              >
-                <span className='font-medium'>
-                  {getThanksInfo(siteSettings.DoubanImageProxyType)!.text}
-                </span>
-                <ExternalLink className='w-3.5 opacity-70' />
-              </button>
-            </div>
-          )}
-        </div>
-
-        {/* 豆瓣代理地址设置 - 仅在选择自定义代理时显示 */}
         {siteSettings.DoubanImageProxyType === 'custom' && (
-          <div>
-            <label
-              className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-            >
-              豆瓣图片代理地址
-            </label>
-            <input
-              type='text'
+          <TextField fullWidth>
+            <Label>豆瓣图片代理地址</Label>
+            <Input
               placeholder='例如: https://proxy.example.com/fetch?url='
               value={siteSettings.DoubanImageProxy}
               onChange={(e) =>
@@ -4464,22 +4000,16 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
                   DoubanImageProxy: e.target.value,
                 }))
               }
-              className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-all duration-200 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 shadow-sm hover:border-gray-400 dark:hover:border-gray-500"
+              variant='secondary'
             />
-            <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
-              自定义图片代理服务器地址
-            </p>
-          </div>
+            <p className='text-xs text-muted'>自定义图片代理服务器地址</p>
+          </TextField>
         )}
       </div>
 
-      {/* 搜索接口可拉取最大页数 */}
-      <div>
-        <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-          搜索接口可拉取最大页数
-        </label>
-        <input
-          type='number'
+      <TextField fullWidth type='number'>
+        <Label>搜索接口可拉取最大页数</Label>
+        <Input
           min={1}
           value={siteSettings.SearchDownstreamMaxPage}
           onChange={(e) =>
@@ -4488,17 +4018,13 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
               SearchDownstreamMaxPage: Number(e.target.value),
             }))
           }
-          className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+          variant='secondary'
         />
-      </div>
+      </TextField>
 
-      {/* 站点接口缓存时间 */}
-      <div>
-        <label className='block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2'>
-          站点接口缓存时间（秒）
-        </label>
-        <input
-          type='number'
+      <TextField fullWidth type='number'>
+        <Label>站点接口缓存时间（秒）</Label>
+        <Input
           min={1}
           value={siteSettings.SiteInterfaceCacheTime}
           onChange={(e) =>
@@ -4507,125 +4033,53 @@ const SiteConfigComponent = ({ config, refreshConfig }: { config: AdminConfig |
               SiteInterfaceCacheTime: Number(e.target.value),
             }))
           }
-          className='w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-transparent'
+          variant='secondary'
         />
-      </div>
+      </TextField>
 
-      {/* 启用设备码验证 */}
-      <div>
-        <div className='flex items-center justify-between'>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          >
-            启用设备码验证
-          </label>
-          <button
-            type='button'
-            onClick={() =>
-              setSiteSettings((prev) => ({
-                ...prev,
-                RequireDeviceCode: !prev.RequireDeviceCode,
-              }))
-            }
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${siteSettings.RequireDeviceCode
-              ? buttonStyles.toggleOn
-              : buttonStyles.toggleOff
-              }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full ${buttonStyles.toggleThumb} transition-transform ${siteSettings.RequireDeviceCode
-                ? buttonStyles.toggleThumbOn
-                : buttonStyles.toggleThumbOff
-                }`}
-            />
-          </button>
-        </div>
-        <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
-          启用后用户登录时需要绑定设备码，提升账户安全性。禁用后用户可以直接登录而无需绑定设备码。
-        </p>
-      </div>
+      <AdminSettingSwitch
+        label='启用设备码验证'
+        description='启用后用户登录时需要绑定设备码，提升账户安全性。禁用后用户可以直接登录而无需绑定设备码。'
+        isSelected={siteSettings.RequireDeviceCode}
+        onChange={(isSelected) =>
+          setSiteSettings((prev) => ({
+            ...prev,
+            RequireDeviceCode: isSelected,
+          }))
+        }
+      />
 
-      {/* 禁用黄色过滤器 */}
-      <div>
-        <div className='flex items-center justify-between'>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          >
-            禁用黄色过滤器
-          </label>
-          <button
-            type='button'
-            onClick={() =>
-              setSiteSettings((prev) => ({
-                ...prev,
-                DisableYellowFilter: !prev.DisableYellowFilter,
-              }))
-            }
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${siteSettings.DisableYellowFilter
-              ? buttonStyles.toggleOn
-              : buttonStyles.toggleOff
-              }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full ${buttonStyles.toggleThumb} transition-transform ${siteSettings.DisableYellowFilter
-                ? buttonStyles.toggleThumbOn
-                : buttonStyles.toggleThumbOff
-                }`}
-            />
-          </button>
-        </div>
-        <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
-          禁用黄色内容的过滤功能，允许显示所有内容。
-        </p>
-      </div>
+      <AdminSettingSwitch
+        label='禁用黄色过滤器'
+        description='禁用黄色内容的过滤功能，允许显示所有内容。'
+        isSelected={siteSettings.DisableYellowFilter}
+        onChange={(isSelected) =>
+          setSiteSettings((prev) => ({
+            ...prev,
+            DisableYellowFilter: isSelected,
+          }))
+        }
+      />
 
-      {/* 流式搜索 */}
-      <div>
-        <div className='flex items-center justify-between'>
-          <label
-            className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-          >
-            启用流式搜索
-          </label>
-          <button
-            type='button'
-            onClick={() =>
-              setSiteSettings((prev) => ({
-                ...prev,
-                FluidSearch: !prev.FluidSearch,
-              }))
-            }
-            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${siteSettings.FluidSearch
-              ? buttonStyles.toggleOn
-              : buttonStyles.toggleOff
-              }`}
-          >
-            <span
-              className={`inline-block h-4 w-4 transform rounded-full ${buttonStyles.toggleThumb} transition-transform ${siteSettings.FluidSearch
-                ? buttonStyles.toggleThumbOn
-                : buttonStyles.toggleThumbOff
-                }`}
-            />
-          </button>
-        </div>
-        <p className='mt-1 text-xs text-gray-500 dark:text-gray-400'>
-          启用后搜索结果将实时流式返回，提升用户体验。
-        </p>
-      </div>
+      <AdminSettingSwitch
+        label='启用流式搜索'
+        description='启用后搜索结果将实时流式返回，提升用户体验。'
+        isSelected={siteSettings.FluidSearch}
+        onChange={(isSelected) =>
+          setSiteSettings((prev) => ({
+            ...prev,
+            FluidSearch: isSelected,
+          }))
+        }
+      />
 
-
-      {/* 操作按钮 */}
       <div className='flex justify-end'>
-        <button
-          onClick={handleSave}
-          disabled={isLoading('saveSiteConfig')}
-          className={`px-4 py-2 ${isLoading('saveSiteConfig')
-            ? buttonStyles.disabled
-            : buttonStyles.success
-            } rounded-lg transition-colors`}
+        <Button
+          isPending={isLoading('saveSiteConfig')}
+          onPress={() => void handleSave()}
         >
           {isLoading('saveSiteConfig') ? '保存中…' : '保存'}
-        </button>
+        </Button>
       </div>
 
       {/* 通用弹窗组件 */}
@@ -4835,87 +4289,82 @@ const LiveSourceConfig = ({
     } as React.CSSProperties;
 
     return (
-      <tr
+      <Table.Row
         ref={setNodeRef}
         style={style}
-        className='hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors select-none'
+        id={liveSource.key}
+        className='select-none'
       >
-        <td
-          className='px-2 py-4 cursor-grab text-gray-400'
+        <Table.Cell
+          className='cursor-grab text-muted'
           style={{ touchAction: 'none' }}
           {...attributes}
           {...listeners}
         >
           <GripVertical size={16} />
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
+        </Table.Cell>
+        <Table.Cell>
           {liveSource.name}
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100'>
+        </Table.Cell>
+        <Table.Cell>
           {liveSource.key}
-        </td>
-        <td
-          className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[12rem] truncate'
-          title={liveSource.url}
-        >
-          {liveSource.url}
-        </td>
-        <td
-          className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[8rem] truncate'
-          title={liveSource.epg || '-'}
-        >
-          {liveSource.epg || '-'}
-        </td>
-        <td
-          className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 max-w-[8rem] truncate'
-          title={liveSource.ua || '-'}
-        >
-          {liveSource.ua || '-'}
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-100 text-center'>
-          {liveSource.channelNumber && liveSource.channelNumber > 0 ? liveSource.channelNumber : '-'}
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap max-w-[1rem]'>
-          <span
-            className={`px-2 py-1 text-xs rounded-full ${!liveSource.disabled
-              ? 'bg-blue-100 dark:bg-blue-900/20 text-blue-800 dark:text-blue-300'
-              : 'bg-red-100 dark:bg-red-900/20 text-red-800 dark:text-red-300'
-              }`}
-          >
-            {!liveSource.disabled ? '启用中' : '已禁用'}
+        </Table.Cell>
+        <Table.Cell className='max-w-[12rem]'>
+          <span className='block truncate' title={liveSource.url}>
+            {liveSource.url}
           </span>
-        </td>
-        <td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium space-x-2'>
-          <button
-            onClick={() => handleToggleEnable(liveSource.key)}
-            disabled={isLoading(`toggleLiveSource_${liveSource.key}`)}
-            className={`inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium ${!liveSource.disabled
-              ? buttonStyles.roundedDanger
-              : buttonStyles.roundedSuccess
-              } transition-colors ${isLoading(`toggleLiveSource_${liveSource.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+        </Table.Cell>
+        <Table.Cell className='max-w-[8rem]'>
+          <span className='block truncate' title={liveSource.epg || '-'}>
+            {liveSource.epg || '-'}
+          </span>
+        </Table.Cell>
+        <Table.Cell className='max-w-[8rem]'>
+          <span className='block truncate' title={liveSource.ua || '-'}>
+            {liveSource.ua || '-'}
+          </span>
+        </Table.Cell>
+        <Table.Cell className='text-center'>
+          {liveSource.channelNumber && liveSource.channelNumber > 0 ? liveSource.channelNumber : '-'}
+        </Table.Cell>
+        <Table.Cell>
+          <AdminChip color={!liveSource.disabled ? 'success' : 'danger'}>
+            {!liveSource.disabled ? '启用中' : '已禁用'}
+          </AdminChip>
+        </Table.Cell>
+        <Table.Cell>
+          <div className='flex justify-end gap-2'>
+          <Button
+            size='sm'
+            variant={!liveSource.disabled ? 'danger-soft' : 'secondary'}
+            onPress={() => handleToggleEnable(liveSource.key)}
+            isDisabled={isLoading(`toggleLiveSource_${liveSource.key}`)}
           >
             {!liveSource.disabled ? '禁用' : '启用'}
-          </button>
+          </Button>
           {liveSource.from !== 'config' && (
             <>
-              <button
-                onClick={() => setEditingLiveSource(liveSource)}
-                disabled={isLoading(`editLiveSource_${liveSource.key}`)}
-                className={`${buttonStyles.roundedPrimary} ${isLoading(`editLiveSource_${liveSource.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+              <Button
+                size='sm'
+                variant='secondary'
+                onPress={() => setEditingLiveSource(liveSource)}
+                isDisabled={isLoading(`editLiveSource_${liveSource.key}`)}
               >
                 编辑
-              </button>
-              <button
-                onClick={() => handleDelete(liveSource.key)}
-                disabled={isLoading(`deleteLiveSource_${liveSource.key}`)}
-                className={`${buttonStyles.roundedSecondary} ${isLoading(`deleteLiveSource_${liveSource.key}`) ? 'opacity-50 cursor-not-allowed' : ''}`}
+              </Button>
+              <Button
+                size='sm'
+                variant='danger-soft'
+                onPress={() => handleDelete(liveSource.key)}
+                isDisabled={isLoading(`deleteLiveSource_${liveSource.key}`)}
               >
                 删除
-              </button>
+              </Button>
             </>
           )}
-        </td>
-      </tr>
+          </div>
+        </Table.Cell>
+      </Table.Row>
     );
   };
 
@@ -4935,22 +4384,21 @@ const LiveSourceConfig = ({
           直播源列表
         </h4>
         <div className='flex items-center space-x-2'>
-          <button
-            onClick={handleRefreshLiveSources}
-            disabled={isRefreshing || isLoading('refreshLiveSources')}
-            className={`px-3 py-1.5 text-sm font-medium flex items-center space-x-2 ${isRefreshing || isLoading('refreshLiveSources')
-              ? 'bg-gray-400 dark:bg-gray-600 cursor-not-allowed text-white rounded-lg'
-              : 'bg-blue-600 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-700 text-white rounded-lg transition-colors'
-              }`}
+          <Button
+            size='sm'
+            variant='primary'
+            onPress={handleRefreshLiveSources}
+            isDisabled={isRefreshing || isLoading('refreshLiveSources')}
           >
             <span>{isRefreshing || isLoading('refreshLiveSources') ? '刷新中...' : '刷新直播源'}</span>
-          </button>
-          <button
-            onClick={() => setShowAddForm(!showAddForm)}
-            className={showAddForm ? buttonStyles.secondary : buttonStyles.success}
+          </Button>
+          <Button
+            size='sm'
+            variant={showAddForm ? 'secondary' : 'primary'}
+            onPress={() => setShowAddForm(!showAddForm)}
           >
             {showAddForm ? '取消' : '添加直播源'}
-          </button>
+          </Button>
         </div>
       </div>
 
@@ -5114,37 +4562,34 @@ const LiveSourceConfig = ({
       )}
 
       {/* 直播源表格 */}
-      <div className='border border-gray-200 dark:border-gray-700 rounded-lg max-h-[28rem] overflow-y-auto overflow-x-auto relative' data-table="live-source-list">
-        <table className='min-w-full divide-y divide-gray-200 dark:divide-gray-700'>
-          <thead className='bg-gray-50 dark:bg-gray-900 sticky top-0 z-10'>
-            <tr>
-              <th className='w-8' />
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+      <AdminTable ariaLabel='直播源列表' minWidth='min-w-[1100px]'>
+          <Table.Header>
+              <Table.Column className='w-8' />
+              <Table.Column isRowHeader>
                 名称
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 Key
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 M3U 地址
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 节目单地址
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 自定义 UA
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 频道数
-              </th>
-              <th className='px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column>
                 状态
-              </th>
-              <th className='px-6 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider'>
+              </Table.Column>
+              <Table.Column className='text-right'>
                 操作
-              </th>
-            </tr>
-          </thead>
+              </Table.Column>
+          </Table.Header>
           <DndContext
             sensors={sensors}
             collisionDetection={closestCenter}
@@ -5156,26 +4601,26 @@ const LiveSourceConfig = ({
               items={liveSources.map((s) => s.key)}
               strategy={verticalListSortingStrategy}
             >
-              <tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
+              <Table.Body>
                 {liveSources.map((liveSource) => (
                   <DraggableRow key={liveSource.key} liveSource={liveSource} />
                 ))}
-              </tbody>
+              </Table.Body>
             </SortableContext>
           </DndContext>
-        </table>
-      </div>
+      </AdminTable>
 
       {/* 保存排序按钮 */}
       {orderChanged && (
         <div className='flex justify-end'>
-          <button
-            onClick={handleSaveOrder}
-            disabled={isLoading('saveLiveSourceOrder')}
-            className={`px-3 py-1.5 text-sm ${isLoading('saveLiveSourceOrder') ? buttonStyles.disabled : buttonStyles.primary}`}
+          <Button
+            size='sm'
+            variant='primary'
+            onPress={handleSaveOrder}
+            isDisabled={isLoading('saveLiveSourceOrder')}
           >
             {isLoading('saveLiveSourceOrder') ? '保存中...' : '保存排序'}
-          </button>
+          </Button>
         </div>
       )}
 
@@ -5334,12 +4779,13 @@ function AdminPageClient() {
               管理员设置
             </h1>
             {config && role === 'owner' && (
-              <button
-                onClick={handleResetConfig}
-                className={`px-3 py-1 text-xs rounded-md transition-colors ${buttonStyles.dangerSmall}`}
+              <Button
+                size='sm'
+                variant='danger-soft'
+                onPress={handleResetConfig}
               >
                 重置配置
-              </button>
+              </Button>
             )}
           </div>
 
@@ -5480,61 +4926,34 @@ function AdminPageClient() {
       />
 
       {/* 重置配置确认弹窗 */}
-      {showResetConfigModal && createPortal(
-        <div className='fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4' onClick={() => setShowResetConfigModal(false)}>
-          <div className='bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-2xl w-full' onClick={(e) => e.stopPropagation()}>
-            <div className='p-6'>
-              <div className='flex items-center justify-between mb-6'>
-                <h3 className='text-xl font-semibold text-gray-900 dark:text-gray-100'>
-                  确认重置配置
-                </h3>
-                <button
-                  onClick={() => setShowResetConfigModal(false)}
-                  className='text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors'
-                >
-                  <svg className='w-6 h-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                    <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M6 18L18 6M6 6l12 12' />
-                  </svg>
-                </button>
-              </div>
-
-              <div className='mb-6'>
-                <div className='bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-4 mb-4'>
-                  <div className='flex items-center space-x-2 mb-2'>
-                    <svg className='w-5 h-5 text-yellow-600 dark:text-yellow-400' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                      <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' />
-                    </svg>
-                    <span className='text-sm font-medium text-yellow-800 dark:text-yellow-300'>
-                      ⚠️ 危险操作警告
-                    </span>
-                  </div>
-                  <p className='text-sm text-yellow-700 dark:text-yellow-400'>
-                    此操作将重置用户封禁和管理员设置、自定义视频源，站点配置将重置为默认值，是否继续？
-                  </p>
-                </div>
-              </div>
-
-              {/* 操作按钮 */}
-              <div className='flex justify-end space-x-3'>
-                <button
-                  onClick={() => setShowResetConfigModal(false)}
-                  className={`px-6 py-2.5 text-sm font-medium ${buttonStyles.secondary}`}
-                >
-                  取消
-                </button>
-                <button
-                  onClick={handleConfirmResetConfig}
-                  disabled={isLoading('resetConfig')}
-                  className={`px-6 py-2.5 text-sm font-medium ${isLoading('resetConfig') ? buttonStyles.disabled : buttonStyles.danger}`}
-                >
-                  {isLoading('resetConfig') ? '重置中...' : '确认重置'}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>,
-        document.body
-      )}
+      <AppDialog
+        isOpen={showResetConfigModal}
+        onOpenChange={setShowResetConfigModal}
+        title='确认重置配置'
+        footer={
+          <>
+            <Button variant='secondary' onPress={() => setShowResetConfigModal(false)}>
+              取消
+            </Button>
+            <Button
+              variant='primary'
+              onPress={handleConfirmResetConfig}
+              isDisabled={isLoading('resetConfig')}
+            >
+              {isLoading('resetConfig') ? '重置中...' : '确认重置'}
+            </Button>
+          </>
+        }
+      >
+        <Alert status='warning'>
+          <Alert.Content>
+            <Alert.Title>危险操作警告</Alert.Title>
+            <Alert.Description>
+              此操作将重置用户封禁和管理员设置、自定义视频源，站点配置将重置为默认值，是否继续？
+            </Alert.Description>
+          </Alert.Content>
+        </Alert>
+      </AppDialog>
     </PageLayout>
   );
 }
diff --git a/src/app/douban/page.tsx b/src/app/douban/page.tsx
index 8c062c3..028fbce 100644
--- a/src/app/douban/page.tsx
+++ b/src/app/douban/page.tsx
@@ -3,6 +3,7 @@
 'use client';
 
 import { useSearchParams } from 'next/navigation';
+import { Card, EmptyState, Spinner } from '@heroui/react';
 import { Suspense } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
@@ -728,7 +729,7 @@ function DoubanPageClient() {
 
           {/* 选择器组件 */}
           {type !== 'custom' ? (
-            <div className='app-filter-panel'>
+            <Card>
               <DoubanSelector
                 type={type as 'movie' | 'tv' | 'show' | 'anime'}
                 primarySelection={primarySelection}
@@ -738,9 +739,9 @@ function DoubanPageClient() {
                 onMultiLevelChange={handleMultiLevelChange}
                 onWeekdayChange={handleWeekdayChange}
               />
-            </div>
+            </Card>
           ) : (
-            <div className='app-filter-panel'>
+            <Card>
               <DoubanCustomSelector
                 customCategories={customCategories}
                 primarySelection={primarySelection}
@@ -748,7 +749,7 @@ function DoubanPageClient() {
                 onPrimaryChange={handlePrimaryChange}
                 onSecondaryChange={handleSecondaryChange}
               />
-            </div>
+            </Card>
           )}
         </div>
 
@@ -792,8 +793,8 @@ function DoubanPageClient() {
             >
               {isLoadingMore && (
                 <div className='flex items-center gap-2'>
-                  <div className='animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500'></div>
-                  <span className='text-gray-600'>加载中...</span>
+                  <Spinner size='sm' />
+                  <span className='text-muted'>加载中...</span>
                 </div>
               )}
             </div>
@@ -801,12 +802,12 @@ function DoubanPageClient() {
 
           {/* 没有更多数据提示 */}
           {!hasMore && doubanData.length > 0 && (
-            <div className='text-center text-gray-500 py-8'>已加载全部内容</div>
+            <EmptyState className='py-8'>已加载全部内容</EmptyState>
           )}
 
           {/* 空状态 */}
           {!loading && doubanData.length === 0 && (
-            <div className='text-center text-gray-500 py-8'>暂无相关内容</div>
+            <EmptyState className='py-8'>暂无相关内容</EmptyState>
           )}
         </div>
       </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 73ec563..0d23354 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -8,57 +8,57 @@
   --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --font-mono: "SFMono-Regular", "SF Mono", Consolas, "Liberation Mono", monospace;
 
-  --background: oklch(0.985 0.006 255);
-  --foreground: oklch(0.21 0.025 258);
-  --surface: oklch(0.998 0.002 255);
+  --background: oklch(0.985 0.002 286);
+  --foreground: oklch(0.19 0.006 286);
+  --surface: oklch(0.998 0.001 286);
   --surface-foreground: var(--foreground);
-  --surface-secondary: oklch(0.965 0.009 255);
+  --surface-secondary: oklch(0.955 0.004 286);
   --surface-secondary-foreground: var(--foreground);
-  --surface-tertiary: oklch(0.935 0.015 255);
+  --surface-tertiary: oklch(0.92 0.006 286);
   --surface-tertiary-foreground: var(--foreground);
-  --overlay: oklch(0.998 0.002 255 / 92%);
+  --overlay: oklch(0.998 0.001 286 / 92%);
   --overlay-foreground: var(--foreground);
-  --muted: oklch(0.53 0.032 258);
-  --border: oklch(0.85 0.018 255 / 70%);
-  --separator: oklch(0.9 0.012 255 / 72%);
-  --accent: oklch(0.59 0.19 255);
-  --accent-foreground: oklch(0.99 0.004 255);
+  --muted: oklch(0.48 0.01 286);
+  --border: oklch(0.84 0.006 286 / 70%);
+  --separator: oklch(0.89 0.004 286 / 72%);
+  --accent: oklch(0.58 0.22 16);
+  --accent-foreground: oklch(0.99 0.004 20);
   --success: oklch(0.66 0.16 150);
   --success-foreground: oklch(0.99 0.004 150);
   --warning: oklch(0.73 0.15 82);
   --warning-foreground: oklch(0.22 0.035 70);
   --danger: oklch(0.62 0.2 28);
   --danger-foreground: oklch(0.99 0.004 28);
-  --field-background: oklch(0.995 0.003 255);
+  --field-background: oklch(0.995 0.002 286);
   --field-foreground: var(--foreground);
   --field-placeholder: var(--muted);
   --field-border: var(--border);
 
-  --color-background: 248 250 252;
-  --color-foreground: 15 23 42;
+  --color-background: 250 250 250;
+  --color-foreground: 24 24 27;
   --color-surface: 255 255 255;
-  --color-surface-secondary: 241 245 249;
-  --color-surface-tertiary: 226 232 240;
+  --color-surface-secondary: 244 244 245;
+  --color-surface-tertiary: 228 228 231;
   --color-overlay: 255 255 255;
-  --color-muted: 100 116 139;
-  --color-border: 203 213 225;
-  --color-accent: 37 99 235;
-  --color-accent-strong: 29 78 216;
+  --color-muted: 113 113 122;
+  --color-border: 212 212 216;
+  --color-accent: 225 29 72;
+  --color-accent-strong: 190 18 60;
   --color-success: 22 163 74;
   --color-warning: 217 119 6;
   --color-danger: 220 38 38;
 
-  --color-primary-50: 239 246 255;
-  --color-primary-100: 219 234 254;
-  --color-primary-200: 191 219 254;
-  --color-primary-300: 147 197 253;
-  --color-primary-400: 96 165 250;
-  --color-primary-500: 59 130 246;
-  --color-primary-600: 37 99 235;
-  --color-primary-700: 29 78 216;
-  --color-primary-800: 30 64 175;
-  --color-primary-900: 30 58 138;
-  --color-dark: 15 23 42;
+  --color-primary-50: 255 241 242;
+  --color-primary-100: 255 228 230;
+  --color-primary-200: 254 205 211;
+  --color-primary-300: 253 164 175;
+  --color-primary-400: 251 113 133;
+  --color-primary-500: 244 63 94;
+  --color-primary-600: 225 29 72;
+  --color-primary-700: 190 18 60;
+  --color-primary-800: 159 18 57;
+  --color-primary-900: 136 19 55;
+  --color-dark: 24 24 27;
 
   --color-theme-bg: var(--color-background);
   --color-theme-surface: var(--color-surface);
@@ -71,60 +71,47 @@
   --color-theme-error: var(--color-danger);
   --color-theme-info: var(--color-accent);
 
-  /* Temporary compatibility aliases. They render as HeroUI Clean colors. */
-  --a2-canvas: var(--color-background);
-  --a2-stage: var(--color-surface);
-  --a2-rail: var(--color-surface-secondary);
-  --a2-text: var(--color-foreground);
-  --a2-text-soft: 51 65 85;
-  --a2-text-muted: var(--color-muted);
-  --a2-copper: var(--color-accent);
-  --a2-copper-strong: var(--color-accent-strong);
-  --a2-line: var(--color-border);
-  --a2-signal-stable: var(--color-success);
-  --a2-signal-warn: var(--color-warning);
-  --a2-signal-error: var(--color-danger);
 }
 
 .dark {
   color-scheme: dark;
 
-  --background: oklch(0.18 0.022 258);
-  --foreground: oklch(0.94 0.012 255);
-  --surface: oklch(0.225 0.025 258);
+  --background: oklch(0.15 0.006 286);
+  --foreground: oklch(0.94 0.006 286);
+  --surface: oklch(0.205 0.008 286);
   --surface-foreground: var(--foreground);
-  --surface-secondary: oklch(0.27 0.028 258);
+  --surface-secondary: oklch(0.255 0.01 286);
   --surface-secondary-foreground: var(--foreground);
-  --surface-tertiary: oklch(0.32 0.031 258);
+  --surface-tertiary: oklch(0.31 0.012 286);
   --surface-tertiary-foreground: var(--foreground);
-  --overlay: oklch(0.22 0.025 258 / 94%);
+  --overlay: oklch(0.19 0.008 286 / 94%);
   --overlay-foreground: var(--foreground);
-  --muted: oklch(0.7 0.028 255);
-  --border: oklch(0.42 0.03 258 / 68%);
-  --separator: oklch(0.36 0.025 258 / 70%);
-  --accent: oklch(0.69 0.17 255);
-  --accent-foreground: oklch(0.16 0.03 258);
+  --muted: oklch(0.7 0.012 286);
+  --border: oklch(0.38 0.012 286 / 68%);
+  --separator: oklch(0.33 0.01 286 / 70%);
+  --accent: oklch(0.69 0.18 14);
+  --accent-foreground: oklch(0.16 0.02 14);
   --success: oklch(0.72 0.16 150);
   --success-foreground: oklch(0.14 0.025 150);
   --warning: oklch(0.78 0.15 82);
   --warning-foreground: oklch(0.18 0.035 70);
   --danger: oklch(0.7 0.18 28);
   --danger-foreground: oklch(0.99 0.004 28);
-  --field-background: oklch(0.25 0.025 258);
+  --field-background: oklch(0.235 0.009 286);
   --field-foreground: var(--foreground);
   --field-placeholder: var(--muted);
   --field-border: var(--border);
 
-  --color-background: 15 23 42;
-  --color-foreground: 241 245 249;
-  --color-surface: 30 41 59;
-  --color-surface-secondary: 51 65 85;
-  --color-surface-tertiary: 71 85 105;
-  --color-overlay: 15 23 42;
-  --color-muted: 148 163 184;
-  --color-border: 71 85 105;
-  --color-accent: 96 165 250;
-  --color-accent-strong: 147 197 253;
+  --color-background: 18 18 20;
+  --color-foreground: 244 244 245;
+  --color-surface: 31 31 35;
+  --color-surface-secondary: 39 39 42;
+  --color-surface-tertiary: 63 63 70;
+  --color-overlay: 24 24 27;
+  --color-muted: 161 161 170;
+  --color-border: 82 82 91;
+  --color-accent: 251 113 133;
+  --color-accent-strong: 253 164 175;
   --color-success: 74 222 128;
   --color-warning: 251 191 36;
   --color-danger: 248 113 113;
@@ -140,18 +127,6 @@
   --color-theme-error: var(--color-danger);
   --color-theme-info: var(--color-accent);
 
-  --a2-canvas: var(--color-background);
-  --a2-stage: var(--color-surface);
-  --a2-rail: var(--color-surface-secondary);
-  --a2-text: var(--color-foreground);
-  --a2-text-soft: 203 213 225;
-  --a2-text-muted: var(--color-muted);
-  --a2-copper: var(--color-accent);
-  --a2-copper-strong: var(--color-accent-strong);
-  --a2-line: var(--color-border);
-  --a2-signal-stable: var(--color-success);
-  --a2-signal-warn: var(--color-warning);
-  --a2-signal-error: var(--color-danger);
 }
 
 [data-theme="minimal"] {
@@ -161,8 +136,6 @@
   --color-accent-strong: 64 64 64;
   --color-theme-accent: var(--color-accent);
   --color-theme-info: var(--color-accent);
-  --a2-copper: var(--color-accent);
-  --a2-copper-strong: var(--color-accent-strong);
 }
 
 [data-theme="minimal"].dark {
@@ -172,8 +145,6 @@
   --color-accent-strong: 245 245 245;
   --color-theme-accent: var(--color-accent);
   --color-theme-info: var(--color-accent);
-  --a2-copper: var(--color-accent);
-  --a2-copper-strong: var(--color-accent-strong);
 }
 
 [data-theme="warm"] {
@@ -183,8 +154,6 @@
   --color-accent-strong: 180 83 9;
   --color-theme-accent: var(--color-accent);
   --color-theme-info: var(--color-accent);
-  --a2-copper: var(--color-accent);
-  --a2-copper-strong: var(--color-accent-strong);
 }
 
 [data-theme="warm"].dark {
@@ -194,8 +163,6 @@
   --color-accent-strong: 253 224 71;
   --color-theme-accent: var(--color-accent);
   --color-theme-info: var(--color-accent);
-  --a2-copper: var(--color-accent);
-  --a2-copper-strong: var(--color-accent-strong);
 }
 
 [data-theme="fresh"] {
@@ -205,8 +172,6 @@
   --color-accent-strong: 21 128 61;
   --color-theme-accent: var(--color-accent);
   --color-theme-info: var(--color-accent);
-  --a2-copper: var(--color-accent);
-  --a2-copper-strong: var(--color-accent-strong);
 }
 
 [data-theme="fresh"].dark {
@@ -216,8 +181,6 @@
   --color-accent-strong: 134 239 172;
   --color-theme-accent: var(--color-accent);
   --color-theme-info: var(--color-accent);
-  --a2-copper: var(--color-accent);
-  --a2-copper-strong: var(--color-accent-strong);
 }
 
 html,
@@ -296,18 +259,6 @@ body {
       transform 180ms ease;
   }
 
-  .theme-card {
-    @apply rounded-2xl border border-border/70 bg-surface shadow-sm;
-  }
-
-  .theme-button {
-    @apply rounded-xl border border-accent bg-accent px-4 py-2 font-medium text-accent-foreground hover:bg-accent-strong;
-  }
-
-  .theme-button-secondary {
-    @apply rounded-xl border border-border bg-surface px-4 py-2 font-medium text-foreground hover:bg-surface-secondary;
-  }
-
   .theme-input {
     @apply rounded-xl border border-border bg-field px-3 py-2 text-foreground placeholder:text-muted focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20;
   }
@@ -324,152 +275,6 @@ body {
     background: linear-gradient(to bottom, transparent 0%, rgb(15 23 42 / 0.74) 100%);
   }
 
-  .bg-white,
-  .bg-gray-50,
-  .bg-gray-100 {
-    background-color: rgb(var(--color-surface)) !important;
-  }
-
-  .bg-gray-200,
-  .bg-gray-300,
-  .bg-gray-700,
-  .bg-gray-800,
-  .bg-gray-900 {
-    background-color: rgb(var(--color-surface-secondary)) !important;
-  }
-
-  .bg-blue-50,
-  .bg-blue-100,
-  .bg-blue-900\/20,
-  .bg-blue-900\/30,
-  .bg-blue-900\/40,
-  .bg-purple-100,
-  .bg-purple-900\/40,
-  .from-blue-50,
-  .to-emerald-50 {
-    background-color: rgb(var(--color-accent) / 0.1) !important;
-  }
-
-  .bg-blue-500,
-  .bg-blue-600,
-  .bg-blue-700,
-  .from-blue-500,
-  .to-blue-600,
-  .from-cyan-500,
-  .to-cyan-500,
-  .via-cyan-500,
-  .via-purple-500 {
-    background-color: rgb(var(--color-accent)) !important;
-  }
-
-  .text-gray-300,
-  .text-gray-400,
-  .text-gray-500,
-  .text-gray-600 {
-    color: rgb(var(--color-muted)) !important;
-  }
-
-  .text-gray-700,
-  .text-gray-800,
-  .text-gray-900,
-  .text-blue-200,
-  .text-blue-300,
-  .text-blue-400,
-  .text-blue-500,
-  .text-blue-600,
-  .text-blue-700,
-  .text-blue-800,
-  .text-purple-200,
-  .text-purple-400,
-  .text-purple-700,
-  .text-purple-800 {
-    color: rgb(var(--color-foreground)) !important;
-  }
-
-  .border-gray-200,
-  .border-gray-300,
-  .border-gray-600,
-  .border-gray-700,
-  .border-blue-200,
-  .border-blue-700,
-  .border-blue-800 {
-    border-color: rgb(var(--color-border) / 0.7) !important;
-  }
-
-  .hover\:bg-gray-50:hover,
-  .hover\:bg-gray-100:hover,
-  .hover\:bg-gray-200:hover,
-  .hover\:bg-gray-300:hover,
-  .hover\:bg-gray-700:hover {
-    background-color: rgb(var(--color-surface-tertiary) / 0.8) !important;
-  }
-
-  .hover\:bg-blue-200:hover,
-  .hover\:bg-blue-600:hover,
-  .hover\:bg-blue-700:hover,
-  .hover\:bg-purple-200:hover {
-    background-color: rgb(var(--color-accent) / 0.16) !important;
-  }
-
-  .hover\:text-blue-500:hover,
-  .hover\:text-blue-600:hover,
-  .hover\:text-blue-700:hover,
-  .hover\:text-gray-600:hover,
-  .hover\:text-gray-800:hover {
-    color: rgb(var(--color-accent)) !important;
-  }
-
-  .focus\:ring-blue-400:focus,
-  .focus\:ring-blue-500:focus,
-  .focus\:ring-blue-400\/50:focus {
-    --tw-ring-color: rgb(var(--color-accent) / 0.22) !important;
-  }
-
-  .focus\:border-blue-500:focus {
-    border-color: rgb(var(--color-accent)) !important;
-  }
-
-  .border-t-blue-500 {
-    border-top-color: rgb(var(--color-accent)) !important;
-  }
-
-  .dark .dark\:bg-gray-600,
-  .dark .dark\:bg-gray-700,
-  .dark .dark\:bg-gray-800,
-  .dark .dark\:bg-gray-900 {
-    background-color: rgb(var(--color-surface)) !important;
-  }
-
-  .dark .dark\:bg-blue-800\/40,
-  .dark .dark\:bg-blue-900\/20,
-  .dark .dark\:bg-blue-900\/30,
-  .dark .dark\:bg-blue-900\/40,
-  .dark .dark\:bg-purple-900\/40 {
-    background-color: rgb(var(--color-accent) / 0.12) !important;
-  }
-
-  .dark .dark\:text-gray-100,
-  .dark .dark\:text-gray-200,
-  .dark .dark\:text-gray-300,
-  .dark .dark\:text-blue-200,
-  .dark .dark\:text-blue-300,
-  .dark .dark\:text-blue-400,
-  .dark .dark\:text-purple-200,
-  .dark .dark\:text-purple-400 {
-    color: rgb(var(--color-foreground)) !important;
-  }
-
-  .dark .dark\:text-gray-400,
-  .dark .dark\:text-gray-500 {
-    color: rgb(var(--color-muted)) !important;
-  }
-
-  .dark .dark\:border-gray-600,
-  .dark .dark\:border-gray-700,
-  .dark .dark\:border-blue-700,
-  .dark .dark\:border-blue-800 {
-    border-color: rgb(var(--color-border) / 0.7) !important;
-  }
 }
 
 @keyframes slide-from-top {
@@ -528,326 +333,3 @@ div[data-media-provider] video {
     display: none !important;
   }
 }
-
-@layer components {
-  .a2-icon-button {
-    @apply inline-flex h-9 w-9 items-center justify-center rounded-xl border border-border bg-surface text-muted shadow-sm hover:border-accent/40 hover:bg-surface-secondary hover:text-foreground active:translate-y-px;
-  }
-
-  .a2-tablist,
-  .a2-filter-tabs {
-    @apply inline-flex min-w-max items-center gap-2 rounded-2xl border border-border bg-surface p-1 shadow-sm;
-  }
-
-  .a2-tab,
-  .a2-filter-tab,
-  .a2-selector-trigger {
-    @apply rounded-xl border border-transparent px-3 py-2 text-sm font-medium tracking-normal text-muted hover:bg-surface-secondary hover:text-foreground;
-  }
-
-  .a2-tab-active,
-  .a2-filter-tab-active,
-  .a2-selector-trigger-active {
-    @apply border-accent/20 bg-accent/10 text-accent shadow-sm;
-  }
-
-  .a2-filter-row {
-    @apply flex flex-col gap-2 sm:flex-row sm:items-center;
-  }
-
-  .a2-filter-label {
-    @apply min-w-[56px] text-sm font-medium tracking-normal text-muted;
-  }
-
-  .a2-selector-menu {
-    @apply fixed z-[9999] flex max-h-[50vh] flex-col overflow-hidden rounded-2xl border border-border bg-overlay p-1 shadow-2xl backdrop-blur-xl;
-  }
-
-  .a2-selector-option {
-    @apply rounded-xl border border-transparent px-3 py-2 text-left text-sm text-muted hover:bg-surface-secondary hover:text-foreground;
-  }
-
-  .a2-selector-option-active {
-    @apply border-accent/20 bg-accent/10 text-accent;
-  }
-
-  .a2-field {
-    @apply w-full rounded-xl border border-border bg-field px-3 py-2.5 text-sm text-foreground placeholder:text-muted hover:border-accent/40 focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/20;
-  }
-
-  .a2-button {
-    @apply inline-flex items-center justify-center rounded-xl border border-border bg-surface px-4 py-2.5 text-sm font-medium text-foreground shadow-sm hover:border-accent/40 hover:bg-surface-secondary active:translate-y-px disabled:cursor-not-allowed disabled:opacity-50;
-  }
-
-  .a2-button-accent {
-    @apply border-accent bg-accent text-accent-foreground hover:bg-accent-strong;
-  }
-
-  .a2-button-danger {
-    @apply border-danger/30 bg-danger/10 text-danger hover:bg-danger/15;
-  }
-
-  .a2-panel {
-    @apply rounded-2xl border border-border bg-surface text-foreground shadow-xl;
-  }
-
-  .a2-kicker {
-    @apply text-xs font-medium tracking-normal text-muted;
-  }
-
-  .a2-title {
-    @apply text-balance text-2xl font-semibold tracking-normal text-foreground md:text-[2rem];
-  }
-
-  .a2-muted-copy {
-    @apply text-sm leading-7 text-muted;
-  }
-
-  .a2-link-action {
-    @apply inline-flex items-center gap-2 rounded-xl px-3 py-2 text-sm font-medium text-accent hover:bg-accent/10;
-  }
-
-  .app-filter-row {
-    @apply grid min-w-0 gap-2 sm:grid-cols-[3.75rem_minmax(0,1fr)] sm:items-center;
-  }
-
-  .app-filter-panel {
-    @apply rounded-2xl border border-border/40 bg-surface/75 p-4 shadow-sm backdrop-blur sm:p-6;
-  }
-
-  .app-filter-label {
-    @apply text-xs font-semibold uppercase tracking-normal text-muted sm:text-sm;
-  }
-
-  .app-filter-scroll {
-    @apply w-full min-w-0;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .app-filter-scroll::-webkit-scrollbar {
-    display: none;
-  }
-
-  .app-filter-dropdowns {
-    @apply flex min-w-0 flex-wrap items-center gap-2;
-  }
-
-  .app-filter-trigger {
-    @apply h-9 whitespace-nowrap rounded-xl border border-border bg-surface-secondary px-3 text-sm font-semibold text-muted shadow-none hover:border-accent/30 hover:bg-accent/10 hover:text-foreground;
-  }
-
-  .app-filter-trigger-active {
-    @apply border-accent/30 bg-accent/10 text-accent hover:text-accent;
-  }
-
-  .app-search-filter-bar {
-    @apply inline-flex max-w-full flex-wrap items-center gap-2 rounded-2xl border border-border/70 bg-surface/85 p-1.5 shadow-sm backdrop-blur;
-  }
-
-  .app-search-filter-trigger {
-    @apply h-10 max-w-[11rem] cursor-pointer whitespace-nowrap rounded-xl border border-transparent bg-transparent px-3 text-sm font-semibold tracking-normal text-muted shadow-none hover:bg-surface-secondary hover:text-foreground;
-  }
-
-  .app-search-filter-trigger-active {
-    @apply border-accent/30 bg-accent/10 text-accent hover:text-accent;
-  }
-
-  .app-search-filter-popover {
-    @apply w-[min(88vw,22rem)] rounded-2xl p-1;
-  }
-
-  .app-search-filter-scroll {
-    @apply max-h-[min(60vh,24rem)] overflow-y-auto;
-  }
-
-  .app-search-filter-menu {
-    @apply flex flex-col gap-1 p-1;
-  }
-
-  .app-search-filter-option,
-  .app-search-filter-option-active {
-    @apply min-h-10 rounded-xl border border-transparent px-3 py-2 text-sm font-medium;
-  }
-
-  .app-search-filter-option {
-    @apply text-muted hover:bg-surface-secondary hover:text-foreground;
-  }
-
-  .app-search-filter-option-active {
-    @apply border-accent/20 bg-accent/10 text-accent;
-  }
-
-  .app-search-filter-option-label {
-    @apply block min-w-0 flex-1 truncate whitespace-nowrap text-left leading-5;
-  }
-
-  .a2-rule {
-    border-color: rgb(var(--color-border) / 0.7);
-  }
-
-  .a2-data {
-    font-family: var(--font-mono);
-    font-variant-numeric: tabular-nums;
-    letter-spacing: 0;
-  }
-
-  .button {
-    border-radius: 0.75rem;
-    font-weight: 600;
-    letter-spacing: 0;
-    transition:
-      background-color 180ms ease,
-      border-color 180ms ease,
-      color 180ms ease,
-      transform 180ms ease,
-      opacity 180ms ease;
-  }
-
-  .button[data-pressed="true"],
-  .button:active {
-    transform: translateY(1px);
-  }
-
-  .button--primary {
-    background: var(--accent);
-    color: var(--accent-foreground);
-  }
-
-  .button--secondary,
-  .button--tertiary,
-  .button--outline {
-    border-color: var(--border);
-    background: color-mix(in oklab, var(--surface) 94%, transparent);
-    color: var(--foreground);
-  }
-
-  .button--ghost {
-    color: var(--muted);
-  }
-
-  .button--danger,
-  .button--danger-soft {
-    color: var(--danger);
-  }
-
-  .card,
-  .modal__container,
-  .drawer__content,
-  .dropdown__popover,
-  .popover__content,
-  .toast {
-    border: 1px solid var(--border);
-    background: color-mix(in oklab, var(--surface) 94%, transparent);
-    color: var(--foreground);
-    box-shadow: 0 18px 60px -42px color-mix(in oklab, var(--foreground) 48%, transparent);
-    backdrop-filter: blur(18px);
-  }
-
-  .card {
-    border-radius: 1rem;
-  }
-
-  .tabs__list {
-    gap: 0.25rem;
-    border: 1px solid var(--border);
-    border-radius: 1rem;
-    background: color-mix(in oklab, var(--surface) 94%, transparent);
-    padding: 0.25rem;
-  }
-
-  .tabs__tab {
-    min-height: 2.25rem;
-    border-radius: 0.75rem;
-    color: var(--muted);
-    font-size: 0.875rem;
-    font-weight: 600;
-    letter-spacing: 0;
-  }
-
-  .tabs__tab[aria-selected="true"] {
-    color: var(--accent);
-  }
-
-  .tabs__indicator {
-    border-radius: 0.75rem;
-    background: color-mix(in oklab, var(--accent) 12%, transparent);
-  }
-
-  .app-filter-tabs {
-    width: max-content;
-    max-width: 100%;
-  }
-
-  .app-filter-tabs .tabs__list {
-    width: max-content;
-    min-width: max-content;
-    height: 2.25rem;
-    min-height: 2.25rem;
-    align-items: stretch;
-    gap: 0;
-    border: 0 !important;
-    border-width: 0 !important;
-    border-bottom-width: 0 !important;
-    border-radius: 999px !important;
-    background-color: rgb(var(--color-surface-secondary) / 0.86) !important;
-    padding: 0 !important;
-    overflow: hidden;
-    backdrop-filter: blur(12px);
-  }
-
-  .app-filter-tabs .tabs__tab {
-    flex: 0 0 auto;
-    width: auto;
-    height: 100%;
-    min-width: max-content;
-    min-height: 0;
-    align-self: stretch;
-    white-space: nowrap;
-    border: 0;
-    border-radius: 999px !important;
-    padding: 0 1rem;
-    background: transparent;
-    color: var(--muted);
-    line-height: 1;
-    box-shadow: none;
-  }
-
-  .app-filter-tabs .tabs__tab:hover,
-  .app-filter-tabs .tabs__tab[data-hovered="true"] {
-    color: var(--foreground);
-  }
-
-  .app-filter-tabs .tabs__tab[aria-selected="true"] {
-    background-color: rgb(var(--color-surface)) !important;
-    color: var(--foreground) !important;
-    box-shadow: 0 8px 22px -16px color-mix(in oklab, var(--foreground) 44%, transparent);
-  }
-
-  .app-filter-tabs .tabs__separator {
-    display: none;
-  }
-
-  .app-filter-tabs .tabs__indicator {
-    display: none;
-  }
-
-  .input,
-  .textfield,
-  .select__trigger,
-  .textarea {
-    border-color: var(--field-border);
-    background: var(--field-background);
-    color: var(--field-foreground);
-  }
-
-  .table-root {
-    border-color: var(--border);
-    background: var(--surface);
-  }
-
-  .table__header,
-  .table__row {
-    border-color: var(--separator);
-  }
-}
diff --git a/src/app/live/page.tsx b/src/app/live/page.tsx
index 7f9456f..4de21cd 100644
--- a/src/app/live/page.tsx
+++ b/src/app/live/page.tsx
@@ -5,6 +5,7 @@
 import Artplayer from 'artplayer';
 import Hls from 'hls.js';
 import { Heart, Radio, Tv } from 'lucide-react';
+import { Alert, Button, Card, Chip, EmptyState, ProgressBar, ScrollShadow, Spinner, Tabs } from '@heroui/react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useRef, useState } from 'react';
 
@@ -1058,68 +1059,26 @@ function LivePageClient() {
   }, []);
 
   if (loading) {
+    const progressValue =
+      loadingStage === 'loading' ? 33 : loadingStage === 'fetching' ? 66 : 100;
+
     return (
       <PageLayout activePath='/live'>
         <div className='flex items-center justify-center min-h-screen bg-transparent'>
-          <div className='text-center max-w-md mx-auto px-6'>
-            {/* 动画直播图标 */}
-            <div className='relative mb-8'>
-              <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-blue-300 to-blue-700 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
-                <div className='text-white text-4xl'>📺</div>
-                {/* 旋转光环 */}
-                <div className='absolute -inset-2 bg-gradient-to-r from-blue-300 to-blue-700 rounded-2xl opacity-20 animate-spin'></div>
-              </div>
-
-              {/* 浮动粒子效果 */}
-              <div className='absolute top-0 left-0 w-full h-full pointer-events-none'>
-                <div className='absolute top-2 left-2 w-2 h-2 bg-blue-400 rounded-full animate-bounce'></div>
-                <div
-                  className='absolute top-4 right-4 w-1.5 h-1.5 bg-emerald-400 rounded-full animate-bounce'
-                  style={{ animationDelay: '0.5s' }}
-                ></div>
-                <div
-                  className='absolute bottom-3 left-6 w-1 h-1 bg-lime-400 rounded-full animate-bounce'
-                  style={{ animationDelay: '1s' }}
-                ></div>
-              </div>
-            </div>
-
-            {/* 进度指示器 */}
-            <div className='mb-6 w-80 mx-auto'>
-              <div className='flex justify-center space-x-2 mb-4'>
-                <div
-                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'loading' ? 'bg-blue-500 scale-125' : 'bg-blue-500'
-                    }`}
-                ></div>
-                <div
-                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'fetching' ? 'bg-blue-500 scale-125' : 'bg-blue-500'
-                    }`}
-                ></div>
-                <div
-                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'ready' ? 'bg-blue-500 scale-125' : 'bg-gray-300'
-                    }`}
-                ></div>
-              </div>
-
-              {/* 进度条 */}
-              <div className='w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden'>
-                <div
-                  className='h-full bg-gradient-to-r from-blue-300 to-blue-700 rounded-full transition-all duration-1000 ease-out'
-                  style={{
-                    width:
-                      loadingStage === 'loading' ? '33%' : loadingStage === 'fetching' ? '66%' : '100%',
-                  }}
-                ></div>
-              </div>
-            </div>
-
-            {/* 加载消息 */}
-            <div className='space-y-2'>
-              <p className='text-xl font-semibold text-gray-800 dark:text-gray-200 animate-pulse'>
-                {loadingMessage}
-              </p>
-            </div>
-          </div>
+          <Card className='w-full max-w-md text-center'>
+            <Card.Header className='items-center'>
+              <Spinner />
+              <Card.Title>{loadingMessage}</Card.Title>
+              <Card.Description>正在准备直播播放器</Card.Description>
+            </Card.Header>
+            <Card.Content>
+              <ProgressBar aria-label='加载进度' value={progressValue} color='accent'>
+                <ProgressBar.Track>
+                  <ProgressBar.Fill />
+                </ProgressBar.Track>
+              </ProgressBar>
+            </Card.Content>
+          </Card>
         </div>
       </PageLayout>
     );
@@ -1129,41 +1088,24 @@ function LivePageClient() {
     return (
       <PageLayout activePath='/live'>
         <div className='flex items-center justify-center min-h-screen bg-transparent'>
-          <div className='text-center max-w-md mx-auto px-6'>
-            {/* 错误图标 */}
-            <div className='relative mb-8'>
-              <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
-                <div className='text-white text-4xl'>😵</div>
-                {/* 脉冲效果 */}
-                <div className='absolute -inset-2 bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl opacity-20 animate-pulse'></div>
-              </div>
-            </div>
-
-            {/* 错误信息 */}
-            <div className='space-y-4 mb-8'>
-              <h2 className='text-2xl font-bold text-gray-800 dark:text-gray-200'>
-                哎呀，出现了一些问题
-              </h2>
-              <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4'>
-                <p className='text-red-600 dark:text-red-400 font-medium'>
-                  {error}
-                </p>
-              </div>
-              <p className='text-sm text-gray-500 dark:text-gray-400'>
-                请检查网络连接或尝试刷新页面
-              </p>
-            </div>
-
-            {/* 操作按钮 */}
-            <div className='space-y-3'>
-              <button
-                onClick={() => window.location.reload()}
-                className='w-full px-6 py-3 bg-gradient-to-r from-blue-300 to-blue-700 text-white rounded-xl font-medium hover:from-blue-400 hover:to-blue-800 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl'
-              >
+          <Card className='w-full max-w-md'>
+            <Card.Header>
+              <Card.Title>哎呀，出现了一些问题</Card.Title>
+              <Card.Description>请检查网络连接或尝试刷新页面</Card.Description>
+            </Card.Header>
+            <Card.Content>
+              <Alert status='danger'>
+                <Alert.Content>
+                  <Alert.Description>{error}</Alert.Description>
+                </Alert.Content>
+              </Alert>
+            </Card.Content>
+            <Card.Footer>
+              <Button fullWidth onPress={() => window.location.reload()}>
                 🔄 重新尝试
-              </button>
-            </div>
-          </div>
+              </Button>
+            </Card.Footer>
+          </Card>
         </div>
       </PageLayout>
     );
@@ -1175,7 +1117,7 @@ function LivePageClient() {
         {/* 第一行：页面标题 */}
         <div className='py-1'>
           <h1 className='text-xl font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 max-w-[80%]'>
-            <Radio className='w-5 h-5 text-blue-500 flex-shrink-0' />
+            <Radio className='w-5 h-5 text-accent flex-shrink-0' />
             <div className='min-w-0 flex-1'>
               <div className='truncate'>
                 {currentSource?.name}
@@ -1198,17 +1140,16 @@ function LivePageClient() {
         <div className='space-y-2'>
           {/* 折叠控制 - 仅在 lg 及以上屏幕显示 */}
           <div className='hidden lg:flex justify-end'>
-            <button
-              onClick={() =>
+            <Button
+              variant='secondary'
+              size='sm'
+              aria-label={isChannelListCollapsed ? '显示频道列表' : '隐藏频道列表'}
+              onPress={() =>
                 setIsChannelListCollapsed(!isChannelListCollapsed)
               }
-              className='group relative flex items-center space-x-1.5 px-3 py-1.5 rounded-full bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 shadow-sm hover:shadow-md transition-all duration-200'
-              title={
-                isChannelListCollapsed ? '显示频道列表' : '隐藏频道列表'
-              }
             >
               <svg
-                className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${isChannelListCollapsed ? 'rotate-180' : 'rotate-0'
+                className={`w-3.5 h-3.5 transition-transform duration-200 ${isChannelListCollapsed ? 'rotate-180' : 'rotate-0'
                   }`}
                 fill='none'
                 stroke='currentColor'
@@ -1221,18 +1162,8 @@ function LivePageClient() {
                   d='M9 5l7 7-7 7'
                 />
               </svg>
-              <span className='text-xs font-medium text-gray-600 dark:text-gray-300'>
-                {isChannelListCollapsed ? '显示' : '隐藏'}
-              </span>
-
-              {/* 精致的状态指示点 */}
-              <div
-                className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full transition-all duration-200 ${isChannelListCollapsed
-                  ? 'bg-orange-400 animate-pulse'
-                  : 'bg-blue-400'
-                  }`}
-              ></div>
-            </button>
+              {isChannelListCollapsed ? '显示' : '隐藏'}
+            </Button>
           </div>
 
           <div className={`grid gap-4 lg:h-[500px] xl:h-[650px] 2xl:h-[750px] transition-all duration-300 ease-in-out ${isChannelListCollapsed
@@ -1249,50 +1180,27 @@ function LivePageClient() {
 
                 {/* 不支持的直播类型提示 */}
                 {unsupportedType && (
-                  <div className='absolute inset-0 bg-black/90 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-white/0 dark:border-white/30 flex items-center justify-center z-[600] transition-all duration-300'>
-                    <div className='text-center max-w-md mx-auto px-6'>
-                      <div className='relative mb-8'>
-                        <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-orange-500 to-red-600 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
-                          <div className='text-white text-4xl'>⚠️</div>
-                          <div className='absolute -inset-2 bg-gradient-to-r from-orange-500 to-red-600 rounded-2xl opacity-20 animate-pulse'></div>
-                        </div>
-                      </div>
-                      <div className='space-y-4'>
-                        <h3 className='text-xl font-semibold text-white'>
-                          暂不支持的直播流类型
-                        </h3>
-                        <div className='bg-orange-500/20 border border-orange-500/30 rounded-lg p-4'>
-                          <p className='text-orange-300 font-medium'>
-                            当前频道直播流类型：<span className='text-white font-bold'>{unsupportedType.toUpperCase()}</span>
-                          </p>
-                          <p className='text-sm text-orange-200 mt-2'>
-                            目前仅支持 M3U8 格式的直播流
-                          </p>
-                        </div>
-                        <p className='text-sm text-gray-300'>
-                          请尝试其他频道
-                        </p>
-                      </div>
-                    </div>
+                  <div className='absolute inset-0 z-[600] flex items-center justify-center bg-black/90'>
+                    <Card variant='default' className='max-w-md p-6 text-center'>
+                      <Alert status='warning'>
+                        <Alert.Content>
+                          <Alert.Title>暂不支持的直播流类型</Alert.Title>
+                          <Alert.Description>
+                            当前频道直播流类型：{unsupportedType.toUpperCase()}。目前仅支持 M3U8 格式的直播流，请尝试其他频道。
+                          </Alert.Description>
+                        </Alert.Content>
+                      </Alert>
+                    </Card>
                   </div>
                 )}
 
                 {/* 视频加载蒙层 */}
                 {isVideoLoading && (
-                  <div className='absolute inset-0 bg-black/85 backdrop-blur-sm rounded-xl overflow-hidden shadow-lg border border-white/0 dark:border-white/30 flex items-center justify-center z-[500] transition-all duration-300'>
-                    <div className='text-center max-w-md mx-auto px-6'>
-                      <div className='relative mb-8'>
-                        <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-blue-300 to-blue-700 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
-                          <div className='text-white text-4xl'>📺</div>
-                          <div className='absolute -inset-2 bg-gradient-to-r from-blue-300 to-blue-700 rounded-2xl opacity-20 animate-spin'></div>
-                        </div>
-                      </div>
-                      <div className='space-y-2'>
-                        <p className='text-xl font-semibold text-white animate-pulse'>
-                          🔄 IPTV 加载中...
-                        </p>
-                      </div>
-                    </div>
+                  <div className='absolute inset-0 z-[500] flex items-center justify-center bg-black/85'>
+                    <Card variant='default' className='max-w-md p-6 text-center'>
+                      <Spinner />
+                      <p className='mt-4 text-lg font-semibold'>IPTV 加载中...</p>
+                    </Card>
                   </div>
                 )}
               </div>
@@ -1303,42 +1211,28 @@ function LivePageClient() {
               ? 'md:col-span-1 lg:hidden lg:opacity-0 lg:scale-95'
               : 'md:col-span-1 lg:opacity-100 lg:scale-100'
               }`}>
-              <div className='md:ml-2 px-4 py-0 h-full rounded-xl bg-black/10 dark:bg-white/5 flex flex-col border border-white/0 dark:border-white/30 overflow-hidden'>
+              <Card variant='default' className='md:ml-2 h-full p-4 flex flex-col overflow-hidden'>
                 {/* 主要的 Tab 切换 */}
-                <div className='flex mb-1 -mx-6 flex-shrink-0'>
-                  <div
-                    onClick={() => setActiveTab('channels')}
-                    className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium
-                      ${activeTab === 'channels'
-                        ? 'text-blue-600 dark:text-blue-400'
-                        : 'text-gray-700 hover:text-blue-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-blue-400 hover:bg-black/3 dark:hover:bg-white/3'
-                      }
-                    `.trim()}
-                  >
-                    频道
-                  </div>
-                  <div
-                    onClick={() => setActiveTab('sources')}
-                    className={`flex-1 py-3 px-6 text-center cursor-pointer transition-all duration-200 font-medium
-                      ${activeTab === 'sources'
-                        ? 'text-blue-600 dark:text-blue-400'
-                        : 'text-gray-700 hover:text-blue-600 bg-black/5 dark:bg-white/5 dark:text-gray-300 dark:hover:text-blue-400 hover:bg-black/3 dark:hover:bg-white/3'
-                      }
-                    `.trim()}
-                  >
-                    直播源
-                  </div>
-                </div>
+                <Tabs
+                  selectedKey={activeTab}
+                  variant='secondary'
+                  onSelectionChange={(key) => setActiveTab(String(key) as 'channels' | 'sources')}
+                >
+                  <Tabs.List aria-label='直播列表类型'>
+                    <Tabs.Tab id='channels'>频道</Tabs.Tab>
+                    <Tabs.Tab id='sources'>直播源</Tabs.Tab>
+                  </Tabs.List>
+                </Tabs>
 
                 {/* 频道 Tab 内容 */}
                 {activeTab === 'channels' && (
                   <>
                     {/* 分组标签 */}
-                    <div className='flex items-center gap-4 mb-4 border-b border-gray-300 dark:border-gray-700 -mx-6 px-6 flex-shrink-0'>
+                    <div className='flex items-center gap-4 my-4 flex-shrink-0'>
                       {/* 切换状态提示 */}
                       {isSwitchingSource && (
                         <div className='flex items-center gap-2 text-sm text-amber-600 dark:text-amber-400'>
-                          <div className='w-2 h-2 bg-amber-500 rounded-full animate-pulse'></div>
+                          <Spinner size='sm' />
                           切换直播源中...
                         </div>
                       )}
@@ -1370,57 +1264,46 @@ function LivePageClient() {
                           }
                         }}
                       >
-                        <div className='flex gap-4 min-w-max'>
+                        <div className='flex gap-2 min-w-max'>
                           {Object.keys(groupedChannels).map((group, index) => (
-                            <button
+                            <Button
                               key={group}
                               data-group={group}
                               ref={(el) => {
                                 groupButtonRefs.current[index] = el;
                               }}
-                              onClick={() => handleGroupChange(group)}
-                              disabled={isSwitchingSource}
-                              className={`w-20 relative py-2 text-sm font-medium transition-colors flex-shrink-0 text-center overflow-hidden
-                                 ${isSwitchingSource
-                                  ? 'text-gray-400 dark:text-gray-600 cursor-not-allowed opacity-50'
-                                  : selectedGroup === group
-                                    ? 'text-blue-500 dark:text-blue-400'
-                                    : 'text-gray-700 hover:text-blue-600 dark:text-gray-300 dark:hover:text-blue-400'
-                                }
-                               `.trim()}
+                              size='sm'
+                              variant={selectedGroup === group ? 'secondary' : 'tertiary'}
+                              isDisabled={isSwitchingSource}
+                              className='w-20 flex-shrink-0 overflow-hidden'
+                              onPress={() => handleGroupChange(group)}
                             >
                               <div className='px-1 overflow-hidden whitespace-nowrap' title={group}>
                                 {group}
                               </div>
-                              {selectedGroup === group && !isSwitchingSource && (
-                                <div className='absolute bottom-0 left-0 right-0 h-0.5 bg-blue-500 dark:bg-blue-400' />
-                              )}
-                            </button>
+                            </Button>
                           ))}
                         </div>
                       </div>
                     </div>
 
                     {/* 频道列表 */}
-                    <div ref={channelListRef} className='flex-1 overflow-y-auto space-y-2 pb-4'>
+                    <ScrollShadow hideScrollBar ref={channelListRef} className='flex-1 space-y-2 pb-4'>
                       {filteredChannels.length > 0 ? (
                         filteredChannels.map(channel => {
                           const isActive = channel.id === currentChannel?.id;
                           return (
-                            <button
+                            <Button
                               key={channel.id}
                               data-channel-id={channel.id}
-                              onClick={() => handleChannelChange(channel)}
-                              disabled={isSwitchingSource}
-                              className={`w-full p-3 rounded-lg text-left transition-all duration-200 ${isSwitchingSource
-                                ? 'opacity-50 cursor-not-allowed'
-                                : isActive
-                                  ? 'bg-blue-100 dark:bg-blue-900/30 border border-blue-300 dark:border-blue-700'
-                                  : 'hover:bg-gray-100 dark:hover:bg-gray-700'
-                                }`}
+                              fullWidth
+                              variant={isActive ? 'secondary' : 'tertiary'}
+                              isDisabled={isSwitchingSource}
+                              className='h-auto justify-start p-3'
+                              onPress={() => handleChannelChange(channel)}
                             >
                               <div className='flex items-center gap-3'>
-                                <div className='w-10 h-10 bg-gray-300 dark:bg-gray-700 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden'>
+                                <div className='w-10 h-10 flex items-center justify-center flex-shrink-0 overflow-hidden'>
                                   {channel.logo ? (
                                     <img
                                       src={`/api/proxy/logo?url=${encodeURIComponent(channel.logo)}&source=${currentSource?.key || ''}`}
@@ -1433,90 +1316,77 @@ function LivePageClient() {
                                   )}
                                 </div>
                                 <div className='flex-1 min-w-0'>
-                                  <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate' title={channel.name}>
+                                  <div className='text-sm font-medium truncate' title={channel.name}>
                                     {channel.name}
                                   </div>
-                                  <div className='text-xs text-gray-500 dark:text-gray-400 mt-1' title={channel.group}>
+                                  <div className='text-xs text-muted mt-1' title={channel.group}>
                                     {channel.group}
                                   </div>
                                 </div>
                               </div>
-                            </button>
+                            </Button>
                           );
                         })
                       ) : (
-                        <div className='flex flex-col items-center justify-center py-12 text-center'>
-                          <div className='w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4'>
-                            <Tv className='w-8 h-8 text-gray-400 dark:text-gray-600' />
-                          </div>
-                          <p className='text-gray-500 dark:text-gray-400 font-medium'>
-                            暂无可用频道
-                          </p>
-                          <p className='text-sm text-gray-400 dark:text-gray-500 mt-1'>
-                            请选择其他直播源或稍后再试
-                          </p>
-                        </div>
+                        <EmptyState>
+                          <Tv className='w-8 h-8' />
+                          <p className='font-medium'>暂无可用频道</p>
+                          <p className='text-sm text-muted'>请选择其他直播源或稍后再试</p>
+                        </EmptyState>
                       )}
-                    </div>
+                    </ScrollShadow>
                   </>
                 )}
 
                 {/* 直播源 Tab 内容 */}
                 {activeTab === 'sources' && (
                   <div className='flex flex-col h-full mt-4'>
-                    <div className='flex-1 overflow-y-auto space-y-2 pb-20'>
+                    <ScrollShadow hideScrollBar className='flex-1 space-y-2 pb-20'>
                       {liveSources.length > 0 ? (
                         liveSources.map((source) => {
                           const isCurrentSource = source.key === currentSource?.key;
                           return (
-                            <div
+                            <Button
                               key={source.key}
-                              onClick={() => !isCurrentSource && handleSourceChange(source)}
-                              className={`flex items-start gap-3 px-2 py-3 rounded-lg transition-all select-none duration-200 relative
-                                ${isCurrentSource
-                                  ? 'bg-blue-500/10 dark:bg-blue-500/20 border-blue-500/30 border'
-                                  : 'hover:bg-gray-200/50 dark:hover:bg-white/10 hover:scale-[1.02] cursor-pointer'
-                                }`.trim()}
+                              fullWidth
+                              variant={isCurrentSource ? 'secondary' : 'tertiary'}
+                              className='h-auto justify-start p-3'
+                              isDisabled={isCurrentSource}
+                              onPress={() => handleSourceChange(source)}
                             >
                               {/* 图标 */}
-                              <div className='w-12 h-12 bg-gray-200 dark:bg-gray-600 rounded-lg flex items-center justify-center flex-shrink-0'>
+                              <div className='w-12 h-12 flex items-center justify-center flex-shrink-0'>
                                 <Radio className='w-6 h-6 text-gray-500' />
                               </div>
 
                               {/* 信息 */}
                               <div className='flex-1 min-w-0'>
-                                <div className='text-sm font-medium text-gray-900 dark:text-gray-100 truncate'>
+                                <div className='text-sm font-medium truncate'>
                                   {source.name}
                                 </div>
-                                <div className='text-xs text-gray-500 dark:text-gray-400 mt-1'>
+                                <div className='text-xs text-muted mt-1'>
                                   {!source.channelNumber || source.channelNumber === 0 ? '-' : `${source.channelNumber} 个频道`}
                                 </div>
                               </div>
 
                               {/* 当前标识 */}
                               {isCurrentSource && (
-                                <div className='absolute top-2 right-2 w-2 h-2 bg-blue-500 rounded-full'></div>
+                                <Chip color='accent' size='sm'>当前</Chip>
                               )}
-                            </div>
+                            </Button>
                           );
                         })
                       ) : (
-                        <div className='flex flex-col items-center justify-center py-12 text-center'>
-                          <div className='w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4'>
-                            <Radio className='w-8 h-8 text-gray-400 dark:text-gray-600' />
-                          </div>
-                          <p className='text-gray-500 dark:text-gray-400 font-medium'>
-                            暂无可用直播源
-                          </p>
-                          <p className='text-sm text-gray-400 dark:text-gray-500 mt-1'>
-                            请检查网络连接或联系管理员添加直播源
-                          </p>
-                        </div>
+                        <EmptyState>
+                          <Radio className='w-8 h-8' />
+                          <p className='font-medium'>暂无可用直播源</p>
+                          <p className='text-sm text-muted'>请检查网络连接或联系管理员添加直播源</p>
+                        </EmptyState>
                       )}
-                    </div>
+                    </ScrollShadow>
                   </div>
                 )}
-              </div>
+              </Card>
             </div>
           </div>
         </div>
@@ -1545,16 +1415,17 @@ function LivePageClient() {
                       <h3 className='text-lg font-semibold text-gray-900 dark:text-gray-100 truncate'>
                         {currentChannel.name}
                       </h3>
-                      <button
-                        onClick={(e) => {
-                          e.stopPropagation();
+                      <Button
+                        isIconOnly
+                        variant='tertiary'
+                        aria-label={favorited ? '取消收藏' : '收藏'}
+                        onPress={() => {
                           handleToggleFavorite();
                         }}
                         className='flex-shrink-0 hover:opacity-80 transition-opacity'
-                        title={favorited ? '取消收藏' : '收藏'}
                       >
                         <FavoriteIcon filled={favorited} />
-                      </button>
+                      </Button>
                     </div>
                     <p className='text-sm text-gray-500 dark:text-gray-400 truncate'>
                       {currentSource?.name} {' > '} {currentChannel.group}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index a021a8b..05e82c8 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -3,7 +3,7 @@
 'use client';
 
 import { AlertCircle, CheckCircle, Shield } from 'lucide-react';
-import { Form, Input, Label, TextField } from '@heroui/react';
+import { Alert, Checkbox, Form, Input, Label, Link, TextField } from '@heroui/react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useState } from 'react';
 
@@ -37,11 +37,10 @@ function VersionDisplay() {
   }, []);
 
   return (
-    <button
-      onClick={() =>
-        window.open('https://github.com/djteang/OrangeTV', '_blank')
-      }
-      className='absolute bottom-4 left-1/2 transform -translate-x-1/2 flex items-center gap-2 text-xs text-gray-500 dark:text-gray-400 transition-colors cursor-pointer'
+    <Link
+      href='https://github.com/djteang/OrangeTV'
+      target='_blank'
+      className='absolute bottom-4 left-1/2 -translate-x-1/2 text-xs'
     >
       <span className='font-mono'>v{CURRENT_VERSION}</span>
       {!isChecking && updateStatus !== UpdateStatus.FETCH_FAILED && (
@@ -49,7 +48,7 @@ function VersionDisplay() {
           className={`flex items-center gap-1.5 ${updateStatus === UpdateStatus.HAS_UPDATE
             ? 'text-yellow-600 dark:text-yellow-400'
             : updateStatus === UpdateStatus.NO_UPDATE
-              ? 'text-blue-600 dark:text-blue-400'
+              ? 'text-success'
               : ''
             }`}
         >
@@ -67,7 +66,7 @@ function VersionDisplay() {
           )}
         </div>
       )}
-    </button>
+    </Link>
   );
 }
 
@@ -203,7 +202,7 @@ function LoginPageClient() {
         <ThemeToggle />
       </div>
       <AppSurface className='relative z-10 w-full max-w-md p-8 sm:p-10'>
-        <h1 className='text-blue-600 tracking-tight text-center text-3xl font-extrabold mb-8 bg-clip-text drop-shadow-sm'>
+        <h1 className='mb-8 text-center text-3xl font-semibold'>
           {siteName}
         </h1>
         <Form onSubmit={handleSubmit} className='space-y-6'>
@@ -236,36 +235,35 @@ function LoginPageClient() {
           {/* 机器码信息显示 - 只有在启用设备码功能时才显示 */}
           {deviceCodeEnabled && machineCodeGenerated && shouldAskUsername && (
             <div className='space-y-4'>
-              <div className='bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4'>
-                <div className='flex items-center space-x-2 mb-2'>
-                  <Shield className='w-4 h-4 text-blue-600 dark:text-blue-400' />
-                  <span className='text-sm font-medium text-blue-800 dark:text-blue-300'>设备识别码</span>
-                </div>
-                <div className='space-y-2'>
-                  <div className='text-xs font-mono text-gray-700 dark:text-gray-300 break-all'>
+              <Alert status='accent'>
+                <Alert.Indicator>
+                  <Shield className='w-4 h-4' />
+                </Alert.Indicator>
+                <Alert.Content>
+                  <Alert.Title>设备识别码</Alert.Title>
+                  <Alert.Description>
                     {MachineCode.formatMachineCode(machineCode)}
-                  </div>
-                  <div className='text-xs text-gray-600 dark:text-gray-400'>
+                    <br />
                     设备信息: {deviceInfo}
-                  </div>
-                </div>
-              </div>
+                  </Alert.Description>
+                </Alert.Content>
+              </Alert>
 
               {/* 绑定选项 */}
               {!requireMachineCode && (
                 <div className='space-y-2'>
-                  <div className='flex items-center space-x-3'>
-                    <input
-                      id='bindMachineCode'
-                      type='checkbox'
-                      checked={bindMachineCode}
-                      onChange={(e) => setBindMachineCode(e.target.checked)}
-                      className='w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600'
-                    />
-                    <label htmlFor='bindMachineCode' className='text-sm text-gray-700 dark:text-gray-300'>
+                  <Checkbox
+                    id='bindMachineCode'
+                    isSelected={bindMachineCode}
+                    onChange={setBindMachineCode}
+                  >
+                    <Checkbox.Control>
+                      <Checkbox.Indicator />
+                    </Checkbox.Control>
+                    <Checkbox.Content>
                       绑定此设备（提升账户安全性）
-                    </label>
-                  </div>
+                    </Checkbox.Content>
+                  </Checkbox>
                   {/* <p className='text-xs text-gray-500 dark:text-gray-400 ml-7'>
                     // 管理员可选择不绑定机器码直接登录
                   </p> */}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d11f86a..f82a5e3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -2,8 +2,7 @@
 
 'use client';
 
-import { X } from 'lucide-react';
-import Link from 'next/link';
+import { Button, Card, EmptyState, Link as HeroLink, Skeleton } from '@heroui/react';
 import { Suspense, useEffect, useState } from 'react';
 
 import {
@@ -26,6 +25,7 @@ import PageLayout from '@/components/PageLayout';
 import ScrollableRow from '@/components/ScrollableRow';
 import { useSite } from '@/components/SiteProvider';
 import VideoCard from '@/components/VideoCard';
+import { AppDialog } from '@/components/ui/HeroPrimitives';
 
 function HomeClient() {
   const [activeTab, setActiveTab] = useState<'home' | 'favorites'>('home');
@@ -185,26 +185,24 @@ function HomeClient() {
         <div className='mx-auto max-w-[1380px] space-y-10'>
           {activeTab === 'favorites' ? (
             // 收藏夹视图
-            <section className='rounded-3xl border border-border/70 bg-surface/70 p-5 shadow-sm backdrop-blur sm:p-6'>
-              <div className='mb-5 flex items-end justify-between gap-4'>
-                <div className='space-y-1'>
-                  <p className='a2-kicker'>Saved</p>
-                  <h2 className='text-2xl font-semibold tracking-normal text-foreground'>
-                    我的收藏
-                  </h2>
+            <Card>
+              <Card.Header className='flex-row items-end justify-between gap-4'>
+                <div>
+                  <Card.Description>Saved</Card.Description>
+                  <Card.Title>我的收藏</Card.Title>
                 </div>
                 {favoriteItems.length > 0 && (
-                  <button
-                    className='a2-link-action'
-                    onClick={async () => {
+                  <Button
+                    variant='danger'
+                    onPress={async () => {
                       await clearAllFavorites();
                       setFavoriteItems([]);
                     }}
                   >
                     清空
-                  </button>
+                  </Button>
                 )}
-              </div>
+              </Card.Header>
               <div className='grid justify-start grid-cols-3 gap-x-3 gap-y-14 px-0 sm:grid-cols-[repeat(auto-fill,_minmax(11rem,_1fr))] sm:gap-x-8 sm:gap-y-20'>
                 {favoriteItems.map((item) => (
                   <div key={item.id + item.source} className='w-full'>
@@ -217,12 +215,12 @@ function HomeClient() {
                   </div>
                 ))}
                 {favoriteItems.length === 0 && (
-                  <div className='col-span-full rounded-2xl border border-dashed border-border bg-surface-secondary/60 py-10 text-center text-sm font-medium tracking-normal text-muted'>
+                  <EmptyState className='col-span-full'>
                     暂无收藏内容
-                  </div>
+                  </EmptyState>
                 )}
               </div>
-            </section>
+            </Card>
           ) : (
             // 首页视图
             <>
@@ -230,21 +228,18 @@ function HomeClient() {
               <ContinueWatching />
 
               {/* 热门电影 */}
-              <section className='rounded-3xl border border-border/70 bg-surface/70 p-5 shadow-sm backdrop-blur sm:p-6'>
-                <div className='mb-5 flex items-end justify-between gap-4'>
-                  <div className='space-y-1'>
-                    <p className='a2-kicker'>精选推荐</p>
-                    <h2 className='text-2xl font-semibold tracking-normal text-foreground'>
-                      热门电影
-                    </h2>
+              <Card>
+                <Card.Header className='flex-row items-end justify-between gap-4'>
+                  <div>
+                    <Card.Description>精选推荐</Card.Description>
+                    <Card.Title>热门电影</Card.Title>
                   </div>
-                  <Link
+                  <HeroLink
                     href='/douban?type=movie'
-                    className='a2-link-action'
                   >
                     查看更多
-                  </Link>
-                </div>
+                  </HeroLink>
+                </Card.Header>
                 <ScrollableRow>
                   {loading
                     ? // 加载状态显示灰色占位数据
@@ -253,10 +248,8 @@ function HomeClient() {
                         key={index}
                         className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
                       >
-                        <div className='relative aspect-[2/3] w-full overflow-hidden rounded-2xl border border-border bg-surface-secondary animate-pulse'>
-                          <div className='absolute inset-0 bg-surface-tertiary'></div>
-                        </div>
-                        <div className='mt-3 h-4 rounded-lg bg-surface-secondary animate-pulse'></div>
+                        <Skeleton className='aspect-[2/3] w-full' />
+                        <Skeleton className='mt-3 h-4' />
                       </div>
                     ))
                     : // 显示真实数据
@@ -277,21 +270,19 @@ function HomeClient() {
                       </div>
                     ))}
                 </ScrollableRow>
-              </section>
+              </Card>
 
               {/* 热门剧集 */}
-              <section className='rounded-3xl border border-border/70 bg-surface/70 p-5 shadow-sm backdrop-blur sm:p-6'>
-                <div className='mb-5 flex items-end justify-between gap-4'>
-                  <div className='space-y-1'>
-                    <p className='a2-kicker'>Series</p>
-                    <h2 className='text-2xl font-semibold tracking-normal text-foreground'>
-                      热门剧集
-                    </h2>
+              <Card>
+                <Card.Header className='flex-row items-end justify-between gap-4'>
+                  <div>
+                    <Card.Description>Series</Card.Description>
+                    <Card.Title>热门剧集</Card.Title>
                   </div>
-                  <Link href='/douban?type=tv' className='a2-link-action'>
+                  <HeroLink href='/douban?type=tv'>
                     查看更多
-                  </Link>
-                </div>
+                  </HeroLink>
+                </Card.Header>
                 <ScrollableRow>
                   {loading
                     ? // 加载状态显示灰色占位数据
@@ -300,10 +291,8 @@ function HomeClient() {
                         key={index}
                         className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
                       >
-                        <div className='relative aspect-[2/3] w-full overflow-hidden rounded-2xl border border-border bg-surface-secondary animate-pulse'>
-                          <div className='absolute inset-0 bg-surface-tertiary'></div>
-                        </div>
-                        <div className='mt-3 h-4 rounded-lg bg-surface-secondary animate-pulse'></div>
+                        <Skeleton className='aspect-[2/3] w-full' />
+                        <Skeleton className='mt-3 h-4' />
                       </div>
                     ))
                     : // 显示真实数据
@@ -323,24 +312,21 @@ function HomeClient() {
                       </div>
                     ))}
                 </ScrollableRow>
-              </section>
+              </Card>
 
               {/* 每日新番放送 */}
-              <section className='rounded-3xl border border-border/70 bg-surface/70 p-5 shadow-sm backdrop-blur sm:p-6'>
-                <div className='mb-5 flex items-end justify-between gap-4'>
-                  <div className='space-y-1'>
-                    <p className='a2-kicker'>Bangumi</p>
-                    <h2 className='text-2xl font-semibold tracking-normal text-foreground'>
-                      新番放送
-                    </h2>
+              <Card>
+                <Card.Header className='flex-row items-end justify-between gap-4'>
+                  <div>
+                    <Card.Description>Bangumi</Card.Description>
+                    <Card.Title>新番放送</Card.Title>
                   </div>
-                  <Link
+                  <HeroLink
                     href='/douban?type=anime'
-                    className='a2-link-action'
                   >
                     查看更多
-                  </Link>
-                </div>
+                  </HeroLink>
+                </Card.Header>
                 <ScrollableRow>
                   {loading
                     ? // 加载状态显示灰色占位数据
@@ -349,10 +335,8 @@ function HomeClient() {
                         key={index}
                         className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
                       >
-                        <div className='relative aspect-[2/3] w-full overflow-hidden rounded-2xl border border-border bg-surface-secondary animate-pulse'>
-                          <div className='absolute inset-0 bg-surface-tertiary'></div>
-                        </div>
-                        <div className='mt-3 h-4 rounded-lg bg-surface-secondary animate-pulse'></div>
+                        <Skeleton className='aspect-[2/3] w-full' />
+                        <Skeleton className='mt-3 h-4' />
                       </div>
                     ))
                     : // 展示当前日期的番剧
@@ -401,24 +385,21 @@ function HomeClient() {
                       ));
                     })()}
                 </ScrollableRow>
-              </section>
+              </Card>
 
               {/* 热门综艺 */}
-              <section className='rounded-3xl border border-border/70 bg-surface/70 p-5 shadow-sm backdrop-blur sm:p-6'>
-                <div className='mb-5 flex items-end justify-between gap-4'>
-                  <div className='space-y-1'>
-                    <p className='a2-kicker'>Shows</p>
-                    <h2 className='text-2xl font-semibold tracking-normal text-foreground'>
-                      热门综艺
-                    </h2>
+              <Card>
+                <Card.Header className='flex-row items-end justify-between gap-4'>
+                  <div>
+                    <Card.Description>Shows</Card.Description>
+                    <Card.Title>热门综艺</Card.Title>
                   </div>
-                  <Link
+                  <HeroLink
                     href='/douban?type=show'
-                    className='a2-link-action'
                   >
                     查看更多
-                  </Link>
-                </div>
+                  </HeroLink>
+                </Card.Header>
                 <ScrollableRow>
                   {loading
                     ? // 加载状态显示灰色占位数据
@@ -427,10 +408,8 @@ function HomeClient() {
                         key={index}
                         className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
                       >
-                        <div className='relative aspect-[2/3] w-full overflow-hidden rounded-2xl border border-border bg-surface-secondary animate-pulse'>
-                          <div className='absolute inset-0 bg-surface-tertiary'></div>
-                        </div>
-                        <div className='mt-3 h-4 rounded-lg bg-surface-secondary animate-pulse'></div>
+                        <Skeleton className='aspect-[2/3] w-full' />
+                        <Skeleton className='mt-3 h-4' />
                       </div>
                     ))
                     : // 显示真实数据
@@ -450,75 +429,29 @@ function HomeClient() {
                       </div>
                     ))}
                 </ScrollableRow>
-              </section>
+              </Card>
             </>
           )}
         </div>
       </div>
-      {announcement && showAnnouncement && (
-        <div
-          className={`fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm dark:bg-black/70 p-4 transition-opacity duration-300 ${showAnnouncement ? '' : 'opacity-0 pointer-events-none'
-            }`}
-          onTouchStart={(e) => {
-            // 如果点击的是背景区域，阻止触摸事件冒泡，防止背景滚动
-            if (e.target === e.currentTarget) {
-              e.preventDefault();
-            }
+      {announcement && (
+        <AppDialog
+          isOpen={showAnnouncement}
+          onOpenChange={(isOpen) => {
+            if (!isOpen) handleCloseAnnouncement(announcement);
           }}
-          onTouchMove={(e) => {
-            // 如果触摸的是背景区域，阻止触摸移动，防止背景滚动
-            if (e.target === e.currentTarget) {
-              e.preventDefault();
-              e.stopPropagation();
-            }
-          }}
-          onTouchEnd={(e) => {
-            // 如果触摸的是背景区域，阻止触摸结束事件，防止背景滚动
-            if (e.target === e.currentTarget) {
-              e.preventDefault();
-            }
-          }}
-          style={{
-            touchAction: 'none', // 禁用所有触摸操作
-          }}
-        >
-          <div
-            className='a2-panel w-full max-w-md p-6 transform transition-all duration-300'
-            onTouchMove={(e) => {
-              // 允许公告内容区域正常滚动，阻止事件冒泡到外层
-              e.stopPropagation();
-            }}
-            style={{
-              touchAction: 'auto', // 允许内容区域的正常触摸操作
-            }}
-          >
-            <div className='flex justify-between items-start mb-4'>
-              <h3 className='a2-title border-b border-border/70 pb-3 text-[1.75rem]'>
-                提示
-              </h3>
-              <button
-                onClick={() => handleCloseAnnouncement(announcement)}
-                className='a2-icon-button h-8 w-8 p-1.5'
-                aria-label='关闭'
-              >
-                <X className='h-4 w-4' />
-              </button>
-            </div>
-            <div className='mb-6'>
-              <div className='border-l-4 border-accent pl-4'>
-                <p className='a2-muted-copy'>
-                  {announcement}
-                </p>
-              </div>
-            </div>
-            <button
-              onClick={() => handleCloseAnnouncement(announcement)}
-              className='a2-link-action w-full justify-center border-b-0 border-t border-border/70 px-4 pt-3'
+          title='提示'
+          footer={
+            <Button
+              fullWidth
+              onPress={() => handleCloseAnnouncement(announcement)}
             >
               我知道了
-            </button>
-          </div>
-        </div>
+            </Button>
+          }
+        >
+          <p className='text-sm leading-6 text-muted'>{announcement}</p>
+        </AppDialog>
       )}
     </PageLayout>
   );
diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx
index 5b262c8..448fc19 100644
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx
@@ -4,6 +4,7 @@
 
 // Artplayer 和 Hls 以及弹幕插件将动态加载
 import { Heart } from 'lucide-react';
+import { Alert, Button, Card, Chip, ProgressBar, Spinner } from '@heroui/react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import { Suspense, useEffect, useRef, useState } from 'react';
 
@@ -707,38 +708,6 @@ function PlayPageClient() {
     return vodTagString.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0);
   };
 
-  // 为标签生成颜色的函数
-  const getTagColor = (tag: string, isClass: boolean = false) => {
-    if (isClass) {
-      // vod_class 使用更显眼的颜色
-      const classColors = [
-        'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200',
-        'bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200',
-        'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200',
-        'bg-teal-100 text-teal-800 dark:bg-teal-900 dark:text-teal-200',
-        'bg-emerald-100 text-emerald-800 dark:bg-emerald-900 dark:text-emerald-200'
-      ];
-      const hash = tag.split('').reduce((a, b) => a + b.charCodeAt(0), 0);
-      return classColors[hash % classColors.length];
-    } else {
-      // vod_tag 使用较为柔和的颜色
-      const tagColors = [
-        'bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300',
-        'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-300',
-        'bg-zinc-100 text-zinc-700 dark:bg-zinc-800 dark:text-zinc-300',
-        'bg-stone-100 text-stone-700 dark:bg-stone-800 dark:text-stone-300',
-        'bg-neutral-100 text-neutral-700 dark:bg-neutral-800 dark:text-neutral-300',
-        'bg-amber-100 text-amber-700 dark:bg-amber-800 dark:text-amber-300',
-        'bg-orange-100 text-orange-700 dark:bg-orange-800 dark:text-orange-300',
-        'bg-red-100 text-red-700 dark:bg-red-800 dark:text-red-300',
-        'bg-pink-100 text-pink-700 dark:bg-pink-800 dark:text-pink-300',
-        'bg-rose-100 text-rose-700 dark:bg-rose-800 dark:text-rose-300'
-      ];
-      const hash = tag.split('').reduce((a, b) => a + b.charCodeAt(0), 0);
-      return tagColors[hash % tagColors.length];
-    }
-  };
-
   // 短剧播放地址处理函数 - 参考utils.ts中的代理逻辑
   const processShortDramaUrl = (originalUrl: string): string => {
     if (!originalUrl) {
@@ -2482,89 +2451,30 @@ function PlayPageClient() {
   }, []);
 
   if (loading) {
+    const progressValue =
+      loadingStage === 'searching' || loadingStage === 'fetching'
+        ? 33
+        : loadingStage === 'preferring'
+          ? 66
+          : 100;
+
     return (
       <PageLayout activePath='/play'>
         <div className='flex items-center justify-center min-h-screen bg-transparent'>
-          <div className='text-center max-w-md mx-auto px-6'>
-            {/* 动画影院图标 */}
-            <div className='relative mb-8'>
-              <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
-                <div className='text-white text-4xl'>
-                  {loadingStage === 'searching' && '🔍'}
-                  {loadingStage === 'preferring' && '⚡'}
-                  {loadingStage === 'fetching' && '🎬'}
-                  {loadingStage === 'ready' && '✨'}
-                </div>
-                {/* 旋转光环 */}
-                <div className='absolute -inset-2 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl opacity-20 animate-spin'></div>
-              </div>
-
-              {/* 浮动粒子效果 */}
-              <div className='absolute top-0 left-0 w-full h-full pointer-events-none'>
-                <div className='absolute top-2 left-2 w-2 h-2 bg-blue-400 rounded-full animate-bounce'></div>
-                <div
-                  className='absolute top-4 right-4 w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce'
-                  style={{ animationDelay: '0.5s' }}
-                ></div>
-                <div
-                  className='absolute bottom-3 left-6 w-1 h-1 bg-blue-300 rounded-full animate-bounce'
-                  style={{ animationDelay: '1s' }}
-                ></div>
-              </div>
-            </div>
-
-            {/* 进度指示器 */}
-            <div className='mb-6 w-80 mx-auto'>
-              <div className='flex justify-center space-x-2 mb-4'>
-                <div
-                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'searching' || loadingStage === 'fetching'
-                    ? 'bg-blue-500 scale-125'
-                    : loadingStage === 'preferring' ||
-                      loadingStage === 'ready'
-                      ? 'bg-blue-500'
-                      : 'bg-gray-300'
-                    }`}
-                ></div>
-                <div
-                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'preferring'
-                    ? 'bg-blue-500 scale-125'
-                    : loadingStage === 'ready'
-                      ? 'bg-blue-500'
-                      : 'bg-gray-300'
-                    }`}
-                ></div>
-                <div
-                  className={`w-3 h-3 rounded-full transition-all duration-500 ${loadingStage === 'ready'
-                    ? 'bg-blue-500 scale-125'
-                    : 'bg-gray-300'
-                    }`}
-                ></div>
-              </div>
-
-              {/* 进度条 */}
-              <div className='w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2 overflow-hidden'>
-                <div
-                  className='h-full bg-gradient-to-r from-blue-500 to-blue-600 rounded-full transition-all duration-1000 ease-out'
-                  style={{
-                    width:
-                      loadingStage === 'searching' ||
-                        loadingStage === 'fetching'
-                        ? '33%'
-                        : loadingStage === 'preferring'
-                          ? '66%'
-                          : '100%',
-                  }}
-                ></div>
-              </div>
-            </div>
-
-            {/* 加载消息 */}
-            <div className='space-y-2'>
-              <p className='text-xl font-semibold text-gray-800 dark:text-gray-200 animate-pulse'>
-                {loadingMessage}
-              </p>
-            </div>
-          </div>
+          <Card className='w-full max-w-md text-center'>
+            <Card.Header className='items-center'>
+              <Spinner />
+              <Card.Title>{loadingMessage}</Card.Title>
+              <Card.Description>正在准备播放器</Card.Description>
+            </Card.Header>
+            <Card.Content>
+              <ProgressBar aria-label='加载进度' value={progressValue} color='accent'>
+                <ProgressBar.Track>
+                  <ProgressBar.Fill />
+                </ProgressBar.Track>
+              </ProgressBar>
+            </Card.Content>
+          </Card>
         </div>
       </PageLayout>
     );
@@ -2574,65 +2484,39 @@ function PlayPageClient() {
     return (
       <PageLayout activePath='/play'>
         <div className='flex items-center justify-center min-h-screen bg-transparent'>
-          <div className='text-center max-w-md mx-auto px-6'>
-            {/* 错误图标 */}
-            <div className='relative mb-8'>
-              <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
-                <div className='text-white text-4xl'>😵</div>
-                {/* 脉冲效果 */}
-                <div className='absolute -inset-2 bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl opacity-20 animate-pulse'></div>
-              </div>
-
-              {/* 浮动错误粒子 */}
-              <div className='absolute top-0 left-0 w-full h-full pointer-events-none'>
-                <div className='absolute top-2 left-2 w-2 h-2 bg-red-400 rounded-full animate-bounce'></div>
-                <div
-                  className='absolute top-4 right-4 w-1.5 h-1.5 bg-orange-400 rounded-full animate-bounce'
-                  style={{ animationDelay: '0.5s' }}
-                ></div>
-                <div
-                  className='absolute bottom-3 left-6 w-1 h-1 bg-yellow-400 rounded-full animate-bounce'
-                  style={{ animationDelay: '1s' }}
-                ></div>
-              </div>
-            </div>
-
-            {/* 错误信息 */}
-            <div className='space-y-4 mb-8'>
-              <h2 className='text-2xl font-bold text-gray-800 dark:text-gray-200'>
-                哎呀，出现了一些问题
-              </h2>
-              <div className='bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4'>
-                <p className='text-red-600 dark:text-red-400 font-medium'>
-                  {error}
-                </p>
-              </div>
-              <p className='text-sm text-gray-500 dark:text-gray-400'>
-                请检查网络连接或尝试刷新页面
-              </p>
-            </div>
-
-            {/* 操作按钮 */}
-            <div className='space-y-3'>
-              <button
-                onClick={() =>
+          <Card className='w-full max-w-md'>
+            <Card.Header>
+              <Card.Title>哎呀，出现了一些问题</Card.Title>
+              <Card.Description>请检查网络连接或尝试刷新页面</Card.Description>
+            </Card.Header>
+            <Card.Content>
+              <Alert status='danger'>
+                <Alert.Content>
+                  <Alert.Description>{error}</Alert.Description>
+                </Alert.Content>
+              </Alert>
+            </Card.Content>
+            <Card.Footer className='gap-3'>
+              <Button
+                fullWidth
+                onPress={() =>
                   videoTitle
                     ? router.push(`/search?q=${encodeURIComponent(videoTitle)}`)
                     : router.back()
                 }
-                className='w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-xl font-medium hover:from-blue-600 hover:to-blue-700 transform hover:scale-105 transition-all duration-200 shadow-lg hover:shadow-xl'
               >
                 {videoTitle ? '🔍 返回搜索' : '← 返回上页'}
-              </button>
+              </Button>
 
-              <button
-                onClick={() => window.location.reload()}
-                className='w-full px-6 py-3 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-xl font-medium hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200'
+              <Button
+                fullWidth
+                variant='tertiary'
+                onPress={() => window.location.reload()}
               >
                 🔄 重新尝试
-              </button>
-            </div>
-          </div>
+              </Button>
+            </Card.Footer>
+          </Card>
         </div>
       </PageLayout>
     );
@@ -2656,17 +2540,16 @@ function PlayPageClient() {
         <div className='space-y-2'>
           {/* 折叠控制 - 仅在 lg 及以上屏幕显示 */}
           <div className='hidden lg:flex justify-end'>
-            <button
-              onClick={() =>
+            <Button
+              variant='secondary'
+              size='sm'
+              aria-label={isEpisodeSelectorCollapsed ? '显示选集面板' : '隐藏选集面板'}
+              onPress={() =>
                 setIsEpisodeSelectorCollapsed(!isEpisodeSelectorCollapsed)
               }
-              className='group relative flex items-center space-x-1.5 px-3 py-1.5 rounded-full bg-white/80 hover:bg-white dark:bg-gray-800/80 dark:hover:bg-gray-800 backdrop-blur-sm border border-gray-200/50 dark:border-gray-700/50 shadow-sm hover:shadow-md transition-all duration-200'
-              title={
-                isEpisodeSelectorCollapsed ? '显示选集面板' : '隐藏选集面板'
-              }
             >
               <svg
-                className={`w-3.5 h-3.5 text-gray-500 dark:text-gray-400 transition-transform duration-200 ${isEpisodeSelectorCollapsed ? 'rotate-180' : 'rotate-0'
+                className={`w-3.5 h-3.5 transition-transform duration-200 ${isEpisodeSelectorCollapsed ? 'rotate-180' : 'rotate-0'
                   }`}
                 fill='none'
                 stroke='currentColor'
@@ -2679,18 +2562,8 @@ function PlayPageClient() {
                   d='M9 5l7 7-7 7'
                 />
               </svg>
-              <span className='text-xs font-medium text-gray-600 dark:text-gray-300'>
-                {isEpisodeSelectorCollapsed ? '显示' : '隐藏'}
-              </span>
-
-              {/* 精致的状态指示点 */}
-              <div
-                className={`absolute -top-0.5 -right-0.5 w-2 h-2 rounded-full transition-all duration-200 ${isEpisodeSelectorCollapsed
-                  ? 'bg-orange-400 animate-pulse'
-                  : 'bg-blue-400'
-                  }`}
-              ></div>
-            </button>
+              {isEpisodeSelectorCollapsed ? '显示' : '隐藏'}
+            </Button>
           </div>
 
           <div
@@ -2712,39 +2585,15 @@ function PlayPageClient() {
 
                 {/* 换源加载蒙层 */}
                 {isVideoLoading && (
-                  <div className='absolute inset-0 bg-black/85 backdrop-blur-sm rounded-xl flex items-center justify-center z-[500] transition-all duration-300'>
-                    <div className='text-center max-w-md mx-auto px-6'>
-                      {/* 动画影院图标 */}
-                      <div className='relative mb-8'>
-                        <div className='relative mx-auto w-24 h-24 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl shadow-2xl flex items-center justify-center transform hover:scale-105 transition-transform duration-300'>
-                          <div className='text-white text-4xl'>🎬</div>
-                          {/* 旋转光环 */}
-                          <div className='absolute -inset-2 bg-gradient-to-r from-blue-500 to-blue-600 rounded-2xl opacity-20 animate-spin'></div>
-                        </div>
-
-                        {/* 浮动粒子效果 */}
-                        <div className='absolute top-0 left-0 w-full h-full pointer-events-none'>
-                          <div className='absolute top-2 left-2 w-2 h-2 bg-blue-400 rounded-full animate-bounce'></div>
-                          <div
-                            className='absolute top-4 right-4 w-1.5 h-1.5 bg-blue-400 rounded-full animate-bounce'
-                            style={{ animationDelay: '0.5s' }}
-                          ></div>
-                          <div
-                            className='absolute bottom-3 left-6 w-1 h-1 bg-blue-300 rounded-full animate-bounce'
-                            style={{ animationDelay: '1s' }}
-                          ></div>
-                        </div>
-                      </div>
-
-                      {/* 换源消息 */}
-                      <div className='space-y-2'>
-                        <p className='text-xl font-semibold text-white animate-pulse'>
-                          {videoLoadingStage === 'sourceChanging'
-                            ? '🔄 切换播放源...'
-                            : '🔄 视频加载中...'}
-                        </p>
-                      </div>
-                    </div>
+                  <div className='absolute inset-0 z-[500] flex items-center justify-center bg-black/85'>
+                    <Card variant='default' className='max-w-md p-6 text-center'>
+                      <Spinner />
+                      <p className='mt-4 text-lg font-semibold'>
+                        {videoLoadingStage === 'sourceChanging'
+                          ? '切换播放源...'
+                          : '视频加载中...'}
+                      </p>
+                    </Card>
                   </div>
                 )}
               </div>
@@ -2783,33 +2632,35 @@ function PlayPageClient() {
               {/* 标题 */}
               <h1 className='text-3xl font-bold mb-2 tracking-wide flex items-center flex-shrink-0 text-center md:text-left w-full'>
                 {videoTitle || '影片标题'}
-                <button
-                  onClick={(e) => {
-                    e.stopPropagation();
+                <Button
+                  isIconOnly
+                  variant='tertiary'
+                  aria-label={favorited ? '取消收藏' : '收藏'}
+                  onPress={() => {
                     handleToggleFavorite();
                   }}
-                  className='ml-3 flex-shrink-0 hover:opacity-80 transition-opacity'
+                  className='ml-3 flex-shrink-0'
                 >
                   <FavoriteIcon filled={favorited} />
-                </button>
+                </Button>
               </h1>
 
               {/* 关键信息行 */}
               <div className='flex flex-wrap items-center gap-3 text-base mb-4 opacity-80 flex-shrink-0'>
                 {detail?.class && (
-                  <span className='text-blue-600 font-semibold'>
+                  <Chip color='accent' variant='secondary'>
                     {detail.class}
-                  </span>
+                  </Chip>
                 )}
                 {(detail?.year || videoYear) && (
-                  <span>{detail?.year || videoYear}</span>
+                  <Chip variant='secondary'>{detail?.year || videoYear}</Chip>
                 )}
                 {detail?.source_name && (
-                  <span className='border border-gray-500/60 px-2 py-[1px] rounded'>
+                  <Chip variant='secondary'>
                     {detail.source_name}
-                  </span>
+                  </Chip>
                 )}
-                {detail?.type_name && <span>{detail.type_name}</span>}
+                {detail?.type_name && <Chip variant='secondary'>{detail.type_name}</Chip>}
               </div>
 
               {/* 短剧专用标签展示 */}
@@ -2822,11 +2673,9 @@ function PlayPageClient() {
                         <span className='text-xs text-gray-500 dark:text-gray-400 font-medium'>
                           分类:
                         </span>
-                        <span
-                          className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium border ${getTagColor(vodClass, true)}`}
-                        >
+                        <Chip color='accent' variant='secondary' size='sm'>
                           📂 {vodClass}
-                        </span>
+                        </Chip>
                       </div>
                     )}
 
@@ -2837,12 +2686,13 @@ function PlayPageClient() {
                           标签:
                         </span>
                         {parseVodTags(vodTag).map((tag, index) => (
-                          <span
+                          <Chip
                             key={index}
-                            className={`inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium ${getTagColor(tag, false)}`}
+                            variant='secondary'
+                            size='sm'
                           >
                             🏷️ {tag}
-                          </span>
+                          </Chip>
                         ))}
                       </div>
                     )}
@@ -2881,7 +2731,7 @@ function PlayPageClient() {
                         rel='noopener noreferrer'
                         className='absolute top-3 left-3'
                       >
-                        <div className='bg-blue-500 text-white text-xs font-bold w-8 h-8 rounded-full flex items-center justify-center shadow-md hover:bg-blue-600 hover:scale-[1.1] transition-all duration-300 ease-out'>
+                        <Button isIconOnly size='sm' variant='primary' aria-label='打开豆瓣页面'>
                           <svg
                             width='16'
                             height='16'
@@ -2895,7 +2745,7 @@ function PlayPageClient() {
                             <path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'></path>
                             <path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'></path>
                           </svg>
-                        </div>
+                        </Button>
                       </a>
                     )}
                   </>
@@ -2944,4 +2794,4 @@ export default function PlayPage() {
       <PlayPageClient />
     </Suspense>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/search/page.tsx b/src/app/search/page.tsx
index 267a480..c576c3b 100644
--- a/src/app/search/page.tsx
+++ b/src/app/search/page.tsx
@@ -2,6 +2,16 @@
 'use client';
 
 import { ChevronUp, Search, X } from 'lucide-react';
+import {
+  Button,
+  Card,
+  Chip,
+  EmptyState,
+  Input,
+  Spinner,
+  Switch,
+  Tooltip,
+} from '@heroui/react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React, { startTransition, Suspense, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -1021,7 +1031,7 @@ function SearchPageClient() {
           <form onSubmit={handleSearch} className='max-w-2xl mx-auto'>
             <div className='relative'>
               <Search className='absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-muted' />
-              <input
+              <Input
                 id='searchInput'
                 type='text'
                 value={searchQuery}
@@ -1029,14 +1039,18 @@ function SearchPageClient() {
                 onFocus={handleInputFocus}
                 placeholder='搜索电影、电视剧、短剧...'
                 autoComplete="off"
-                className='w-full h-12 rounded-2xl border border-border bg-surface/90 py-3 pl-10 pr-12 text-sm text-foreground placeholder:text-muted shadow-sm backdrop-blur focus:border-accent focus:bg-surface focus:outline-none focus:ring-2 focus:ring-accent/20'
+                fullWidth
+                className='pl-10 pr-12'
               />
 
               {/* 清除按钮 */}
               {searchQuery && (
-                <button
+                <Button
                   type='button'
-                  onClick={() => {
+                  isIconOnly
+                  size='sm'
+                  variant='ghost'
+                  onPress={() => {
                     setSearchQuery('');
                     setShowSuggestions(false);
                     document.getElementById('searchInput')?.focus();
@@ -1045,7 +1059,7 @@ function SearchPageClient() {
                   aria-label='清除搜索内容'
                 >
                   <X className='h-5 w-5' />
-                </button>
+                </Button>
               )}
 
               {/* 搜索建议 */}
@@ -1071,7 +1085,7 @@ function SearchPageClient() {
         {/* 搜索结果或搜索历史 */}
         <div className='max-w-[95%] mx-auto mt-12 overflow-visible'>
           {showResults ? (
-            <section className='mb-12 rounded-3xl border border-border/70 bg-surface/70 p-5 shadow-sm backdrop-blur sm:p-6'>
+            <Card className='mb-12'>
               {/* 标题 */}
               <div className='mb-4'>
                 <h2 className='text-xl font-semibold tracking-normal text-foreground'>
@@ -1082,9 +1096,7 @@ function SearchPageClient() {
                     </span>
                   )}
                   {isLoading && useFluidSearch && (
-                    <span className='ml-2 inline-block align-middle'>
-                      <span className='inline-block h-3 w-3 animate-spin rounded-full border-2 border-border border-t-accent'></span>
-                    </span>
+                    <Spinner size='sm' className='ml-2 inline-flex align-middle' />
                   )}
                 </h2>
               </div>
@@ -1106,29 +1118,26 @@ function SearchPageClient() {
                   )}
                 </div>
                 {/* 聚合开关 */}
-                <label className='flex items-center gap-2 cursor-pointer select-none shrink-0'>
-                  <span className='text-xs sm:text-sm font-medium text-muted'>聚合</span>
-                  <div className='relative'>
-                    <input
-                      type='checkbox'
-                      className='sr-only peer'
-                      checked={viewMode === 'agg'}
-                      onChange={() => setViewMode(viewMode === 'agg' ? 'all' : 'agg')}
-                    />
-                    <div className='w-9 h-5 rounded-full bg-surface-secondary transition-colors peer-checked:bg-accent'></div>
-                    <div className='absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-surface shadow-sm transition-transform peer-checked:translate-x-4'></div>
-                  </div>
-                </label>
+                <Switch
+                  size='sm'
+                  isSelected={viewMode === 'agg'}
+                  onChange={() => setViewMode(viewMode === 'agg' ? 'all' : 'agg')}
+                >
+                  <Switch.Control>
+                    <Switch.Thumb />
+                  </Switch.Control>
+                  <Switch.Content>聚合</Switch.Content>
+                </Switch>
               </div>
               {searchResults.length === 0 ? (
                 isLoading ? (
-                  <div className='flex justify-center items-center h-40'>
-                    <div className='h-8 w-8 animate-spin rounded-full border-2 border-border border-t-accent'></div>
+                  <div className='flex h-40 items-center justify-center'>
+                    <Spinner />
                   </div>
                 ) : (
-                  <div className='rounded-2xl border border-dashed border-border bg-surface-secondary/60 py-8 text-center text-muted'>
+                  <EmptyState>
                     未找到相关结果
-                  </div>
+                  </EmptyState>
                 )
               ) : (
                 <div
@@ -1196,51 +1205,56 @@ function SearchPageClient() {
                     ))}
                 </div>
               )}
-            </section>
+            </Card>
           ) : searchHistory.length > 0 ? (
             // 搜索历史
-            <section className='mb-12 rounded-3xl border border-border/70 bg-surface/70 p-5 shadow-sm backdrop-blur sm:p-6'>
-              <h2 className='mb-4 text-left text-xl font-semibold tracking-normal text-foreground'>
-                搜索历史
+            <Card className='mb-12'>
+              <Card.Header className='flex-row items-center justify-between gap-3'>
+                <Card.Title>搜索历史</Card.Title>
                 {searchHistory.length > 0 && (
-                  <button
-                    onClick={() => {
+                  <Button
+                    variant='danger'
+                    size='sm'
+                    onPress={() => {
                       clearSearchHistory(); // 事件监听会自动更新界面
                     }}
-                    className='ml-3 text-sm text-muted transition-colors hover:text-danger'
                   >
                     清空
-                  </button>
+                  </Button>
                 )}
-              </h2>
+              </Card.Header>
               <div className='flex flex-wrap gap-2'>
                 {searchHistory.map((item) => (
                   <div key={item} className='relative group'>
-                    <button
+                    <Chip
+                      role='button'
+                      tabIndex={0}
                       onClick={() => {
                         // 直接调用搜索函数
                         performSearch(item.trim());
                       }}
-                      className='rounded-full border border-border bg-surface-secondary px-4 py-2 text-sm text-foreground transition-colors duration-200 hover:border-accent/40 hover:bg-accent/10 hover:text-accent'
+                      color='accent'
+                      variant='soft'
                     >
-                      {item}
-                    </button>
+                      <Chip.Label>{item}</Chip.Label>
+                    </Chip>
                     {/* 删除按钮 */}
-                    <button
+                    <Button
                       aria-label='删除搜索历史'
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        e.preventDefault();
+                      isIconOnly
+                      size='sm'
+                      variant='danger'
+                      className='absolute -right-2 -top-2 opacity-0 group-hover:opacity-100'
+                      onPress={() => {
                         deleteSearchHistory(item); // 事件监听会自动更新界面
                       }}
-                      className='absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-muted text-[10px] text-white opacity-0 transition-colors hover:bg-danger group-hover:opacity-100'
                     >
                       <X className='w-3 h-3' />
-                    </button>
+                    </Button>
                   </div>
                 ))}
               </div>
-            </section>
+            </Card>
           ) : null}
         </div>
       </div>
@@ -1252,62 +1266,18 @@ function SearchPageClient() {
           : 'opacity-0 translate-y-4 pointer-events-none'
           }`}
       >
-        <button
-          onClick={scrollToTop}
-          className='group relative h-14 w-14 rounded-2xl border border-border bg-overlay shadow-xl backdrop-blur-xl transition-all duration-300 ease-out hover:scale-105 hover:border-accent/40 focus:outline-none focus:ring-2 focus:ring-accent/20'
-          aria-label={`返回顶部 (${Math.round(scrollProgress)}%)`}
-          style={{
-            background: `conic-gradient(from 0deg, rgb(var(--color-accent)) ${scrollProgress * 3.6}deg, rgb(var(--color-accent) / 0.12) ${scrollProgress * 3.6}deg)`
-          }}
-        >
-          {/* 内部发光圆圈 */}
-          <div className='absolute inset-1 flex items-center justify-center rounded-xl bg-surface/90 backdrop-blur-sm transition-all duration-300 group-hover:bg-accent/15'>
-            <ChevronUp className='w-6 h-6 text-accent transition-all duration-300 group-hover:scale-110' />
-          </div>
-
-          {/* 进度环 */}
-          <svg className='absolute inset-0 w-full h-full -rotate-90' viewBox='0 0 56 56'>
-            <circle
-              cx='28'
-              cy='28'
-              r='25'
-              fill='none'
-              stroke='rgba(255, 255, 255, 0.1)'
-              strokeWidth='2'
-            />
-            <circle
-              cx='28'
-              cy='28'
-              r='25'
-              fill='none'
-              stroke='url(#progressGradient)'
-              strokeWidth='2'
-              strokeLinecap='round'
-              strokeDasharray={`${(scrollProgress / 100) * 157} 157`}
-              className='transition-all duration-300 ease-out'
-            />
-            <defs>
-              <linearGradient id='progressGradient' x1='0%' y1='0%' x2='100%' y2='100%'>
-                <stop offset='0%' stopColor='rgb(var(--color-accent))' />
-                <stop offset='50%' stopColor='rgb(var(--color-accent))' />
-                <stop offset='100%' stopColor='rgb(var(--color-accent-strong))' />
-              </linearGradient>
-            </defs>
-          </svg>
-
-          {/* 悬停时的进度提示 */}
-          <div className='absolute -top-12 left-1/2 transform -translate-x-1/2 opacity-0 group-hover:opacity-100 transition-all duration-300 pointer-events-none'>
-            <div className='rounded-xl border border-border bg-overlay px-3 py-1.5 text-xs text-foreground shadow-xl backdrop-blur'>
-              <div className='text-center font-medium'>
-                {Math.round(scrollProgress)}%
-              </div>
-              <div className='absolute -bottom-1 left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 border-b border-r border-border bg-overlay'></div>
-            </div>
-          </div>
-
-          {/* 脉冲动画 */}
-          <div className='absolute inset-0 animate-pulse rounded-2xl bg-accent/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100'></div>
-        </button>
+        <Tooltip>
+          <Tooltip.Trigger>
+          <Button
+            onPress={scrollToTop}
+            isIconOnly
+            aria-label={`返回顶部 (${Math.round(scrollProgress)}%)`}
+          >
+            <ChevronUp className='w-6 h-6' />
+          </Button>
+          </Tooltip.Trigger>
+          <Tooltip.Content>{Math.round(scrollProgress)}%</Tooltip.Content>
+        </Tooltip>
       </div>
     </PageLayout>
   );
diff --git a/src/app/shortdrama/page.tsx b/src/app/shortdrama/page.tsx
index 4c6e4aa..6fc69c7 100644
--- a/src/app/shortdrama/page.tsx
+++ b/src/app/shortdrama/page.tsx
@@ -3,6 +3,7 @@
 'use client';
 
 import { Suspense, useCallback, useEffect, useRef, useState } from 'react';
+import { Card, EmptyState, Spinner } from '@heroui/react';
 
 import {
   getShortDramaList,
@@ -250,12 +251,12 @@ function ShortDramaPageClient() {
           </div>
 
           {/* 选择器组件 */}
-          <div className='app-filter-panel'>
+          <Card>
             <ShortDramaSelector
               selectedCategory={selectedCategory}
               onCategoryChange={handleCategoryChange}
             />
-          </div>
+          </Card>
         </div>
 
         {/* 内容展示区域 */}
@@ -305,8 +306,8 @@ function ShortDramaPageClient() {
             >
               {isLoadingMore && (
                 <div className='flex items-center gap-2'>
-                  <div className='animate-spin rounded-full h-6 w-6 border-b-2 border-blue-500'></div>
-                  <span className='text-gray-600 dark:text-gray-400'>加载中...</span>
+                  <Spinner size='sm' />
+                  <span className='text-muted'>加载中...</span>
                 </div>
               )}
             </div>
@@ -314,9 +315,9 @@ function ShortDramaPageClient() {
 
           {/* 没有更多数据提示 */}
           {!hasMore && shortDramaData.length > 0 && (
-            <div className='text-center text-gray-500 dark:text-gray-400 py-8'>
+            <EmptyState className='py-8'>
               已加载全部内容
-            </div>
+            </EmptyState>
           )}
 
           {/* 空状态 */}
diff --git a/src/app/warning/page.tsx b/src/app/warning/page.tsx
index b7934d7..aad1339 100644
--- a/src/app/warning/page.tsx
+++ b/src/app/warning/page.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from 'next';
+import WarningClient from './warning-client';
 
 export const metadata: Metadata = {
   title: '安全警告 - OrangeTV',
@@ -6,92 +7,5 @@ export const metadata: Metadata = {
 };
 
 export default function WarningPage() {
-  return (
-    <div className='min-h-screen bg-gradient-to-br from-red-50 to-orange-50 flex items-center justify-center p-4'>
-      <div className='max-w-2xl w-full bg-white rounded-2xl shadow-2xl p-4 sm:p-8 border border-red-200'>
-        {/* 警告图标 */}
-        <div className='flex justify-center mb-4 sm:mb-6'>
-          <div className='w-16 h-16 sm:w-20 sm:h-20 bg-red-100 rounded-full flex items-center justify-center'>
-            <svg
-              className='w-10 h-10 sm:w-12 sm:h-12 text-red-600'
-              fill='none'
-              stroke='currentColor'
-              viewBox='0 0 24 24'
-            >
-              <path
-                strokeLinecap='round'
-                strokeLinejoin='round'
-                strokeWidth={2}
-                d='M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z'
-              />
-            </svg>
-          </div>
-        </div>
-
-        {/* 标题 */}
-        <div className='text-center mb-6 sm:mb-8'>
-          <h1 className='text-2xl sm:text-3xl font-bold text-gray-900 mb-2'>
-            安全合规配置警告
-          </h1>
-          <div className='w-12 sm:w-16 h-1 bg-red-500 mx-auto rounded-full'></div>
-        </div>
-
-        {/* 警告内容 */}
-        <div className='space-y-4 sm:space-y-6 text-gray-700'>
-          <div className='bg-red-50 border-l-4 border-red-500 p-3 sm:p-4 rounded-r-lg'>
-            <p className='text-base sm:text-lg font-semibold text-red-800 mb-2'>
-              ⚠️ 安全风险提示
-            </p>
-            <p className='text-sm sm:text-base text-red-700'>
-              检测到您的站点未配置访问控制，存在潜在的安全风险和法律合规问题。
-            </p>
-          </div>
-
-          <div className='space-y-3 sm:space-y-4'>
-            <h2 className='text-lg sm:text-xl font-semibold text-gray-900'>
-              主要风险
-            </h2>
-            <ul className='space-y-2 sm:space-y-3 text-sm sm:text-base text-gray-600'>
-              <li className='flex items-start'>
-                <span className='text-red-500 mr-2 mt-0.5'>•</span>
-                <span>未经授权的访问可能导致内容被恶意传播</span>
-              </li>
-              <li className='flex items-start'>
-                <span className='text-red-500 mr-2 mt-0.5'>•</span>
-                <span>服务器资源可能被滥用，影响正常服务</span>
-              </li>
-              <li className='flex items-start'>
-                <span className='text-red-500 mr-2 mt-0.5'>•</span>
-                <span>可能收到相关权利方的法律通知</span>
-              </li>
-              <li className='flex items-start'>
-                <span className='text-red-500 mr-2 mt-0.5'>•</span>
-                <span>服务提供商可能因合规问题终止服务</span>
-              </li>
-            </ul>
-          </div>
-
-          <div className='bg-yellow-50 border border-yellow-200 rounded-lg p-3 sm:p-4'>
-            <h3 className='text-base sm:text-lg font-semibold text-yellow-800 mb-2'>
-              🔒 安全配置建议
-            </h3>
-            <p className='text-sm sm:text-base text-yellow-700'>
-              请立即配置{' '}
-              <code className='bg-yellow-100 px-1.5 py-0.5 rounded text-xs sm:text-sm font-mono'>
-                PASSWORD
-              </code>{' '}
-              环境变量以启用访问控制。
-            </p>
-          </div>
-        </div>
-
-        {/* 底部装饰 */}
-        <div className='mt-6 sm:mt-8 pt-4 sm:pt-6 border-t border-gray-200'>
-          <div className='text-center text-xs sm:text-sm text-gray-500'>
-            <p>为确保系统安全性和合规性，请及时完成安全配置</p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+  return <WarningClient />;
 }
diff --git a/src/app/warning/warning-client.tsx b/src/app/warning/warning-client.tsx
new file mode 100644
index 0000000..1e944d0
--- /dev/null
+++ b/src/app/warning/warning-client.tsx
@@ -0,0 +1,72 @@
+'use client';
+
+import { Alert, Card, Chip } from '@heroui/react';
+import { AlertTriangle, ShieldAlert } from 'lucide-react';
+
+export default function WarningClient() {
+  return (
+    <div className='min-h-screen flex items-center justify-center p-4'>
+      <Card variant='default' className='max-w-2xl w-full p-4 sm:p-8'>
+        <Card.Header className='items-center text-center'>
+          <Chip color='danger' variant='secondary' size='lg'>
+            <ShieldAlert className='h-6 w-6' />
+          </Chip>
+          <Card.Title className='mt-4 text-2xl sm:text-3xl'>
+            安全合规配置警告
+          </Card.Title>
+        </Card.Header>
+
+        <Card.Content className='space-y-4 sm:space-y-6'>
+          <Alert status='danger'>
+            <Alert.Indicator>
+              <AlertTriangle className='h-5 w-5' />
+            </Alert.Indicator>
+            <Alert.Content>
+              <Alert.Title>安全风险提示</Alert.Title>
+              <Alert.Description>
+                检测到您的站点未配置访问控制，存在潜在的安全风险和法律合规问题。
+              </Alert.Description>
+            </Alert.Content>
+          </Alert>
+
+          <div className='space-y-3 sm:space-y-4'>
+            <h2 className='text-lg sm:text-xl font-semibold'>主要风险</h2>
+            <ul className='space-y-2 sm:space-y-3 text-sm sm:text-base text-muted'>
+              <li className='flex items-start gap-2'>
+                <Chip color='danger' size='sm'>1</Chip>
+                <span>未经授权的访问可能导致内容被恶意传播</span>
+              </li>
+              <li className='flex items-start gap-2'>
+                <Chip color='danger' size='sm'>2</Chip>
+                <span>服务器资源可能被滥用，影响正常服务</span>
+              </li>
+              <li className='flex items-start gap-2'>
+                <Chip color='danger' size='sm'>3</Chip>
+                <span>可能收到相关权利方的法律通知</span>
+              </li>
+              <li className='flex items-start gap-2'>
+                <Chip color='danger' size='sm'>4</Chip>
+                <span>服务提供商可能因合规问题终止服务</span>
+              </li>
+            </ul>
+          </div>
+
+          <Alert status='warning'>
+            <Alert.Title>安全配置建议</Alert.Title>
+            <Alert.Description>
+              请立即配置{' '}
+              <code className='font-mono text-xs sm:text-sm'>PASSWORD</code>{' '}
+              环境变量以启用访问控制。
+            </Alert.Description>
+          </Alert>
+        </Card.Content>
+
+        <Card.Footer>
+          <div className='text-center text-xs sm:text-sm text-muted w-full'>
+            <p>为确保系统安全性和合规性，请及时完成安全配置</p>
+          </div>
+        </Card.Footer>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
index 07685bc..3139549 100644
--- a/src/components/BackButton.tsx
+++ b/src/components/BackButton.tsx
@@ -6,10 +6,9 @@ export function BackButton() {
   return (
     <AppIconButton
       onPress={() => window.history.back()}
-      className='a2-icon-button'
       aria-label='Back'
     >
-      <ArrowLeft className='w-full h-full' />
+      <ArrowLeft className='h-5 w-5' />
     </AppIconButton>
   );
 }
diff --git a/src/components/ChatModal.tsx b/src/components/ChatModal.tsx
index 50b34e4..c3910e3 100644
--- a/src/components/ChatModal.tsx
+++ b/src/components/ChatModal.tsx
@@ -1,11 +1,25 @@
 'use client';
 
 import { MessageCircle, Search, Users, X, Send, UserPlus, Smile, Image as ImageIcon, Paperclip } from 'lucide-react';
+import {
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Chip,
+  Input,
+  Label,
+  ScrollShadow,
+  Spinner,
+  TextArea,
+  TextField,
+} from '@heroui/react';
 import { useEffect, useState, useRef, useCallback } from 'react';
 import { ChatMessage, Conversation, Friend, FriendRequest, WebSocketMessage } from '../lib/types';
 import { getAuthInfoFromBrowserCookie } from '../lib/auth';
 import { useWebSocket } from '../hooks/useWebSocket';
 import { useToast } from './Toast';
+import { AppDialog, AppTabs } from './ui/HeroPrimitives';
 
 interface ChatModalProps {
   isOpen: boolean;
@@ -828,560 +842,366 @@ export function ChatModal({
     }
   };
 
+  const pendingFriendRequests = friendRequests.filter(
+    (req) => req.to_user === currentUser?.username && req.status === 'pending'
+  );
+
+  const renderAvatar = (
+    username: string,
+    displayName = getDisplayName(username),
+    size: 'sm' | 'md' | 'lg' = 'md'
+  ) => (
+    <Avatar size={size}>
+      <Avatar.Image src={getAvatarUrl(username)} alt={displayName} />
+      <Avatar.Fallback>{displayName.charAt(0).toUpperCase()}</Avatar.Fallback>
+    </Avatar>
+  );
+
+  const renderPresence = (username: string) => (
+    <span
+      className={`absolute -bottom-0.5 -right-0.5 h-3.5 w-3.5 rounded-full border-2 border-background ${
+        isUserOnline(username) ? 'bg-success' : 'bg-muted'
+      }`}
+    />
+  );
+
+  const getConversationAvatar = (conv: Conversation) => {
+    if (conv.participants.length === 2) {
+      const otherUser = conv.participants.find(
+        (participant) => participant !== currentUser?.username
+      );
+
+      return otherUser ? (
+        <div className='relative'>
+          {renderAvatar(otherUser, getDisplayName(otherUser), 'lg')}
+          {renderPresence(otherUser)}
+        </div>
+      ) : null;
+    }
+
+    return (
+      <Badge color='accent' size='sm'>
+        <Badge.Anchor>
+          <Avatar size='lg'>
+            <Avatar.Fallback>
+              <Users className='h-5 w-5' />
+            </Avatar.Fallback>
+          </Avatar>
+        </Badge.Anchor>
+        <Badge.Label>{conv.participants.length}</Badge.Label>
+      </Badge>
+    );
+  };
+
+  const selectedOtherUser =
+    selectedConversation?.participants.length === 2
+      ? selectedConversation.participants.find(
+          (participant) => participant !== currentUser?.username
+        )
+      : null;
+
   if (!isOpen) return null;
 
   return (
-    <div
-      className={`z-[2147483647] ${isMobile
-        ? 'fixed top-0 left-0 right-0 bottom-0 bg-white dark:bg-gray-900'
-        : 'fixed inset-0 flex items-center justify-center bg-black bg-opacity-50'
-        }`}
-      style={{
-        zIndex: '2147483647',
-        ...(isMobile && {
-          paddingTop: '56px', // 减少顶部padding
-          paddingBottom: '72px' // 减少底部padding
-        })
+    <AppDialog
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
       }}
+      title='聊天'
+      description={isConnected ? '实时连接已建立' : '实时连接未建立'}
+      size='cover'
+      className='h-[min(86vh,52rem)]'
     >
-      <div
-        className={`${isMobile
-          ? 'w-full bg-white dark:bg-gray-900 flex flex-col'
-          : 'w-full max-w-6xl h-[80vh] bg-white dark:bg-gray-900 rounded-lg shadow-xl flex flex-row relative'
+      <div className='grid h-full min-h-[32rem] grid-cols-1 overflow-hidden md:grid-cols-[22rem_minmax(0,1fr)]'>
+        <section
+          className={`min-h-0 flex-col gap-4 pr-0 md:flex md:border-r md:border-border md:pr-4 ${
+            isMobile && selectedConversation ? 'hidden' : 'flex'
           }`}
-        style={{
-          transform: !isMobile ? `translate(${dragPosition.x}px, ${dragPosition.y}px)` : 'none',
-          transition: isDragging ? 'none' : 'transform 0.2s ease-out',
-          ...(isMobile && {
-            height: 'calc(100vh - 128px)', // 调整为新的padding总和
-            minHeight: 'calc(100vh - 128px)'
-          })
-        }}
-      >
-        {/* 拖动头部 - 仅桌面端显示 */}
-        <div
-          className="absolute top-0 left-0 right-0 h-8 bg-gray-100 dark:bg-gray-800 rounded-t-lg cursor-grab active:cursor-grabbing hidden md:flex items-center justify-center"
-          onMouseDown={handleMouseDown}
-          onTouchStart={handleTouchStart}
-          style={{ cursor: isDragging ? 'grabbing' : 'grab' }}
         >
-          <div className="flex space-x-1">
-            <div className="w-2 h-2 bg-gray-400 rounded-full"></div>
-            <div className="w-2 h-2 bg-gray-400 rounded-full"></div>
-            <div className="w-2 h-2 bg-gray-400 rounded-full"></div>
-          </div>
-        </div>
-        {/* 左侧面板 */}
-        <div className={`${isMobile
-          ? `w-full flex flex-col ${selectedConversation ? 'hidden' : 'flex'}`
-          : `w-1/3 border-r border-gray-200 dark:border-gray-700 flex flex-col mt-8 h-auto ${selectedConversation ? 'block' : 'block'}`
-          }`}
-          style={{
-            ...(isMobile && {
-              height: '100%',
-              maxHeight: '100%'
-            })
-          }}>
-          {/* 头部 */}
-          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-            <div className="flex items-center justify-between mb-4">
-              <div className="flex items-center space-x-2">
-                <h2 className="text-lg font-semibold">聊天</h2>
-                <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-400' : 'bg-red-400'
-                  }`} title={isConnected ? '已连接' : '未连接'} />
-              </div>
-              <button
-                onClick={onClose}
-                className="p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            {/* 标签页 */}
-            <div className="flex space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
-              <button
-                onClick={() => handleTabChange('chat')}
-                className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-colors relative ${activeTab === 'chat'
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-                  }`}
-              >
-                <MessageCircle className="w-4 h-4 inline-block mr-1" />
-                对话
-                {unreadChatCount > 0 && activeTab !== 'chat' && (
-                  <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
-                    {unreadChatCount > 99 ? '99+' : unreadChatCount}
+          <AppTabs
+            ariaLabel='聊天类型'
+            selectedKey={activeTab}
+            onSelectionChange={(key) => handleTabChange(key as 'chat' | 'friends')}
+            items={[
+              {
+                key: 'chat',
+                label: (
+                  <span className='inline-flex items-center gap-2'>
+                    <MessageCircle className='h-4 w-4' />
+                    对话
+                    {unreadChatCount > 0 && (
+                      <Chip color='danger' size='sm'>
+                        {unreadChatCount > 99 ? '99+' : unreadChatCount}
+                      </Chip>
+                    )}
                   </span>
-                )}
-              </button>
-              <button
-                onClick={() => handleTabChange('friends')}
-                className={`flex-1 py-2 px-3 rounded-md text-sm font-medium transition-colors relative ${activeTab === 'friends'
-                  ? 'bg-white dark:bg-gray-700 text-gray-900 dark:text-white shadow-sm'
-                  : 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white'
-                  }`}
-              >
-                <Users className="w-4 h-4 inline-block mr-1" />
-                好友
-                {unreadFriendRequestCount > 0 && activeTab !== 'friends' && (
-                  <span className="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">
-                    {unreadFriendRequestCount > 99 ? '99+' : unreadFriendRequestCount}
+                ),
+              },
+              {
+                key: 'friends',
+                label: (
+                  <span className='inline-flex items-center gap-2'>
+                    <Users className='h-4 w-4' />
+                    好友
+                    {unreadFriendRequestCount > 0 && (
+                      <Chip color='danger' size='sm'>
+                        {unreadFriendRequestCount > 99 ? '99+' : unreadFriendRequestCount}
+                      </Chip>
+                    )}
                   </span>
-                )}
-              </button>
-            </div>
-          </div>
+                ),
+              },
+            ]}
+          />
 
-          {/* 搜索栏 */}
-          <div className="p-4 border-b border-gray-200 dark:border-gray-700">
-            {activeTab === 'chat' ? (
-              <div className="relative">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
-                <input
-                  type="text"
-                  placeholder="搜索对话..."
-                  value={searchQuery}
-                  onChange={(e) => setSearchQuery(e.target.value)}
-                  className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                />
-              </div>
-            ) : (
-              <div className="space-y-2">
-                <div className="relative">
-                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400" />
-                  <input
-                    type="text"
-                    placeholder="搜索用户..."
-                    value={friendSearchQuery}
-                    onChange={(e) => {
-                      setFriendSearchQuery(e.target.value);
-                    }}
-                    className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-800 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                  />
-                </div>
+          <TextField>
+            <Label className='sr-only'>
+              {activeTab === 'chat' ? '搜索对话' : '搜索用户'}
+            </Label>
+            <Input
+              type='search'
+              placeholder={activeTab === 'chat' ? '搜索对话...' : '搜索用户...'}
+              value={activeTab === 'chat' ? searchQuery : friendSearchQuery}
+              onChange={(event) =>
+                activeTab === 'chat'
+                  ? setSearchQuery(event.target.value)
+                  : setFriendSearchQuery(event.target.value)
+              }
+            />
+          </TextField>
 
-                {/* 搜索结果显示在搜索框下方 */}
-                {searchResults.length > 0 && (
-                  <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg max-h-60 overflow-y-auto">
-                    <div className="p-2">
-                      <h4 className="text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">搜索结果</h4>
-                      {searchResults.map((user) => (
-                        <div key={user.id} className="flex items-center justify-between p-2 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg transition-colors">
-                          <div className="flex items-center space-x-3 flex-1">
-                            {/* 用户头像 */}
-                            <img
-                              src={getAvatarUrl(user.username)}
-                              alt={user.nickname || user.username}
-                              className="w-8 h-8 rounded-full ring-1 ring-gray-200 dark:ring-gray-600"
-                              onError={(e) => {
-                                const target = e.target as HTMLImageElement;
-                                target.style.display = 'none';
-                                target.nextElementSibling?.classList.remove('hidden');
-                              }}
-                            />
-                            <div className="hidden w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-xs font-medium ring-1 ring-gray-200 dark:ring-gray-600">
-                              {(user.nickname || user.username).charAt(0).toUpperCase()}
-                            </div>
-
-                            <div className="flex-1 min-w-0">
-                              <div className="font-medium text-gray-900 dark:text-white text-sm truncate">
-                                {user.nickname || user.username}
-                              </div>
-                              <div className="text-xs text-gray-500 dark:text-gray-400">
-                                {isFriend(user.username) ? '已是好友' : '陌生人'}
-                              </div>
-                            </div>
-                          </div>
-
-                          {!isFriend(user.username) && (
-                            <button
-                              onClick={() => sendFriendRequest(user.username)}
-                              className="ml-2 p-1.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-                              title="发送好友申请"
-                            >
-                              <UserPlus className="w-3 h-3" />
-                            </button>
-                          )}
-                        </div>
-                      ))}
+          {activeTab === 'friends' && searchResults.length > 0 ? (
+            <Card variant='secondary' className='p-3'>
+              <p className='mb-2 text-xs font-medium text-muted'>搜索结果</p>
+              <div className='space-y-2'>
+                {searchResults.map((user) => (
+                  <div key={user.id} className='flex items-center gap-3'>
+                    {renderAvatar(user.username, user.nickname || user.username, 'sm')}
+                    <div className='min-w-0 flex-1'>
+                      <p className='truncate text-sm font-medium'>
+                        {user.nickname || user.username}
+                      </p>
+                      <p className='text-xs text-muted'>
+                        {isFriend(user.username) ? '已是好友' : '陌生人'}
+                      </p>
                     </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-
-          {/* 列表内容 */}
-          <div className="flex-1 overflow-y-auto">
-            {activeTab === 'chat' ? (
-              <div className="space-y-1 p-2">
-                {filteredConversations.map((conv) => {
-                  // 获取对话头像 - 私人对话显示对方头像，群聊显示群组图标
-                  const getConversationAvatar = () => {
-                    if (conv.participants.length === 2) {
-                      // 私人对话：显示对方用户的头像
-                      const otherUser = conv.participants.find(p => p !== currentUser?.username);
-                      return otherUser ? (
-                        <div className="relative">
-                          <img
-                            src={getAvatarUrl(otherUser)}
-                            alt={getDisplayName(otherUser)}
-                            className="w-12 h-12 rounded-full ring-2 ring-white dark:ring-gray-700 shadow-sm"
-                            onError={(e) => {
-                              const target = e.target as HTMLImageElement;
-                              target.style.display = 'none';
-                              target.nextElementSibling?.classList.remove('hidden');
-                            }}
-                          />
-                          <div className="hidden w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-bold ring-2 ring-white dark:ring-gray-700 shadow-sm">
-                            {getDisplayName(otherUser).charAt(0).toUpperCase()}
-                          </div>
-                          {/* 在线状态指示器 */}
-                          <div className={`absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-full border-2 border-white dark:border-gray-700 ${isUserOnline(otherUser) ? 'bg-green-400' : 'bg-gray-400'
-                            }`} />
-                        </div>
-                      ) : null;
-                    } else {
-                      // 群聊：显示群组图标和参与者头像叠加
-                      const firstThreeParticipants = conv.participants.slice(0, 3);
-                      return (
-                        <div className="relative">
-                          <div className="w-12 h-12 rounded-full bg-gradient-to-br from-purple-500 to-pink-600 flex items-center justify-center text-white font-bold shadow-sm ring-2 ring-white dark:ring-gray-700">
-                            <Users className="w-6 h-6" />
-                          </div>
-                          {/* 群聊成员数量指示 */}
-                          <div className="absolute -bottom-0.5 -right-0.5 w-5 h-5 bg-blue-600 text-white text-xs rounded-full flex items-center justify-center font-bold border-2 border-white dark:border-gray-700">
-                            {conv.participants.length}
-                          </div>
-                        </div>
-                      );
-                    }
-                  };
-
-                  return (
-                    <button
-                      key={conv.id}
-                      onClick={() => handleConversationSelect(conv)}
-                      className={`w-full p-3 rounded-lg text-left transition-all duration-200 relative ${selectedConversation?.id === conv.id
-                        ? 'bg-blue-100 dark:bg-blue-900/50 shadow-md'
-                        : 'hover:bg-gray-100 dark:hover:bg-gray-800 hover:shadow-sm'
-                        }`}
-                    >
-                      <div className="flex items-center space-x-3">
-                        {/* 对话头像 */}
-                        <div className="flex-shrink-0">
-                          {getConversationAvatar()}
-                        </div>
-
-                        {/* 对话信息 */}
-                        <div className="flex-1 min-w-0">
-                          <div className="flex items-center justify-between mb-1">
-                            <div className="font-medium text-gray-900 dark:text-white truncate">
-                              {conv.name}
-                            </div>
-                            {/* 最后消息时间 */}
-                            {conv.last_message?.timestamp && (
-                              <div className="text-xs text-gray-400 dark:text-gray-500 ml-2 flex-shrink-0">
-                                {new Date(conv.last_message.timestamp).toLocaleTimeString('zh-CN', {
-                                  hour: '2-digit',
-                                  minute: '2-digit'
-                                })}
-                              </div>
-                            )}
-                          </div>
-
-                          <div className="flex items-center justify-between">
-                            <div className="text-sm text-gray-500 dark:text-gray-400 truncate flex-1 mr-2">
-                              {conv.last_message?.message_type === 'image'
-                                ? '[图片]'
-                                : (conv.last_message?.content || '暂无消息')
-                              }
-                            </div>
-
-                            {/* 未读消息数量 */}
-                            {conversationUnreadCounts[conv.id] > 0 && (
-                              <div className="flex-shrink-0">
-                                <span className="inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-red-500 rounded-full">
-                                  {conversationUnreadCounts[conv.id] > 99 ? '99+' : conversationUnreadCounts[conv.id]}
-                                </span>
-                              </div>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </button>
-                  );
-                })}
-              </div>
-            ) : (
-              <div className="space-y-2 p-2">
-                {/* 好友申请 */}
-                {friendRequests.filter(req => req.to_user === currentUser?.username && req.status === 'pending').length > 0 && (
-                  <div className="mb-4">
-                    <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">好友申请</h3>
-                    {friendRequests
-                      .filter(req => req.to_user === currentUser?.username && req.status === 'pending')
-                      .map((request) => (
-                        <div key={request.id} className="p-3 border border-gray-200 dark:border-gray-700 rounded-lg bg-white dark:bg-gray-800 hover:shadow-sm transition-shadow">
-                          <div className="flex items-center space-x-3 mb-3">
-                            {/* 申请者头像 */}
-                            <div className="flex-shrink-0">
-                              <img
-                                src={getAvatarUrl(request.from_user)}
-                                alt={request.from_user}
-                                className="w-10 h-10 rounded-full ring-2 ring-white dark:ring-gray-700 shadow-sm"
-                                onError={(e) => {
-                                  const target = e.target as HTMLImageElement;
-                                  target.style.display = 'none';
-                                  target.nextElementSibling?.classList.remove('hidden');
-                                }}
-                              />
-                              <div className="hidden w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-bold ring-2 ring-white dark:ring-gray-700 shadow-sm">
-                                {request.from_user.charAt(0).toUpperCase()}
-                              </div>
-                            </div>
-
-                            {/* 申请者信息 */}
-                            <div className="flex-1 min-w-0">
-                              <div className="text-sm font-medium text-gray-900 dark:text-white truncate">
-                                {request.from_user}
-                              </div>
-                              <div className="text-xs text-gray-500 dark:text-gray-400">
-                                {new Date(request.created_at).toLocaleString('zh-CN', {
-                                  month: '2-digit',
-                                  day: '2-digit',
-                                  hour: '2-digit',
-                                  minute: '2-digit'
-                                })}
-                              </div>
-                            </div>
-                          </div>
-
-                          <div className="text-xs text-gray-600 dark:text-gray-300 mb-3 pl-13">
-                            {request.message}
-                          </div>
-
-                          <div className="flex space-x-2 pl-13">
-                            <button
-                              onClick={() => handleFriendRequest(request.id, 'accepted')}
-                              className="px-3 py-1.5 bg-green-600 text-white text-xs rounded-lg hover:bg-green-700 transition-colors font-medium"
-                            >
-                              接受
-                            </button>
-                            <button
-                              onClick={() => handleFriendRequest(request.id, 'rejected')}
-                              className="px-3 py-1.5 bg-gray-500 text-white text-xs rounded-lg hover:bg-gray-600 transition-colors font-medium"
-                            >
-                              拒绝
-                            </button>
-                          </div>
-                        </div>
-                      ))}
-                  </div>
-                )}
-
-                {/* 好友列表 */}
-                <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">我的好友</h3>
-                {friends.map((friend) => (
-                  <button
-                    key={friend.id}
-                    onClick={() => startConversationWithFriend(friend.username)}
-                    className="w-full p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
-                  >
-                    <div className="flex items-center space-x-3">
-                      {/* 好友头像 */}
-                      <div className="relative">
-                        <img
-                          src={getAvatarUrl(friend.username)}
-                          alt={friend.nickname || friend.username}
-                          className="w-10 h-10 rounded-full"
-                          onError={(e) => {
-                            const target = e.target as HTMLImageElement;
-                            target.style.display = 'none';
-                            target.nextElementSibling?.classList.remove('hidden');
-                          }}
-                        />
-                        <div className="hidden w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm font-medium">
-                          {(friend.nickname || friend.username).charAt(0).toUpperCase()}
-                        </div>
-                        {/* 在线状态指示器 */}
-                        <div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white dark:border-gray-800 ${isUserOnline(friend.username) ? 'bg-green-400' : 'bg-gray-400'
-                          }`} />
-                      </div>
-                      <div className="flex-1 text-left">
-                        <div className="font-medium text-gray-900 dark:text-white">
-                          {friend.nickname || friend.username}
-                        </div>
-                        <div className="text-xs text-gray-500 dark:text-gray-400">
-                          {isUserOnline(friend.username) ? '在线' : '离线'}
-                        </div>
-                      </div>
-                    </div>
-                  </button>
-                ))}
-
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* 右侧聊天区域 */}
-        <div className={`${isMobile
-          ? `w-full flex flex-col ${selectedConversation ? 'flex' : 'hidden'}`
-          : `flex-1 flex flex-col mt-8 ${selectedConversation ? 'block' : 'block'}`
-          }`}
-          style={{
-            ...(isMobile && {
-              height: '100%',
-              maxHeight: '100%'
-            })
-          }}>
-          {selectedConversation ? (
-            <>
-              {/* 聊天头部 */}
-              <div className="p-2 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800">
-                <div className="flex items-center space-x-2">
-                  {/* 移动端返回按钮 */}
-                  {isMobile && (
-                    <button
-                      onClick={() => setSelectedConversation(null)}
-                      className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-full"
-                    >
-                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
-                      </svg>
-                    </button>
-                  )}
-                  {/* 对话头像（显示对方用户的头像，如果是群聊则显示群组图标） */}
-                  <div className="flex-shrink-0">
-                    {selectedConversation.participants.length === 2 ? (
-                      // 私人对话：显示对方的头像
-                      (() => {
-                        const otherUser = selectedConversation.participants.find(p => p !== currentUser?.username);
-                        return otherUser ? (
-                          <div className="relative">
-                            <img
-                              src={getAvatarUrl(otherUser)}
-                              alt={getDisplayName(otherUser)}
-                              className="w-12 h-12 rounded-full"
-                              onError={(e) => {
-                                const target = e.target as HTMLImageElement;
-                                target.style.display = 'none';
-                                target.nextElementSibling?.classList.remove('hidden');
-                              }}
-                            />
-                            <div className="hidden w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white font-medium">
-                              {getDisplayName(otherUser).charAt(0).toUpperCase()}
-                            </div>
-                            {/* 在线状态 */}
-                            <div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white dark:border-gray-800 ${isUserOnline(otherUser) ? 'bg-green-400' : 'bg-gray-400'
-                              }`} />
-                          </div>
-                        ) : null;
-                      })()
-                    ) : (
-                      // 群聊：显示群组图标
-                      <div className="w-12 h-12 rounded-full bg-purple-500 flex items-center justify-center text-white font-medium">
-                        <Users className="w-6 h-6" />
-                      </div>
+                    {!isFriend(user.username) && (
+                      <Button
+                        isIconOnly
+                        size='sm'
+                        variant='primary'
+                        aria-label='发送好友申请'
+                        onPress={() => sendFriendRequest(user.username)}
+                      >
+                        <UserPlus className='h-4 w-4' />
+                      </Button>
                     )}
                   </div>
+                ))}
+              </div>
+            </Card>
+          ) : null}
 
-                  <div className="flex-1 min-w-0">
-                    <h3 className="font-medium text-gray-900 dark:text-white truncate text-sm">
-                      {selectedConversation.name}
-                    </h3>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
-                      {selectedConversation.participants.length === 2 ? (
-                        // 私人对话：显示在线状态
-                        (() => {
-                          const otherUser = selectedConversation.participants.find(p => p !== currentUser?.username);
-                          return otherUser ? (
-                            <span className="flex items-center space-x-1">
-                              <span>{isUserOnline(otherUser) ? '在线' : '离线'}</span>
-                              <span>•</span>
-                              <span>{selectedConversation.participants.length} 人</span>
+          <ScrollShadow hideScrollBar className='min-h-0 flex-1'>
+            {activeTab === 'chat' ? (
+              <div className='space-y-2'>
+                {filteredConversations.map((conv) => (
+                  <Button
+                    key={conv.id}
+                    fullWidth
+                    variant={selectedConversation?.id === conv.id ? 'secondary' : 'tertiary'}
+                    className='h-auto justify-start p-3'
+                    onPress={() => handleConversationSelect(conv)}
+                  >
+                    <span className='flex w-full items-center gap-3 text-left'>
+                      {getConversationAvatar(conv)}
+                      <span className='min-w-0 flex-1'>
+                        <span className='mb-1 flex items-center justify-between gap-2'>
+                          <span className='truncate font-medium'>{conv.name}</span>
+                          {conv.last_message?.timestamp ? (
+                            <span className='shrink-0 text-xs text-muted'>
+                              {new Date(conv.last_message.timestamp).toLocaleTimeString('zh-CN', {
+                                hour: '2-digit',
+                                minute: '2-digit',
+                              })}
                             </span>
-                          ) : `${selectedConversation.participants.length} 人`;
-                        })()
-                      ) : (
-                        // 群聊：显示参与者数量
-                        `${selectedConversation.participants.length} 人`
-                      )}
-                    </div>
-                  </div>
+                          ) : null}
+                        </span>
+                        <span className='flex items-center justify-between gap-2'>
+                          <span className='truncate text-sm text-muted'>
+                            {conv.last_message?.message_type === 'image'
+                              ? '[图片]'
+                              : conv.last_message?.content || '暂无消息'}
+                          </span>
+                          {conversationUnreadCounts[conv.id] > 0 ? (
+                            <Chip color='danger' size='sm'>
+                              {conversationUnreadCounts[conv.id] > 99
+                                ? '99+'
+                                : conversationUnreadCounts[conv.id]}
+                            </Chip>
+                          ) : null}
+                        </span>
+                      </span>
+                    </span>
+                  </Button>
+                ))}
+              </div>
+            ) : (
+              <div className='space-y-4'>
+                {pendingFriendRequests.length > 0 ? (
+                  <section className='space-y-2'>
+                    <p className='text-sm font-medium'>好友申请</p>
+                    {pendingFriendRequests.map((request) => (
+                      <Card key={request.id} variant='secondary' className='p-3'>
+                        <div className='flex items-center gap-3'>
+                          {renderAvatar(request.from_user, request.from_user, 'md')}
+                          <div className='min-w-0 flex-1'>
+                            <p className='truncate text-sm font-medium'>
+                              {request.from_user}
+                            </p>
+                            <p className='text-xs text-muted'>
+                              {new Date(request.created_at).toLocaleString('zh-CN', {
+                                month: '2-digit',
+                                day: '2-digit',
+                                hour: '2-digit',
+                                minute: '2-digit',
+                              })}
+                            </p>
+                          </div>
+                        </div>
+                        <p className='mt-3 text-xs text-muted'>{request.message}</p>
+                        <div className='mt-3 flex gap-2'>
+                          <Button
+                            size='sm'
+                            variant='primary'
+                            onPress={() => handleFriendRequest(request.id, 'accepted')}
+                          >
+                            接受
+                          </Button>
+                          <Button
+                            size='sm'
+                            variant='secondary'
+                            onPress={() => handleFriendRequest(request.id, 'rejected')}
+                          >
+                            拒绝
+                          </Button>
+                        </div>
+                      </Card>
+                    ))}
+                  </section>
+                ) : null}
+
+                <section className='space-y-2'>
+                  <p className='text-sm font-medium'>我的好友</p>
+                  {friends.map((friend) => (
+                    <Button
+                      key={friend.id}
+                      fullWidth
+                      variant='tertiary'
+                      className='h-auto justify-start p-3'
+                      onPress={() => startConversationWithFriend(friend.username)}
+                    >
+                      <span className='flex w-full items-center gap-3 text-left'>
+                        <span className='relative'>
+                          {renderAvatar(friend.username, friend.nickname || friend.username, 'md')}
+                          {renderPresence(friend.username)}
+                        </span>
+                        <span className='min-w-0 flex-1'>
+                          <span className='block truncate font-medium'>
+                            {friend.nickname || friend.username}
+                          </span>
+                          <span className='block text-xs text-muted'>
+                            {isUserOnline(friend.username) ? '在线' : '离线'}
+                          </span>
+                        </span>
+                      </span>
+                    </Button>
+                  ))}
+                </section>
+              </div>
+            )}
+          </ScrollShadow>
+        </section>
+
+        <section
+          className={`min-h-0 flex-col md:flex md:pl-4 ${
+            isMobile && !selectedConversation ? 'hidden' : 'flex'
+          }`}
+        >
+          {selectedConversation ? (
+            <>
+              <div className='flex items-center gap-3 pb-3'>
+                {isMobile ? (
+                  <Button
+                    isIconOnly
+                    variant='tertiary'
+                    aria-label='返回对话列表'
+                    onPress={() => setSelectedConversation(null)}
+                  >
+                    <span aria-hidden>‹</span>
+                  </Button>
+                ) : null}
+                {selectedOtherUser ? (
+                  <span className='relative'>
+                    {renderAvatar(selectedOtherUser, getDisplayName(selectedOtherUser), 'lg')}
+                    {renderPresence(selectedOtherUser)}
+                  </span>
+                ) : (
+                  <Avatar size='lg'>
+                    <Avatar.Fallback>
+                      <Users className='h-5 w-5' />
+                    </Avatar.Fallback>
+                  </Avatar>
+                )}
+                <div className='min-w-0 flex-1'>
+                  <p className='truncate text-sm font-medium'>
+                    {selectedConversation.name}
+                  </p>
+                  <p className='text-xs text-muted'>
+                    {selectedOtherUser
+                      ? `${isUserOnline(selectedOtherUser) ? '在线' : '离线'} · ${selectedConversation.participants.length} 人`
+                      : `${selectedConversation.participants.length} 人`}
+                  </p>
                 </div>
               </div>
 
-              {/* 消息列表 */}
-              <div className={`flex-1 overflow-y-auto space-y-4 bg-gradient-to-b from-gray-50/30 to-white/50 dark:from-gray-800/30 dark:to-gray-900/50 ${isMobile ? 'p-3' : 'p-6'
-                }`}>
-                {messages.map((message, index) => {
-                  const isOwnMessage = message.sender_id === currentUser?.username;
-                  const prevMessage = index > 0 ? messages[index - 1] : null;
-                  const nextMessage = index < messages.length - 1 ? messages[index + 1] : null;
-                  // 每条消息都显示头像
-                  const showName = !prevMessage || prevMessage.sender_id !== message.sender_id;
-                  const isSequential = prevMessage && prevMessage.sender_id === message.sender_id;
+              <ScrollShadow hideScrollBar className='min-h-0 flex-1 py-2'>
+                <div className='space-y-4'>
+                  {messages.map((message, index) => {
+                    const isOwnMessage = message.sender_id === currentUser?.username;
+                    const prevMessage = index > 0 ? messages[index - 1] : null;
+                    const showName =
+                      !isOwnMessage &&
+                      (!prevMessage || prevMessage.sender_id !== message.sender_id);
 
-                  return (
-                    <div
-                      key={message.id}
-                      className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'} ${isSequential ? 'mt-1' : 'mt-4'}`}
-                    >
-                      <div className={`flex items-end space-x-3 max-w-xs lg:max-w-md xl:max-w-lg ${isOwnMessage ? 'flex-row-reverse space-x-reverse' : ''}`}>
-                        {/* 头像 - 每条消息都显示 */}
-                        <div className="flex-shrink-0">
-                          <div className="relative">
-                            <img
-                              src={getAvatarUrl(message.sender_id)}
-                              alt={getDisplayName(message.sender_id)}
-                              className="w-10 h-10 rounded-full ring-2 ring-white dark:ring-gray-600 shadow-md"
-                              onError={(e) => {
-                                // 头像加载失败时显示文字头像
-                                const target = e.target as HTMLImageElement;
-                                target.style.display = 'none';
-                                target.nextElementSibling?.classList.remove('hidden');
-                              }}
-                            />
-                            <div className="hidden w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white text-sm font-bold ring-2 ring-white dark:ring-gray-600 shadow-md">
-                              {getDisplayName(message.sender_id).charAt(0).toUpperCase()}
-                            </div>
-                            {/* 在线状态指示器 */}
-                            <div className="absolute -bottom-0.5 -right-0.5 w-3 h-3 bg-green-400 rounded-full ring-2 ring-white dark:ring-gray-700"></div>
-                          </div>
-                        </div>
-
-                        {/* 消息内容 */}
-                        <div className="flex flex-col min-w-0">
-                          {/* 发送者名称（仅在非连续消息时显示） */}
-                          {!isOwnMessage && showName && (
-                            <div className="mb-2 px-1">
-                              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                    return (
+                      <div
+                        key={message.id}
+                        className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
+                      >
+                        <div
+                          className={`flex max-w-[min(36rem,86%)] items-end gap-3 ${
+                            isOwnMessage ? 'flex-row-reverse' : ''
+                          }`}
+                        >
+                          {renderAvatar(message.sender_id, getDisplayName(message.sender_id), 'sm')}
+                          <div className='min-w-0'>
+                            {showName ? (
+                              <p className='mb-1 text-xs font-medium text-muted'>
                                 {getDisplayName(message.sender_id)}
-                              </span>
-                            </div>
-                          )}
-
-                          {/* 消息气泡 */}
-                          <div
-                            className={`relative px-5 py-3 rounded-2xl shadow-lg backdrop-blur-sm transition-all duration-200 hover:shadow-xl ${isOwnMessage
-                              ? 'bg-gradient-to-br from-blue-500 to-blue-600 text-white shadow-blue-500/25 rounded-br-md'
-                              : 'bg-white/90 dark:bg-gray-700/90 text-gray-900 dark:text-white shadow-gray-900/10 dark:shadow-black/20 ring-1 ring-gray-200/50 dark:ring-gray-600/50 rounded-bl-md'
-                              }`}
-                          >
-                            {message.message_type === 'image' ? (
-                              <div className="group">
+                              </p>
+                            ) : null}
+                            <Card
+                              variant={isOwnMessage ? 'secondary' : 'default'}
+                              className='p-3'
+                            >
+                              {message.message_type === 'image' ? (
                                 <img
                                   src={message.content}
-                                  alt="图片消息"
-                                  className="max-w-full h-auto rounded-xl cursor-pointer transition-transform group-hover:scale-[1.02] shadow-md"
-                                  style={{ maxHeight: '300px' }}
+                                  alt='图片消息'
+                                  className='max-h-[300px] max-w-full cursor-pointer object-contain'
                                   onClick={() => {
-                                    // 点击图片放大查看
-                                    const img = new Image();
-                                    img.src = message.content;
                                     const newWindow = window.open('');
                                     if (newWindow) {
                                       newWindow.document.write(`
@@ -1401,220 +1221,156 @@ export function ChatModal({
                                     }
                                   }}
                                 />
-                                {/* 图片遮罩 */}
-                                <div className="absolute inset-0 bg-black/0 group-hover:bg-black/5 rounded-xl transition-colors pointer-events-none"></div>
-                              </div>
-                            ) : (
-                              <div className="text-sm leading-relaxed whitespace-pre-wrap break-words">
-                                {message.content}
-                              </div>
-                            )}
-
-                            {/* 消息气泡装饰尾巴 */}
-                            <div
-                              className={`absolute bottom-2 w-3 h-3 ${isOwnMessage
-                                ? 'right-0 -mr-1.5 bg-gradient-to-br from-blue-500 to-blue-600'
-                                : 'left-0 -ml-1.5 bg-white/90 dark:bg-gray-700/90 ring-1 ring-gray-200/50 dark:ring-gray-600/50'
-                                } transform rotate-45`}
-                            ></div>
-                          </div>
-
-                          {/* 时间戳显示在消息气泡下方 */}
-                          <div className={`mt-1 px-1 ${isOwnMessage ? 'flex justify-end' : 'flex justify-start'}`}>
-                            <span className="text-xs text-gray-400 dark:text-gray-500">
+                              ) : (
+                                <p className='whitespace-pre-wrap break-words text-sm leading-relaxed'>
+                                  {message.content}
+                                </p>
+                              )}
+                            </Card>
+                            <p
+                              className={`mt-1 text-xs text-muted ${
+                                isOwnMessage ? 'text-right' : 'text-left'
+                              }`}
+                            >
                               {formatMessageTime(message.timestamp)}
-                            </span>
+                            </p>
                           </div>
                         </div>
                       </div>
-                    </div>
-                  );
-                })}
-                <div ref={messagesEndRef} />
+                    );
+                  })}
+                  <div ref={messagesEndRef} />
+                </div>
+              </ScrollShadow>
 
-                {/* 消息列表底部装饰 */}
-                <div className="h-4"></div>
-              </div>
-
-              {/* 消息输入区域 */}
-              <div className="border-t border-gray-200 dark:border-gray-700 bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 relative">
-                {/* 表情选择器 - 绝对定位，不占据文档流空间 */}
-                {showEmojiPicker && (
-                  <div className="emoji-picker-container absolute left-4 right-4 bottom-full mb-2 p-3 bg-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-2xl shadow-xl z-50">
-                    <div className="flex items-center justify-between mb-3">
-                      <h3 className="text-sm font-medium text-gray-700 dark:text-gray-300">选择表情</h3>
-                      <button
-                        onClick={() => setShowEmojiPicker(false)}
-                        className="p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-full transition-colors"
+              <div className='relative pt-3'>
+                {showEmojiPicker ? (
+                  <Card
+                    variant='default'
+                    className='emoji-picker-container absolute bottom-full left-0 right-0 z-50 mb-2 p-3'
+                  >
+                    <div className='mb-3 flex items-center justify-between'>
+                      <p className='text-sm font-medium'>选择表情</p>
+                      <Button
+                        isIconOnly
+                        size='sm'
+                        variant='tertiary'
+                        aria-label='关闭表情'
+                        onPress={() => setShowEmojiPicker(false)}
                       >
-                        <X className="w-4 h-4" />
-                      </button>
+                        <X className='h-4 w-4' />
+                      </Button>
                     </div>
-                    <div className="grid grid-cols-9 gap-1 max-h-40 overflow-y-auto custom-scrollbar">
+                    <div className='grid max-h-40 grid-cols-9 gap-1 overflow-y-auto'>
                       {emojis.map((emoji, index) => (
-                        <button
-                          key={index}
-                          onClick={() => handleEmojiSelect(emoji)}
-                          className="p-2 text-xl hover:bg-blue-50 dark:hover:bg-blue-900/30 rounded-xl transition-all duration-200 hover:scale-110 active:scale-95"
-                          title={emoji}
+                        <Button
+                          key={`${emoji}-${index}`}
+                          isIconOnly
+                          variant='tertiary'
+                          aria-label={`选择表情 ${emoji}`}
+                          onPress={() => handleEmojiSelect(emoji)}
                         >
-                          {emoji}
-                        </button>
+                          <span className='text-xl'>{emoji}</span>
+                        </Button>
                       ))}
                     </div>
-                  </div>
-                )}
+                  </Card>
+                ) : null}
 
-                {/* 主输入区域 */}
-                <div className={`${isMobile ? 'p-2' : 'p-3'} pb-safe`}>
-                  <div className="bg-white dark:bg-gray-700 rounded-2xl shadow-sm border border-gray-200/80 dark:border-gray-600/80 backdrop-blur-sm">
-                    {/* 顶部工具栏 */}
-                    <div className="flex items-center justify-between px-3 py-1.5 border-b border-gray-100 dark:border-gray-600">
-                      {/* 左侧功能按钮组 */}
-                      <div className="flex items-center space-x-1">
-                        {/* 表情按钮 */}
-                        <button
-                          onClick={() => setShowEmojiPicker(!showEmojiPicker)}
-                          className={`emoji-picker-container p-2 rounded-xl transition-all duration-200 transform hover:scale-105 ${showEmojiPicker
-                            ? 'bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400'
-                            : 'text-gray-500 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-900/20'
-                            }`}
-                          title="表情"
-                        >
-                          <Smile className="w-5 h-5" />
-                        </button>
-
-                        {/* 图片上传按钮 */}
-                        <button
-                          onClick={() => fileInputRef.current?.click()}
-                          disabled={uploadingImage}
-                          className="p-2 text-gray-500 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-xl transition-all duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
-                          title="上传图片"
-                        >
-                          {uploadingImage ? (
-                            <div className="w-5 h-5 border-2 border-green-500 border-t-transparent rounded-full animate-spin" />
-                          ) : (
-                            <ImageIcon className="w-5 h-5" />
-                          )}
-                        </button>
-
-                        {/* 隐藏的文件输入 */}
-                        <input
-                          ref={fileInputRef}
-                          type="file"
-                          accept="image/*"
-                          className="hidden"
-                          onChange={handleImageUpload}
-                        />
-
-                        {/* 附件按钮（预留） */}
-                        <button
-                          className="p-2 text-gray-400 hover:text-purple-500 hover:bg-purple-50 dark:hover:bg-purple-900/20 rounded-xl transition-all duration-200 transform hover:scale-105"
-                          disabled
-                          title="附件（即将开放）"
-                        >
-                          <Paperclip className="w-5 h-5" />
-                        </button>
-                      </div>
-
-                      {/* 右侧状态指示 */}
-                      <div className="flex items-center space-x-2">
-                        {/* 字符计数 */}
-                        <span className="text-xs text-gray-400">
-                          {newMessage.length > 0 && (
-                            <span className={newMessage.length > 500 ? 'text-red-500' : ''}>
-                              {newMessage.length}/1000
-                            </span>
-                          )}
-                        </span>
-                        {/* 连接状态 */}
-                        <div className="flex items-center space-x-1">
-                          <div className={`w-2 h-2 rounded-full ${isConnected ? 'bg-green-400' : 'bg-red-400'}`} />
-                          <span className="text-xs text-gray-400">
-                            {isConnected ? '在线' : '离线'}
-                          </span>
-                        </div>
-                      </div>
+                <Card variant='secondary' className='p-3'>
+                  <div className='mb-2 flex items-center justify-between gap-2'>
+                    <div className='flex items-center gap-1'>
+                      <Button
+                        isIconOnly
+                        variant={showEmojiPicker ? 'secondary' : 'tertiary'}
+                        aria-label='表情'
+                        className='emoji-picker-container'
+                        onPress={() => setShowEmojiPicker(!showEmojiPicker)}
+                      >
+                        <Smile className='h-5 w-5' />
+                      </Button>
+                      <Button
+                        isIconOnly
+                        variant='tertiary'
+                        aria-label='上传图片'
+                        isDisabled={uploadingImage}
+                        onPress={() => fileInputRef.current?.click()}
+                      >
+                        {uploadingImage ? <Spinner size='sm' /> : <ImageIcon className='h-5 w-5' />}
+                      </Button>
+                      <input
+                        ref={fileInputRef}
+                        type='file'
+                        accept='image/*'
+                        className='hidden'
+                        onChange={handleImageUpload}
+                      />
+                      <Button
+                        isIconOnly
+                        variant='tertiary'
+                        aria-label='附件即将开放'
+                        isDisabled
+                      >
+                        <Paperclip className='h-5 w-5' />
+                      </Button>
                     </div>
-
-                    {/* 消息输入区域 */}
-                    <div className="p-3">
-                      <div className="relative">
-                        <textarea
-                          value={newMessage}
-                          onChange={(e) => setNewMessage(e.target.value)}
-                          placeholder="输入消息内容... 按Enter发送，Shift+Enter换行"
-                          className="w-full px-3 py-2 pr-14 bg-gray-50 dark:bg-gray-600 border-0 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:bg-white dark:focus:bg-gray-500 placeholder-gray-400 dark:placeholder-gray-400 resize-none min-h-[40px] max-h-28 transition-all duration-200"
-                          rows={1}
-                          maxLength={1000}
-                          style={{ height: 'auto' }}
-                          onInput={(e) => {
-                            // 自动调整高度
-                            const target = e.target as HTMLTextAreaElement;
-                            target.style.height = 'auto';
-                            target.style.height = Math.min(target.scrollHeight, 128) + 'px';
-                          }}
-                          onKeyDown={(e) => {
-                            if (e.key === 'Enter' && !e.shiftKey) {
-                              e.preventDefault();
-                              handleSendMessage();
-                            }
-                          }}
-                        />
-
-                        {/* 发送按钮 */}
-                        <button
-                          onClick={handleSendMessage}
-                          disabled={!newMessage.trim() || uploadingImage}
-                          className="absolute right-2 bottom-2 p-3 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white rounded-xl transition-all duration-200 transform hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 shadow-lg hover:shadow-xl"
-                          title={!newMessage.trim() ? '请输入消息内容' : '发送消息 (Enter)'}
-                        >
-                          <Send className="w-4 h-4" />
-                        </button>
-                      </div>
-                    </div>
-
-                    {/* 底部信息栏 */}
-                    <div className="flex items-center justify-between px-3 py-1.5 bg-gray-50 dark:bg-gray-600/50 rounded-b-2xl border-t border-gray-100 dark:border-gray-600">
-                      <div className="flex items-center space-x-4 text-xs text-gray-500 dark:text-gray-400">
-                        <span className="flex items-center space-x-1">
-                          <span>📝</span>
-                          <span>支持文字</span>
+                    <div className='flex items-center gap-2 text-xs text-muted'>
+                      {newMessage.length > 0 ? (
+                        <span className={newMessage.length > 500 ? 'text-danger' : ''}>
+                          {newMessage.length}/1000
                         </span>
-                        <span className="flex items-center space-x-1">
-                          <span>😊</span>
-                          <span>表情</span>
-                        </span>
-                        <span className="flex items-center space-x-1">
-                          <span>🖼️</span>
-                          <span>图片 (5MB内)</span>
-                        </span>
-                      </div>
-
-                      <div className="text-xs text-gray-400">
-                        {uploadingImage ? (
-                          <span className="flex items-center space-x-1 text-blue-500">
-                            <div className="w-3 h-3 border border-blue-500 border-t-transparent rounded-full animate-spin" />
-                            <span>上传中...</span>
-                          </span>
-                        ) : (
-                          <span>Enter发送</span>
-                        )}
-                      </div>
+                      ) : null}
+                      <Chip color={isConnected ? 'success' : 'danger'} size='sm'>
+                        {isConnected ? '在线' : '离线'}
+                      </Chip>
                     </div>
                   </div>
-                </div>
+
+                  <div className='relative'>
+                    <TextArea
+                      value={newMessage}
+                      onChange={(event) => setNewMessage(event.target.value)}
+                      placeholder='输入消息内容... 按Enter发送，Shift+Enter换行'
+                      className='max-h-28 min-h-12 w-full pr-14'
+                      rows={1}
+                      maxLength={1000}
+                      onInput={(event) => {
+                        const target = event.target as HTMLTextAreaElement;
+                        target.style.height = 'auto';
+                        target.style.height = Math.min(target.scrollHeight, 128) + 'px';
+                      }}
+                      onKeyDown={(event) => {
+                        if (event.key === 'Enter' && !event.shiftKey) {
+                          event.preventDefault();
+                          handleSendMessage();
+                        }
+                      }}
+                    />
+                    <Button
+                      isIconOnly
+                      variant='primary'
+                      aria-label={!newMessage.trim() ? '请输入消息内容' : '发送消息'}
+                      className='absolute bottom-1.5 right-1.5'
+                      isDisabled={!newMessage.trim() || uploadingImage}
+                      onPress={handleSendMessage}
+                    >
+                      <Send className='h-4 w-4' />
+                    </Button>
+                  </div>
+                  <div className='mt-2 flex items-center justify-between text-xs text-muted'>
+                    <span>支持文字、表情、5MB 内图片</span>
+                    <span>{uploadingImage ? '上传中...' : 'Enter发送'}</span>
+                  </div>
+                </Card>
               </div>
             </>
           ) : (
-            !isMobile && (
-              <div className="flex-1 flex items-center justify-center text-gray-500 dark:text-gray-400">
-                选择一个对话开始聊天
-              </div>
-            )
+            <div className='flex h-full items-center justify-center text-muted'>
+              选择一个对话开始聊天
+            </div>
           )}
-        </div>
+        </section>
       </div>
-    </div>
+    </AppDialog>
   );
 }
diff --git a/src/components/ContinueWatching.tsx b/src/components/ContinueWatching.tsx
index 1928e7d..249fdf2 100644
--- a/src/components/ContinueWatching.tsx
+++ b/src/components/ContinueWatching.tsx
@@ -2,6 +2,7 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import { Button, Card, Skeleton } from '@heroui/react';
 
 import type { PlayRecord } from '@/lib/db.client';
 import {
@@ -86,26 +87,24 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) {
   };
 
   return (
-    <section className={`rounded-3xl border border-border/70 bg-surface/70 p-5 shadow-sm backdrop-blur sm:p-6 ${className || ''}`}>
-      <div className='mb-5 flex items-end justify-between gap-4'>
-        <div className='space-y-1'>
-          <p className='a2-kicker'>最近观看</p>
-          <h2 className='text-2xl font-semibold tracking-normal text-foreground'>
-            继续观看
-          </h2>
+    <Card className={className}>
+      <Card.Header className='flex-row items-end justify-between gap-4'>
+        <div>
+          <Card.Description>最近观看</Card.Description>
+          <Card.Title>继续观看</Card.Title>
         </div>
         {!loading && playRecords.length > 0 && (
-          <button
-            className='a2-link-action'
-            onClick={async () => {
+          <Button
+            variant='danger'
+            onPress={async () => {
               await clearAllPlayRecords();
               setPlayRecords([]);
             }}
           >
             清空
-          </button>
+          </Button>
         )}
-      </div>
+      </Card.Header>
       <ScrollableRow>
         {loading
           ? // 加载状态显示灰色占位数据
@@ -114,11 +113,9 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) {
                 key={index}
                 className='min-w-[96px] w-24 sm:min-w-[180px] sm:w-44'
               >
-                <div className='relative aspect-[2/3] w-full overflow-hidden rounded-2xl border border-border bg-surface-secondary animate-pulse'>
-                  <div className='absolute inset-0 bg-surface-tertiary'></div>
-                </div>
-                <div className='mt-3 h-4 rounded-lg bg-surface-secondary animate-pulse'></div>
-                <div className='mt-1 h-3 rounded-lg bg-surface-secondary animate-pulse'></div>
+                <Skeleton className='aspect-[2/3] w-full' />
+                <Skeleton className='mt-3 h-4' />
+                <Skeleton className='mt-1 h-3' />
               </div>
             ))
           : // 显示真实数据
@@ -152,6 +149,6 @@ export default function ContinueWatching({ className }: ContinueWatchingProps) {
               );
             })}
       </ScrollableRow>
-    </section>
+    </Card>
   );
 }
diff --git a/src/components/DataMigration.tsx b/src/components/DataMigration.tsx
index 11cf18f..8bad12f 100644
--- a/src/components/DataMigration.tsx
+++ b/src/components/DataMigration.tsx
@@ -3,7 +3,8 @@
 
 import { AlertCircle, AlertTriangle, CheckCircle, Download, FileCheck, Lock, Upload } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
+import { Alert, Button, Card, Chip, Input, Label, Spinner, TextField } from '@heroui/react';
+import { AppDialog } from './ui/HeroPrimitives';
 
 interface DataMigrationProps {
   onRefreshConfig?: () => Promise<void>;
@@ -34,107 +35,80 @@ const AlertModal = ({
   showConfirm = false,
   timer
 }: AlertModalProps) => {
-  const [isVisible, setIsVisible] = useState(false);
-
-  // 控制动画状态
   useEffect(() => {
-    if (isOpen) {
-      setIsVisible(true);
-      if (timer) {
-        setTimeout(() => {
-          onClose();
-        }, timer);
-      }
-    } else {
-      setIsVisible(false);
+    if (isOpen && timer) {
+      const timeout = setTimeout(onClose, timer);
+      return () => clearTimeout(timeout);
     }
   }, [isOpen, timer, onClose]);
 
-  if (!isOpen) return null;
-
   const getIcon = () => {
     switch (type) {
       case 'success':
-        return <CheckCircle className="w-12 h-12 text-green-500" />;
+        return <CheckCircle className="h-5 w-5" />;
       case 'error':
-        return <AlertCircle className="w-12 h-12 text-red-500" />;
+        return <AlertCircle className="h-5 w-5" />;
       case 'warning':
-        return <AlertTriangle className="w-12 h-12 text-yellow-500" />;
+        return <AlertTriangle className="h-5 w-5" />;
       default:
         return null;
     }
   };
 
-  const getBgColor = () => {
+  const getStatus = () => {
     switch (type) {
       case 'success':
-        return 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800';
+        return 'success';
       case 'error':
-        return 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800';
+        return 'danger';
       case 'warning':
-        return 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800';
+        return 'warning';
       default:
-        return 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800';
+        return 'accent';
     }
   };
 
-  return createPortal(
-    <div className={`fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4 transition-opacity duration-200 ${isVisible ? 'opacity-100' : 'opacity-0'}`} onClick={onClose}>
-      <div className={`bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full border ${getBgColor()} transition-all duration-200 ${isVisible ? 'scale-100' : 'scale-95'}`} onClick={(e) => e.stopPropagation()}>
-        <div className="p-6 text-center">
-          <div className="flex justify-center mb-4">
-            {getIcon()}
-          </div>
-
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2">
-            {title}
-          </h3>
-
-          {message && (
-            <p className="text-gray-600 dark:text-gray-400 mb-4">
-              {message}
-            </p>
-          )}
-
-          {html && (
-            <div
-              className="text-left text-gray-600 dark:text-gray-400 mb-4"
-              dangerouslySetInnerHTML={{ __html: html }}
-            />
-          )}
-
-          <div className="flex justify-center space-x-3">
-            {showConfirm && onConfirm ? (
-              <>
-                <button
-                  onClick={onClose}
-                  className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-lg transition-colors"
-                >
-                  取消
-                </button>
-                <button
-                  onClick={() => {
-                    onConfirm();
-                    onClose();
-                  }}
-                  className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
-                >
-                  {confirmText}
-                </button>
-              </>
-            ) : (
-              <button
-                onClick={onClose}
-                className="px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors"
-              >
-                确定
-              </button>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>,
-    document.body
+  return (
+    <AppDialog
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      title={title}
+      icon={getIcon()}
+      footer={
+        showConfirm && onConfirm ? (
+          <>
+            <Button variant='secondary' onPress={onClose}>
+              取消
+            </Button>
+            <Button
+              variant='primary'
+              onPress={() => {
+                onConfirm();
+                onClose();
+              }}
+            >
+              {confirmText}
+            </Button>
+          </>
+        ) : (
+          <Button variant='primary' onPress={onClose}>
+            确定
+          </Button>
+        )
+      }
+    >
+      <Alert status={getStatus()}>
+        {message ? <p>{message}</p> : null}
+        {html ? (
+          <div
+            className='text-sm leading-6'
+            dangerouslySetInnerHTML={{ __html: html }}
+          />
+        ) : null}
+      </Alert>
+    </AppDialog>
   );
 };
 
@@ -334,51 +308,47 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
     <>
       <div className="max-w-6xl mx-auto space-y-6">
         {/* 简洁警告提示 */}
-        <div className="flex items-center gap-3 p-4 border border-amber-200 dark:border-amber-700 rounded-lg bg-amber-50/30 dark:bg-amber-900/5">
-          <AlertTriangle className="w-5 h-5 text-amber-600 dark:text-amber-400 flex-shrink-0" />
-          <p className="text-sm text-amber-800 dark:text-amber-200">
-            数据迁移操作请谨慎，确保已备份重要数据
-          </p>
-        </div>
+        <Alert status='warning'>
+          数据迁移操作请谨慎，确保已备份重要数据
+        </Alert>
 
         {/* 主要操作区域 - 响应式布局 */}
         <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
           {/* 数据导出 */}
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-gray-800 hover:shadow-sm transition-shadow flex flex-col">
+          <Card variant='default' className='p-6'>
             <div className="flex items-center gap-3 mb-6">
-              <div className="w-8 h-8 rounded-lg bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center">
-                <Download className="w-4 h-4 text-blue-600 dark:text-blue-400" />
-              </div>
+              <Chip variant='secondary' size='lg'>
+                <Download className="w-4 h-4" />
+              </Chip>
               <div>
-                <h3 className="font-semibold text-gray-900 dark:text-gray-100">数据导出</h3>
-                <p className="text-sm text-gray-600 dark:text-gray-400">创建加密备份文件</p>
+                <h3 className="font-semibold">数据导出</h3>
+                <p className="text-sm text-muted">创建加密备份文件</p>
               </div>
             </div>
 
             <div className="flex-1 flex flex-col">
               <div className="space-y-4">
                 {/* 密码输入 */}
-                <div>
-                  <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <TextField>
+                  <Label className="flex items-center gap-2">
                     <Lock className="w-4 h-4" />
                     加密密码
-                  </label>
-                  <input
+                  </Label>
+                  <Input
                     type="password"
                     value={exportPassword}
                     onChange={(e) => setExportPassword(e.target.value)}
                     placeholder="设置强密码保护备份文件"
-                    className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                     disabled={isExporting}
                   />
-                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  <p className="text-xs text-muted">
                     导入时需要使用相同密码
                   </p>
-                </div>
+                </TextField>
 
                 {/* 备份内容列表 */}
-                <div className="text-xs text-gray-600 dark:text-gray-400 space-y-1">
-                  <p className="font-medium text-gray-700 dark:text-gray-300 mb-2">备份内容：</p>
+                <div className="text-xs text-muted space-y-1">
+                  <p className="font-medium text-foreground mb-2">备份内容：</p>
                   <div className="grid grid-cols-2 gap-1">
                     <div>• 管理配置</div>
                     <div>• 用户数据</div>
@@ -389,17 +359,16 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
               </div>
 
               {/* 导出按钮 */}
-              <button
-                onClick={handleExport}
-                disabled={isExporting || !exportPassword.trim()}
-                className={`w-full px-4 py-2.5 rounded-lg font-medium transition-colors mt-10 ${isExporting || !exportPassword.trim()
-                  ? 'bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-gray-500 dark:text-gray-400'
-                  : 'bg-blue-600 hover:bg-blue-700 text-white'
-                  }`}
+              <Button
+                fullWidth
+                variant='primary'
+                className='mt-10'
+                onPress={handleExport}
+                isDisabled={isExporting || !exportPassword.trim()}
               >
                 {isExporting ? (
                   <div className="flex items-center justify-center gap-2">
-                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                    <Spinner size='sm' />
                     导出中...
                   </div>
                 ) : (
@@ -408,74 +377,80 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
                     导出数据
                   </div>
                 )}
-              </button>
+              </Button>
             </div>
-          </div>
+          </Card>
 
           {/* 数据导入 */}
-          <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-6 bg-white dark:bg-gray-800 hover:shadow-sm transition-shadow flex flex-col">
+          <Card variant='default' className='p-6'>
             <div className="flex items-center gap-3 mb-6">
-              <div className="w-8 h-8 rounded-lg bg-red-50 dark:bg-red-900/20 flex items-center justify-center">
-                <Upload className="w-4 h-4 text-red-600 dark:text-red-400" />
-              </div>
+              <Chip color='danger' variant='secondary' size='lg'>
+                <Upload className="w-4 h-4" />
+              </Chip>
               <div>
-                <h3 className="font-semibold text-gray-900 dark:text-gray-100">数据导入</h3>
-                <p className="text-sm text-red-600 dark:text-red-400">⚠️ 将清空现有数据</p>
+                <h3 className="font-semibold">数据导入</h3>
+                <p className="text-sm text-danger">将清空现有数据</p>
               </div>
             </div>
 
             <div className="flex-1 flex flex-col">
               <div className="space-y-4">
                 {/* 文件选择 */}
-                <div>
-                  <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <div className='space-y-2'>
+                  <p className="flex items-center gap-2 text-sm font-medium">
                     <FileCheck className="w-4 h-4" />
                     备份文件
                     {selectedFile && (
-                      <span className="ml-auto text-xs text-green-600 dark:text-green-400 font-normal">
+                      <span className="ml-auto text-xs text-success font-normal">
                         {selectedFile.name} ({(selectedFile.size / 1024).toFixed(1)} KB)
                       </span>
                     )}
-                  </label>
+                  </p>
                   <input
                     ref={fileInputRef}
                     type="file"
                     accept=".dat"
                     onChange={handleFileSelect}
-                    className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-red-500 focus:border-red-500 file:mr-3 file:py-1.5 file:px-3 file:rounded file:border-0 file:text-sm file:font-medium file:bg-gray-50 dark:file:bg-gray-600 file:text-gray-700 dark:file:text-gray-300 hover:file:bg-gray-100 dark:hover:file:bg-gray-500 transition-colors"
+                    className="sr-only"
                     disabled={isImporting}
                   />
+                  <Button
+                    variant='secondary'
+                    onPress={() => fileInputRef.current?.click()}
+                    isDisabled={isImporting}
+                  >
+                    <FileCheck className='h-4 w-4' />
+                    选择备份文件
+                  </Button>
                 </div>
 
                 {/* 密码输入 */}
-                <div>
-                  <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                <TextField>
+                  <Label className="flex items-center gap-2">
                     <Lock className="w-4 h-4" />
                     解密密码
-                  </label>
-                  <input
+                  </Label>
+                  <Input
                     type="password"
                     value={importPassword}
                     onChange={(e) => setImportPassword(e.target.value)}
                     placeholder="输入导出时的加密密码"
-                    className="w-full px-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-red-500 focus:border-red-500 transition-colors"
                     disabled={isImporting}
                   />
-                </div>
+                </TextField>
               </div>
 
               {/* 导入按钮 */}
-              <button
-                onClick={handleImport}
-                disabled={isImporting || !selectedFile || !importPassword.trim()}
-                className={`w-full px-4 py-2.5 rounded-lg font-medium transition-colors mt-10 ${isImporting || !selectedFile || !importPassword.trim()
-                  ? 'bg-gray-100 dark:bg-gray-700 cursor-not-allowed text-gray-500 dark:text-gray-400'
-                  : 'bg-red-600 hover:bg-red-700 text-white'
-                  }`}
+              <Button
+                fullWidth
+                variant='primary'
+                className='mt-10'
+                onPress={handleImport}
+                isDisabled={isImporting || !selectedFile || !importPassword.trim()}
               >
                 {isImporting ? (
                   <div className="flex items-center justify-center gap-2">
-                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
+                    <Spinner size='sm' />
                     导入中...
                   </div>
                 ) : (
@@ -484,9 +459,9 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
                     导入数据
                   </div>
                 )}
-              </button>
+              </Button>
             </div>
-          </div>
+          </Card>
         </div>
       </div>
 
@@ -507,4 +482,4 @@ const DataMigration = ({ onRefreshConfig }: DataMigrationProps) => {
   );
 };
 
-export default DataMigration;
\ No newline at end of file
+export default DataMigration;
diff --git a/src/components/DoubanCustomSelector.tsx b/src/components/DoubanCustomSelector.tsx
index 0786a37..306782c 100644
--- a/src/components/DoubanCustomSelector.tsx
+++ b/src/components/DoubanCustomSelector.tsx
@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { AppFilterTabs } from './ui/HeroPrimitives';
+import { AppFilterSelect } from './ui/HeroPrimitives';
 
 interface CustomCategory {
   name: string;
@@ -22,18 +22,17 @@ interface DoubanCustomSelectorProps {
 
 const renderSelector = (
   label: string,
+  ariaLabel: string,
   options: { label: string; value: string }[],
   activeValue: string | undefined,
   onChange: (value: string) => void
 ) => (
-  <AppFilterTabs
-    ariaLabel={label}
-    selectedKey={activeValue}
-    onSelectionChange={onChange}
-    items={options.map((option) => ({
-      key: option.value,
-      label: option.label,
-    }))}
+  <AppFilterSelect
+    ariaLabel={ariaLabel}
+    label={label}
+    options={options}
+    value={activeValue}
+    onChange={onChange}
   />
 );
 
@@ -76,31 +75,23 @@ const DoubanCustomSelector: React.FC<DoubanCustomSelectorProps> = ({
 
   return (
     <div className='space-y-4 sm:space-y-6'>
-      <div className='space-y-3 sm:space-y-4'>
-        <div className='app-filter-row'>
-          <span className='app-filter-label'>类型</span>
-          <div className='min-w-0'>
-            {renderSelector(
-              '自定义类型',
-              primaryOptions,
-              primarySelection || primaryOptions[0]?.value,
-              onPrimaryChange
-            )}
-          </div>
-        </div>
+      <div className='grid min-w-0 grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-5'>
+        {renderSelector(
+          '类型',
+          '自定义类型选项',
+          primaryOptions,
+          primarySelection || primaryOptions[0]?.value,
+          onPrimaryChange
+        )}
 
         {secondaryOptions.length > 0 && (
-          <div className='app-filter-row'>
-            <span className='app-filter-label'>片单</span>
-            <div className='min-w-0'>
-              {renderSelector(
-                '自定义片单',
-                secondaryOptions,
-                secondarySelection || secondaryOptions[0]?.value,
-                onSecondaryChange
-              )}
-            </div>
-          </div>
+          renderSelector(
+            '片单',
+            '自定义片单选项',
+            secondaryOptions,
+            secondarySelection || secondaryOptions[0]?.value,
+            onSecondaryChange
+          )
         )}
       </div>
     </div>
diff --git a/src/components/DoubanSelector.tsx b/src/components/DoubanSelector.tsx
index e0e287f..d13803e 100644
--- a/src/components/DoubanSelector.tsx
+++ b/src/components/DoubanSelector.tsx
@@ -5,7 +5,7 @@
 import React from 'react';
 
 import MultiLevelSelector from './MultiLevelSelector';
-import { AppFilterTabs } from './ui/HeroPrimitives';
+import { AppFilterSelect } from './ui/HeroPrimitives';
 import WeekdaySelector from './WeekdaySelector';
 
 interface SelectorOption {
@@ -73,31 +73,27 @@ const animePrimaryOptions: SelectorOption[] = [
 
 const renderSelector = (
   label: string,
+  ariaLabel: string,
   options: SelectorOption[],
   activeValue: string | undefined,
   onChange: (value: string) => void
 ) => (
-  <AppFilterTabs
-    ariaLabel={label}
-    selectedKey={activeValue}
-    onSelectionChange={onChange}
-    items={options.map((option) => ({
-      key: option.value,
-      label: option.label,
-    }))}
+  <AppFilterSelect
+    ariaLabel={ariaLabel}
+    label={label}
+    options={options}
+    value={activeValue}
+    onChange={onChange}
   />
 );
 
-const FilterRow = ({
-  label,
+const FilterGrid = ({
   children,
 }: {
-  label: string;
   children: React.ReactNode;
 }) => (
-  <div className='app-filter-row'>
-    <span className='app-filter-label'>{label}</span>
-    <div className='min-w-0'>{children}</div>
+  <div className='grid min-w-0 grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-5'>
+    {children}
   </div>
 );
 
@@ -117,86 +113,81 @@ const DoubanSelector: React.FC<DoubanSelectorProps> = ({
   return (
     <div className='space-y-4 sm:space-y-6'>
       {type === 'movie' && (
-        <div className='space-y-3 sm:space-y-4'>
-          <FilterRow label='分类'>
-            {renderSelector(
-              '电影分类',
-              moviePrimaryOptions,
-              primarySelection || moviePrimaryOptions[0].value,
-              onPrimaryChange
-            )}
-          </FilterRow>
+        <FilterGrid>
+          {renderSelector(
+            '分类',
+            '电影分类选项',
+            moviePrimaryOptions,
+            primarySelection || moviePrimaryOptions[0].value,
+            onPrimaryChange
+          )}
 
           {primarySelection !== '全部' ? (
-            <FilterRow label='地区'>
-              {renderSelector(
-                '电影地区',
-                movieSecondaryOptions,
-                secondarySelection || movieSecondaryOptions[0].value,
-                onSecondaryChange
-              )}
-            </FilterRow>
+            renderSelector(
+              '地区',
+              '电影地区选项',
+              movieSecondaryOptions,
+              secondarySelection || movieSecondaryOptions[0].value,
+              onSecondaryChange
+            )
           ) : (
-            <FilterRow label='筛选'>
+            <div className='col-span-full'>
               <MultiLevelSelector
                 key={`${type}-${primarySelection}`}
                 onChange={handleMultiLevelChange}
                 contentType={type}
               />
-            </FilterRow>
+            </div>
           )}
-        </div>
+        </FilterGrid>
       )}
 
       {type === 'tv' && (
-        <div className='space-y-3 sm:space-y-4'>
-          <FilterRow label='分类'>
-            {renderSelector(
-              '剧集分类',
-              tvPrimaryOptions,
-              primarySelection || tvPrimaryOptions[1].value,
-              onPrimaryChange
-            )}
-          </FilterRow>
+        <FilterGrid>
+          {renderSelector(
+            '分类',
+            '剧集分类选项',
+            tvPrimaryOptions,
+            primarySelection || tvPrimaryOptions[1].value,
+            onPrimaryChange
+          )}
 
           {(primarySelection || tvPrimaryOptions[1].value) === '最近热门' ? (
-            <FilterRow label='类型'>
-              {renderSelector(
-                '剧集类型',
-                tvSecondaryOptions,
-                secondarySelection || tvSecondaryOptions[0].value,
-                onSecondaryChange
-              )}
-            </FilterRow>
+            renderSelector(
+              '类型',
+              '剧集类型选项',
+              tvSecondaryOptions,
+              secondarySelection || tvSecondaryOptions[0].value,
+              onSecondaryChange
+            )
           ) : (primarySelection || tvPrimaryOptions[1].value) === '全部' ? (
-            <FilterRow label='筛选'>
+            <div className='col-span-full'>
               <MultiLevelSelector
                 key={`${type}-${primarySelection}`}
                 onChange={handleMultiLevelChange}
                 contentType={type}
               />
-            </FilterRow>
+            </div>
           ) : null}
-        </div>
+        </FilterGrid>
       )}
 
       {type === 'anime' && (
-        <div className='space-y-3 sm:space-y-4'>
-          <FilterRow label='分类'>
-            {renderSelector(
-              '动漫分类',
-              animePrimaryOptions,
-              primarySelection || animePrimaryOptions[0].value,
-              onPrimaryChange
-            )}
-          </FilterRow>
+        <FilterGrid>
+          {renderSelector(
+            '分类',
+            '动漫分类选项',
+            animePrimaryOptions,
+            primarySelection || animePrimaryOptions[0].value,
+            onPrimaryChange
+          )}
 
           {(primarySelection || animePrimaryOptions[0].value) === '每日放送' ? (
-            <FilterRow label='星期'>
+            <div className='min-w-0'>
               <WeekdaySelector onWeekdayChange={onWeekdayChange} />
-            </FilterRow>
+            </div>
           ) : (
-            <FilterRow label='筛选'>
+            <div className='col-span-full'>
               {(primarySelection || animePrimaryOptions[0].value) === '番剧' ? (
                 <MultiLevelSelector
                   key={`anime-tv-${primarySelection}`}
@@ -210,41 +201,39 @@ const DoubanSelector: React.FC<DoubanSelectorProps> = ({
                   contentType='anime-movie'
                 />
               )}
-            </FilterRow>
+            </div>
           )}
-        </div>
+        </FilterGrid>
       )}
 
       {type === 'show' && (
-        <div className='space-y-3 sm:space-y-4'>
-          <FilterRow label='分类'>
-            {renderSelector(
-              '综艺分类',
-              showPrimaryOptions,
-              primarySelection || showPrimaryOptions[1].value,
-              onPrimaryChange
-            )}
-          </FilterRow>
+        <FilterGrid>
+          {renderSelector(
+            '分类',
+            '综艺分类选项',
+            showPrimaryOptions,
+            primarySelection || showPrimaryOptions[1].value,
+            onPrimaryChange
+          )}
 
           {(primarySelection || showPrimaryOptions[1].value) === '最近热门' ? (
-            <FilterRow label='类型'>
-              {renderSelector(
-                '综艺类型',
-                showSecondaryOptions,
-                secondarySelection || showSecondaryOptions[0].value,
-                onSecondaryChange
-              )}
-            </FilterRow>
+            renderSelector(
+              '类型',
+              '综艺类型选项',
+              showSecondaryOptions,
+              secondarySelection || showSecondaryOptions[0].value,
+              onSecondaryChange
+            )
           ) : (primarySelection || showPrimaryOptions[1].value) === '全部' ? (
-            <FilterRow label='筛选'>
+            <div className='col-span-full'>
               <MultiLevelSelector
                 key={`${type}-${primarySelection}`}
                 onChange={handleMultiLevelChange}
                 contentType={type}
               />
-            </FilterRow>
+            </div>
           ) : null}
-        </div>
+        </FilterGrid>
       )}
     </div>
   );
diff --git a/src/components/EpgScrollableRow.tsx b/src/components/EpgScrollableRow.tsx
index 348ed5a..50c19a5 100644
--- a/src/components/EpgScrollableRow.tsx
+++ b/src/components/EpgScrollableRow.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 
 import { Clock, Target, Tv } from 'lucide-react';
+import { Button, Card, Chip, EmptyState, Spinner } from '@heroui/react';
 import { useEffect, useRef, useState } from 'react';
 
 import { formatTimeToHHMM, parseCustomTimeFormat } from '@/lib/time';
@@ -147,19 +148,16 @@ export default function EpgScrollableRow({
   // 加载中状态
   if (isLoading) {
     return (
-      <div className="pt-4">
-        <div className="mb-3 flex items-center justify-between">
-          <h4 className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
-            <Clock className="w-3 h-3 sm:w-4 sm:h-4" />
+      <div className='pt-4'>
+        <div className='mb-3 flex items-center justify-between'>
+          <h4 className='flex items-center gap-2 text-xs font-medium text-muted sm:text-sm'>
+            <Clock className='h-3 w-3 sm:h-4 sm:w-4' />
             今日节目单
           </h4>
-          <div className="w-16 sm:w-20"></div>
         </div>
-        <div className="min-h-[100px] sm:min-h-[120px] flex items-center justify-center">
-          <div className="flex items-center gap-3 sm:gap-4 text-gray-500 dark:text-gray-400">
-            <div className="w-5 h-5 sm:w-6 sm:h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
-            <span className="text-sm sm:text-base">加载节目单...</span>
-          </div>
+        <div className='flex min-h-[100px] items-center justify-center sm:min-h-[120px]'>
+          <Spinner />
+          <span className='ml-3 text-sm text-muted sm:text-base'>加载节目单...</span>
         </div>
       </div>
     );
@@ -168,41 +166,40 @@ export default function EpgScrollableRow({
   // 无节目单状态
   if (!programs || programs.length === 0) {
     return (
-      <div className="pt-4">
-        <div className="mb-3 flex items-center justify-between">
-          <h4 className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
-            <Clock className="w-3 h-3 sm:w-4 sm:h-4" />
+      <div className='pt-4'>
+        <div className='mb-3 flex items-center justify-between'>
+          <h4 className='flex items-center gap-2 text-xs font-medium text-muted sm:text-sm'>
+            <Clock className='h-3 w-3 sm:h-4 sm:w-4' />
             今日节目单
           </h4>
-          <div className="w-16 sm:w-20"></div>
-        </div>
-        <div className="min-h-[100px] sm:min-h-[120px] flex items-center justify-center">
-          <div className="flex items-center gap-2 sm:gap-3 text-gray-400 dark:text-gray-500">
-            <Tv className="w-4 h-4 sm:w-5 sm:h-5" />
-            <span className="text-sm sm:text-base">暂无节目单数据</span>
-          </div>
         </div>
+        <EmptyState>
+          <Tv className='mx-auto mb-2 h-5 w-5' />
+          暂无节目单数据
+          <p className='mt-1 text-sm text-muted'>当前频道没有可显示的 EPG 信息</p>
+        </EmptyState>
       </div>
     );
   }
 
   return (
-    <div className="pt-4 mt-2">
-      <div className="mb-3 flex items-center justify-between">
-        <h4 className="text-xs sm:text-sm font-medium text-gray-700 dark:text-gray-300 flex items-center gap-2">
-          <Clock className="w-3 h-3 sm:w-4 sm:h-4" />
+    <div className='mt-2 pt-4'>
+      <div className='mb-3 flex items-center justify-between'>
+        <h4 className='flex items-center gap-2 text-xs font-medium text-muted sm:text-sm'>
+          <Clock className='h-3 w-3 sm:h-4 sm:w-4' />
           今日节目单
         </h4>
         {currentPlayingIndex !== -1 && (
-          <button
-            onClick={scrollToCurrentProgram}
-            className="flex items-center gap-1 sm:gap-1.5 px-2 sm:px-2.5 py-1.5 sm:py-2 text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-green-600 dark:hover:text-green-400 bg-gray-300/50 dark:bg-gray-800 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg border border-gray-200 dark:border-gray-700 hover:border-green-300 dark:hover:border-green-700 transition-all duration-200"
-            title="滚动到当前播放位置"
+          <Button
+            size='sm'
+            variant='secondary'
+            onPress={scrollToCurrentProgram}
+            aria-label='滚动到当前播放位置'
           >
-            <Target className="w-2.5 h-2.5 sm:w-3 sm:h-3" />
-            <span className="hidden sm:inline">当前播放</span>
-            <span className="sm:hidden">当前</span>
-          </button>
+            <Target className='h-3 w-3' />
+            <span className='hidden sm:inline'>当前播放</span>
+            <span className='sm:hidden'>当前</span>
+          </Button>
         )}
       </div>
 
@@ -213,53 +210,29 @@ export default function EpgScrollableRow({
       >
         <div
           ref={containerRef}
-          className='flex overflow-x-auto scrollbar-hide py-2 pb-4 px-2 sm:px-4 min-h-[100px] sm:min-h-[120px]'
+          className='scrollbar-hide flex min-h-[100px] gap-3 overflow-x-auto px-2 py-2 pb-4 sm:min-h-[120px] sm:px-4'
         >
           {programs.map((program, index) => {
             // 使用 currentPlayingIndex 来判断播放状态，确保样式能正确更新
             const isPlaying = index === currentPlayingIndex;
-            const isFinishedProgram = index < currentPlayingIndex;
-            const isUpcomingProgram = index > currentPlayingIndex;
-
             return (
-              <div
+              <Card
                 key={index}
-                className={`flex-shrink-0 w-36 sm:w-48 p-2 sm:p-3 rounded-lg border transition-all duration-200 flex flex-col min-h-[100px] sm:min-h-[120px] ${isPlaying
-                  ? 'bg-green-500/10 dark:bg-green-500/20 border-green-500/30'
-                  : isFinishedProgram
-                    ? 'bg-gray-300/50 dark:bg-gray-800 border-gray-300 dark:border-gray-700'
-                    : isUpcomingProgram
-                      ? 'bg-blue-500/10 dark:bg-blue-500/20 border-blue-500/30'
-                      : 'bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
-                  }`}
+                className='flex min-h-[100px] w-36 flex-shrink-0 flex-col p-2 sm:min-h-[120px] sm:w-48 sm:p-3'
               >
                 {/* 时间显示在顶部 */}
-                <div className="flex items-center justify-between mb-2 sm:mb-3 flex-shrink-0">
-                  <span className={`text-xs font-medium ${isPlaying
-                    ? 'text-green-600 dark:text-green-400'
-                    : isFinishedProgram
-                      ? 'text-gray-500 dark:text-gray-400'
-                      : isUpcomingProgram
-                        ? 'text-blue-600 dark:text-blue-400'
-                        : 'text-gray-600 dark:text-gray-300'
-                    }`}>
+                <div className='mb-2 flex flex-shrink-0 items-center justify-between sm:mb-3'>
+                  <Chip size='sm' variant={isPlaying ? 'primary' : 'secondary'}>
                     {formatTime(program.start)}
-                  </span>
-                  <span className="text-xs text-gray-400 dark:text-gray-500">
+                  </Chip>
+                  <span className='text-xs text-muted'>
                     {formatTime(program.end)}
                   </span>
                 </div>
 
                 {/* 标题在中间，占据剩余空间 */}
                 <div
-                  className={`text-xs sm:text-sm font-medium flex-1 ${isPlaying
-                    ? 'text-green-900 dark:text-green-100'
-                    : isFinishedProgram
-                      ? 'text-gray-600 dark:text-gray-400'
-                      : isUpcomingProgram
-                        ? 'text-blue-900 dark:text-blue-100'
-                        : 'text-gray-900 dark:text-gray-100'
-                    }`}
+                  className='flex-1 text-xs font-medium text-foreground sm:text-sm'
                   style={{
                     display: '-webkit-box',
                     WebkitLineClamp: 2,
@@ -276,14 +249,11 @@ export default function EpgScrollableRow({
 
                 {/* 正在播放状态在底部 */}
                 {isPlaying && (
-                  <div className="mt-auto pt-1 sm:pt-2 flex items-center gap-1 sm:gap-1.5 flex-shrink-0">
-                    <div className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-green-500 rounded-full animate-pulse"></div>
-                    <span className="text-xs text-green-600 dark:text-green-400 font-medium">
-                      正在播放
-                    </span>
-                  </div>
+                  <Chip size='sm' variant='primary' className='mt-auto'>
+                    正在播放
+                  </Chip>
                 )}
-              </div>
+              </Card>
             );
           })}
         </div>
diff --git a/src/components/EpisodeSelector.tsx b/src/components/EpisodeSelector.tsx
index c037473..43e8945 100644
--- a/src/components/EpisodeSelector.tsx
+++ b/src/components/EpisodeSelector.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @next/next/no-img-element */
 
 import { useRouter } from 'next/navigation';
+import { Button, Chip, Spinner } from '@heroui/react';
 import React, {
   useCallback,
   useEffect,
@@ -403,32 +404,29 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
                 {categories.map((label, idx) => {
                   const isActive = idx === displayPage;
                   return (
-                    <button
+                    <Button
                       key={label}
                       ref={(el) => {
                         buttonRefs.current[idx] = el;
                       }}
-                      onClick={() => handleCategoryClick(idx)}
-                      className={`relative w-20 flex-shrink-0 py-2 text-center text-[11px] font-medium uppercase tracking-[0.14em] transition-colors whitespace-nowrap 
-                        ${isActive
-                          ? 'text-foreground'
-                          : 'text-muted hover:text-muted'
-                        }
-                      `.trim()}
+                      onPress={() => handleCategoryClick(idx)}
+                      variant={isActive ? 'primary' : 'ghost'}
+                      size='sm'
+                      className='w-20 flex-shrink-0'
                     >
                       {label}
-                      {isActive && (
-                        <div className='absolute bottom-0 left-0 right-0 h-px bg-accent' />
-                      )}
-                    </button>
+                    </Button>
                   );
                 })}
               </div>
             </div>
             {/* 向上/向下按钮 */}
-            <button
-              className='a2-icon-button h-8 w-8 flex-shrink-0 translate-y-[-4px]'
-              onClick={() => {
+            <Button
+              isIconOnly
+              size='sm'
+              variant='tertiary'
+              className='flex-shrink-0 translate-y-[-4px]'
+              onPress={() => {
                 // 切换集数排序（正序/倒序）
                 setDescending((prev) => !prev);
               }}
@@ -446,7 +444,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
                   d='M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4'
                 />
               </svg>
-            </button>
+            </Button>
           </div>
 
           {/* 集数网格 */}
@@ -460,14 +458,12 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
             })().map((episodeNumber) => {
               const isActive = episodeNumber === value;
               return (
-                <button
+                <Button
                   key={episodeNumber}
-                  onClick={() => handleEpisodeClick(episodeNumber - 1)}
-                  className={`a2-data flex h-10 min-w-10 items-center justify-center border px-3 py-2 text-sm font-medium transition-all duration-200 whitespace-nowrap
-                    ${isActive
-                      ? 'border-accent bg-accent text-accent-foreground'
-                      : 'border-border/70 bg-surface/60 text-muted hover:border-accent/35 hover:text-foreground'
-                    }`.trim()}
+                  onPress={() => handleEpisodeClick(episodeNumber - 1)}
+                  variant={isActive ? 'primary' : 'tertiary'}
+                  size='sm'
+                  className='min-w-10'
                 >
                   {(() => {
                     const title = episodes_titles?.[episodeNumber - 1];
@@ -481,7 +477,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
                     }
                     return title;
                   })()}
-                </button>
+                </Button>
               );
             })}
           </div>
@@ -493,9 +489,7 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
         <div className='flex flex-col h-full mt-4'>
           {sourceSearchLoading && (
             <div className='flex items-center justify-center py-8'>
-              <div className='h-px w-24 bg-border/70'>
-                <div className='h-full w-1/2 animate-pulse bg-accent'></div>
-              </div>
+              <Spinner size='sm' />
               <span className='ml-3 text-xs uppercase tracking-[0.16em] text-muted'>
                 搜索中
               </span>
@@ -630,9 +624,9 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
 
                           {/* 源名称和集数信息 - 垂直居中 */}
                           <div className='flex items-center justify-between'>
-                            <span className='text-xs px-2 py-1 border border-gray-500/60 rounded text-gray-700 dark:text-gray-300'>
-                              {source.source_name}
-                            </span>
+                            <Chip size='sm' variant='secondary'>
+                              <Chip.Label>{source.source_name}</Chip.Label>
+                            </Chip>
                             {source.episodes.length > 1 && (
                               <span className='text-xs text-gray-500 dark:text-gray-400 font-medium'>
                                 {source.episodes.length} 集
@@ -649,12 +643,12 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
                                 if (!videoInfo.hasError) {
                                   return (
                                     <div className='flex items-end gap-3 text-xs'>
-                                      <div className='a2-data text-accent font-medium text-xs'>
-                                        {videoInfo.loadSpeed}
-                                      </div>
-                                      <div className='a2-data text-warning font-medium text-xs'>
-                                        {videoInfo.pingTime}ms
-                                      </div>
+                                      <Chip size='sm' color='accent' variant='soft'>
+                                        <Chip.Label>{videoInfo.loadSpeed}</Chip.Label>
+                                      </Chip>
+                                      <Chip size='sm' color='warning' variant='soft'>
+                                        <Chip.Label>{videoInfo.pingTime}ms</Chip.Label>
+                                      </Chip>
                                     </div>
                                   );
                                 } else {
@@ -672,18 +666,19 @@ const EpisodeSelector: React.FC<EpisodeSelectorProps> = ({
                     );
                   })}
                 <div className='flex-shrink-0 mt-auto pt-2 border-t border-gray-400 dark:border-gray-700'>
-                  <button
-                    onClick={() => {
+                  <Button
+                    variant='tertiary'
+                    fullWidth
+                    onPress={() => {
                       if (videoTitle) {
                         router.push(
                           `/search?q=${encodeURIComponent(videoTitle)}`
                         );
                       }
                     }}
-                    className='a2-link-action w-full justify-center border-b-0 pt-2 text-center'
                   >
                     影片匹配有误？点击去搜索
-                  </button>
+                  </Button>
                 </div>
               </div>
             )}
diff --git a/src/components/GlobalErrorIndicator.tsx b/src/components/GlobalErrorIndicator.tsx
index f05bb67..6b7ea0e 100644
--- a/src/components/GlobalErrorIndicator.tsx
+++ b/src/components/GlobalErrorIndicator.tsx
@@ -1,5 +1,7 @@
 'use client';
 
+import { Alert, Button } from '@heroui/react';
+import { X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
 interface ErrorInfo {
@@ -60,35 +62,25 @@ export function GlobalErrorIndicator() {
 
   return (
     <div className='fixed top-4 right-4 z-[2000]'>
-      {/* 错误卡片 */}
-      <div
-        className={`bg-red-500 text-white px-4 py-3 rounded-lg shadow-lg flex items-center justify-between min-w-[300px] max-w-[400px] transition-all duration-300 ${
-          isReplacing ? 'scale-105 bg-red-400' : 'scale-100 bg-red-500'
-        } animate-fade-in`}
+      <Alert
+        status='danger'
+        className={`min-w-[300px] max-w-[400px] transition-transform duration-300 ${
+          isReplacing ? 'scale-105' : 'scale-100'
+        }`}
       >
-        <span className='text-sm font-medium flex-1 mr-3'>
-          {currentError.message}
-        </span>
-        <button
-          onClick={handleClose}
-          className='text-white hover:text-red-100 transition-colors flex-shrink-0'
+        <Alert.Content>
+          <Alert.Description>{currentError.message}</Alert.Description>
+        </Alert.Content>
+        <Button
+          isIconOnly
+          size='sm'
+          variant='ghost'
+          onPress={handleClose}
           aria-label='关闭错误提示'
         >
-          <svg
-            className='w-5 h-5'
-            fill='none'
-            stroke='currentColor'
-            viewBox='0 0 24 24'
-          >
-            <path
-              strokeLinecap='round'
-              strokeLinejoin='round'
-              strokeWidth={2}
-              d='M6 18L18 6M6 6l12 12'
-            />
-          </svg>
-        </button>
-      </div>
+          <X className='h-4 w-4' />
+        </Button>
+      </Alert>
     </div>
   );
 }
diff --git a/src/components/MobileActionSheet.tsx b/src/components/MobileActionSheet.tsx
index dfeeb10..3c5a720 100644
--- a/src/components/MobileActionSheet.tsx
+++ b/src/components/MobileActionSheet.tsx
@@ -1,6 +1,7 @@
 import { Radio } from 'lucide-react';
 import Image from 'next/image';
 import React from 'react';
+import { Card, Chip } from '@heroui/react';
 
 import { AppButton, AppDrawer, AppScrollShadow } from './ui/HeroPrimitives';
 
@@ -59,7 +60,7 @@ const MobileActionSheet: React.FC<MobileActionSheetProps> = ({
     >
       <div className='space-y-4'>
         {(poster || sourceName) && (
-          <div className='flex items-center gap-3 rounded-lg border border-border/70 bg-surface-secondary/60 p-3'>
+          <Card variant='secondary' className='flex-row items-center gap-3'>
             {poster && (
               <div className='relative h-16 w-12 flex-shrink-0 overflow-hidden rounded-md border border-border/70 bg-surface-secondary/60'>
                 <Image
@@ -74,25 +75,25 @@ const MobileActionSheet: React.FC<MobileActionSheetProps> = ({
             <div className='min-w-0 flex-1'>
               <p className='truncate text-base font-semibold text-foreground'>{title}</p>
               {sourceName ? (
-                <span className='a2-data mt-1 inline-flex max-w-full items-center border border-border/70 px-2 py-1 text-[10px] text-muted'>
+                <Chip size='sm' variant='soft' color='accent' className='mt-1 max-w-full'>
                   {origin === 'live' ? (
                     <Radio size={12} className='mr-1.5 text-accent' />
                   ) : null}
-                  <span className='truncate'>{sourceName}</span>
-                </span>
+                  <Chip.Label>{sourceName}</Chip.Label>
+                </Chip>
               ) : null}
             </div>
-          </div>
+          </Card>
         )}
 
-        <div className='divide-y divide-border/10 overflow-hidden rounded-lg border border-border/70'>
+        <Card variant='default' className='gap-1 p-1'>
           {actions.map((action) => (
             <AppButton
               key={action.id}
               variant='tertiary'
               fullWidth
               isDisabled={action.disabled}
-              className='h-auto justify-start rounded-none px-3 py-4'
+              className='h-auto justify-start'
               onPress={() => {
                 action.onClick();
                 onClose();
@@ -115,36 +116,30 @@ const MobileActionSheet: React.FC<MobileActionSheetProps> = ({
                 {action.label}
               </span>
               {action.id === 'play' && currentEpisode && totalEpisodes ? (
-                <span className='a2-data text-xs text-muted'>
-                  {currentEpisode}/{totalEpisodes}
-                </span>
+                <Chip size='sm' variant='secondary'>
+                  <Chip.Label>{currentEpisode}/{totalEpisodes}</Chip.Label>
+                </Chip>
               ) : null}
             </AppButton>
           ))}
-        </div>
+        </Card>
 
         {isAggregate && sources && sources.length > 0 ? (
-          <div className='rounded-lg border border-border/70 p-3'>
+          <Card variant='secondary'>
             <div className='mb-3'>
               <h4 className='mb-1 text-sm font-medium text-foreground'>可用播放源</h4>
-              <p className='a2-kicker'>共 {sources.length} 个播放源</p>
+              <p className='text-sm text-muted'>共 {sources.length} 个播放源</p>
             </div>
             <AppScrollShadow className='max-h-32'>
               <div className='grid grid-cols-2 gap-2'>
                 {sources.map((source) => (
-                  <div
-                    key={source}
-                    className='flex min-w-0 items-center gap-2 border-l border-border/70 px-3 py-2'
-                  >
-                    <div className='h-1.5 w-1.5 flex-shrink-0 bg-accent/80' />
-                    <span className='truncate text-xs text-muted'>
-                      {source}
-                    </span>
-                  </div>
+                  <Chip key={source} size='sm' variant='secondary'>
+                    <Chip.Label>{source}</Chip.Label>
+                  </Chip>
                 ))}
               </div>
             </AppScrollShadow>
-          </div>
+          </Card>
         ) : null}
       </div>
     </AppDrawer>
diff --git a/src/components/MobileBottomNav.tsx b/src/components/MobileBottomNav.tsx
index f08b8b0..43a2e3e 100644
--- a/src/components/MobileBottomNav.tsx
+++ b/src/components/MobileBottomNav.tsx
@@ -3,8 +3,8 @@
 'use client';
 
 import { Cat, Clover, Film, Home, Play, Radio, Star, Tv } from 'lucide-react';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
+import { Button, Card, ScrollShadow } from '@heroui/react';
+import { usePathname, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 interface MobileBottomNavProps {
@@ -16,6 +16,7 @@ interface MobileBottomNavProps {
 
 const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
   const pathname = usePathname();
+  const router = useRouter();
 
   // 当前激活路径：优先使用传入的 activePath，否则回退到浏览器地址
   const currentActive = activePath ?? pathname;
@@ -95,8 +96,8 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
   };
 
   return (
-    <nav
-      className='fixed left-0 right-0 z-[600] overflow-hidden border-t border-border/70 bg-surface/90 shadow-[0_-12px_40px_-30px_rgb(15_23_42)] backdrop-blur-xl md:hidden'
+    <Card
+      className='fixed left-0 right-0 z-[600] rounded-none p-0 md:hidden'
       style={{
         /* 紧贴视口底部，同时在内部留出安全区高度 */
         bottom: 0,
@@ -104,41 +105,31 @@ const MobileBottomNav = ({ activePath }: MobileBottomNavProps) => {
         minHeight: 'calc(3.5rem + env(safe-area-inset-bottom))',
       }}
     >
-      <ul className='flex items-center overflow-x-auto scrollbar-hide'>
-        {navItems.map((item) => {
-          const active = isActive(item.href);
-          return (
-            <li
-              key={item.href}
-              className='flex-shrink-0'
-              style={{ width: '20vw', minWidth: '20vw' }}
-            >
-              <Link
-                href={item.href}
-                className='theme-transition relative flex h-14 w-full flex-col items-center justify-center gap-1 text-xs font-medium tracking-normal'
+      <ScrollShadow orientation='horizontal' hideScrollBar>
+        <ul className='flex items-center gap-1 px-2'>
+          {navItems.map((item) => {
+            const active = isActive(item.href);
+            return (
+              <li
+                key={item.href}
+                className='flex-shrink-0'
+                style={{ width: '20vw', minWidth: '20vw' }}
               >
-                {active && <span className='absolute left-3 right-3 top-1 h-1 rounded-full bg-accent' />}
-                <item.icon
-                  className={`h-5 w-5 ${active
-                    ? 'text-accent'
-                    : 'text-muted'
-                    }`}
-                />
-                <span
-                  className={
-                    active
-                      ? 'text-foreground'
-                      : 'text-muted'
-                  }
+                <Button
+                  variant={active ? 'primary' : 'ghost'}
+                  fullWidth
+                  className='h-14 flex-col gap-1'
+                  onPress={() => router.push(item.href)}
                 >
-                  {item.label}
-                </span>
-              </Link>
-            </li>
-          );
-        })}
-      </ul>
-    </nav>
+                  <item.icon className='h-5 w-5' />
+                  <span className='text-xs'>{item.label}</span>
+                </Button>
+              </li>
+            );
+          })}
+        </ul>
+      </ScrollShadow>
+    </Card>
   );
 };
 
diff --git a/src/components/MobileHeader.tsx b/src/components/MobileHeader.tsx
index deaea36..2238467 100644
--- a/src/components/MobileHeader.tsx
+++ b/src/components/MobileHeader.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import Link from 'next/link';
+import { Card, Link as HeroLink } from '@heroui/react';
 
 import { BackButton } from './BackButton';
 import { useSite } from './SiteProvider';
@@ -14,16 +14,16 @@ interface MobileHeaderProps {
 const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
   const { siteName } = useSite();
   return (
-    <header className='fixed left-0 right-0 top-0 z-[999] w-full border-b border-border/70 bg-surface/90 shadow-sm backdrop-blur-xl md:hidden'>
+    <Card className='fixed left-0 right-0 top-0 z-[999] w-full rounded-none p-0 md:hidden'>
       <div className='flex h-12 items-center justify-between px-4'>
         {/* 左侧：搜索按钮、返回按钮和设置按钮 */}
         <div className='flex items-center gap-2'>
-          <Link
+          <HeroLink
             href='/search'
-            className='a2-icon-button h-8 w-8 p-1.5'
+            aria-label='搜索'
           >
             <svg
-              className='w-full h-full'
+              className='h-5 w-5'
               fill='none'
               stroke='currentColor'
               viewBox='0 0 24 24'
@@ -36,7 +36,7 @@ const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
                 d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
               />
             </svg>
-          </Link>
+          </HeroLink>
           {showBackButton && <BackButton />}
         </div>
 
@@ -49,14 +49,14 @@ const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
 
         {/* 中间：Logo（绝对居中） */}
         <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
-          <Link
+          <HeroLink
             href='/'
-            className='theme-transition text-lg font-semibold tracking-normal text-foreground hover:text-accent'
+            className='text-lg font-semibold'
           >
             {siteName}
-          </Link>
+          </HeroLink>
       </div>
-    </header>
+    </Card>
   );
 };
 
diff --git a/src/components/MultiLevelSelector.tsx b/src/components/MultiLevelSelector.tsx
index 2b68d1e..08ad75b 100644
--- a/src/components/MultiLevelSelector.tsx
+++ b/src/components/MultiLevelSelector.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { Dropdown, Label } from '@heroui/react';
 import React, { useState } from 'react';
 
-import { AppButton } from './ui/HeroPrimitives';
+import { AppFilterSelect } from './ui/HeroPrimitives';
 
 interface MultiLevelOption {
   label: string;
@@ -367,103 +366,17 @@ const MultiLevelSelector: React.FC<MultiLevelSelectorProps> = ({
 
   };
 
-  // 获取显示文本
-  const getDisplayText = (categoryKey: string) => {
-    const category = categories.find((cat) => cat.key === categoryKey);
-    if (!category) return '';
-
-    const value = values[categoryKey];
-
-    if (
-      !value ||
-      value === 'all' ||
-      (categoryKey === 'sort' && value === 'T')
-    ) {
-      return category.label;
-    }
-    const option = category.options.find((opt) => opt.value === value);
-    return option?.label || category.label;
-  };
-
-  // 检查是否为默认值
-  const isDefaultValue = (categoryKey: string) => {
-    const value = values[categoryKey];
-    return (
-      !value || value === 'all' || (categoryKey === 'sort' && value === 'T')
-    );
-  };
-
-  // 检查选项是否被选中
-  const isOptionSelected = (categoryKey: string, optionValue: string) => {
-    let value = values[categoryKey];
-    if (value === undefined) {
-      value = 'all';
-      if (categoryKey === 'sort') {
-        value = 'T';
-      }
-    }
-    return value === optionValue;
-  };
-
   return (
-    <div className='app-filter-dropdowns'>
+    <div className='grid min-w-0 grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-5'>
       {categories.map((category) => (
-        <Dropdown key={category.key}>
-          <AppButton
-            aria-label={`${category.label}筛选`}
-            variant='tertiary'
-            className={`app-filter-trigger ${
-              isDefaultValue(category.key)
-                ? ''
-                : 'app-filter-trigger-active'
-            }`}
-          >
-            <span>{getDisplayText(category.key)}</span>
-            <svg
-              className='ml-0.5 inline-block h-2.5 w-2.5 sm:ml-1 sm:h-3 sm:w-3'
-              fill='none'
-              stroke='currentColor'
-              viewBox='0 0 24 24'
-            >
-              <path
-                strokeLinecap='round'
-                strokeLinejoin='round'
-                strokeWidth={2}
-                d='M19 9l-7 7-7-7'
-              />
-            </svg>
-          </AppButton>
-          <Dropdown.Popover className='w-[min(92vw,600px)]'>
-            <Dropdown.Menu
-              aria-label={`${category.label}选项`}
-              selectionMode='single'
-              selectedKeys={
-                new Set([
-                  values[category.key] ||
-                    (category.key === 'sort' ? 'T' : 'all'),
-                ])
-              }
-              onAction={(key) => handleOptionSelect(category.key, String(key))}
-              className='grid grid-cols-3 gap-1 p-2 sm:grid-cols-4 sm:gap-2 md:grid-cols-5'
-            >
-              {category.options.map((option) => (
-                <Dropdown.Item
-                  key={option.value}
-                  id={option.value}
-                  textValue={option.label}
-                  className={
-                    isOptionSelected(category.key, option.value)
-                      ? 'a2-selector-option-active'
-                      : ''
-                  }
-                >
-                  <Label>{option.label}</Label>
-                  <Dropdown.ItemIndicator />
-                </Dropdown.Item>
-              ))}
-            </Dropdown.Menu>
-          </Dropdown.Popover>
-        </Dropdown>
+        <AppFilterSelect
+          key={category.key}
+          ariaLabel={`${category.label}选项`}
+          label={category.label}
+          options={category.options}
+          value={values[category.key] || (category.key === 'sort' ? 'T' : 'all')}
+          onChange={(value) => handleOptionSelect(category.key, value)}
+        />
       ))}
     </div>
   );
diff --git a/src/components/ScrollableRow.tsx b/src/components/ScrollableRow.tsx
index fd964fc..bf81da4 100644
--- a/src/components/ScrollableRow.tsx
+++ b/src/components/ScrollableRow.tsx
@@ -1,4 +1,5 @@
 import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Button } from '@heroui/react';
 import { useEffect, useRef, useState } from 'react';
 
 interface ScrollableRowProps {
@@ -126,12 +127,14 @@ export default function ScrollableRow({
               pointerEvents: 'auto',
             }}
           >
-            <button
-              onClick={handleScrollLeftClick}
-              className='theme-transition flex h-11 w-11 items-center justify-center rounded-2xl border border-border bg-overlay/95 text-muted shadow-xl backdrop-blur hover:border-accent/40 hover:text-accent'
+            <Button
+              isIconOnly
+              variant='secondary'
+              onPress={handleScrollLeftClick}
+              aria-label='向左滚动'
             >
               <ChevronLeft className='h-5 w-5' />
-            </button>
+            </Button>
           </div>
         </div>
       )}
@@ -155,12 +158,14 @@ export default function ScrollableRow({
               pointerEvents: 'auto',
             }}
           >
-            <button
-              onClick={handleScrollRightClick}
-              className='theme-transition flex h-11 w-11 items-center justify-center rounded-2xl border border-border bg-overlay/95 text-muted shadow-xl backdrop-blur hover:border-accent/40 hover:text-accent'
+            <Button
+              isIconOnly
+              variant='secondary'
+              onPress={handleScrollRightClick}
+              aria-label='向右滚动'
             >
               <ChevronRight className='h-5 w-5' />
-            </button>
+            </Button>
           </div>
         </div>
       )}
diff --git a/src/components/SearchResultFilter.tsx b/src/components/SearchResultFilter.tsx
index ff66f31..778e2b5 100644
--- a/src/components/SearchResultFilter.tsx
+++ b/src/components/SearchResultFilter.tsx
@@ -1,10 +1,8 @@
 'use client';
 
-import { Dropdown, Label, ScrollShadow } from '@heroui/react';
-import { ArrowDownWideNarrow, ArrowUpDown, ArrowUpNarrowWide } from 'lucide-react';
 import React, { useMemo } from 'react';
 
-import { AppButton } from './ui/HeroPrimitives';
+import { AppFilterSelect } from './ui/HeroPrimitives';
 
 export type SearchFilterKey = 'source' | 'title' | 'year' | 'yearOrder';
 
@@ -32,6 +30,12 @@ const DEFAULTS: Record<SearchFilterKey, string> = {
   yearOrder: 'none',
 };
 
+const YEAR_ORDER_OPTIONS: SearchFilterOption[] = [
+  { label: '默认排序', value: 'none' },
+  { label: '年份降序', value: 'desc' },
+  { label: '年份升序', value: 'asc' },
+];
+
 const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, values, onChange }) => {
   const mergedValues = useMemo(() => {
     return {
@@ -48,109 +52,25 @@ const SearchResultFilter: React.FC<SearchResultFilterProps> = ({ categories, val
     onChange(newValues);
   };
 
-  const getDisplayText = (categoryKey: SearchFilterKey) => {
-    const category = categories.find((cat) => cat.key === categoryKey);
-    if (!category) return '';
-    const value = mergedValues[categoryKey];
-    if (!value || value === DEFAULTS[categoryKey]) return category.label;
-    const option = category.options.find((opt) => opt.value === value);
-    return option?.label || category.label;
-  };
-
-  const isDefaultValue = (categoryKey: SearchFilterKey) => {
-    const value = mergedValues[categoryKey];
-    return !value || value === DEFAULTS[categoryKey];
-  };
-
-  const isOptionSelected = (categoryKey: SearchFilterKey, optionValue: string) => {
-    const value = mergedValues[categoryKey] ?? DEFAULTS[categoryKey];
-    return value === optionValue;
-  };
-
   return (
-    <div className='app-search-filter-bar'>
-        {categories.map((category) => (
-          <Dropdown key={category.key}>
-            <AppButton
-              variant='tertiary'
-              className={`app-search-filter-trigger ${
-                isDefaultValue(category.key) ? '' : 'app-search-filter-trigger-active'
-              }`}
-            >
-              <span>{getDisplayText(category.key)}</span>
-              <svg className='inline-block w-2.5 h-2.5 sm:w-3 sm:h-3 ml-0.5 sm:ml-1 transition-transform duration-200' fill='none' stroke='currentColor' viewBox='0 0 24 24'>
-                <path strokeLinecap='round' strokeLinejoin='round' strokeWidth={2} d='M19 9l-7 7-7-7' />
-              </svg>
-            </AppButton>
-            <Dropdown.Popover className='app-search-filter-popover'>
-              <ScrollShadow className='app-search-filter-scroll'>
-                <Dropdown.Menu
-                  aria-label={`${category.label}筛选`}
-                  selectionMode='single'
-                  selectedKeys={new Set([mergedValues[category.key]])}
-                  onAction={(key) => handleOptionSelect(category.key, String(key))}
-                  className='app-search-filter-menu'
-                >
-                  {category.options.map((option) => (
-                    <Dropdown.Item
-                      key={option.value}
-                      id={option.value}
-                      textValue={option.label}
-                      className={
-                        isOptionSelected(category.key, option.value)
-                          ? 'app-search-filter-option-active'
-                          : 'app-search-filter-option'
-                      }
-                    >
-                      <Label className='app-search-filter-option-label'>
-                        {option.label}
-                      </Label>
-                      <Dropdown.ItemIndicator />
-                    </Dropdown.Item>
-                  ))}
-                </Dropdown.Menu>
-              </ScrollShadow>
-            </Dropdown.Popover>
-          </Dropdown>
-        ))}
-        {/* 通用年份排序切换按钮 */}
-        <div className='relative'>
-          <AppButton
-            variant='ghost'
-            onPress={() => {
-              let next;
-              switch (mergedValues.yearOrder) {
-                case 'none':
-                  next = 'desc';
-                  break;
-                case 'desc':
-                  next = 'asc';
-                  break;
-                case 'asc':
-                  next = 'none';
-                  break;
-                default:
-                  next = 'desc';
-              }
-              onChange({ ...mergedValues, yearOrder: next });
-            }}
-            className={`app-search-filter-trigger ${
-              mergedValues.yearOrder === 'none'
-                ? ''
-                : 'app-search-filter-trigger-active'
-            }`}
-            aria-label={`按年份${mergedValues.yearOrder === 'none' ? '排序' : mergedValues.yearOrder === 'desc' ? '降序' : '升序'}排序`}
-          >
-            <span>年份</span>
-            {mergedValues.yearOrder === 'none' ? (
-              <ArrowUpDown className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
-            ) : mergedValues.yearOrder === 'desc' ? (
-              <ArrowDownWideNarrow className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
-            ) : (
-              <ArrowUpNarrowWide className='inline-block ml-1 w-4 h-4 sm:w-4 sm:h-4' />
-            )}
-          </AppButton>
-        </div>
+    <div className='grid max-w-full grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4'>
+      {categories.map((category) => (
+        <AppFilterSelect
+          key={category.key}
+          ariaLabel={`${category.label}选项`}
+          label={category.label}
+          options={category.options}
+          value={mergedValues[category.key]}
+          onChange={(value) => handleOptionSelect(category.key, value)}
+        />
+      ))}
+      <AppFilterSelect
+        ariaLabel='排序选项'
+        label='排序'
+        options={YEAR_ORDER_OPTIONS}
+        value={mergedValues.yearOrder}
+        onChange={(value) => onChange({ ...mergedValues, yearOrder: value })}
+      />
     </div>
   );
 };
diff --git a/src/components/SearchSuggestions.tsx b/src/components/SearchSuggestions.tsx
index e40b445..54a951d 100644
--- a/src/components/SearchSuggestions.tsx
+++ b/src/components/SearchSuggestions.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { Card, Label, ListBox, ScrollShadow } from '@heroui/react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
 interface SearchSuggestionsProps {
@@ -146,21 +147,27 @@ export default function SearchSuggestions({
   }
 
   return (
-    <div
+    <Card
       ref={containerRef}
-      className='absolute top-full left-0 right-0 z-[600] mt-1 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-h-80 overflow-y-auto'
+      className='absolute left-0 right-0 top-full z-[600] mt-1 p-0'
     >
-      {suggestions.map((suggestion) => (
-        <button
-          key={`related-${suggestion.text}`}
-          onClick={() => onSelect(suggestion.text)}
-          className="w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors duration-150 flex items-center gap-3"
+      <ScrollShadow className='max-h-80' hideScrollBar>
+        <ListBox
+          aria-label='搜索建议'
+          selectionMode='none'
+          onAction={(key) => onSelect(String(key))}
         >
-          <span className='flex-1 text-sm text-gray-700 dark:text-gray-300 truncate'>
-            {suggestion.text}
-          </span>
-        </button>
-      ))}
-    </div>
+          {suggestions.map((suggestion) => (
+            <ListBox.Item
+              key={`related-${suggestion.text}`}
+              id={suggestion.text}
+              textValue={suggestion.text}
+            >
+              <Label className='truncate'>{suggestion.text}</Label>
+            </ListBox.Item>
+          ))}
+        </ListBox>
+      </ScrollShadow>
+    </Card>
   );
 }
diff --git a/src/components/ShortDramaSelector.tsx b/src/components/ShortDramaSelector.tsx
index e1eafdb..23d4b18 100644
--- a/src/components/ShortDramaSelector.tsx
+++ b/src/components/ShortDramaSelector.tsx
@@ -1,10 +1,11 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 
 import { useEffect, useState } from 'react';
+import { Skeleton } from '@heroui/react';
 
 import { getShortDramaCategories, ShortDramaCategory } from '@/lib/shortdrama.client';
 
-import { AppFilterTabs } from './ui/HeroPrimitives';
+import { AppFilterSelect } from './ui/HeroPrimitives';
 
 interface ShortDramaSelectorProps {
   selectedCategory: string;
@@ -49,44 +50,31 @@ const ShortDramaSelector = ({
     fetchCategories();
   }, []);
 
-  // 渲染胶囊式选择器
-  const renderCapsuleSelector = () => {
+  const renderCategorySelector = () => {
     if (loading) {
       return (
-        <div className='inline-flex rounded-full bg-surface-secondary p-1'>
-          {Array.from({ length: 8 }).map((_, index) => (
-            <div
-              key={index}
-              className='mx-0.5 h-8 w-16 rounded-full bg-surface-tertiary animate-pulse'
-            />
-          ))}
-        </div>
+        <Skeleton className='h-16 w-full' />
       );
     }
 
     return (
-      <AppFilterTabs
-        ariaLabel='短剧分类'
-        selectedKey={selectedCategory}
-        onSelectionChange={onCategoryChange}
-        items={categories.map((category) => ({
-          key: category.type_id.toString(),
+      <AppFilterSelect
+        ariaLabel='短剧分类选项'
+        label='分类'
+        options={categories.map((category) => ({
+          value: category.type_id.toString(),
           label: category.type_name,
         }))}
+        value={selectedCategory}
+        onChange={onCategoryChange}
       />
     );
   };
 
   return (
     <div className='space-y-4 sm:space-y-6'>
-      {/* 分类选择 */}
-      <div className='app-filter-row'>
-        <span className='app-filter-label'>
-          分类
-        </span>
-        <div className='min-w-0'>
-          {renderCapsuleSelector()}
-        </div>
+      <div className='grid min-w-0 grid-cols-2 gap-3 sm:grid-cols-3 xl:grid-cols-5'>
+        {renderCategorySelector()}
       </div>
     </div>
   );
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 6889711..0c01312 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -16,8 +16,8 @@ import {
   Tv,
 } from 'lucide-react';
 import Image from 'next/image';
-import Link from 'next/link';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import { Button, Card, Link as HeroLink, Separator, Tooltip } from '@heroui/react';
 import {
   createContext,
   useCallback,
@@ -26,6 +26,7 @@ import {
   useLayoutEffect,
   useState,
 } from 'react';
+import type { ComponentType } from 'react';
 
 import { useSite } from './SiteProvider';
 
@@ -50,10 +51,11 @@ const Logo = ({ isCollapsed, onClick }: LogoProps) => {
 
   if (isCollapsed) {
     return (
-      <button
-        onClick={onClick}
-        className='theme-transition flex h-12 w-12 cursor-pointer items-center justify-center hover:opacity-80'
-        title='点击展开侧边栏'
+      <Button
+        onPress={onClick}
+        isIconOnly
+        variant='ghost'
+        aria-label='点击展开侧边栏'
       >
         <Image
           src='/logo.png'
@@ -62,28 +64,26 @@ const Logo = ({ isCollapsed, onClick }: LogoProps) => {
           height={32}
           className='rounded-lg'
         />
-      </button>
+      </Button>
     );
   }
 
   return (
-    <Link
+    <HeroLink
       href='/'
-      className='theme-transition flex h-16 items-center justify-center select-none hover:opacity-80'
+      className='flex h-16 items-center justify-center gap-2'
     >
-      <div className='flex items-center gap'>
-        <Image
-          src='/logo.png'
-          alt={siteName}
-          width={40}
-          height={40}
-          className='rounded-lg'
-        />
-        <span className='text-xl font-semibold tracking-normal text-foreground'>
-          {siteName}
-        </span>
-      </div>
-    </Link>
+      <Image
+        src='/logo.png'
+        alt={siteName}
+        width={40}
+        height={40}
+        className='rounded-lg'
+      />
+      <span className='text-xl font-semibold'>
+        {siteName}
+      </span>
+    </HeroLink>
   );
 };
 
@@ -217,25 +217,60 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
     }
   }, []);
 
-  const getNavClasses = (isActive: boolean) =>
-    `group flex min-h-[42px] items-center gap-3 rounded-xl border px-3 py-2 text-sm font-medium tracking-normal transition-all duration-200 ${
-      isActive
-        ? 'border-accent/25 bg-accent/10 text-accent shadow-sm'
-        : 'border-transparent text-muted hover:border-border hover:bg-surface-secondary hover:text-foreground'
-    }`;
+  const renderNavButton = ({
+    href,
+    label,
+    icon: Icon,
+    isActive,
+    onPress,
+  }: {
+    href: string;
+    label: string;
+    icon: ComponentType<{ className?: string }>;
+    isActive: boolean;
+    onPress?: () => void;
+  }) => {
+    const button = (
+      <Button
+        aria-label={label}
+        variant={isActive ? 'primary' : 'ghost'}
+        fullWidth={!isCollapsed}
+        isIconOnly={isCollapsed}
+        className={isCollapsed ? '' : 'justify-start'}
+        onPress={() => {
+          setActive(href);
+          if (onPress) {
+            onPress();
+          } else {
+            router.push(href);
+          }
+        }}
+      >
+        <Icon className='h-4 w-4' />
+        {!isCollapsed ? <span>{label}</span> : null}
+      </Button>
+    );
+
+    return isCollapsed ? (
+      <Tooltip>
+        <Tooltip.Trigger>{button}</Tooltip.Trigger>
+        <Tooltip.Content placement='right'>{label}</Tooltip.Content>
+      </Tooltip>
+    ) : button;
+  };
 
   return (
     <SidebarContext.Provider value={contextValue}>
       {/* 在移动端隐藏侧边栏 */}
       <div className='hidden md:flex'>
-        <aside
+        <Card
           data-sidebar
-          className={`fixed left-0 top-0 z-10 h-screen border-r border-border/70 bg-surface/90 shadow-sm backdrop-blur-xl transition-all duration-300 ${isCollapsed ? 'w-16' : 'w-64'
+          className={`fixed left-0 top-0 z-10 h-screen rounded-none p-0 transition-all duration-300 ${isCollapsed ? 'w-16' : 'w-64'
             }`}
         >
           <div className='flex h-full flex-col'>
             {/* 顶部 Logo 区域 */}
-            <div className='relative h-16 border-b border-border/70'>
+            <div className='relative h-16'>
               <div className='absolute inset-0 flex items-center justify-center transition-all duration-200'>
                 {isCollapsed ? (
                   <Logo isCollapsed={true} onClick={handleToggle} />
@@ -246,57 +281,41 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
                 )}
               </div>
               {!isCollapsed && (
-                <button
-                  onClick={handleToggle}
-                  className='a2-icon-button absolute right-3 top-1/2 z-10 -translate-y-1/2'
-                  title='收起侧边栏'
+                <Button
+                  onPress={handleToggle}
+                  isIconOnly
+                  size='sm'
+                  variant='ghost'
+                  className='absolute right-3 top-1/2 z-10 -translate-y-1/2'
+                  aria-label='收起侧边栏'
                 >
                   <Menu className='h-4 w-4' />
-                </button>
+                </Button>
               )}
             </div>
+            <Separator />
 
             {/* 首页和搜索导航 */}
             <nav className='mt-6 space-y-1 px-3'>
-              <Link
-                href='/'
-                onClick={() => setActive('/')}
-                data-active={active === '/'}
-                className={getNavClasses(active === '/')}
-              >
-                <div className='w-4 h-4 flex items-center justify-center'>
-                  <Home className='h-4 w-4' />
-                </div>
-                {!isCollapsed && (
-                  <span className='opacity-100 transition-opacity duration-200 whitespace-nowrap'>
-                    首页
-                  </span>
-                )}
-              </Link>
-              <Link
-                href='/search'
-                onClick={(e) => {
-                  e.preventDefault();
-                  handleSearchClick();
-                  setActive('/search');
-                }}
-                data-active={active === '/search'}
-                className={getNavClasses(active === '/search')}
-              >
-                <div className='w-4 h-4 flex items-center justify-center'>
-                  <Search className='h-4 w-4' />
-                </div>
-                {!isCollapsed && (
-                  <span className='opacity-100 transition-opacity duration-200 whitespace-nowrap'>
-                    搜索
-                  </span>
-                )}
-              </Link>
+              {renderNavButton({
+                href: '/',
+                label: '首页',
+                icon: Home,
+                isActive: active === '/',
+              })}
+              {renderNavButton({
+                href: '/search',
+                label: '搜索',
+                icon: Search,
+                isActive: active === '/search',
+                onPress: handleSearchClick,
+              })}
             </nav>
 
             {/* 菜单项 */}
             <div className='flex-1 overflow-y-auto px-3 pt-6'>
-              <div className='space-y-1 border-t border-border/70 pt-4'>
+              <Separator className='mb-4' />
+              <div className='space-y-1'>
                 {menuItems.map((item) => {
                   // 检查当前路径是否匹配这个菜单项
                   const typeMatch = item.href.match(/type=([^&]+)/)?.[1];
@@ -312,22 +331,14 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
                     (item.href === '/shortdrama' && decodedActive.startsWith('/shortdrama'));
                   const Icon = item.icon;
                   return (
-                    <Link
-                      key={item.label}
-                      href={item.href}
-                      onClick={() => setActive(item.href)}
-                      data-active={isActive}
-                      className={getNavClasses(isActive)}
-                    >
-                      <div className='w-4 h-4 flex items-center justify-center'>
-                        <Icon className='h-4 w-4' />
-                      </div>
-                      {!isCollapsed && (
-                        <span className='opacity-100 transition-opacity duration-200 whitespace-nowrap'>
-                          {item.label}
-                        </span>
-                      )}
-                    </Link>
+                    <div key={item.label}>
+                      {renderNavButton({
+                        href: item.href,
+                        label: item.label,
+                        icon: Icon,
+                        isActive,
+                      })}
+                    </div>
                   );
                 })}
               </div>
@@ -335,40 +346,49 @@ const Sidebar = ({ onToggle, activePath = '/' }: SidebarProps) => {
 
             {/* 致谢信息 */}
             <div className='px-3 pb-5'>
-              <div className='border-t border-border/70 pt-4'>
+              <Separator className='mb-4' />
+              <div>
                 {!isCollapsed ? (
                   <div className='px-2 text-center text-xs leading-relaxed text-muted'>
                     <span>本项目基于 </span>
-                    <button
-                      onClick={() => window.open('https://github.com/MoonTechLab/LunaTV', '_blank')}
-                      className='theme-transition font-medium text-accent hover:text-accent-strong'
+                    <HeroLink
+                      href='https://github.com/MoonTechLab/LunaTV'
+                      target='_blank'
                     >
                       MoonTV
-                    </button>
-                    <button
-                      onClick={() => window.open('https://github.com/MoonTechLab/LunaTV', '_blank')}
-                      className='theme-transition ml-1 text-accent hover:text-accent-strong'
-                      title='访问 MoonTV 项目'
+                    </HeroLink>
+                    <HeroLink
+                      href='https://github.com/MoonTechLab/LunaTV'
+                      target='_blank'
+                      aria-label='访问 MoonTV 项目'
+                      className='ml-1'
                     >
                       <ExternalLink className='h-3 w-3 inline' />
-                    </button>
+                    </HeroLink>
                     <span> 的二次开发</span>
                   </div>
                 ) : (
                   <div className='flex justify-center'>
-                    <button
-                      onClick={() => window.open('https://github.com/MoonTechLab/LunaTV', '_blank')}
-                      className='theme-transition p-1 text-accent hover:text-accent-strong'
-                      title='基于 MoonTV 的二次开发'
-                    >
-                      <ExternalLink className='h-4 w-4' />
-                    </button>
+                    <Tooltip>
+                      <Tooltip.Trigger>
+                      <HeroLink
+                        href='https://github.com/MoonTechLab/LunaTV'
+                        target='_blank'
+                        aria-label='基于 MoonTV 的二次开发'
+                      >
+                        <ExternalLink className='h-4 w-4' />
+                      </HeroLink>
+                      </Tooltip.Trigger>
+                      <Tooltip.Content placement='right'>
+                        基于 MoonTV 的二次开发
+                      </Tooltip.Content>
+                    </Tooltip>
                   </div>
                 )}
               </div>
             </div>
           </div>
-        </aside>
+        </Card>
         <div
           className={`transition-all duration-300 sidebar-offset ${isCollapsed ? 'w-16' : 'w-64'
             }`}
diff --git a/src/components/ThemeManager.tsx b/src/components/ThemeManager.tsx
index 25483e9..716f68e 100644
--- a/src/components/ThemeManager.tsx
+++ b/src/components/ThemeManager.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { ChevronDown, ChevronUp, Palette, Eye, Check } from 'lucide-react';
+import { Alert, Button, Card, Chip, TextArea } from '@heroui/react';
 
 // CSS模板配置
 const cssTemplates = [
@@ -9,10 +10,10 @@ const cssTemplates = [
     id: 'gradient-bg',
     name: '渐变背景',
     description: '为页面添加漂亮的渐变背景',
-    preview: 'body {\n  background: linear-gradient(135deg, \n    #667eea 0%, #764ba2 100%);\n}',
+    preview: 'body {\n  background: linear-gradient(135deg, \n    #18181b 0%, #be123c 100%);\n}',
     css: `/* 渐变背景主题 */
 body {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, #18181b 0%, #be123c 100%);
   background-attachment: fixed;
 }
 
@@ -67,26 +68,26 @@ body::before {
     id: 'sidebar-glow',
     name: '发光侧边栏',
     description: '为侧边栏添加发光效果',
-    preview: '.sidebar {\n  box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);\n  border-radius: 15px;\n}',
+    preview: '.sidebar {\n  box-shadow: 0 0 20px rgba(225, 29, 72, 0.3);\n  border-radius: 15px;\n}',
     css: `/* 发光侧边栏效果 */
 .sidebar, [data-sidebar] {
-  box-shadow: 0 0 20px rgba(14, 165, 233, 0.3);
+  box-shadow: 0 0 20px rgba(225, 29, 72, 0.3);
   border-radius: 15px;
-  border: 1px solid rgba(14, 165, 233, 0.2);
+  border: 1px solid rgba(225, 29, 72, 0.2);
   backdrop-filter: blur(10px);
 }
 
 /* 侧边栏项目悬停效果 */
 .sidebar a:hover, [data-sidebar] a:hover {
-  background: rgba(14, 165, 233, 0.1);
+  background: rgba(225, 29, 72, 0.1);
   transform: translateX(5px);
   transition: all 0.3s ease;
 }
 
 /* 活动项目发光 */
 .sidebar [data-active="true"], [data-sidebar] [data-active="true"] {
-  background: rgba(14, 165, 233, 0.15);
-  box-shadow: inset 0 0 10px rgba(14, 165, 233, 0.2);
+  background: rgba(225, 29, 72, 0.15);
+  box-shadow: inset 0 0 10px rgba(225, 29, 72, 0.2);
   border-radius: 8px;
 }`
   },
@@ -134,9 +135,9 @@ body::before {
     css: `/* 毛玻璃主题 */
 body {
   background: linear-gradient(45deg, 
-    rgba(59, 130, 246, 0.1) 0%, 
-    rgba(147, 51, 234, 0.1) 50%, 
-    rgba(236, 72, 153, 0.1) 100%);
+    rgba(24, 24, 27, 0.1) 0%, 
+    rgba(225, 29, 72, 0.1) 50%, 
+    rgba(244, 63, 94, 0.1) 100%);
 }
 
 /* 所有面板使用毛玻璃效果 */
@@ -212,13 +213,13 @@ const themes = [
   {
     id: 'default',
     name: '默认主题',
-    description: '现代蓝色主题，清新优雅',
+    description: '石墨玫瑰，冷静高级',
     preview: {
-      bg: '#ffffff',
-      surface: '#f9fafb',
-      accent: '#0ea5e9',
-      text: '#111827',
-      border: '#e5e7eb'
+      bg: '#fafafa',
+      surface: '#ffffff',
+      accent: '#e11d48',
+      text: '#18181b',
+      border: '#d4d4d8'
     }
   },
   {
@@ -560,51 +561,49 @@ const ThemeManager = ({ showAlert, role }: ThemeManagerProps) => {
     <div className="space-y-6">
       {/* 管理员控制面板 */}
       {isAdmin && globalThemeConfig && (
-        <div className="bg-theme-surface border border-theme-border rounded-lg p-4">
-          <h3 className="text-lg font-semibold text-theme-text mb-4 flex items-center gap-2">
-            <Palette className="h-5 w-5" />
-            全站主题设置
-          </h3>
+        <Card variant='default' className='p-4'>
+          <Card.Header>
+            <Card.Title className="flex items-center gap-2">
+              <Palette className="h-5 w-5" />
+              全站主题设置
+            </Card.Title>
+          </Card.Header>
 
           <div className="space-y-4">
-            <div className="p-3 bg-theme-accent/5 border border-theme-accent/20 rounded-lg">
-              <div className="text-sm text-theme-text">
+            <Card variant='secondary' className='p-3'>
+              <div className="text-sm">
                 <strong>当前全站配置：</strong>
               </div>
-              <div className="text-xs text-theme-text-secondary mt-1">
+              <div className="text-xs text-muted mt-1">
                 默认主题: {themes.find(t => t.id === globalThemeConfig.defaultTheme)?.name || globalThemeConfig.defaultTheme}
                 {globalThemeConfig.customCSS && ' | 包含自定义CSS'}
                 {!globalThemeConfig.allowUserCustomization && ' | 禁止用户自定义'}
               </div>
-            </div>
+            </Card>
 
-            <div className="p-3 bg-blue-50 border border-blue-200 rounded-lg dark:bg-blue-900/20 dark:border-blue-700">
-              <div className="flex items-center gap-2 text-blue-800 dark:text-blue-200">
-                <span className="text-sm font-medium">ℹ️ 全站主题</span>
-              </div>
-              <p className="text-xs text-blue-700 dark:text-blue-300 mt-1">
+            <Alert status='accent'>
+              <Alert.Title>全站主题</Alert.Title>
+              <Alert.Description>
                 在此设置的主题配置将应用到整个网站，影响所有用户的默认体验
-              </p>
-            </div>
+              </Alert.Description>
+            </Alert>
           </div>
-        </div>
+        </Card>
       )}
 
       {/* 主题选择器 */}
       <div>
-        <h3 className="text-lg font-semibold text-theme-text mb-4 flex items-center gap-2">
+        <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
           <Palette className="h-5 w-5" />
           全站主题选择
         </h3>
 
         <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
           {themes.map((theme) => (
-            <div
+            <Card
               key={theme.id}
-              className={`relative p-4 border-2 rounded-xl transition-all ${currentTheme === theme.id
-                ? 'border-theme-accent bg-theme-accent/5'
-                : 'border-theme-border bg-theme-surface'
-                } ${isAdmin ? 'cursor-pointer hover:border-theme-accent/50' : 'cursor-not-allowed opacity-60'}`}
+              variant={currentTheme === theme.id ? 'secondary' : 'default'}
+              className={`relative p-4 ${isAdmin ? 'cursor-pointer' : 'cursor-not-allowed opacity-60'}`}
               onClick={() => isAdmin && handleThemeChange(theme.id)}
             >
               {/* 主题预览 */}
@@ -615,83 +614,86 @@ const ThemeManager = ({ showAlert, role }: ThemeManagerProps) => {
                   <div className="w-4 h-4 rounded-full" style={{ backgroundColor: theme.preview.accent }} />
                 </div>
                 <div className="flex gap-1">
-                  <button
+                  <Button
+                    isIconOnly
+                    size='sm'
+                    variant='tertiary'
                     onClick={(e) => {
                       e.stopPropagation();
                       if (isAdmin) handleThemePreview(theme.id);
                     }}
-                    className={`p-1 transition-colors ${isAdmin ? 'text-theme-text-secondary hover:text-theme-accent' : 'text-theme-text-secondary opacity-50 cursor-not-allowed'}`}
-                    title={isAdmin ? "预览主题" : "仅管理员可预览"}
-                    disabled={previewMode || !isAdmin}
+                    aria-label={isAdmin ? "预览主题" : "仅管理员可预览"}
+                    isDisabled={previewMode || !isAdmin}
                   >
                     <Eye className="h-4 w-4" />
-                  </button>
+                  </Button>
                   {currentTheme === theme.id && (
-                    <Check className="h-4 w-4 text-theme-accent" />
+                    <Chip variant='primary' size='sm'>
+                      <Check className="h-3.5 w-3.5" />
+                    </Chip>
                   )}
                 </div>
               </div>
 
-              <h4 className="font-medium text-theme-text">{theme.name}</h4>
-              <p className="text-sm text-theme-text-secondary mt-1">{theme.description}</p>
-            </div>
+              <h4 className="font-medium">{theme.name}</h4>
+              <p className="text-sm text-muted mt-1">{theme.description}</p>
+            </Card>
           ))}
         </div>
 
         {previewMode && (
-          <div className="mt-4 p-3 bg-theme-info/10 border border-theme-info/20 rounded-lg">
-            <p className="text-sm text-theme-info">正在预览主题，3秒后将自动恢复...</p>
-          </div>
+          <Alert status='accent' className='mt-4'>
+            正在预览主题，3秒后将自动恢复...
+          </Alert>
         )}
       </div>
 
       {/* 自定义CSS编辑器 */}
       <div>
         <div className="flex items-center justify-between mb-4">
-          <h3 className="text-lg font-semibold text-theme-text flex items-center gap-2">
+          <h3 className="text-lg font-semibold flex items-center gap-2">
             <Palette className="h-5 w-5" />
             全站自定义样式
           </h3>
           {isAdmin ? (
-            <button
-              onClick={() => setShowCustomEditor(!showCustomEditor)}
-              className="flex items-center gap-2 px-3 py-1.5 text-sm bg-theme-surface border border-theme-border rounded-lg hover:bg-theme-accent/5 transition-colors"
+            <Button
+              variant='secondary'
+              size='sm'
+              onPress={() => setShowCustomEditor(!showCustomEditor)}
             >
               {showCustomEditor ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
               {showCustomEditor ? '收起编辑器' : '展开编辑器'}
-            </button>
+            </Button>
           ) : (
-            <div className="text-sm text-theme-text-secondary">
+            <div className="text-sm text-muted">
               仅管理员可编辑
             </div>
           )}
         </div>
 
         {!isAdmin && (
-          <div className="p-4 bg-yellow-50 border border-yellow-200 rounded-lg dark:bg-yellow-900/20 dark:border-yellow-700 mb-4">
-            <div className="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
-              <span className="text-sm font-medium">⚠️ 权限限制</span>
-            </div>
-            <p className="text-xs text-yellow-700 dark:text-yellow-300 mt-1">
+          <Alert status='warning' className='mb-4'>
+            <Alert.Title>权限限制</Alert.Title>
+            <Alert.Description>
               您当前没有权限修改全站主题设置，请联系管理员。
-            </p>
-          </div>
+            </Alert.Description>
+          </Alert>
         )}
 
         {isAdmin && showCustomEditor && (
           <div className="space-y-4">
-            <div className="text-sm text-theme-text-secondary bg-theme-surface p-3 rounded-lg border border-theme-border">
+            <Card variant='secondary' className='p-3 text-sm text-muted'>
               <p className="mb-2">💡 <strong>使用提示：</strong></p>
               <ul className="space-y-1 text-xs">
-                <li>• 使用CSS变量覆盖主题颜色：<code className="bg-theme-bg px-1 rounded">--color-theme-accent: 255, 0, 0;</code></li>
-                <li>• 使用Tailwind类名：<code className="bg-theme-bg px-1 rounded">{`.my-class { @apply bg-red-500; }`}</code></li>
-                <li>• 自定义组件样式：<code className="bg-theme-bg px-1 rounded">{`.admin-panel { border-radius: 20px; }`}</code></li>
+                <li>• 使用CSS变量覆盖主题颜色：<code>--color-theme-accent: 255, 0, 0;</code></li>
+                <li>• 使用Tailwind类名：<code>{`.my-class { @apply bg-red-500; }`}</code></li>
+                <li>• 自定义组件样式：<code>{`.admin-panel { border-radius: 20px; }`}</code></li>
                 <li>• 修改会实时生效，请谨慎使用</li>
               </ul>
-            </div>
+            </Card>
 
             <div className="relative">
-              <textarea
+              <TextArea
                 value={customCSS}
                 onChange={(e) => setCustomCSS(e.target.value)}
                 placeholder="/* 在此输入您的自定义CSS */
@@ -704,27 +706,22 @@ const ThemeManager = ({ showAlert, role }: ThemeManagerProps) => {
   box-shadow: 0 10px 25px rgba(0,0,0,0.1);
 }
 
-/* 使用Tailwind类名 */
-.custom-button {
-  @apply bg-gradient-to-r from-purple-500 to-pink-500 text-white px-6 py-3 rounded-xl;
-}"
-                className="w-full h-64 p-4 bg-theme-surface border border-theme-border rounded-lg text-sm font-mono text-theme-text placeholder-theme-text-secondary resize-none focus:outline-none focus:ring-2 focus:ring-theme-accent/50"
+	/* 使用Tailwind类名 */
+	.custom-button {
+	  @apply bg-accent text-accent-foreground px-6 py-3;
+	}"
+                className="h-64 w-full font-mono text-sm"
+                fullWidth
               />
             </div>
 
             <div className="flex gap-3">
-              <button
-                onClick={handleCustomCSSApply}
-                className="px-4 py-2 bg-theme-accent text-white rounded-lg hover:opacity-90 transition-opacity"
-              >
+              <Button variant='primary' onPress={handleCustomCSSApply}>
                 应用样式
-              </button>
-              <button
-                onClick={handleCustomCSSReset}
-                className="px-4 py-2 bg-theme-surface border border-theme-border text-theme-text rounded-lg hover:bg-theme-accent/5 transition-colors"
-              >
+              </Button>
+              <Button variant='secondary' onPress={handleCustomCSSReset}>
                 重置样式
-              </button>
+              </Button>
             </div>
           </div>
         )}
@@ -732,68 +729,71 @@ const ThemeManager = ({ showAlert, role }: ThemeManagerProps) => {
 
       {/* CSS 模板库 */}
       {isAdmin && (
-        <div className="bg-theme-surface border border-theme-border rounded-lg p-4">
-          <h4 className="font-medium text-theme-text mb-3 flex items-center gap-2">
-            <Palette className="h-4 w-4" />
-            🎨 全站样式模板库
-          </h4>
-          <p className="text-sm text-theme-text-secondary mb-4">选择预设模板快速应用炫酷效果到全站，也可以在此基础上进行自定义修改</p>
+        <Card variant='default' className='p-4'>
+          <Card.Header>
+            <Card.Title className="flex items-center gap-2">
+              <Palette className="h-4 w-4" />
+              全站样式模板库
+            </Card.Title>
+            <Card.Description>选择预设模板快速应用到全站，也可以在此基础上进行自定义修改</Card.Description>
+          </Card.Header>
 
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
             {cssTemplates.map((template) => (
-              <div key={template.id} className="p-3 border border-theme-border rounded-lg hover:bg-theme-accent/5 transition-colors group">
+              <Card key={template.id} variant='secondary' className='p-3'>
                 <div className="flex items-center justify-between mb-2">
-                  <h5 className="text-sm font-medium text-theme-text">{template.name}</h5>
-                  <button
-                    onClick={() => handleApplyTemplate(template.css, template.name)}
-                    className="text-xs px-2 py-1 bg-theme-accent text-white rounded hover:opacity-90 transition-opacity opacity-0 group-hover:opacity-100"
+                  <h5 className="text-sm font-medium">{template.name}</h5>
+                  <Button
+                    size='sm'
+                    variant='primary'
+                    onPress={() => handleApplyTemplate(template.css, template.name)}
                   >
                     应用
-                  </button>
+                  </Button>
                 </div>
-                <p className="text-xs text-theme-text-secondary mb-2">{template.description}</p>
-                <div className="text-xs bg-theme-bg rounded p-2 max-h-16 overflow-y-auto">
-                  <code className="whitespace-pre-wrap text-theme-text-secondary">{template.preview}</code>
+                <p className="text-xs text-muted mb-2">{template.description}</p>
+                <div className="text-xs max-h-16 overflow-y-auto">
+                  <code className="whitespace-pre-wrap text-muted">{template.preview}</code>
                 </div>
-              </div>
+              </Card>
             ))}
           </div>
 
-          <div className="mt-4 p-3 bg-theme-accent/5 border border-theme-accent/20 rounded-lg">
-            <p className="text-xs text-theme-text-secondary">
+          <Alert status='accent' className='mt-4'>
+            <Alert.Description>
               <strong>💡 使用提示：</strong> 点击模板的"应用"按钮将代码复制到自定义CSS编辑器，然后可以在此基础上进行修改。记得点击"应用样式"按钮生效。
-            </p>
-          </div>
-        </div>
+            </Alert.Description>
+          </Alert>
+        </Card>
       )}
 
       {/* 使用说明 */}
-      <div className="bg-theme-surface border border-theme-border rounded-lg p-4">
-        <h4 className="font-medium text-theme-text mb-2">📖 全站主题定制指南</h4>
-        <div className="text-sm text-theme-text-secondary space-y-2">
+      <Card variant='default' className='p-4'>
+        <Card.Title>全站主题定制指南</Card.Title>
+        <div className="text-sm text-muted space-y-2 mt-2">
           <p><strong>内置主题：</strong>{isAdmin ? '选择预设主题即可一键切换全站整体风格' : '由管理员设置的全站预设主题'}</p>
           {isAdmin && <p><strong>自定义CSS：</strong>通过CSS变量或直接样式实现全站个性化定制</p>}
           {isAdmin && <p><strong>样式模板：</strong>使用预设模板快速实现炫酷效果</p>}
           <p><strong>主题变量：</strong></p>
           <ul className="text-xs space-y-1 ml-4 mt-1">
-            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-bg</code> - 背景色</li>
-            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-surface</code> - 卡片背景</li>
-            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-accent</code> - 主题色</li>
-            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-text</code> - 主文本色</li>
-            <li>• <code className="bg-theme-bg px-1 rounded">--color-theme-border</code> - 边框色</li>
+            <li>• <code>--color-theme-bg</code> - 背景色</li>
+            <li>• <code>--color-theme-surface</code> - 卡片背景</li>
+            <li>• <code>--color-theme-accent</code> - 主题色</li>
+            <li>• <code>--color-theme-text</code> - 主文本色</li>
+            <li>• <code>--color-theme-border</code> - 边框色</li>
           </ul>
           {isAdmin && (
             <>
               <p><strong>常用技巧：</strong></p>
               <ul className="text-xs space-y-1 ml-4 mt-1">
-                <li>• 修改背景：<code className="bg-theme-bg px-1 rounded">{`body { background: linear-gradient(...); }`}</code></li>
-                <li>• 使用Tailwind：<code className="bg-theme-bg px-1 rounded">{`.my-class { @apply bg-red-500; }`}</code></li>
+                <li>• 修改背景：<code>{`body { background: linear-gradient(...); }`}</code></li>
+                <li>• 使用Tailwind：<code>{`.my-class { @apply bg-red-500; }`}</code></li>
                 <li>• 组合多个模板效果获得独特样式</li>
               </ul>
             </>
           )}
         </div>
-      </div>
+      </Card>
     </div>
   );
 };
diff --git a/src/components/ThemeToggle.tsx b/src/components/ThemeToggle.tsx
index cbb2013..b4b2225 100644
--- a/src/components/ThemeToggle.tsx
+++ b/src/components/ThemeToggle.tsx
@@ -6,6 +6,7 @@ import { MessageCircle, Moon, Sun } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { useEffect, useState, useCallback } from 'react';
+import { Badge } from '@heroui/react';
 import { ChatModal } from './ChatModal';
 import { AppIconButton } from './ui/HeroPrimitives';
 import { useWebSocket } from '../hooks/useWebSocket';
@@ -105,28 +106,28 @@ export function ThemeToggle() {
         {!isLoginPage && (
           <AppIconButton
             onPress={() => setIsChatModalOpen(true)}
-            className={`a2-icon-button relative ${isMobile ? 'h-8 w-8 p-1.5' : 'h-10 w-10 p-2'}`}
+            size={isMobile ? 'sm' : 'md'}
             aria-label='Open chat'
           >
-            <MessageCircle className='w-full h-full' />
             {messageCount > 0 && (
-              <span className={`absolute ${isMobile ? '-right-0.5 -top-0.5 h-4 w-4 text-[10px]' : '-right-1 -top-1 h-5 w-5 text-[10px]'} flex items-center justify-center border border-border/70 bg-accent text-accent-foreground`}>
-                {messageCount > 99 ? '99+' : messageCount}
-              </span>
+              <Badge size='sm' color='accent' variant='primary' className='absolute -right-1 -top-1'>
+                <Badge.Label>{messageCount > 99 ? '99+' : messageCount}</Badge.Label>
+              </Badge>
             )}
+            <MessageCircle className='h-5 w-5' />
           </AppIconButton>
         )}
 
         {/* 主题切换按钮 */}
         <AppIconButton
           onPress={toggleTheme}
-          className={`a2-icon-button ${isMobile ? 'h-8 w-8 p-1.5' : 'h-10 w-10 p-2'}`}
+          size={isMobile ? 'sm' : 'md'}
           aria-label='Toggle theme'
         >
           {resolvedTheme === 'dark' ? (
-            <Sun className='w-full h-full' />
+            <Sun className='h-5 w-5' />
           ) : (
-            <Moon className='w-full h-full' />
+            <Moon className='h-5 w-5' />
           )}
         </AppIconButton>
       </div>
diff --git a/src/components/UserMenu.tsx b/src/components/UserMenu.tsx
index fabbf20..163d843 100644
--- a/src/components/UserMenu.tsx
+++ b/src/components/UserMenu.tsx
@@ -3,26 +3,29 @@
 'use client';
 
 import {
+  Alert,
+  Badge,
+  Button,
   Dropdown,
+  Input,
   Label,
+  Switch,
+  TextField,
 } from '@heroui/react';
 import {
   Camera,
   Check,
-  ChevronDown,
   ExternalLink,
   KeyRound,
   LogOut,
   Settings,
   Shield,
   User,
-  X,
   Upload,
 } from 'lucide-react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useEffect, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
 import ReactCrop, { Crop, PercentCrop, PixelCrop } from 'react-image-crop';
 import 'react-image-crop/dist/ReactCrop.css';
 
@@ -32,7 +35,7 @@ import { checkForUpdates, UpdateStatus } from '@/lib/version_check';
 
 import { VersionPanel } from './VersionPanel';
 import { useToast } from './Toast';
-import { AppIconButton } from './ui/HeroPrimitives';
+import { AppDialog, AppFilterSelect, AppIconButton } from './ui/HeroPrimitives';
 
 interface AuthInfo {
   username?: string;
@@ -101,9 +104,6 @@ export const UserMenu: React.FC = () => {
   const [doubanDataSource, setDoubanDataSource] = useState('cmliussss-cdn-tencent');
   const [doubanImageProxyType, setDoubanImageProxyType] = useState('cmliussss-cdn-tencent');
   const [doubanImageProxyUrl, setDoubanImageProxyUrl] = useState('');
-  const [isDoubanDropdownOpen, setIsDoubanDropdownOpen] = useState(false);
-  const [isDoubanImageProxyDropdownOpen, setIsDoubanImageProxyDropdownOpen] =
-    useState(false);
 
   // 豆瓣数据源选项
   const doubanDataSourceOptions = [
@@ -261,45 +261,6 @@ export const UserMenu: React.FC = () => {
     checkUpdate();
   }, []);
 
-  // 点击外部区域关闭下拉框
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (isDoubanDropdownOpen) {
-        const target = event.target as Element;
-        if (!target.closest('[data-dropdown="douban-datasource"]')) {
-          setIsDoubanDropdownOpen(false);
-        }
-      }
-    };
-
-    if (isDoubanDropdownOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () =>
-        document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isDoubanDropdownOpen]);
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (isDoubanImageProxyDropdownOpen) {
-        const target = event.target as Element;
-        if (!target.closest('[data-dropdown="douban-image-proxy"]')) {
-          setIsDoubanImageProxyDropdownOpen(false);
-        }
-      }
-    };
-
-    if (isDoubanImageProxyDropdownOpen) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () =>
-        document.removeEventListener('mousedown', handleClickOutside);
-    }
-  }, [isDoubanImageProxyDropdownOpen]);
-
-  const handleMenuClick = () => {
-    setIsOpen(!isOpen);
-  };
-
   const handleCloseMenu = () => {
     setIsOpen(false);
   };
@@ -690,652 +651,229 @@ export const UserMenu: React.FC = () => {
     }
   };
 
-  // 菜单面板内容
-  const menuPanel = (
-    <>
-      {/* 背景遮罩 - 普通菜单无需模糊 */}
-      <div
-        className='fixed inset-0 bg-transparent z-[1000]'
-        onClick={handleCloseMenu}
-      />
-
-      {/* 菜单面板 */}
-      <div className='fixed right-4 top-14 z-[1001] w-56 overflow-hidden border border-border/70 bg-surface/95 shadow-[0_20px_45px_-30px_rgba(0,0,0,0.7)] select-none'>
-        {/* 用户信息区域 */}
-        <div className='border-b border-border/70 px-3 py-2.5'>
-          <div className='flex items-center gap-3'>
-            {/* 用户头像 */}
-            <div className='relative h-10 w-10 flex-shrink-0 overflow-hidden border border-border/70'>
-              {avatarUrl ? (
-                <Image
-                  src={avatarUrl}
-                  alt="用户头像"
-                  fill
-                  sizes="40px"
-                  className='object-cover'
-                />
-              ) : (
-                <div className='flex h-full w-full items-center justify-center bg-surface-secondary/60'>
-                  <User className='h-6 w-6 text-accent' />
-                </div>
-              )}
-            </div>
-            {/* 用户信息 */}
-            <div className='flex-1 min-w-0'>
-              <div className='flex items-center justify-between'>
-                <span className='text-xs font-medium uppercase tracking-[0.16em] text-muted'>
-                  当前用户
-                </span>
-                <span
-                  className={`inline-flex items-center border border-border/70 px-1.5 py-0.5 text-xs font-medium ${(authInfo?.role || 'user') === 'owner'
-                    ? 'text-accent'
-                    : (authInfo?.role || 'user') === 'admin'
-                      ? 'text-foreground'
-                      : 'text-success'
-                    }`}
-                >
-                  {getRoleText(authInfo?.role || 'user')}
-                </span>
-              </div>
-              <div className='flex items-center justify-between'>
-                <div className='truncate text-sm font-semibold text-foreground'>
-                  {authInfo?.username || 'default'}
-                </div>
-                <div className='text-[10px] uppercase tracking-[0.14em] text-muted'>
-                  {storageType === 'localstorage' ? '本地' : storageType}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* 菜单项 */}
-        <div className='py-1'>
-          {/* 设置按钮 */}
-          <button
-            onClick={handleSettings}
-            className='theme-transition flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-muted hover:bg-background/20 hover:text-foreground'
-          >
-            <Settings className='h-4 w-4 text-muted' />
-            <span className='font-medium'>设置</span>
-          </button>
-
-          {/* 管理面板按钮 */}
-          {showAdminPanel && (
-            <button
-              onClick={handleAdminPanel}
-              className='theme-transition flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-muted hover:bg-background/20 hover:text-foreground'
-            >
-              <Shield className='h-4 w-4 text-muted' />
-              <span className='font-medium'>管理面板</span>
-            </button>
-          )}
-
-          {/* 修改头像按钮 */}
-          <button
-            onClick={handleChangeAvatar}
-            className='theme-transition flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-muted hover:bg-background/20 hover:text-foreground'
-          >
-            <Camera className='h-4 w-4 text-muted' />
-            <span className='font-medium'>修改头像</span>
-          </button>
-
-          {/* 修改密码按钮 */}
-          {showChangePassword && (
-            <button
-              onClick={handleChangePassword}
-              className='theme-transition flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-muted hover:bg-background/20 hover:text-foreground'
-            >
-              <KeyRound className='h-4 w-4 text-muted' />
-              <span className='font-medium'>修改密码</span>
-            </button>
-          )}
-
-          {/* 分割线 */}
-          <div className='my-1 border-t border-border/70'></div>
-
-          {/* 登出按钮 */}
-          <button
-            onClick={handleLogout}
-            className='theme-transition flex w-full items-center gap-2.5 px-3 py-2 text-left text-sm text-danger hover:bg-danger/10'
-          >
-            <LogOut className='w-4 h-4' />
-            <span className='font-medium'>登出</span>
-          </button>
-
-          {/* 分割线 */}
-          <div className='my-1 border-t border-border/70'></div>
-
-          {/* 版本信息 */}
-          <button
-            onClick={() => {
-              setIsVersionPanelOpen(true);
-              handleCloseMenu();
-            }}
-            className='theme-transition flex w-full items-center justify-center px-3 py-2 text-center text-xs text-muted hover:bg-background/20'
-          >
-            <div className='flex items-center gap-1'>
-              <span className='font-mono'>v{CURRENT_VERSION}</span>
-              {!isChecking &&
-                updateStatus &&
-                updateStatus !== UpdateStatus.FETCH_FAILED && (
-                  <div
-                    className={`w-2 h-2 rounded-full -translate-y-2 ${updateStatus === UpdateStatus.HAS_UPDATE
-                      ? 'bg-warning'
-                      : updateStatus === UpdateStatus.NO_UPDATE
-                        ? 'bg-success'
-                        : ''
-                      }`}
-                  ></div>
-                )}
-            </div>
-          </button>
-        </div>
-      </div>
-    </>
-  );
-
-  // 设置面板内容
   const settingsPanel = (
-    <>
-      {/* 背景遮罩 */}
-      <div
-        className='fixed inset-0 bg-black/50 backdrop-blur-sm z-[1000]'
-        onClick={handleCloseSettings}
-        onTouchMove={(e) => {
-          // 只阻止滚动，允许其他触摸事件
-          e.preventDefault();
-        }}
-        onWheel={(e) => {
-          // 阻止滚轮滚动
-          e.preventDefault();
-        }}
-        style={{
-          touchAction: 'none',
-        }}
-      />
+    <AppDialog
+      isOpen={isSettingsOpen}
+      onOpenChange={(open) => {
+        if (!open) handleCloseSettings();
+      }}
+      title='本地设置'
+      description='这些设置保存在本地浏览器中'
+      size='lg'
+    >
+      <div className='space-y-6'>
+        <div className='flex justify-end'>
+          <Button variant='danger' size='sm' onPress={handleResetSettings}>
+            恢复默认
+          </Button>
+        </div>
 
-      {/* 设置面板 */}
-      <div
-        className='a2-panel fixed left-1/2 top-1/2 z-[1001] flex max-h-[90vh] w-full max-w-xl -translate-x-1/2 -translate-y-1/2 flex-col bg-surface/95'
-      >
-        {/* 内容容器 - 独立的滚动区域 */}
-        <div
-          className='flex-1 p-6 overflow-y-auto'
-          data-panel-content
-          style={{
-            touchAction: 'pan-y', // 只允许垂直滚动
-            overscrollBehavior: 'contain', // 防止滚动冒泡
-          }}
-        >
-          {/* 标题栏 */}
-          <div className='flex items-center justify-between mb-6'>
-            <div className='flex items-center gap-3'>
-              <h3 className='text-xl font-semibold tracking-[-0.045em] text-foreground'>
-                本地设置
-              </h3>
-              <button
-                onClick={handleResetSettings}
-                className='a2-button a2-button-danger px-2 py-1 text-xs'
-                title='重置为默认设置'
-              >
-                恢复默认
-              </button>
-            </div>
-            <button
-              onClick={handleCloseSettings}
-              className='a2-icon-button h-8 w-8 p-1.5'
-              aria-label='Close'
+        <section className='space-y-3'>
+          <AppFilterSelect
+            ariaLabel='豆瓣数据代理选项'
+            label='豆瓣数据代理'
+            options={doubanDataSourceOptions}
+            value={doubanDataSource}
+            onChange={handleDoubanDataSourceChange}
+          />
+          {getThanksInfo(doubanDataSource) ? (
+            <Button
+              variant='ghost'
+              size='sm'
+              onPress={() =>
+                window.open(getThanksInfo(doubanDataSource)!.url, '_blank')
+              }
             >
-              <X className='w-full h-full' />
-            </button>
-          </div>
+              {getThanksInfo(doubanDataSource)!.text}
+              <ExternalLink className='h-3.5 w-3.5' />
+            </Button>
+          ) : null}
+          {doubanDataSource === 'custom' ? (
+            <TextField>
+              <Label>豆瓣代理地址</Label>
+              <Input
+                type='text'
+                placeholder='例如: https://proxy.example.com/fetch?url='
+                value={doubanProxyUrl}
+                onChange={(e) => handleDoubanProxyUrlChange(e.target.value)}
+              />
+            </TextField>
+          ) : null}
+        </section>
 
-          {/* 设置项 */}
-          <div className='space-y-6'>
-            {/* 豆瓣数据源选择 */}
-            <div className='space-y-3'>
+        <section className='space-y-3'>
+          <AppFilterSelect
+            ariaLabel='豆瓣图片代理选项'
+            label='豆瓣图片代理'
+            options={doubanImageProxyTypeOptions}
+            value={doubanImageProxyType}
+            onChange={handleDoubanImageProxyTypeChange}
+          />
+          {getThanksInfo(doubanImageProxyType) ? (
+            <Button
+              variant='ghost'
+              size='sm'
+              onPress={() =>
+                window.open(getThanksInfo(doubanImageProxyType)!.url, '_blank')
+              }
+            >
+              {getThanksInfo(doubanImageProxyType)!.text}
+              <ExternalLink className='h-3.5 w-3.5' />
+            </Button>
+          ) : null}
+          {doubanImageProxyType === 'custom' ? (
+            <TextField>
+              <Label>豆瓣图片代理地址</Label>
+              <Input
+                type='text'
+                placeholder='例如: https://proxy.example.com/fetch?url='
+                value={doubanImageProxyUrl}
+                onChange={(e) =>
+                  handleDoubanImageProxyUrlChange(e.target.value)
+                }
+              />
+            </TextField>
+          ) : null}
+        </section>
+
+        <div className='space-y-4'>
+          <Switch
+            isSelected={defaultAggregateSearch}
+            onChange={handleAggregateToggle}
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+            <Switch.Content>
               <div>
-                <h4 className='text-sm font-medium text-foreground'>
-                  豆瓣数据代理
-                </h4>
-                <p className='mt-1 text-xs text-muted'>
-                  选择获取豆瓣数据的方式
-                </p>
-              </div>
-              <div className='relative' data-dropdown='douban-datasource'>
-                {/* 自定义下拉选择框 */}
-                <button
-                  type='button'
-                  onClick={() => setIsDoubanDropdownOpen(!isDoubanDropdownOpen)}
-                  className='a2-field pr-10 text-left'
-                >
-                  {
-                    doubanDataSourceOptions.find(
-                      (option) => option.value === doubanDataSource
-                    )?.label
-                  }
-                </button>
-
-                {/* 下拉箭头 */}
-                <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                  <ChevronDown
-                    className={`h-4 w-4 text-muted transition-transform duration-200 ${isDoubanDropdownOpen ? 'rotate-180' : ''
-                      }`}
-                  />
-                </div>
-
-                {/* 下拉选项列表 */}
-                {isDoubanDropdownOpen && (
-                  <div className='a2-panel absolute z-50 mt-1 max-h-60 w-full overflow-auto bg-surface/95'>
-                    {doubanDataSourceOptions.map((option) => (
-                      <button
-                        key={option.value}
-                        type='button'
-                        onClick={() => {
-                          handleDoubanDataSourceChange(option.value);
-                          setIsDoubanDropdownOpen(false);
-                        }}
-                        className={`flex w-full items-center justify-between px-3 py-2.5 text-left text-sm theme-transition hover:bg-background/25 ${doubanDataSource === option.value
-                          ? 'bg-accent/10 text-accent'
-                          : 'text-foreground'
-                          }`}
-                      >
-                        <span className='truncate'>{option.label}</span>
-                        {doubanDataSource === option.value && (
-                          <Check className='ml-2 h-4 w-4 flex-shrink-0 text-accent' />
-                        )}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-
-              {/* 感谢信息 */}
-              {getThanksInfo(doubanDataSource) && (
-                <div className='mt-3'>
-                  <button
-                    type='button'
-                    onClick={() =>
-                      window.open(getThanksInfo(doubanDataSource)!.url, '_blank')
-                    }
-                    className='flex w-full cursor-pointer items-center justify-center gap-1.5 px-3 text-xs text-muted'
-                  >
-                    <span className='font-medium'>
-                      {getThanksInfo(doubanDataSource)!.text}
-                    </span>
-                    <ExternalLink className='w-3.5 opacity-70' />
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {/* 豆瓣代理地址设置 - 仅在选择自定义代理时显示 */}
-            {doubanDataSource === 'custom' && (
-              <div className='space-y-3'>
-                <div>
-                  <h4 className='text-sm font-medium text-foreground'>
-                    豆瓣代理地址
-                  </h4>
-                  <p className='mt-1 text-xs text-muted'>
-                    自定义代理服务器地址
-                  </p>
-                </div>
-                <input
-                  type='text'
-                  className='a2-field'
-                  placeholder='例如: https://proxy.example.com/fetch?url='
-                  value={doubanProxyUrl}
-                  onChange={(e) => handleDoubanProxyUrlChange(e.target.value)}
-                />
-              </div>
-            )}
-
-            {/* 分割线 */}
-            <div className='border-t border-border/70'></div>
-
-            {/* 豆瓣图片代理设置 */}
-            <div className='space-y-3'>
-              <div>
-                <h4 className='text-sm font-medium text-foreground'>
-                  豆瓣图片代理
-                </h4>
-                <p className='mt-1 text-xs text-muted'>
-                  选择获取豆瓣图片的方式
-                </p>
-              </div>
-              <div className='relative' data-dropdown='douban-image-proxy'>
-                {/* 自定义下拉选择框 */}
-                <button
-                  type='button'
-                  onClick={() =>
-                    setIsDoubanImageProxyDropdownOpen(
-                      !isDoubanImageProxyDropdownOpen
-                    )
-                  }
-                  className='a2-field pr-10 text-left'
-                >
-                  {
-                    doubanImageProxyTypeOptions.find(
-                      (option) => option.value === doubanImageProxyType
-                    )?.label
-                  }
-                </button>
-
-                {/* 下拉箭头 */}
-                <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                  <ChevronDown
-                    className={`h-4 w-4 text-muted transition-transform duration-200 ${isDoubanDropdownOpen ? 'rotate-180' : ''
-                      }`}
-                  />
-                </div>
-
-                {/* 下拉选项列表 */}
-                {isDoubanImageProxyDropdownOpen && (
-                  <div className='a2-panel absolute z-50 mt-1 max-h-60 w-full overflow-auto bg-surface/95'>
-                    {doubanImageProxyTypeOptions.map((option) => (
-                      <button
-                        key={option.value}
-                        type='button'
-                        onClick={() => {
-                          handleDoubanImageProxyTypeChange(option.value);
-                          setIsDoubanImageProxyDropdownOpen(false);
-                        }}
-                        className={`flex w-full items-center justify-between px-3 py-2.5 text-left text-sm theme-transition hover:bg-background/25 ${doubanImageProxyType === option.value
-                          ? 'bg-accent/10 text-accent'
-                          : 'text-foreground'
-                          }`}
-                      >
-                        <span className='truncate'>{option.label}</span>
-                        {doubanImageProxyType === option.value && (
-                          <Check className='ml-2 h-4 w-4 flex-shrink-0 text-accent' />
-                        )}
-                      </button>
-                    ))}
-                  </div>
-                )}
-              </div>
-
-              {/* 感谢信息 */}
-              {getThanksInfo(doubanImageProxyType) && (
-                <div className='mt-3'>
-                  <button
-                    type='button'
-                    onClick={() =>
-                      window.open(
-                        getThanksInfo(doubanImageProxyType)!.url,
-                        '_blank'
-                      )
-                    }
-                    className='flex w-full cursor-pointer items-center justify-center gap-1.5 px-3 text-xs text-muted'
-                  >
-                    <span className='font-medium'>
-                      {getThanksInfo(doubanImageProxyType)!.text}
-                    </span>
-                    <ExternalLink className='w-3.5 opacity-70' />
-                  </button>
-                </div>
-              )}
-            </div>
-
-            {/* 豆瓣图片代理地址设置 - 仅在选择自定义代理时显示 */}
-            {doubanImageProxyType === 'custom' && (
-              <div className='space-y-3'>
-                <div>
-                  <h4 className='text-sm font-medium text-foreground'>
-                    豆瓣图片代理地址
-                  </h4>
-                  <p className='mt-1 text-xs text-muted'>
-                    自定义图片代理服务器地址
-                  </p>
-                </div>
-                <input
-                  type='text'
-                  className='a2-field'
-                  placeholder='例如: https://proxy.example.com/fetch?url='
-                  value={doubanImageProxyUrl}
-                  onChange={(e) =>
-                    handleDoubanImageProxyUrlChange(e.target.value)
-                  }
-                />
-              </div>
-            )}
-
-            {/* 分割线 */}
-            <div className='border-t border-border/70'></div>
-
-            {/* 默认聚合搜索结果 */}
-            <div className='flex items-center justify-between'>
-              <div>
-                <h4 className='text-sm font-medium text-foreground'>
-                  默认聚合搜索结果
-                </h4>
-                <p className='mt-1 text-xs text-muted'>
+                <p className='text-sm font-medium'>默认聚合搜索结果</p>
+                <p className='text-xs text-muted'>
                   搜索时默认按标题和年份聚合显示结果
                 </p>
               </div>
-              <label className='flex items-center cursor-pointer'>
-                <div className='relative'>
-                  <input
-                    type='checkbox'
-                    className='sr-only peer'
-                    checked={defaultAggregateSearch}
-                    onChange={(e) => handleAggregateToggle(e.target.checked)}
-                  />
-                  <div className='h-6 w-11 border border-border/20 bg-surface-secondary/60 transition-colors peer-checked:border-accent/50 peer-checked:bg-accent/10'></div>
-                  <div className='absolute left-0.5 top-0.5 h-5 w-5 bg-foreground transition-transform peer-checked:translate-x-5'></div>
-                </div>
-              </label>
-            </div>
+            </Switch.Content>
+          </Switch>
 
-            {/* 优选和测速 */}
-            <div className='flex items-center justify-between'>
+          <Switch
+            isSelected={enableOptimization}
+            onChange={handleOptimizationToggle}
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+            <Switch.Content>
               <div>
-                <h4 className='text-sm font-medium text-foreground'>
-                  优选和测速
-                </h4>
-                <p className='mt-1 text-xs text-muted'>
-                  如出现播放器劫持问题可关闭
-                </p>
+                <p className='text-sm font-medium'>优选和测速</p>
+                <p className='text-xs text-muted'>如出现播放器劫持问题可关闭</p>
               </div>
-              <label className='flex items-center cursor-pointer'>
-                <div className='relative'>
-                  <input
-                    type='checkbox'
-                    className='sr-only peer'
-                    checked={enableOptimization}
-                    onChange={(e) => handleOptimizationToggle(e.target.checked)}
-                  />
-                  <div className='h-6 w-11 border border-border/20 bg-surface-secondary/60 transition-colors peer-checked:border-accent/50 peer-checked:bg-accent/10'></div>
-                  <div className='absolute left-0.5 top-0.5 h-5 w-5 bg-foreground transition-transform peer-checked:translate-x-5'></div>
-                </div>
-              </label>
-            </div>
+            </Switch.Content>
+          </Switch>
 
-            {/* 流式搜索 */}
-            <div className='flex items-center justify-between'>
+          <Switch isSelected={fluidSearch} onChange={handleFluidSearchToggle}>
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+            <Switch.Content>
               <div>
-                <h4 className='text-sm font-medium text-foreground'>
-                  流式搜索输出
-                </h4>
-                <p className='mt-1 text-xs text-muted'>
+                <p className='text-sm font-medium'>流式搜索输出</p>
+                <p className='text-xs text-muted'>
                   启用搜索结果实时流式输出，关闭后使用传统一次性搜索
                 </p>
               </div>
-              <label className='flex items-center cursor-pointer'>
-                <div className='relative'>
-                  <input
-                    type='checkbox'
-                    className='sr-only peer'
-                    checked={fluidSearch}
-                    onChange={(e) => handleFluidSearchToggle(e.target.checked)}
-                  />
-                  <div className='h-6 w-11 border border-border/20 bg-surface-secondary/60 transition-colors peer-checked:border-accent/50 peer-checked:bg-accent/10'></div>
-                  <div className='absolute left-0.5 top-0.5 h-5 w-5 bg-foreground transition-transform peer-checked:translate-x-5'></div>
-                </div>
-              </label>
-            </div>
+            </Switch.Content>
+          </Switch>
 
-            {/* 直播视频浏览器直连 */}
-            <div className='flex items-center justify-between'>
+          <Switch
+            isSelected={liveDirectConnect}
+            onChange={handleLiveDirectConnectToggle}
+          >
+            <Switch.Control>
+              <Switch.Thumb />
+            </Switch.Control>
+            <Switch.Content>
               <div>
-                <h4 className='text-sm font-medium text-foreground'>
-                  IPTV 视频浏览器直连
-                </h4>
-                <p className='mt-1 text-xs text-muted'>
+                <p className='text-sm font-medium'>IPTV 视频浏览器直连</p>
+                <p className='text-xs text-muted'>
                   开启 IPTV 视频浏览器直连时，需要自备 Allow CORS 插件
                 </p>
               </div>
-              <label className='flex items-center cursor-pointer'>
-                <div className='relative'>
-                  <input
-                    type='checkbox'
-                    className='sr-only peer'
-                    checked={liveDirectConnect}
-                    onChange={(e) => handleLiveDirectConnectToggle(e.target.checked)}
-                  />
-                  <div className='h-6 w-11 border border-border/20 bg-surface-secondary/60 transition-colors peer-checked:border-accent/50 peer-checked:bg-accent/10'></div>
-                  <div className='absolute left-0.5 top-0.5 h-5 w-5 bg-foreground transition-transform peer-checked:translate-x-5'></div>
-                </div>
-              </label>
-            </div>
-          </div>
-
-          {/* 底部说明 */}
-          <div className='mt-6 border-t border-border/70 pt-4'>
-            <p className='text-center text-xs text-muted'>
-              这些设置保存在本地浏览器中
-            </p>
-          </div>
+            </Switch.Content>
+          </Switch>
         </div>
       </div>
-    </>
+    </AppDialog>
   );
 
-  // 修改密码面板内容
   const changePasswordPanel = (
-    <>
-      {/* 背景遮罩 */}
-      <div
-        className='fixed inset-0 bg-black/50 backdrop-blur-sm z-[1000]'
-        onClick={handleCloseChangePassword}
-        onTouchMove={(e) => {
-          // 只阻止滚动，允许其他触摸事件
-          e.preventDefault();
-        }}
-        onWheel={(e) => {
-          // 阻止滚轮滚动
-          e.preventDefault();
-        }}
-        style={{
-          touchAction: 'none',
-        }}
-      />
-
-      {/* 修改密码面板 */}
-      <div
-        className='a2-panel fixed left-1/2 top-1/2 z-[1001] w-full max-w-md -translate-x-1/2 -translate-y-1/2 overflow-hidden bg-surface/95'
-      >
-        {/* 内容容器 - 独立的滚动区域 */}
-        <div
-          className='h-full p-6'
-          data-panel-content
-          onTouchMove={(e) => {
-            // 阻止事件冒泡到遮罩层，但允许内部滚动
-            e.stopPropagation();
-          }}
-          style={{
-            touchAction: 'auto', // 允许所有触摸操作
-          }}
-        >
-          {/* 标题栏 */}
-          <div className='flex items-center justify-between mb-6'>
-            <h3 className='text-xl font-semibold tracking-[-0.045em] text-foreground'>
-              修改密码
-            </h3>
-            <button
-              onClick={handleCloseChangePassword}
-              className='a2-icon-button h-8 w-8 p-1.5'
-              aria-label='Close'
-            >
-              <X className='w-full h-full' />
-            </button>
-          </div>
-
-          {/* 表单 */}
-          <div className='space-y-4'>
-            {/* 新密码输入 */}
-            <div>
-              <label className='mb-2 block text-sm font-medium text-foreground'>
-                新密码
-              </label>
-              <input
-                type='password'
-                className='a2-field'
-                placeholder='请输入新密码'
-                value={newPassword}
-                onChange={(e) => setNewPassword(e.target.value)}
-                disabled={passwordLoading}
-              />
-            </div>
-
-            {/* 确认密码输入 */}
-            <div>
-              <label className='mb-2 block text-sm font-medium text-foreground'>
-                确认密码
-              </label>
-              <input
-                type='password'
-                className='a2-field'
-                placeholder='请再次输入新密码'
-                value={confirmPassword}
-                onChange={(e) => setConfirmPassword(e.target.value)}
-                disabled={passwordLoading}
-              />
-            </div>
-
-            {/* 错误信息 */}
-            {passwordError && (
-              <div className='border border-danger/30 bg-danger/10 p-3 text-sm text-danger'>
-                {passwordError}
-              </div>
-            )}
-          </div>
-
-          {/* 操作按钮 */}
-          <div className='mt-6 flex gap-3 border-t border-border/70 pt-4'>
-            <button
-              onClick={handleCloseChangePassword}
-              className='a2-button flex-1'
-              disabled={passwordLoading}
-            >
-              取消
-            </button>
-            <button
-              onClick={handleSubmitChangePassword}
-              className='a2-button a2-button-accent flex-1'
-              disabled={passwordLoading || !newPassword || !confirmPassword}
-            >
-              {passwordLoading ? '修改中...' : '确认修改'}
-            </button>
-          </div>
-
-          {/* 底部说明 */}
-          <div className='mt-4 border-t border-border/70 pt-4'>
-            <p className='text-center text-xs text-muted'>
-              修改密码后需要重新登录
-            </p>
-          </div>
+    <AppDialog
+      isOpen={isChangePasswordOpen}
+      onOpenChange={(open) => {
+        if (!open) handleCloseChangePassword();
+      }}
+      title='修改密码'
+      description='修改密码后需要重新登录'
+      size='sm'
+      footer={
+        <div className='flex w-full gap-3'>
+          <Button
+            className='flex-1'
+            variant='secondary'
+            onPress={handleCloseChangePassword}
+            isDisabled={passwordLoading}
+          >
+            取消
+          </Button>
+          <Button
+            className='flex-1'
+            onPress={handleSubmitChangePassword}
+            isDisabled={passwordLoading || !newPassword || !confirmPassword}
+            isPending={passwordLoading}
+          >
+            {passwordLoading ? '修改中...' : '确认修改'}
+          </Button>
         </div>
+      }
+    >
+      <div className='space-y-4'>
+        <TextField>
+          <Label>新密码</Label>
+          <Input
+            type='password'
+            placeholder='请输入新密码'
+            value={newPassword}
+            onChange={(e) => setNewPassword(e.target.value)}
+            disabled={passwordLoading}
+          />
+        </TextField>
+
+        <TextField>
+          <Label>确认密码</Label>
+          <Input
+            type='password'
+            placeholder='请再次输入新密码'
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            disabled={passwordLoading}
+          />
+        </TextField>
+
+        {passwordError ? (
+          <Alert status='danger'>
+            <Alert.Content>
+              <Alert.Description>{passwordError}</Alert.Description>
+            </Alert.Content>
+          </Alert>
+        ) : null}
       </div>
-    </>
+    </AppDialog>
   );
 
   return (
     <>
       <Dropdown isOpen={isOpen} onOpenChange={setIsOpen}>
         <AppIconButton
-          className={`a2-icon-button overflow-hidden ${isMobile ? 'h-8 w-8 p-0.5' : 'h-10 w-10 p-0.5'}`}
+          size={isMobile ? 'sm' : 'md'}
+          className='overflow-hidden'
           aria-label='User Menu'
         >
           <span className='relative flex h-full w-full items-center justify-center overflow-hidden'>
@@ -1440,156 +978,114 @@ export const UserMenu: React.FC = () => {
           </Dropdown.Menu>
         </Dropdown.Popover>
         {updateStatus === UpdateStatus.HAS_UPDATE && (
-          <div className='absolute right-[2px] top-[2px] h-2 w-2 bg-warning'></div>
+          <Badge color='warning' size='sm' className='absolute right-[2px] top-[2px]' />
         )}
       </Dropdown>
 
-      {/* 使用 Portal 将设置面板渲染到 document.body */}
-      {isSettingsOpen && mounted && createPortal(settingsPanel, document.body)}
+      {mounted && settingsPanel}
 
-      {/* 使用 Portal 将修改密码面板渲染到 document.body */}
-      {isChangePasswordOpen &&
-        mounted &&
-        createPortal(changePasswordPanel, document.body)}
+      {mounted && changePasswordPanel}
 
-      {/* 使用 Portal 将修改头像面板渲染到 document.body */}
-      {isChangeAvatarOpen &&
-        mounted &&
-        createPortal(
-          <>
-            {/* 背景遮罩 */}
-            <div
-              className='fixed inset-0 bg-black/50 backdrop-blur-sm z-[1000]'
-              onClick={handleCloseChangeAvatar}
-              onTouchMove={(e) => e.preventDefault()}
-              onWheel={(e) => e.preventDefault()}
-              style={{ touchAction: 'none' }}
-            />
-
-            {/* 修改头像面板 */}
-            <div className='a2-panel fixed left-1/2 top-1/2 z-[1001] w-full max-w-md -translate-x-1/2 -translate-y-1/2 overflow-hidden bg-surface/95'>
-              <div className='p-6'>
-                {/* 标题栏 */}
-                <div className='flex items-center justify-between mb-6'>
-                  <h3 className='text-xl font-semibold tracking-[-0.045em] text-foreground'>
-                    修改头像
-                  </h3>
-                  <button
-                    onClick={handleCloseChangeAvatar}
-                    className='a2-icon-button h-8 w-8 p-1.5'
-                    aria-label='Close'
-                  >
-                    <X className='w-full h-full' />
-                  </button>
-                </div>
-
-                {!showCropper ? (
-                  <>
-                    {/* 头像预览 */}
-                    <div className='flex flex-col items-center justify-center gap-6 my-6'>
-                      <div className='relative h-24 w-24 overflow-hidden border border-border/70'>
-                        {avatarUrl ? (
-                          <Image
-                            src={avatarUrl}
-                            alt="用户头像"
-                            fill
-                            sizes="96px"
-                            className='object-cover'
-                          />
-                        ) : (
-                          <div className='flex h-full w-full items-center justify-center bg-surface-secondary/60'>
-                            <User className='h-12 w-12 text-accent' />
-                          </div>
-                        )}
-                      </div>
-
-                      {/* 上传按钮 */}
-                      <div>
-                        <input
-                          ref={fileInputRef}
-                          type="file"
-                          accept="image/*"
-                          className="hidden"
-                          onChange={handleAvatarSelected}
-                          disabled={isUploadingAvatar}
-                        />
-                        <button
-                          onClick={handleOpenFileSelector}
-                          disabled={isUploadingAvatar}
-                          className='a2-button a2-button-accent flex items-center gap-2'
-                        >
-                          <Upload className='w-4 h-4' />
-                          选择图片
-                        </button>
-                      </div>
-                    </div>
-                  </>
+      {mounted && (
+        <AppDialog
+          isOpen={isChangeAvatarOpen}
+          onOpenChange={(open) => {
+            if (!open) handleCloseChangeAvatar();
+          }}
+          title='修改头像'
+          description='支持 JPG、PNG、GIF 等格式，文件大小不超过 2MB'
+          size='sm'
+        >
+          {!showCropper ? (
+            <div className='flex flex-col items-center justify-center gap-6 py-4'>
+              <div className='relative h-24 w-24 overflow-hidden'>
+                {avatarUrl ? (
+                  <Image
+                    src={avatarUrl}
+                    alt='用户头像'
+                    fill
+                    sizes='96px'
+                    className='object-cover'
+                  />
                 ) : (
-                  <>
-                    {/* 图片裁剪界面 */}
-                    <div className='flex flex-col items-center justify-center gap-4 my-6'>
-                      <div className='w-full max-w-md'>
-                        <ReactCrop
-                          crop={crop}
-                          onChange={(_: PixelCrop, percentCrop: PercentCrop) => setCrop(percentCrop)}
-                          onComplete={(crop: PixelCrop) => setCompletedCrop(crop)}
-                          aspect={1}
-                          circularCrop
-                        >
-                          <img
-                            ref={imageRef}
-                            src={selectedImage}
-                            alt="Crop me"
-                            className="max-w-full max-h-64 object-contain"
-                            onLoad={onImageLoad}
-                          />
-                        </ReactCrop>
-                      </div>
-
-                      <div className='flex gap-3'>
-                        <button
-                          onClick={() => {
-                            setShowCropper(false);
-                            setSelectedImage('');
-                            setCompletedCrop(undefined);
-                            setCrop({
-                              unit: '%',
-                              width: 80,
-                              height: 80,
-                              x: 10,
-                              y: 10,
-                            });
-                            // 重置文件输入
-                            if (fileInputRef.current) {
-                              fileInputRef.current.value = '';
-                            }
-                          }}
-                          className='a2-button'
-                        >
-                          重新选择
-                        </button>
-                        <button
-                          onClick={handleConfirmCrop}
-                          disabled={isUploadingAvatar || !completedCrop}
-                          className='a2-button a2-button-accent flex items-center gap-2'
-                        >
-                          <Check className='w-4 h-4' />
-                          {isUploadingAvatar ? '上传中...' : '确认上传'}
-                        </button>
-                      </div>
-                    </div>
-                  </>
+                  <div className='flex h-full w-full items-center justify-center bg-surface-secondary/60'>
+                    <User className='h-12 w-12 text-accent' />
+                  </div>
                 )}
+              </div>
 
-                {/* 底部提示 */}
-                <p className='mt-4 border-t border-border/70 pt-4 text-center text-xs text-muted'>
-                  支持 JPG、PNG、GIF 等格式，文件大小不超过 2MB
-                </p>
+              <input
+                ref={fileInputRef}
+                type='file'
+                accept='image/*'
+                className='hidden'
+                onChange={handleAvatarSelected}
+                disabled={isUploadingAvatar}
+              />
+              <Button
+                onPress={handleOpenFileSelector}
+                isDisabled={isUploadingAvatar}
+              >
+                <Upload className='h-4 w-4' />
+                选择图片
+              </Button>
+            </div>
+          ) : (
+            <div className='flex flex-col items-center justify-center gap-4 py-4'>
+              <div className='w-full max-w-md'>
+                <ReactCrop
+                  crop={crop}
+                  onChange={(_: PixelCrop, percentCrop: PercentCrop) =>
+                    setCrop(percentCrop)
+                  }
+                  onComplete={(crop: PixelCrop) => setCompletedCrop(crop)}
+                  aspect={1}
+                  circularCrop
+                >
+                  <img
+                    ref={imageRef}
+                    src={selectedImage}
+                    alt='Crop me'
+                    className='max-h-64 max-w-full object-contain'
+                    onLoad={onImageLoad}
+                  />
+                </ReactCrop>
+              </div>
+
+              <div className='flex gap-3'>
+                <Button
+                  variant='tertiary'
+                  onPress={() => {
+                    setShowCropper(false);
+                    setSelectedImage('');
+                    setCompletedCrop(undefined);
+                    setCrop({
+                      unit: '%',
+                      width: 80,
+                      height: 80,
+                      x: 10,
+                      y: 10,
+                    });
+                    if (fileInputRef.current) {
+                      fileInputRef.current.value = '';
+                    }
+                  }}
+                >
+                  重新选择
+                </Button>
+                <Button
+                  onPress={handleConfirmCrop}
+                  isDisabled={isUploadingAvatar || !completedCrop}
+                  isPending={isUploadingAvatar}
+                >
+                  <Check className='h-4 w-4' />
+                  {isUploadingAvatar ? '上传中...' : '确认上传'}
+                </Button>
               </div>
             </div>
-          </>,
-          document.body
-        )}
+          )}
+        </AppDialog>
+      )}
 
       {/* 版本面板 */}
       <VersionPanel
diff --git a/src/components/VersionPanel.tsx b/src/components/VersionPanel.tsx
index a368e7d..736a9eb 100644
--- a/src/components/VersionPanel.tsx
+++ b/src/components/VersionPanel.tsx
@@ -10,15 +10,16 @@ import {
   Download,
   Plus,
   RefreshCw,
-  X,
 } from 'lucide-react';
+import { Alert, Button, Card, Chip, Link as HeroLink } from '@heroui/react';
 import { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
 
 import { changelog, ChangelogEntry } from '@/lib/changelog';
 import { CURRENT_VERSION } from '@/lib/version';
 import { compareVersions, UpdateStatus } from '@/lib/version_check';
 
+import { AppDialog } from './ui/HeroPrimitives';
+
 interface VersionPanelProps {
   isOpen: boolean;
   onClose: () => void;
@@ -193,34 +194,27 @@ export const VersionPanel: React.FC<VersionPanelProps> = ({
     const isUpdate = isRemote && hasUpdate && entry.version === latestVersion;
 
     return (
-      <div
+      <Card
         key={entry.version}
-        className={`p-4 rounded-lg border ${isCurrentVersion
-          ? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
-          : isUpdate
-            ? 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800'
-            : 'bg-gray-50 dark:bg-gray-800/60 border-gray-200 dark:border-gray-700'
-          }`}
+        className='p-4'
       >
         {/* 版本标题 */}
         <div className='flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3'>
           <div className='flex flex-wrap items-center gap-2'>
-            <h4 className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
+            <h4 className='text-lg font-semibold text-foreground'>
               v{entry.version}
             </h4>
             {isCurrentVersion && (
-              <span className='px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full'>
-                当前版本
-              </span>
+              <Chip size='sm' variant='primary'>当前版本</Chip>
             )}
             {isUpdate && (
-              <span className='px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 rounded-full flex items-center gap-1'>
+              <Chip size='sm' variant='secondary'>
                 <Download className='w-3 h-3' />
                 可更新
-              </span>
+              </Chip>
             )}
           </div>
-          <div className='flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400'>
+          <div className='flex items-center gap-2 text-sm text-muted'>
             {entry.date}
           </div>
         </div>
@@ -229,7 +223,7 @@ export const VersionPanel: React.FC<VersionPanelProps> = ({
         <div className='space-y-3'>
           {entry.added.length > 0 && (
             <div>
-              <h5 className='text-sm font-medium text-green-700 dark:text-green-400 mb-2 flex items-center gap-1'>
+              <h5 className='mb-2 flex items-center gap-1 text-sm font-medium text-success'>
                 <Plus className='w-4 h-4' />
                 新增功能
               </h5>
@@ -237,9 +231,8 @@ export const VersionPanel: React.FC<VersionPanelProps> = ({
                 {entry.added.map((item, index) => (
                   <li
                     key={index}
-                    className='text-sm text-gray-700 dark:text-gray-300 flex items-start gap-2'
+                    className='text-sm text-muted'
                   >
-                    <span className='w-1.5 h-1.5 bg-green-500 rounded-full mt-2 flex-shrink-0'></span>
                     {item}
                   </li>
                 ))}
@@ -249,7 +242,7 @@ export const VersionPanel: React.FC<VersionPanelProps> = ({
 
           {entry.changed.length > 0 && (
             <div>
-              <h5 className='text-sm font-medium text-blue-700 dark:text-blue-400 mb-2 flex items-center gap-1'>
+              <h5 className='mb-2 flex items-center gap-1 text-sm font-medium text-accent'>
                 <RefreshCw className='w-4 h-4' />
                 功能改进
               </h5>
@@ -257,9 +250,8 @@ export const VersionPanel: React.FC<VersionPanelProps> = ({
                 {entry.changed.map((item, index) => (
                   <li
                     key={index}
-                    className='text-sm text-gray-700 dark:text-gray-300 flex items-start gap-2'
+                    className='text-sm text-muted'
                   >
-                    <span className='w-1.5 h-1.5 bg-blue-500 rounded-full mt-2 flex-shrink-0'></span>
                     {item}
                   </li>
                 ))}
@@ -269,7 +261,7 @@ export const VersionPanel: React.FC<VersionPanelProps> = ({
 
           {entry.fixed.length > 0 && (
             <div>
-              <h5 className='text-sm font-medium text-purple-700 dark:text-purple-400 mb-2 flex items-center gap-1'>
+              <h5 className='mb-2 flex items-center gap-1 text-sm font-medium text-danger'>
                 <Bug className='w-4 h-4' />
                 问题修复
               </h5>
@@ -277,9 +269,8 @@ export const VersionPanel: React.FC<VersionPanelProps> = ({
                 {entry.fixed.map((item, index) => (
                   <li
                     key={index}
-                    className='text-sm text-gray-700 dark:text-gray-300 flex items-start gap-2'
+                    className='text-sm text-muted'
                   >
-                    <span className='w-1.5 h-1.5 bg-purple-500 rounded-full mt-2 flex-shrink-0'></span>
                     {item}
                   </li>
                 ))}
@@ -287,289 +278,110 @@ export const VersionPanel: React.FC<VersionPanelProps> = ({
             </div>
           )}
         </div>
-      </div>
+      </Card>
     );
   };
 
-  // 版本面板内容
-  const versionPanelContent = (
-    <>
-      {/* 背景遮罩 */}
-      <div
-        className='fixed inset-0 bg-black/50 backdrop-blur-sm z-[1000]'
-        onClick={onClose}
-        onTouchMove={(e) => {
-          // 只阻止滚动，允许其他触摸事件
-          e.preventDefault();
-        }}
-        onWheel={(e) => {
-          // 阻止滚轮滚动
-          e.preventDefault();
-        }}
-        style={{
-          touchAction: 'none',
-        }}
-      />
+  if (!mounted) return null;
 
-      {/* 版本面板 */}
-      <div
-        className='fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-full max-w-xl max-h-[90vh] bg-white dark:bg-gray-900 rounded-xl shadow-xl z-[1001] overflow-hidden'
-        onTouchMove={(e) => {
-          // 允许版本面板内部滚动，阻止事件冒泡到外层
-          e.stopPropagation();
-        }}
-        style={{
-          touchAction: 'auto', // 允许面板内的正常触摸操作
-        }}
-      >
-        {/* 标题栏 */}
-        <div className='flex items-center justify-between p-3 sm:p-6 border-b border-gray-200 dark:border-gray-700'>
-          <div className='flex items-center gap-2 sm:gap-3'>
-            <h3 className='text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200'>
-              版本信息
-            </h3>
-            <div className='flex flex-wrap items-center gap-1 sm:gap-2'>
-              <span className='px-2 sm:px-3 py-1 text-xs sm:text-sm font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 rounded-full'>
-                v{CURRENT_VERSION}
-              </span>
-              {hasUpdate && (
-                <span className='px-2 sm:px-3 py-1 text-xs sm:text-sm font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 rounded-full flex items-center gap-1'>
-                  <Download className='w-3 h-3 sm:w-4 sm:h-4' />
-                  <span className='hidden sm:inline'>有新版本可用</span>
-                  <span className='sm:hidden'>可更新</span>
-                </span>
-              )}
-            </div>
-          </div>
-          <button
-            onClick={onClose}
-            className='w-6 h-6 sm:w-8 sm:h-8 p-1 rounded-full flex items-center justify-center text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors'
-            aria-label='关闭'
-          >
-            <X className='w-full h-full' />
-          </button>
-        </div>
+  const remoteUpdates = remoteChangelog
+    .filter((entry) => {
+      const localVersions = changelog.map((local) => local.version);
+      return !localVersions.includes(entry.version);
+    })
+    .sort((a, b) => {
+      const dateA = new Date(a.date);
+      const dateB = new Date(b.date);
+      return dateB.getTime() - dateA.getTime();
+    });
 
-        {/* 内容区域 */}
-        <div className='p-3 sm:p-6 overflow-y-auto max-h-[calc(95vh-140px)] sm:max-h-[calc(90vh-120px)]'>
-          <div className='space-y-3 sm:space-y-6'>
-            {/* 远程更新信息 */}
-            {hasUpdate && (
-              <div className='bg-gradient-to-r from-yellow-50 to-amber-50 dark:from-yellow-900/20 dark:to-amber-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 sm:p-4'>
-                <div className='flex flex-col gap-3'>
-                  <div className='flex items-center gap-2 sm:gap-3'>
-                    <div className='w-8 h-8 sm:w-10 sm:h-10 bg-yellow-100 dark:bg-yellow-800/40 rounded-full flex items-center justify-center flex-shrink-0'>
-                      <Download className='w-4 h-4 sm:w-5 sm:h-5 text-yellow-600 dark:text-yellow-400' />
-                    </div>
-                    <div className='min-w-0 flex-1'>
-                      <h4 className='text-sm sm:text-base font-semibold text-yellow-800 dark:text-yellow-200'>
-                        发现新版本
-                      </h4>
-                      <p className='text-xs sm:text-sm text-yellow-700 dark:text-yellow-300 break-all'>
-                        v{CURRENT_VERSION} → v{latestVersion}
-                      </p>
-                    </div>
-                  </div>
-                  <a
-                    href='https://github.com/djteang/OrangeTV'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    className='inline-flex items-center justify-center gap-2 px-3 py-2 bg-yellow-600 hover:bg-yellow-700 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm w-full'
-                  >
-                    <Download className='w-3 h-3 sm:w-4 sm:h-4' />
-                    前往仓库
-                  </a>
-                </div>
-              </div>
-            )}
+  return (
+    <AppDialog
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+      title='版本信息'
+      description={`当前版本 v${CURRENT_VERSION}`}
+      size='lg'
+    >
+      <div className='space-y-6'>
+        {hasUpdate ? (
+          <Alert status='warning'>
+            <Alert.Indicator>
+              <Download className='h-4 w-4' />
+            </Alert.Indicator>
+            <Alert.Content>
+              <Alert.Title>发现新版本</Alert.Title>
+              <Alert.Description>
+                v{CURRENT_VERSION} {'->'} v{latestVersion}
+              </Alert.Description>
+            </Alert.Content>
+          </Alert>
+        ) : (
+          <Alert status='success'>
+            <Alert.Indicator>
+              <CheckCircle className='h-4 w-4' />
+            </Alert.Indicator>
+            <Alert.Content>
+              <Alert.Title>当前为最新版本</Alert.Title>
+              <Alert.Description>已是最新版本 v{CURRENT_VERSION}</Alert.Description>
+            </Alert.Content>
+          </Alert>
+        )}
 
-            {/* 当前为最新版本信息 */}
-            {!hasUpdate && (
-              <div className='bg-gradient-to-r from-blue-50 to-emerald-50 dark:from-blue-900/20 dark:to-emerald-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-3 sm:p-4'>
-                <div className='flex flex-col gap-3'>
-                  <div className='flex items-center gap-2 sm:gap-3'>
-                    <div className='w-8 h-8 sm:w-10 sm:h-10 bg-blue-100 dark:bg-blue-800/40 rounded-full flex items-center justify-center flex-shrink-0'>
-                      <CheckCircle className='w-4 h-4 sm:w-5 sm:h-5 text-blue-600 dark:text-blue-400' />
-                    </div>
-                    <div className='min-w-0 flex-1'>
-                      <h4 className='text-sm sm:text-base font-semibold text-blue-800 dark:text-blue-200'>
-                        当前为最新版本
-                      </h4>
-                      <p className='text-xs sm:text-sm text-blue-700 dark:text-blue-300 break-all'>
-                        已是最新版本 v{CURRENT_VERSION}
-                      </p>
-                    </div>
-                  </div>
-                  <a
-                    href='https://github.com/djteang/OrangeTV'
-                    target='_blank'
-                    rel='noopener noreferrer'
-                    className='inline-flex items-center justify-center gap-2 px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-xs sm:text-sm rounded-lg transition-colors shadow-sm w-full'
-                  >
-                    <CheckCircle className='w-3 h-3 sm:w-4 sm:h-4' />
-                    前往仓库
-                  </a>
-                </div>
-              </div>
-            )}
+        <HeroLink href='https://github.com/djteang/OrangeTV' target='_blank'>
+          前往仓库
+        </HeroLink>
 
-            {/* 远程可更新内容 */}
-            {hasUpdate && (
-              <div className='space-y-4'>
-                <div className='flex flex-col sm:flex-row sm:items-center justify-between gap-3'>
-                  <h4 className='text-lg font-semibold text-gray-800 dark:text-gray-200 flex items-center gap-2'>
-                    <Download className='w-5 h-5 text-yellow-500' />
-                    远程更新内容
-                  </h4>
-                  <button
-                    onClick={() => setShowRemoteContent(!showRemoteContent)}
-                    className='inline-flex items-center justify-center gap-2 px-3 py-1.5 bg-yellow-100 hover:bg-yellow-200 text-yellow-800 dark:bg-yellow-800/30 dark:hover:bg-yellow-800/50 dark:text-yellow-200 rounded-lg transition-colors text-sm w-full sm:w-auto'
-                  >
-                    {showRemoteContent ? (
-                      <>
-                        <ChevronUp className='w-4 h-4' />
-                        收起
-                      </>
-                    ) : (
-                      <>
-                        <ChevronDown className='w-4 h-4' />
-                        查看更新内容
-                      </>
-                    )}
-                  </button>
-                </div>
-
-                {showRemoteContent && remoteChangelog.length > 0 && (
-                  <div className='space-y-4'>
-                    {remoteChangelog
-                      .filter((entry) => {
-                        // 找到第一个本地版本，过滤掉本地已有的版本
-                        const localVersions = changelog.map(
-                          (local) => local.version
-                        );
-                        return !localVersions.includes(entry.version);
-                      })
-                      .sort((a, b) => {
-                        // 按日期排序，确保最新的版本在前面显示
-                        const dateA = new Date(a.date);
-                        const dateB = new Date(b.date);
-                        return dateB.getTime() - dateA.getTime(); // 降序排列，最新的在前
-                      })
-                      .map((entry, index) => (
-                        <div
-                          key={index}
-                          className={`p-4 rounded-lg border ${entry.version === latestVersion
-                            ? 'bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800'
-                            : 'bg-gray-50 dark:bg-gray-800/60 border-gray-200 dark:border-gray-700'
-                            }`}
-                        >
-                          <div className='flex flex-col sm:flex-row sm:items-center justify-between gap-2 mb-3'>
-                            <div className='flex flex-wrap items-center gap-2'>
-                              <h4 className='text-lg font-semibold text-gray-900 dark:text-gray-100'>
-                                v{entry.version}
-                              </h4>
-                              {entry.version === latestVersion && (
-                                <span className='px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 rounded-full flex items-center gap-1'>
-                                  远程最新
-                                </span>
-                              )}
-                            </div>
-                            <div className='flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400'>
-                              {entry.date}
-                            </div>
-                          </div>
-
-                          {entry.added && entry.added.length > 0 && (
-                            <div className='mb-3'>
-                              <h5 className='text-sm font-medium text-green-600 dark:text-green-400 mb-2 flex items-center gap-1'>
-                                <Plus className='w-4 h-4' />
-                                新增功能
-                              </h5>
-                              <ul className='space-y-1'>
-                                {entry.added.map((item, itemIndex) => (
-                                  <li
-                                    key={itemIndex}
-                                    className='text-sm text-gray-700 dark:text-gray-300 flex items-start gap-2'
-                                  >
-                                    <span className='w-1.5 h-1.5 bg-green-400 rounded-full mt-2 flex-shrink-0'></span>
-                                    {item}
-                                  </li>
-                                ))}
-                              </ul>
-                            </div>
-                          )}
-
-                          {entry.changed && entry.changed.length > 0 && (
-                            <div className='mb-3'>
-                              <h5 className='text-sm font-medium text-blue-600 dark:text-blue-400 mb-2 flex items-center gap-1'>
-                                <RefreshCw className='w-4 h-4' />
-                                功能改进
-                              </h5>
-                              <ul className='space-y-1'>
-                                {entry.changed.map((item, itemIndex) => (
-                                  <li
-                                    key={itemIndex}
-                                    className='text-sm text-gray-700 dark:text-gray-300 flex items-start gap-2'
-                                  >
-                                    <span className='w-1.5 h-1.5 bg-blue-400 rounded-full mt-2 flex-shrink-0'></span>
-                                    {item}
-                                  </li>
-                                ))}
-                              </ul>
-                            </div>
-                          )}
-
-                          {entry.fixed && entry.fixed.length > 0 && (
-                            <div>
-                              <h5 className='text-sm font-medium text-purple-700 dark:text-purple-400 mb-2 flex items-center gap-1'>
-                                <Bug className='w-4 h-4' />
-                                问题修复
-                              </h5>
-                              <ul className='space-y-1'>
-                                {entry.fixed.map((item, itemIndex) => (
-                                  <li
-                                    key={itemIndex}
-                                    className='text-sm text-gray-700 dark:text-gray-300 flex items-start gap-2'
-                                  >
-                                    <span className='w-1.5 h-1.5 bg-purple-500 rounded-full mt-2 flex-shrink-0'></span>
-                                    {item}
-                                  </li>
-                                ))}
-                              </ul>
-                            </div>
-                          )}
-                        </div>
-                      ))}
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* 变更日志标题 */}
-            <div className='border-b border-gray-200 dark:border-gray-700 pb-4'>
-              <h4 className='text-lg font-semibold text-gray-800 dark:text-gray-200 pb-3 sm:pb-4'>
-                变更日志
+        {hasUpdate ? (
+          <div className='space-y-4'>
+            <div className='flex flex-col justify-between gap-3 sm:flex-row sm:items-center'>
+              <h4 className='flex items-center gap-2 text-lg font-semibold text-foreground'>
+                <Download className='h-5 w-5 text-warning' />
+                远程更新内容
               </h4>
+              <Button
+                variant='secondary'
+                size='sm'
+                onPress={() => setShowRemoteContent(!showRemoteContent)}
+              >
+                {showRemoteContent ? (
+                  <>
+                    <ChevronUp className='h-4 w-4' />
+                    收起
+                  </>
+                ) : (
+                  <>
+                    <ChevronDown className='h-4 w-4' />
+                    查看更新内容
+                  </>
+                )}
+              </Button>
+            </div>
 
+            {showRemoteContent && remoteUpdates.length > 0 ? (
               <div className='space-y-4'>
-                {/* 本地变更日志 */}
-                {changelog.map((entry) =>
-                  renderChangelogEntry(
-                    entry,
-                    entry.version === CURRENT_VERSION,
-                    false
-                  )
+                {remoteUpdates.map((entry) =>
+                  renderChangelogEntry(entry, false, true)
                 )}
               </div>
-            </div>
+            ) : null}
           </div>
+        ) : null}
+
+        <div className='space-y-4'>
+          <div className='flex items-center gap-2'>
+            <h4 className='text-lg font-semibold text-foreground'>变更日志</h4>
+            <Chip size='sm' variant='secondary'>
+              {changelog.length}
+            </Chip>
+          </div>
+          {changelog.map((entry) =>
+            renderChangelogEntry(entry, entry.version === CURRENT_VERSION, false)
+          )}
         </div>
       </div>
-    </>
+    </AppDialog>
   );
-
-  // 使用 Portal 渲染到 document.body
-  if (!mounted || !isOpen) return null;
-
-  return createPortal(versionPanelContent, document.body);
 };
diff --git a/src/components/VideoCard.tsx b/src/components/VideoCard.tsx
index 2d4462b..db10528 100644
--- a/src/components/VideoCard.tsx
+++ b/src/components/VideoCard.tsx
@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any,react-hooks/exhaustive-deps,@typescript-eslint/no-empty-function */
 
-import { ExternalLink, Heart, Link, PlayCircleIcon, Radio, Trash2 } from 'lucide-react';
+import { ExternalLink, Heart, Link as LinkIcon, PlayCircleIcon, Radio, Trash2 } from 'lucide-react';
+import { Badge, Button, Card, Chip, Link as HeroLink, ProgressBar, Tooltip } from '@heroui/react';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import React, {
@@ -500,7 +501,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
       actions.push({
         id: 'douban',
         label: isBangumi ? 'Bangumi 详情' : '豆瓣详情',
-        icon: <Link size={20} />,
+        icon: <LinkIcon size={20} />,
         onClick: () => {
           const url = isBangumi
             ? `https://bgm.tv/subject/${actualDoubanId.toString()}`
@@ -530,8 +531,9 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
 
   return (
     <>
-      <div
-        className='group relative z-0 w-full cursor-pointer rounded-2xl bg-transparent p-1 transition-all duration-300 ease-in-out hover:-translate-y-1 hover:z-[500]'
+      <Card
+        variant='transparent'
+        className='group relative z-0 w-full cursor-pointer overflow-visible rounded-none p-0'
         onClick={handleClick}
         {...longPressProps}
         style={{
@@ -567,8 +569,9 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
         }}
       >
         {/* 海报容器 */}
-        <div
-          className={`relative aspect-[2/3] overflow-hidden rounded-2xl border border-border/70 bg-surface shadow-sm transition-all duration-300 group-hover:border-accent/30 group-hover:shadow-xl ${origin === 'live' ? 'ring-1 ring-accent/20' : ''}`}
+        <Card
+          variant='default'
+          className='relative aspect-[2/3] overflow-hidden rounded-lg p-0'
           style={{
             WebkitUserSelect: 'none',
             userSelect: 'none',
@@ -615,7 +618,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
 
           {/* 悬浮遮罩 */}
           <div
-            className='absolute inset-0 bg-gradient-to-t from-slate-950/82 via-slate-950/20 to-transparent opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100'
+            className='absolute inset-0 bg-black/35 opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100'
             style={{
               WebkitUserSelect: 'none',
               userSelect: 'none',
@@ -645,7 +648,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
               <PlayCircleIcon
                 size={50}
                 strokeWidth={0.8}
-                className='fill-surface/80 text-accent drop-shadow-lg transition-all duration-300 ease-out hover:fill-accent hover:text-accent-foreground hover:scale-[1.06]'
+                className='fill-background text-accent'
                 style={{
                   WebkitUserSelect: 'none',
                   userSelect: 'none',
@@ -675,47 +678,44 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
               }}
             >
               {config.showCheckCircle && (
-                <Trash2
-                  onClick={handleDeleteRecord}
-                  size={20}
-                  className='text-white transition-all duration-300 ease-out hover:stroke-red-500 hover:scale-[1.1]'
-                  style={{
-                    WebkitUserSelect: 'none',
-                    userSelect: 'none',
-                    WebkitTouchCallout: 'none',
-                  } as React.CSSProperties}
-                  onContextMenu={(e) => {
-                    e.preventDefault();
-                    return false;
-                  }}
-                />
+                <Button
+                  isIconOnly
+                  size='sm'
+                  variant='danger'
+                  onPress={() =>
+                    handleDeleteRecord({
+                      preventDefault: () => undefined,
+                      stopPropagation: () => undefined,
+                    } as React.MouseEvent)
+                  }
+                >
+                  <Trash2 size={16} />
+                </Button>
               )}
               {config.showHeart && from !== 'search' && from !== 'shortdrama' && (
-                <Heart
-                  onClick={handleToggleFavorite}
-                  size={20}
-                  className={`transition-all duration-300 ease-out ${favorited
-                    ? 'fill-danger stroke-danger'
-                    : 'fill-transparent stroke-white hover:stroke-accent'
-                    } hover:scale-[1.1]`}
-                  style={{
-                    WebkitUserSelect: 'none',
-                    userSelect: 'none',
-                    WebkitTouchCallout: 'none',
-                  } as React.CSSProperties}
-                  onContextMenu={(e) => {
-                    e.preventDefault();
-                    return false;
-                  }}
-                />
+                <Button
+                  isIconOnly
+                  size='sm'
+                  variant={favorited ? 'danger' : 'secondary'}
+                  onPress={() =>
+                    handleToggleFavorite({
+                      preventDefault: () => undefined,
+                      stopPropagation: () => undefined,
+                    } as React.MouseEvent)
+                  }
+                >
+                  <Heart size={16} className={favorited ? 'fill-current' : ''} />
+                </Button>
               )}
             </div>
           )}
 
           {/* 年份徽章 */}
           {config.showYear && actualYear && actualYear !== 'unknown' && actualYear.trim() !== '' && (
-            <div
-              className="absolute left-2 top-2 rounded-lg border border-border/70 bg-overlay/85 px-2 py-1 text-[10px] font-medium tracking-normal text-foreground shadow-sm backdrop-blur transition-all duration-300 ease-out group-hover:opacity-90"
+            <Badge
+              size='sm'
+              variant='secondary'
+              className='absolute left-2 top-2'
               style={{
                 WebkitUserSelect: 'none',
                 userSelect: 'none',
@@ -726,14 +726,17 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                 return false;
               }}
             >
-              {actualYear}
-            </div>
+              <Badge.Label>{actualYear}</Badge.Label>
+            </Badge>
           )}
 
           {/* 徽章 */}
           {config.showRating && rate && (
-            <div
-              className='absolute right-2 top-2 flex min-w-[2rem] items-center justify-center rounded-lg border border-accent/30 bg-accent px-2 py-1 text-[10px] font-semibold text-accent-foreground shadow-sm transition-all duration-300 ease-out group-hover:scale-105'
+            <Chip
+              size='md'
+              color='accent'
+              variant='primary'
+              className='absolute right-2 top-2'
               style={{
                 WebkitUserSelect: 'none',
                 userSelect: 'none',
@@ -744,13 +747,15 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                 return false;
               }}
             >
-              {rate}
-            </div>
+              <Chip.Label>{rate}</Chip.Label>
+            </Chip>
           )}
 
           {actualEpisodes && actualEpisodes > 1 && (
-            <div
-              className='absolute right-2 top-2 rounded-lg border border-border/70 bg-overlay/85 px-2 py-1 text-[10px] font-semibold text-foreground shadow-sm backdrop-blur transition-all duration-300 ease-out group-hover:scale-105'
+            <Badge
+              size='sm'
+              variant='secondary'
+              className='absolute right-2 top-2'
               style={{
                 WebkitUserSelect: 'none',
                 userSelect: 'none',
@@ -761,15 +766,15 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                 return false;
               }}
             >
-              {currentEpisode
+              <Badge.Label>{currentEpisode
                 ? `${currentEpisode}/${actualEpisodes}`
-                : actualEpisodes}
-            </div>
+                : actualEpisodes}</Badge.Label>
+            </Badge>
           )}
 
           {/* 豆瓣链接 */}
           {config.showDoubanLink && actualDoubanId && actualDoubanId !== 0 && (
-            <a
+            <HeroLink
               href={
                 isBangumi
                   ? `https://bgm.tv/subject/${actualDoubanId.toString()}`
@@ -789,20 +794,8 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                 return false;
               }}
             >
-              <div
-                className='theme-transition flex h-7 w-7 items-center justify-center rounded-lg border border-border/70 bg-overlay/90 text-accent shadow-sm backdrop-blur hover:border-accent/40 hover:text-foreground'
-                style={{
-                  WebkitUserSelect: 'none',
-                  userSelect: 'none',
-                  WebkitTouchCallout: 'none',
-                } as React.CSSProperties}
-                onContextMenu={(e) => {
-                  e.preventDefault();
-                  return false;
-                }}
-              >
-                <Link
-                  size={16}
+                <LinkIcon
+                  size={18}
                   style={{
                     WebkitUserSelect: 'none',
                     userSelect: 'none',
@@ -810,8 +803,7 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                     pointerEvents: 'none',
                   } as React.CSSProperties}
                 />
-              </div>
-            </a>
+            </HeroLink>
           )}
 
           {/* 聚合播放源指示器 */}
@@ -840,8 +832,10 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                     WebkitTouchCallout: 'none',
                   } as React.CSSProperties}
                 >
-                  <div
-                    className='theme-transition flex h-6 w-6 cursor-pointer items-center justify-center rounded-lg border border-border/70 bg-overlay/90 text-[10px] font-semibold text-foreground shadow-sm backdrop-blur hover:border-accent/40 hover:text-accent sm:h-7 sm:w-7'
+                  <Badge
+                    size='sm'
+                    color='accent'
+                    variant='secondary'
                     style={{
                       WebkitUserSelect: 'none',
                       userSelect: 'none',
@@ -852,8 +846,8 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                       return false;
                     }}
                   >
-                    {sourceCount}
-                  </div>
+                    <Badge.Label>{sourceCount}</Badge.Label>
+                  </Badge>
 
                   {/* 播放源详情悬浮框 */}
                   {(() => {
@@ -931,12 +925,16 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
               </div>
             );
           })()}
-        </div>
+        </Card>
 
         {/* 进度条 */}
         {config.showProgress && progress !== undefined && (
-          <div
-            className='mt-2 h-1 w-full overflow-hidden rounded-full bg-surface-secondary'
+          <ProgressBar
+            aria-label='观看进度'
+            value={progress}
+            className='mt-2'
+            size='sm'
+            color='accent'
             style={{
               WebkitUserSelect: 'none',
               userSelect: 'none',
@@ -947,20 +945,10 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
               return false;
             }}
           >
-            <div
-              className='h-full rounded-full bg-accent transition-all duration-500 ease-out'
-              style={{
-                width: `${progress}%`,
-                WebkitUserSelect: 'none',
-                userSelect: 'none',
-                WebkitTouchCallout: 'none',
-              } as React.CSSProperties}
-              onContextMenu={(e) => {
-                e.preventDefault();
-                return false;
-              }}
-            />
-          </div>
+            <ProgressBar.Track>
+              <ProgressBar.Fill />
+            </ProgressBar.Track>
+          </ProgressBar>
         )}
 
         {/* 标题与来源 */}
@@ -976,16 +964,18 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
             return false;
           }}
         >
-          <div
-            className='relative'
+          <Tooltip>
+            <Tooltip.Trigger>
+            <div
+              className='relative'
             style={{
               WebkitUserSelect: 'none',
               userSelect: 'none',
               WebkitTouchCallout: 'none',
             } as React.CSSProperties}
-          >
+            >
             <span
-              className='peer block truncate text-sm font-semibold text-foreground transition-colors duration-300 ease-in-out group-hover:text-accent'
+              className='block truncate text-sm font-semibold'
               style={{
                 WebkitUserSelect: 'none',
                 userSelect: 'none',
@@ -998,33 +988,18 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
             >
               {actualTitle}
             </span>
-            {/* 自定义 tooltip */}
-            <div
-              className='invisible pointer-events-none absolute bottom-full left-1/2 mb-2 -translate-x-1/2 whitespace-nowrap rounded-xl border border-border/70 bg-overlay/95 px-3 py-1 text-xs text-foreground opacity-0 shadow-xl backdrop-blur transition-all duration-200 ease-out delay-100 peer-hover:visible peer-hover:opacity-100'
-              style={{
-                WebkitUserSelect: 'none',
-                userSelect: 'none',
-                WebkitTouchCallout: 'none',
-              } as React.CSSProperties}
-              onContextMenu={(e) => {
-                e.preventDefault();
-                return false;
-              }}
-            >
-              {actualTitle}
-              <div
-                className='absolute left-1/2 top-full h-2 w-px -translate-x-1/2 bg-border/70'
-                style={{
-                  WebkitUserSelect: 'none',
-                  userSelect: 'none',
-                  WebkitTouchCallout: 'none',
-                } as React.CSSProperties}
-              ></div>
             </div>
-          </div>
+            </Tooltip.Trigger>
+            <Tooltip.Content placement='top'>
+              {actualTitle}
+            </Tooltip.Content>
+          </Tooltip>
           {config.showSourceName && source_name && (
-            <span
-              className='mt-1 block text-xs font-medium tracking-normal text-muted'
+            <Chip
+              size='sm'
+              color='accent'
+              variant='soft'
+              className='mt-1'
               style={{
                 WebkitUserSelect: 'none',
                 userSelect: 'none',
@@ -1035,27 +1010,14 @@ const VideoCard = forwardRef<VideoCardHandle, VideoCardProps>(function VideoCard
                 return false;
               }}
             >
-              <span
-                className='inline-flex items-center gap-1 border-l-2 border-accent/70 pl-2 transition-all duration-300 ease-in-out group-hover:text-foreground'
-                style={{
-                  WebkitUserSelect: 'none',
-                  userSelect: 'none',
-                  WebkitTouchCallout: 'none',
-                } as React.CSSProperties}
-                onContextMenu={(e) => {
-                  e.preventDefault();
-                  return false;
-                }}
-              >
                 {origin === 'live' && (
                   <Radio size={12} className="inline-block mr-1 text-muted" />
                 )}
-                {source_name}
-              </span>
-            </span>
+                <Chip.Label>{source_name}</Chip.Label>
+            </Chip>
           )}
         </div>
-      </div>
+      </Card>
 
       {/* 操作菜单 - 支持右键和长按触发 */}
       <MobileActionSheet
diff --git a/src/components/WeekdaySelector.tsx b/src/components/WeekdaySelector.tsx
index 6fff468..63e3d8a 100644
--- a/src/components/WeekdaySelector.tsx
+++ b/src/components/WeekdaySelector.tsx
@@ -4,7 +4,7 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { AppFilterTabs } from './ui/HeroPrimitives';
+import { AppFilterSelect } from './ui/HeroPrimitives';
 
 interface WeekdaySelectorProps {
   onWeekdayChange: (weekday: string) => void;
@@ -43,15 +43,16 @@ const WeekdaySelector: React.FC<WeekdaySelectorProps> = ({
   }, []); // 只在组件挂载时执行一次
 
   return (
-    <AppFilterTabs
-      ariaLabel='星期筛选'
+    <AppFilterSelect
+      ariaLabel='星期选项'
       className={className}
-      items={weekdays.map((weekday) => ({
-        key: weekday.value,
+      label='星期'
+      options={weekdays.map((weekday) => ({
+        value: weekday.value,
         label: weekday.shortLabel,
       }))}
-      selectedKey={selectedWeekday}
-      onSelectionChange={(value) => {
+      value={selectedWeekday}
+      onChange={(value) => {
         setSelectedWeekday(value);
         onWeekdayChange(value);
       }}
diff --git a/src/components/__tests__/MultiLevelSelector.test.tsx b/src/components/__tests__/MultiLevelSelector.test.tsx
index 3935e45..236437c 100644
--- a/src/components/__tests__/MultiLevelSelector.test.tsx
+++ b/src/components/__tests__/MultiLevelSelector.test.tsx
@@ -3,12 +3,13 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import MultiLevelSelector from '../MultiLevelSelector';
 
 describe('MultiLevelSelector', () => {
-  it('applies selected filter values through accessible menu items', () => {
+  it('applies selected filter values through accessible listbox options', () => {
     const onChange = jest.fn();
 
     render(<MultiLevelSelector contentType='movie' onChange={onChange} />);
 
-    fireEvent.click(screen.getByRole('menuitem', { name: '喜剧' }));
+    expect(screen.getByRole('listbox', { name: '类型选项' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('option', { name: '喜剧' }));
 
     expect(onChange).toHaveBeenCalledWith(
       expect.objectContaining({
diff --git a/src/components/__tests__/SearchResultFilter.test.tsx b/src/components/__tests__/SearchResultFilter.test.tsx
index 3b6d90b..b815b85 100644
--- a/src/components/__tests__/SearchResultFilter.test.tsx
+++ b/src/components/__tests__/SearchResultFilter.test.tsx
@@ -24,7 +24,7 @@ const categories: SearchFilterCategory[] = [
 ];
 
 describe('SearchResultFilter', () => {
-  it('opens an options menu and applies the selected option', () => {
+  it('applies selected options through accessible listbox options', () => {
     const onChange = jest.fn();
 
     render(
@@ -35,8 +35,8 @@ describe('SearchResultFilter', () => {
       />
     );
 
-    expect(screen.getByRole('menu', { name: '来源筛选' })).toBeInTheDocument();
-    fireEvent.click(screen.getByRole('menuitem', { name: '稳定源' }));
+    expect(screen.getByRole('listbox', { name: '来源选项' })).toBeInTheDocument();
+    fireEvent.click(screen.getByRole('option', { name: '稳定源' }));
 
     expect(onChange).toHaveBeenCalledWith({
       source: 'stable',
@@ -46,10 +46,10 @@ describe('SearchResultFilter', () => {
     });
   });
 
-  it('cycles year ordering when the year button is clicked repeatedly', () => {
+  it('applies year ordering from the same select pattern', () => {
     const onChange = jest.fn();
 
-    const { rerender } = render(
+    render(
       <SearchResultFilter
         categories={categories}
         values={{ source: 'all', title: 'all', yearOrder: 'none' }}
@@ -57,8 +57,7 @@ describe('SearchResultFilter', () => {
       />
     );
 
-    const yearButton = screen.getByRole('button', { name: '按年份排序排序' });
-    fireEvent.click(yearButton);
+    fireEvent.click(screen.getByRole('option', { name: '年份降序' }));
 
     expect(onChange).toHaveBeenLastCalledWith({
       source: 'all',
@@ -66,22 +65,5 @@ describe('SearchResultFilter', () => {
       year: 'all',
       yearOrder: 'desc',
     });
-
-    rerender(
-      <SearchResultFilter
-        categories={categories}
-        values={{ source: 'all', title: 'all', yearOrder: 'desc' }}
-        onChange={onChange}
-      />
-    );
-
-    fireEvent.click(screen.getByRole('button', { name: '按年份降序排序' }));
-
-    expect(onChange).toHaveBeenLastCalledWith({
-      source: 'all',
-      title: 'all',
-      year: 'all',
-      yearOrder: 'asc',
-    });
   });
 });
diff --git a/src/components/__tests__/WeekdaySelector.test.tsx b/src/components/__tests__/WeekdaySelector.test.tsx
index 8f3a2d6..f018ae1 100644
--- a/src/components/__tests__/WeekdaySelector.test.tsx
+++ b/src/components/__tests__/WeekdaySelector.test.tsx
@@ -3,17 +3,17 @@ import { render, screen } from '@testing-library/react';
 import WeekdaySelector from '../WeekdaySelector';
 
 describe('WeekdaySelector', () => {
-  it('renders as a tablist and marks the current weekday as selected', () => {
+  it('renders as a select listbox and marks the current weekday as selected', () => {
     const onWeekdayChange = jest.fn();
 
     render(<WeekdaySelector onWeekdayChange={onWeekdayChange} />);
 
-    const tablist = screen.getByRole('tablist', { name: '星期筛选' });
-    expect(tablist).toBeInTheDocument();
+    const listbox = screen.getByRole('listbox', { name: '星期选项' });
+    expect(listbox).toBeInTheDocument();
 
     const today = new Date().getDay();
     const weekdayMap = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
-    expect(screen.getByRole('tab', { name: weekdayMap[today] })).toHaveAttribute(
+    expect(screen.getByRole('option', { name: weekdayMap[today] })).toHaveAttribute(
       'aria-selected',
       'true'
     );
diff --git a/src/components/ui/HeroPrimitives.tsx b/src/components/ui/HeroPrimitives.tsx
index 2f9b815..4305900 100644
--- a/src/components/ui/HeroPrimitives.tsx
+++ b/src/components/ui/HeroPrimitives.tsx
@@ -4,8 +4,11 @@ import {
   Button,
   Card,
   Drawer,
+  Label,
+  ListBox,
   Modal,
   ScrollShadow,
+  Select,
   Spinner,
   Tabs,
   useOverlayState,
@@ -42,6 +45,72 @@ export function AppScrollShadow(props: ScrollShadowProps) {
   return <ScrollShadow hideScrollBar {...props} />;
 }
 
+export interface AppFilterSelectOption {
+  label: string;
+  value: string;
+  isDisabled?: boolean;
+}
+
+interface AppFilterSelectProps {
+  label: string;
+  value?: string;
+  options: AppFilterSelectOption[];
+  onChange: (value: string) => void;
+  ariaLabel?: string;
+  placeholder?: string;
+  className?: string;
+  isDisabled?: boolean;
+}
+
+export function AppFilterSelect({
+  label,
+  value,
+  options,
+  onChange,
+  ariaLabel,
+  placeholder,
+  className,
+  isDisabled,
+}: AppFilterSelectProps) {
+  return (
+    <Select
+      className={className}
+      fullWidth
+      isDisabled={isDisabled}
+      placeholder={placeholder ?? `选择${label}`}
+      value={value ?? null}
+      variant='secondary'
+      onChange={(nextValue) => {
+        if (Array.isArray(nextValue) || nextValue == null) return;
+        onChange(String(nextValue));
+      }}
+    >
+      <Label>{label}</Label>
+      <Select.Trigger>
+        <Select.Value />
+        <Select.Indicator />
+      </Select.Trigger>
+      <Select.Popover>
+        <ScrollShadow className='max-h-[min(52vh,22rem)]' hideScrollBar>
+          <ListBox aria-label={ariaLabel ?? `${label}选项`} selectionMode='single'>
+            {options.map((option) => (
+              <ListBox.Item
+                key={option.value}
+                id={option.value}
+                isDisabled={option.isDisabled}
+                textValue={option.label}
+              >
+                <Label>{option.label}</Label>
+                <ListBox.ItemIndicator />
+              </ListBox.Item>
+            ))}
+          </ListBox>
+        </ScrollShadow>
+      </Select.Popover>
+    </Select>
+  );
+}
+
 export function AppLoading({
   label = '加载中...',
   ...props
@@ -214,18 +283,15 @@ export function AppTabs({
 }
 
 export function AppFilterTabs({
-  className,
   ...props
 }: AppTabsProps) {
   return (
     <ScrollShadow
       orientation='horizontal'
-      className='app-filter-scroll'
+      hideScrollBar
+      className='w-full min-w-0'
     >
-      <AppTabs
-        {...props}
-        className={`app-filter-tabs ${className ?? ''}`.trim()}
-      />
+      <AppTabs {...props} />
     </ScrollShadow>
   );
 }