fix(servers): 提高行操作与批量栏文字可读性

tonal/flat 实底按钮、加大字号字重，恢复一键登录全文。

Co-authored-by: Cursor <cursoragent@cursor.com>

docs/changelog/2026-06-21-servers-row-actions-batch.md

@@ -35,3 +35,8 @@
 
 - 行操作：`v-btn-group` outlined + 图标；宝塔入口显示「登录」+ tooltip
 - 批量栏：浅底描边卡片，按运维/Agent/其他分组，tonal 按钮带图标
+
+## 2026-06-21 可读性修正
+
+- 行按钮改 `small` + `tonal` + 字重 600，恢复「一键登录」全文
+- 批量栏改 `flat` 实色按钮、分组标题加深，底卡用 surface 实底

frontend/src/components/servers/ServerBatchActionBar.vue

@@ -2,13 +2,13 @@
   <v-card
     v-if="count > 0"
     class="server-batch-bar mx-4 mb-2"
-    variant="outlined"
+    variant="flat"
     rounded="lg"
     border
   >
     <v-card-text class="server-batch-bar__inner py-3">
       <div class="d-flex align-center flex-wrap ga-3">
-        <v-chip color="primary" variant="flat" size="small" label prepend-icon="mdi-checkbox-marked-circle-outline">
+        <v-chip color="primary" variant="flat" size="default" label prepend-icon="mdi-checkbox-marked-circle-outline">
           已选 {{ count }} 台
         </v-chip>
 
@@ -16,16 +16,18 @@
 
         <div class="server-batch-bar__section">
           <span class="server-batch-bar__label">运维</span>
-          <div class="d-flex flex-wrap ga-1">
+          <div class="d-flex flex-wrap ga-2">
-            <v-btn size="small" variant="tonal" color="primary" prepend-icon="mdi-heart-pulse" @click="$emit('health-check')">
+            <v-btn size="default" variant="flat" color="primary" class="server-batch-bar__btn" prepend-icon="mdi-heart-pulse" @click="$emit('health-check')">
               健康检查
             </v-btn>
-            <v-btn size="small" variant="tonal" prepend-icon="mdi-folder-search-outline" @click="$emit('detect-path')">
+            <v-btn size="default" variant="flat" color="primary" class="server-batch-bar__btn" prepend-icon="mdi-folder-search-outline" @click="$emit('detect-path')">
               检测路径
             </v-btn>
             <v-btn
-              size="small"
+              size="default"
-              variant="tonal"
+              variant="flat"
+              color="primary"
+              class="server-batch-bar__btn"
               prepend-icon="mdi-stethoscope"
               :loading="agentDiagnoseLoading"
               @click="$emit('agent-diagnose')"
@@ -39,14 +41,14 @@
 
         <div class="server-batch-bar__section">
           <span class="server-batch-bar__label">Agent</span>
-          <div class="d-flex flex-wrap ga-1">
+          <div class="d-flex flex-wrap ga-2">
-            <v-btn size="small" variant="tonal" color="info" prepend-icon="mdi-download" @click="$emit('install-agent')">
+            <v-btn size="default" variant="flat" color="info" class="server-batch-bar__btn" prepend-icon="mdi-download" @click="$emit('install-agent')">
               安装
             </v-btn>
-            <v-btn size="small" variant="tonal" color="warning" prepend-icon="mdi-arrow-up-bold" @click="$emit('upgrade-agent')">
+            <v-btn size="default" variant="flat" color="warning" class="server-batch-bar__btn" prepend-icon="mdi-arrow-up-bold" @click="$emit('upgrade-agent')">
               升级
             </v-btn>
-            <v-btn size="small" variant="tonal" color="error" prepend-icon="mdi-package-down" @click="$emit('uninstall-agent')">
+            <v-btn size="default" variant="flat" color="error" class="server-batch-bar__btn" prepend-icon="mdi-package-down" @click="$emit('uninstall-agent')">
               卸载
             </v-btn>
           </div>
@@ -56,11 +58,11 @@
 
         <div class="server-batch-bar__section">
           <span class="server-batch-bar__label">其他</span>
-          <div class="d-flex flex-wrap ga-1">
+          <div class="d-flex flex-wrap ga-2">
-            <v-btn size="small" variant="tonal" prepend-icon="mdi-tag-outline" @click="$emit('batch-category')">
+            <v-btn size="default" variant="flat" color="secondary" class="server-batch-bar__btn" prepend-icon="mdi-tag-outline" @click="$emit('batch-category')">
               修改分类
             </v-btn>
-            <v-btn size="small" variant="tonal" color="error" prepend-icon="mdi-delete-sweep" @click="$emit('batch-delete')">
+            <v-btn size="default" variant="flat" color="error" class="server-batch-bar__btn" prepend-icon="mdi-delete-sweep" @click="$emit('batch-delete')">
               批量删除
             </v-btn>
           </div>
@@ -68,7 +70,7 @@
 
         <v-spacer class="d-none d-lg-flex" />
 
-        <v-btn size="small" variant="text" prepend-icon="mdi-close" @click="$emit('clear')">
+        <v-btn size="default" variant="outlined" class="server-batch-bar__btn" prepend-icon="mdi-close" @click="$emit('clear')">
           取消选择
         </v-btn>
       </div>
