perf: ⚡ 优化细节

Author: bestruirui

web/public/locale/en.json

@@ -52,6 +52,35 @@
         "log": "Log",
         "setting": "Setting"
     },
+    "toolbar": {
+        "popover": {
+            "ariaLabel": "View options",
+            "layout": "Layout",
+            "sort": "Sort",
+            "grid": "Grid",
+            "list": "List",
+            "asc": "Asc",
+            "desc": "Desc",
+            "filter": {
+                "title": "Filter",
+                "channel": {
+                    "all": "All channels",
+                    "enabled": "Enabled only",
+                    "disabled": "Disabled only"
+                },
+                "group": {
+                    "all": "All groups",
+                    "withMembers": "With members",
+                    "empty": "Empty groups"
+                },
+                "model": {
+                    "all": "All models",
+                    "priced": "Priced only",
+                    "free": "Free only"
+                }
+            }
+        }
+    },
     "common": {
         "copy": {
             "success": "Copied",
@@ -503,4 +532,4 @@
             "remark": "Remark"
         }
     }
-}
+}

web/public/locale/zh_hans.json

@@ -52,6 +52,35 @@
         "log": "日志",
         "setting": "设置"
     },
+    "toolbar": {
+        "popover": {
+            "ariaLabel": "视图选项",
+            "layout": "布局",
+            "sort": "排序",
+            "grid": "网格",
+            "list": "列表",
+            "asc": "升序",
+            "desc": "降序",
+            "filter": {
+                "title": "筛选",
+                "channel": {
+                    "all": "全部渠道",
+                    "enabled": "仅启用",
+                    "disabled": "仅禁用"
+                },
+                "group": {
+                    "all": "全部分组",
+                    "withMembers": "有成员",
+                    "empty": "空分组"
+                },
+                "model": {
+                    "all": "全部模型",
+                    "priced": "仅收费",
+                    "free": "仅免费"
+                }
+            }
+        }
+    },
     "common": {
         "copy": {
             "success": "复制成功",
@@ -503,4 +532,4 @@
             "remark": "备注"
         }
     }
-}
+}

web/public/locale/zh_hant.json

@@ -52,6 +52,35 @@
         "log": "日誌",
         "setting": "設定"
     },
+    "toolbar": {
+        "popover": {
+            "ariaLabel": "檢視選項",
+            "layout": "佈局",
+            "sort": "排序",
+            "grid": "網格",
+            "list": "清單",
+            "asc": "升序",
+            "desc": "降序",
+            "filter": {
+                "title": "篩選",
+                "channel": {
+                    "all": "全部供應源",
+                    "enabled": "僅啟用",
+                    "disabled": "僅停用"
+                },
+                "group": {
+                    "all": "全部分組",
+                    "withMembers": "有成員",
+                    "empty": "空分組"
+                },
+                "model": {
+                    "all": "全部模型",
+                    "priced": "僅收費",
+                    "free": "僅免費"
+                }
+            }
+        }
+    },
     "common": {
         "copy": {
             "success": "複製成功",
@@ -503,4 +532,4 @@
             "remark": "備註"
         }
     }
-}
+}

web/src/components/app.tsx

