feat: 优化 UI 样式

web/src/components/AtxPopover.vue

@@ -30,6 +30,7 @@ const emit = defineEmits<{
 const { t } = useI18n()
 
 const activeTab = ref('atx')
+const tabTriggerClass = 'h-9 rounded-md border-0 bg-transparent text-center text-xs text-muted-foreground shadow-none hover:text-foreground data-[state=active]:border-0 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm'
 
 const powerState = ref<'on' | 'off' | 'unknown'>('unknown')
 const hddState = ref<'active' | 'inactive' | 'unknown'>('unknown')
@@ -198,12 +199,18 @@ watch(
 <template>
   <div class="p-2.5 space-y-2.5">
     <Tabs v-model="activeTab">
-      <TabsList class="h-8 w-full grid grid-cols-2">
-        <TabsTrigger value="atx" class="h-7 text-xs">
+      <TabsList class="grid h-auto w-full grid-cols-2 gap-1 rounded-md border border-border bg-muted p-1">
+        <TabsTrigger
+          value="atx"
+          :class="tabTriggerClass"
+        >
           <Power class="h-3 w-3 mr-1" />
           {{ t('atx.title') }}
         </TabsTrigger>
-        <TabsTrigger value="wol" class="h-7 text-xs">
+        <TabsTrigger
+          value="wol"
+          :class="tabTriggerClass"
+        >
           <Wifi class="h-3 w-3 mr-1" />
           WOL
         </TabsTrigger>
@@ -211,8 +218,6 @@ watch(
 
       <!-- ATX Tab -->
       <TabsContent value="atx" class="mt-2.5 space-y-2.5">
-        <p class="text-xs text-muted-foreground">{{ t('atx.description') }}</p>
-
         <!-- Status -->
         <div class="grid grid-cols-2 gap-2">
           <div class="flex min-w-0 items-center gap-2 rounded-md border bg-muted/40 px-2 py-1.5">
@@ -281,10 +286,6 @@ watch(
 
       <!-- WOL Tab -->
       <TabsContent value="wol" class="mt-2.5 space-y-2.5">
-        <p class="text-xs text-muted-foreground">
-          {{ t('atx.wolDescription') }}
-        </p>
-
         <div class="space-y-2">
           <Label for="mac-address" class="text-xs">{{ t('atx.macAddress') }}</Label>
           <div class="flex gap-2">

web/src/i18n/en-US.ts

@@ -176,7 +176,6 @@ export default {
   },
   atx: {
     title: 'Power Control',
-    description: 'Control remote host power state',
     powerState: 'Power State',
     hddState: 'HDD Activity',
     stateOn: 'On',
@@ -188,7 +187,6 @@ export default {
     longPress: 'Power (Long/Force Off)',
     reset: 'Reset',
     wol: 'Wake-on-LAN',
-    wolDescription: 'Send Wake-on-LAN magic packet to power on a remote machine.',
     macAddress: 'MAC Address',
     invalidMac: 'Invalid MAC address format',
     recentMac: 'Recent',
@@ -640,7 +638,6 @@ export default {
     ch9329StringLengthWarning: 'CH9329 strings are limited to 23 bytes',
     otgHidProfile: 'OTG Functions',
     otgFunctionKeyboard: 'Standard Keyboard',
-    otgFunctionKeyboardDesc: 'Standard HID keyboard device',
     otgKeyboardLeds: 'Keyboard LED Status',
     otgFunctionMouseRelative: 'Relative Positioning Mouse',
     otgFunctionMouseAbsolute: 'Absolute Positioning Mouse',

web/src/i18n/zh-CN.ts

@@ -176,7 +176,6 @@ export default {
   },
   atx: {
     title: '电源控制',
-    description: '控制远程主机的电源状态',
     powerState: '电源状态',
     hddState: '硬盘活动',
     stateOn: '已开机',
@@ -188,7 +187,6 @@ export default {
     longPress: '长按电源 (强制关机)',
     reset: '重启',
     wol: '网络唤醒',
-    wolDescription: '发送 Wake-on-LAN 魔术包以远程开机。',
     macAddress: 'MAC 地址',
     invalidMac: 'MAC 地址格式无效',
     recentMac: '最近使用',
@@ -639,7 +637,6 @@ export default {
     ch9329StringLengthWarning: 'CH9329 字符串最长为 23 字节',
     otgHidProfile: 'OTG 功能',
     otgFunctionKeyboard: '标准键盘',
-    otgFunctionKeyboardDesc: '标准 HID 键盘设备',
     otgKeyboardLeds: '键盘状态灯',
     otgFunctionMouseRelative: '相对定位鼠标',
     otgFunctionMouseAbsolute: '绝对定位鼠标',

web/src/views/SettingsView.vue

@@ -2712,7 +2712,7 @@ watch(isWindows, () => {
                 <SidebarMenuButton
                   :is-active="activeSection === item.id"
                   :tooltip="item.label"
-                  class="h-10 px-3 text-foreground"
+                  class="h-10 px-3 text-foreground data-[active=true]:bg-primary data-[active=true]:text-primary-foreground data-[active=true]:shadow-sm data-[active=true]:hover:bg-primary data-[active=true]:hover:text-primary-foreground"
                   @click="selectSection(item.id)"
                 >
                   <component :is="item.icon" />
@@ -3269,7 +3269,6 @@ watch(isWindows, () => {
                         <div class="flex items-center justify-between gap-4">
                           <div>
                             <Label>{{ t('settings.otgFunctionKeyboard') }}</Label>
-                            <p class="text-xs text-muted-foreground">{{ t('settings.otgFunctionKeyboardDesc') }}</p>
                           </div>
                           <Switch v-model="config.hid_otg_functions.keyboard" />
                         </div>