@@ -97,8 +99,9 @@ defineEmits<{
 
 <style scoped>
 .server-batch-bar {
-  background: rgba(var(--v-theme-primary), 0.04);
+  background: rgb(var(--v-theme-surface));
-  border-color: rgba(var(--v-theme-primary), 0.22) !important;
+  border-color: rgba(var(--v-theme-on-surface), 0.16) !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
 .server-batch-bar__inner {
@@ -108,22 +111,28 @@ defineEmits<{
 .server-batch-bar__section {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   min-width: 0;
 }
 
 .server-batch-bar__label {
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  color: rgba(var(--v-theme-on-surface), 0.82);
+  line-height: 1.2;
+}
+
+.server-batch-bar__btn {
+  font-size: 0.875rem;
   font-weight: 600;
-  letter-spacing: 0.06em;
+  letter-spacing: 0.01em;
-  text-transform: uppercase;
+  text-transform: none;
-  color: rgba(var(--v-theme-on-surface), 0.55);
-  line-height: 1;
 }
 
 .server-batch-bar__divider {
   align-self: stretch;
-  min-height: 44px;
+  min-height: 48px;
-  opacity: 0.35;
+  opacity: 0.5;
 }
 </style>

frontend/src/components/servers/ServerTableRowActions.vue

@@ -1,50 +1,59 @@
 <template>
-  <div class="server-row-actions d-flex align-center justify-end flex-nowrap">
+  <div class="server-row-actions d-flex align-center justify-end flex-nowrap ga-1">
-    <v-btn-group density="compact" divided variant="outlined" color="primary" class="server-row-actions__group">
-      <v-btn
-        size="x-small"
-        prepend-icon="mdi-console"
-        title="WebSSH 终端"
-        @click.stop="$emit('terminal')"
-      >
-        终端
-      </v-btn>
-      <v-btn
-        size="x-small"
-        color="deep-orange"
-        prepend-icon="mdi-login-variant"
-        title="一键登录宝塔面板"
-        :loading="btLoginLoading"
-        @click.stop="$emit('bt-login')"
-      >
-        登录
-      </v-btn>
-    </v-btn-group>
-
-    <v-btn-group density="compact" divided variant="outlined" class="server-row-actions__group ml-1">
-      <v-btn
-        size="x-small"
-        prepend-icon="mdi-folder-outline"
-        title="文件管理"
-        @click.stop="$emit('files')"
-      >
-        文件
-      </v-btn>
-      <v-btn
-        size="x-small"
-        prepend-icon="mdi-pencil-outline"
-        title="编辑服务器"
-        @click.stop="$emit('edit')"
-      >
-        编辑
-      </v-btn>
-    </v-btn-group>
-
     <v-btn
-      class="server-row-actions__delete ml-1"
+      size="small"
-      size="x-small"
+      variant="tonal"
-      variant="text"
+      color="primary"
+      density="comfortable"
+      class="server-row-actions__btn"
+      prepend-icon="mdi-console"
+      title="WebSSH 终端"
+      @click.stop="$emit('terminal')"
+    >
+      终端
+    </v-btn>
+    <v-btn
+      size="small"
+      variant="tonal"
+      color="deep-orange"
+      density="comfortable"
+      class="server-row-actions__btn"
+      prepend-icon="mdi-login-variant"
+      title="一键登录宝塔面板"
+      :loading="btLoginLoading"
+      @click.stop="$emit('bt-login')"
+    >
+      一键登录
+    </v-btn>
+    <v-btn
+      size="small"
+      variant="tonal"
+      color="secondary"
+      density="comfortable"
+      class="server-row-actions__btn"
+      prepend-icon="mdi-folder-outline"
+      title="文件管理"
+      @click.stop="$emit('files')"
+    >
+      文件
+    </v-btn>
+    <v-btn
+      size="small"
+      variant="tonal"
+      density="comfortable"
+      class="server-row-actions__btn"
+      prepend-icon="mdi-pencil-outline"
+      title="编辑服务器"
+      @click.stop="$emit('edit')"
+    >
+      编辑
+    </v-btn>
+    <v-btn
+      size="small"
+      variant="tonal"
       color="error"
+      density="comfortable"
+      class="server-row-actions__btn server-row-actions__btn--icon"
       icon="mdi-delete-outline"
       title="删除服务器"
       @click.stop="$emit('delete')"
@@ -67,16 +76,14 @@ defineEmits<{
 </script>
 
 <style scoped>
-.server-row-actions__group {
+.server-row-actions__btn {
-  flex: 0 0 auto;
+  font-size: 0.8125rem;
-}
+  font-weight: 600;
-
+  letter-spacing: 0.01em;
-.server-row-actions__group :deep(.v-btn) {
-  letter-spacing: 0.02em;
   text-transform: none;
 }
 
-.server-row-actions__delete {
+.server-row-actions__btn--icon {
-  flex: 0 0 28px;
+  min-width: 36px;
 }
 </style>

frontend/src/constants/serverTableHeaders.ts

@@ -7,5 +7,5 @@ export const SERVER_DATA_TABLE_HEADERS = [
   { title: '目标路径', key: 'target_path', width: 200 },
   { title: 'Agent', key: 'agent_version', width: 100 },
   { title: '心跳', key: 'last_heartbeat', width: 120 },
-  { title: '操作', key: 'actions', width: 300, align: 'end' as const, sortable: false },
+  { title: '操作', key: 'actions', width: 360, align: 'end' as const, sortable: false },
 ]