@@ -210,10 +210,10 @@ export function AppContainer() {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             transition={{ duration: 0.3 }}
-            className="mx-auto h-dvh max-w-6xl overflow-hidden px-3 md:grid md:grid-cols-[auto_1fr] md:gap-6 md:px-6"
+            className="mx-auto flex h-dvh max-w-6xl flex-col overflow-hidden px-3 md:grid md:grid-cols-[auto_1fr] md:gap-6 md:px-6"
         >
             <NavBar />
-            <main className="flex min-h-0 w-full min-w-0 flex-col">
+            <main className="flex min-h-0 w-full min-w-0 flex-1 flex-col">
                 <header className="my-6 flex flex-none items-center gap-x-2 px-2">
                     <Logo size={48} />
                     <div className="flex-1 overflow-hidden">

web/src/components/modules/channel/Card.tsx

@@ -34,7 +34,7 @@ export function Card({ channel, stats }: { channel: Channel; stats: StatsMetrics
     return (
         <MorphingDialog>
             <MorphingDialogTrigger className="w-full">
-                <article className="relative flex h-54 flex-col justify-between gap-5 rounded-3xl border border-border bg-card text-card-foreground p-4 transition-all duration-300 hover:scale-[1.02]">
+                <article className="relative flex h-54 flex-col justify-between gap-5 rounded-3xl border border-border bg-card text-card-foreground p-4 transition-all duration-300">
                     <header className="relative flex items-center justify-between gap-2">
                         <Tooltip side="top" sideOffset={10} align="center">
                             <TooltipTrigger asChild>

web/src/components/modules/home/index.tsx

@@ -8,7 +8,7 @@ import { PageWrapper } from '@/components/common/PageWrapper';
 
 export function Home() {
     return (
-        <PageWrapper className="h-full min-h-0 overflow-y-auto overscroll-contain space-y-6">
+        <PageWrapper className="h-full min-h-0 overflow-y-auto overscroll-contain space-y-6 pb-24 md:pb-4 rounded-t-3xl">
             <Total />
             <Activity />
             <StatsChart />

web/src/components/modules/log/Item.tsx

@@ -201,7 +201,6 @@ export function LogCard({ log }: { log: RelayLog }) {
                 <MorphingDialogTrigger
                     className={cn(
                         "rounded-3xl border bg-card w-full text-left",
-                        "hover:shadow-md transition-shadow duration-200",
                         hasError ? "border-destructive/40" : "border-border",
                     )}
                 >

web/src/components/modules/setting/index.tsx

@@ -14,37 +14,19 @@ import { SettingCircuitBreaker } from './CircuitBreaker';
 
 export function Setting() {
     return (
-        <PageWrapper className="h-full min-h-0 overflow-y-auto overscroll-contain columns-1 md:columns-2 gap-4 [&>div]:mb-4 [&>div]:break-inside-avoid">
-            <div>
+        <div className="h-full min-h-0 overflow-y-auto overscroll-contain rounded-t-3xl">
+            <PageWrapper className="columns-1 gap-4 pb-24 md:columns-2 md:pb-4 *:mb-4 *:break-inside-avoid">
                 <SettingInfo key="setting-info" />
-            </div>
-            <div>
                 <SettingAppearance key="setting-appearance" />
-            </div>
-            <div>
                 <SettingAccount key="setting-account" />
-            </div>
-            <div>
                 <SettingSystem key="setting-system" />
-            </div>
-            <div>
                 <SettingLog key="setting-log" />
-            </div>
-            <div>
                 <SettingAPIKey key="setting-apikey" />
-            </div>
-            <div>
                 <SettingLLMPrice key="setting-llmprice" />
-            </div>
-            <div>
                 <SettingLLMSync key="setting-llmsync" />
-            </div>
-            <div>
                 <SettingCircuitBreaker key="setting-circuit-breaker" />
-            </div>
-            <div>
                 <SettingBackup key="setting-backup" />
-            </div>
-        </PageWrapper>
+            </PageWrapper>
+        </div>
     );
 }

web/src/components/modules/toolbar/index.tsx

@@ -16,6 +16,7 @@ import { useNavStore, type NavItem } from '@/components/modules/navbar';
 import { CreateDialogContent as ChannelCreateContent } from '@/components/modules/channel/Create';
 import { CreateDialogContent as GroupCreateContent } from '@/components/modules/group/Create';
 import { CreateDialogContent as ModelCreateContent } from '@/components/modules/model/Create';
+import { useTranslations } from 'next-intl';
 import { useSearchStore } from './search-store';
 import {
     useToolbarViewOptionsStore,
@@ -26,21 +27,9 @@ import {
     type ModelFilter,
 } from './view-options-store';
 
-const CHANNEL_FILTER_OPTIONS: Array<{ value: ChannelFilter; label: string }> = [
-    { value: 'all', label: 'All channels' },
-    { value: 'enabled', label: 'Enabled only' },
-    { value: 'disabled', label: 'Disabled only' },
-];
-const GROUP_FILTER_OPTIONS: Array<{ value: GroupFilter; label: string }> = [
-    { value: 'all', label: 'All groups' },
-    { value: 'with-members', label: 'With members' },
-    { value: 'empty', label: 'Empty groups' },
-];
-const MODEL_FILTER_OPTIONS: Array<{ value: ModelFilter; label: string }> = [
-    { value: 'all', label: 'All models' },
-    { value: 'priced', label: 'Priced only' },
-    { value: 'free', label: 'Free only' },
-];
+const CHANNEL_FILTER_OPTIONS: ChannelFilter[] = ['all', 'enabled', 'disabled'];
+const GROUP_FILTER_OPTIONS: GroupFilter[] = ['all', 'with-members', 'empty'];
+const MODEL_FILTER_OPTIONS: ModelFilter[] = ['all', 'priced', 'free'];
 
 function isToolbarPage(item: NavItem): item is ToolbarPage {
     return (TOOLBAR_PAGES as readonly NavItem[]).includes(item);
@@ -58,6 +47,7 @@ function CreateDialogContent({ activeItem }: { activeItem: ToolbarPage }) {
 }
 
 export function Toolbar() {
+    const t = useTranslations('toolbar');
     const { activeItem } = useNavStore();
     const toolbarItem = isToolbarPage(activeItem) ? activeItem : null;
     const searchTerm = useSearchStore((s) => (toolbarItem ? s.searchTerms[toolbarItem] || '' : ''));
@@ -77,11 +67,36 @@ export function Toolbar() {
 
     if (!toolbarItem) return null;
 
+    const channelFilterLabelKeys: Record<ChannelFilter, string> = {
+        all: 'popover.filter.channel.all',
+        enabled: 'popover.filter.channel.enabled',
+        disabled: 'popover.filter.channel.disabled',
+    };
+    const groupFilterLabelKeys: Record<GroupFilter, string> = {
+        all: 'popover.filter.group.all',
+        'with-members': 'popover.filter.group.withMembers',
+        empty: 'popover.filter.group.empty',
+    };
+    const modelFilterLabelKeys: Record<ModelFilter, string> = {
+        all: 'popover.filter.model.all',
+        priced: 'popover.filter.model.priced',
+        free: 'popover.filter.model.free',
+    };
+
     const filterOptions = toolbarItem === 'channel'
-        ? CHANNEL_FILTER_OPTIONS
+        ? CHANNEL_FILTER_OPTIONS.map((value) => ({
+            value,
+            label: t(channelFilterLabelKeys[value]),
+        }))
         : toolbarItem === 'group'
-            ? GROUP_FILTER_OPTIONS
-            : MODEL_FILTER_OPTIONS;
+            ? GROUP_FILTER_OPTIONS.map((value) => ({
+                value,
+                label: t(groupFilterLabelKeys[value]),
+            }))
+            : MODEL_FILTER_OPTIONS.map((value) => ({
+                value,
+                label: t(modelFilterLabelKeys[value]),
+            }));
 
     const activeFilter = toolbarItem === 'channel'
         ? channelFilter
@@ -154,7 +169,7 @@ export function Toolbar() {
                     <PopoverTrigger asChild>
                         <button
                             type="button"
-                            aria-label="View options"
+                            aria-label={t('popover.ariaLabel')}
                             className={buttonVariants({
                                 variant: 'ghost',
                                 size: 'icon',
@@ -172,7 +187,7 @@ export function Toolbar() {
                     >
                         <div className="grid gap-3">
                             <div className="grid gap-2">
-                                <p className="text-xs font-medium text-muted-foreground">Layout</p>
+                                <p className="text-xs font-medium text-muted-foreground">{t('popover.layout')}</p>
                                 <div className="grid grid-cols-2 gap-2">
                                     <button
                                         type="button"
@@ -185,7 +200,7 @@ export function Toolbar() {
                                         )}
                                     >
                                         <LayoutGrid className="size-3.5" />
-                                        Grid
+                                        {t('popover.grid')}
                                     </button>
                                     <button
                                         type="button"
@@ -198,13 +213,13 @@ export function Toolbar() {
                                         )}
                                     >
                                         <List className="size-3.5" />
-                                        List
+                                        {t('popover.list')}
                                     </button>
                                 </div>
                             </div>
 
                             <div className="grid gap-2">
-                                <p className="text-xs font-medium text-muted-foreground">Sort</p>
+                                <p className="text-xs font-medium text-muted-foreground">{t('popover.sort')}</p>
                                 <div className="grid grid-cols-2 gap-2">
                                     <button
                                         type="button"
@@ -217,7 +232,7 @@ export function Toolbar() {
                                         )}
                                     >
                                         <ArrowDownUp className="size-3.5" />
-                                        Asc
+                                        {t('popover.asc')}
                                     </button>
                                     <button
                                         type="button"
@@ -230,13 +245,13 @@ export function Toolbar() {
                                         )}
                                     >
                                         <ArrowDownUp className="size-3.5 rotate-180" />
-                                        Desc
+                                        {t('popover.desc')}
                                     </button>
                                 </div>
                             </div>
 
                             <div className="grid gap-2">
-                                <p className="text-xs font-medium text-muted-foreground">Filter</p>
+                                <p className="text-xs font-medium text-muted-foreground">{t('popover.filter.title')}</p>
                                 <div className="grid gap-2">
                                     {filterOptions.map((option) => (
                                         <button