style(servers): 行操作与批量栏分组图标化 UI

outlined 按钮组 + 批量栏运维/Agent/其他分区展示。

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

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

@@ -27,6 +27,11 @@
 
 ## 验证
 
-1. `#/servers` 行内见「一键登录」，无「检测路径/诊断」
+1. `#/servers` 行内见分组 outlined 按钮（终端/登录、文件/编辑、删除图标）
-2. 勾选多台 → 批量栏可「检测路径」
+2. 勾选多台 → 批量栏分组展示运维 / Agent / 其他
-3. 单选 1 台 → 批量栏「诊断」弹出 Agent 诊断对话框
+3. 单选 1 台 → 批量栏「诊断」可用
+
+## 2026-06-21 UI 迭代
+
+- 行操作：`v-btn-group` outlined + 图标；宝塔入口显示「登录」+ tooltip
+- 批量栏：浅底描边卡片，按运维/Agent/其他分组，tonal 按钮带图标

frontend/src/components/servers/ServerBatchActionBar.vue

@@ -1,17 +1,77 @@
 <template>
-  <v-card v-if="count > 0" class="mx-4 mb-2" color="primary" variant="tonal" rounded="lg">
+  <v-card
-    <v-card-text class="d-flex align-center py-2 flex-wrap ga-1">
+    v-if="count > 0"
-      <span class="text-body-2 mr-4">已选择 {{ count }} 台服务器</span>
+    class="server-batch-bar mx-4 mb-2"
-      <v-spacer />
+    variant="outlined"
-      <v-btn size="small" variant="text" @click="$emit('batch-category')">修改分类</v-btn>
+    rounded="lg"
-      <v-btn size="small" variant="text" @click="$emit('health-check')">健康检查</v-btn>
+    border
-      <v-btn size="small" variant="text" @click="$emit('detect-path')">检测路径</v-btn>
+  >
-      <v-btn size="small" variant="text" :loading="agentDiagnoseLoading" @click="$emit('agent-diagnose')">诊断</v-btn>
+    <v-card-text class="server-batch-bar__inner py-3">
-      <v-btn size="small" variant="text" @click="$emit('install-agent')">安装Agent</v-btn>
+      <div class="d-flex align-center flex-wrap ga-3">
-      <v-btn size="small" variant="text" @click="$emit('upgrade-agent')">升级Agent</v-btn>
+        <v-chip color="primary" variant="flat" size="small" label prepend-icon="mdi-checkbox-marked-circle-outline">
-      <v-btn size="small" variant="text" color="error" @click="$emit('uninstall-agent')">卸载Agent</v-btn>
+          已选 {{ count }} 台
-      <v-btn size="small" variant="text" color="error" @click="$emit('batch-delete')">批量删除</v-btn>
+        </v-chip>
-      <v-btn size="small" variant="text" @click="$emit('clear')">取消选择</v-btn>
+
+        <v-divider vertical class="server-batch-bar__divider d-none d-sm-flex" />
+
+        <div class="server-batch-bar__section">
+          <span class="server-batch-bar__label">运维</span>
+          <div class="d-flex flex-wrap ga-1">
+            <v-btn size="small" variant="tonal" color="primary" 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>
+            <v-btn
+              size="small"
+              variant="tonal"
+              prepend-icon="mdi-stethoscope"
+              :loading="agentDiagnoseLoading"
+              @click="$emit('agent-diagnose')"
+            >
+              诊断
+            </v-btn>
+          </div>
+        </div>
+
+        <v-divider vertical class="server-batch-bar__divider d-none d-md-flex" />
+
+        <div class="server-batch-bar__section">
+          <span class="server-batch-bar__label">Agent</span>
+          <div class="d-flex flex-wrap ga-1">
+            <v-btn size="small" variant="tonal" color="info" 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>
+            <v-btn size="small" variant="tonal" color="error" prepend-icon="mdi-package-down" @click="$emit('uninstall-agent')">
+              卸载
+            </v-btn>
+          </div>
+        </div>
+
+        <v-divider vertical class="server-batch-bar__divider d-none d-md-flex" />
+
+        <div class="server-batch-bar__section">
+          <span class="server-batch-bar__label">其他</span>
+          <div class="d-flex flex-wrap ga-1">
+            <v-btn size="small" variant="tonal" 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>
+          </div>
+        </div>
+
+        <v-spacer class="d-none d-lg-flex" />
+
+        <v-btn size="small" variant="text" prepend-icon="mdi-close" @click="$emit('clear')">
+          取消选择
+        </v-btn>
+      </div>
     </v-card-text>
   </v-card>
 </template>
@@ -34,3 +94,36 @@ defineEmits<{
   clear: []
 }>()
 </script>
+
+<style scoped>
+.server-batch-bar {
+  background: rgba(var(--v-theme-primary), 0.04);
+  border-color: rgba(var(--v-theme-primary), 0.22) !important;
+}
+
+.server-batch-bar__inner {
+  padding-inline: 16px !important;
+}
+
+.server-batch-bar__section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 0;
+}
+
+.server-batch-bar__label {
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(var(--v-theme-on-surface), 0.55);
+  line-height: 1;
+}
+
+.server-batch-bar__divider {
+  align-self: stretch;
+  min-height: 44px;
+  opacity: 0.35;
+}
+</style>

frontend/src/components/servers/ServerTableRowActions.vue

@@ -1,55 +1,54 @@
 <template>
-  <div class="server-row-actions d-flex ga-1 align-center justify-end flex-nowrap">
+  <div class="server-row-actions d-flex align-center justify-end flex-nowrap">
+    <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
-      variant="text"
+      class="server-row-actions__delete ml-1"
       size="x-small"
-      color="primary"
-      density="compact"
-      class="server-row-actions__btn"
-      @click.stop="$emit('terminal')"
-    >
-      终端
-    </v-btn>
-    <v-btn
       variant="text"
-      size="x-small"
-      color="deep-orange"
-      density="compact"
-      class="server-row-actions__btn server-row-actions__btn--wide"
-      title="一键登录宝塔面板"
-      :loading="btLoginLoading"
-      @click.stop="$emit('bt-login')"
-    >
-      一键登录
-    </v-btn>
-    <v-btn
-      variant="text"
-      size="x-small"
-      density="compact"
-      class="server-row-actions__btn"
-      @click.stop="$emit('files')"
-    >
-      文件
-    </v-btn>
-    <v-btn
-      variant="text"
-      size="x-small"
-      density="compact"
-      class="server-row-actions__btn"
-      @click.stop="$emit('edit')"
-    >
-      编辑
-    </v-btn>
-    <v-btn
-      variant="text"
-      size="x-small"
       color="error"
-      density="compact"
+      icon="mdi-delete-outline"
-      class="server-row-actions__btn"
+      title="删除服务器"
       @click.stop="$emit('delete')"
-    >
+    />
-      删除
-    </v-btn>
   </div>
 </template>
 
@@ -68,12 +67,16 @@ defineEmits<{
 </script>
 
 <style scoped>
-.server-row-actions__btn {
+.server-row-actions__group {
-  min-width: 52px;
+  flex: 0 0 auto;
-  padding-inline: 6px;
 }
 
-.server-row-actions__btn--wide {
+.server-row-actions__group :deep(.v-btn) {
-  min-width: 72px;
+  letter-spacing: 0.02em;
+  text-transform: none;
+}
+
+.server-row-actions__delete {
+  flex: 0 0 28px;
 }
 </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: 280, align: 'end' as const, sortable: false },
+  { title: '操作', key: 'actions', width: 300, align: 'end' as const, sortable: false },
 ]