admin/Nexus
1
0
Fork 0
Code Issues Pull Requests Actions 82 Packages Projects Releases Wiki Activity

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

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

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
r
2026-06-21 11:32:32 +08:00
parent 80d6aad54b
commit 2cb0b57281
4 changed files with 99 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/changelog/2026-06-21-servers-row-actions-batch.md
+5
View File
@@ -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
+34 -25
View File
@@ -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">
<v-btn size="small" variant="tonal" color="primary" prepend-icon="mdi-heart-pulse" @click="$emit('health-check')">
<div class="d-flex flex-wrap ga-2">
<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"
variant="tonal"
size="default"
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">
<v-btn size="small" variant="tonal" color="info" prepend-icon="mdi-download" @click="$emit('install-agent')">
<div class="d-flex flex-wrap ga-2">
<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">
<v-btn size="small" variant="tonal" prepend-icon="mdi-tag-outline" @click="$emit('batch-category')">
<div class="d-flex flex-wrap ga-2">
<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);
border-color: rgba(var(--v-theme-primary), 0.22) !important;
background: rgb(var(--v-theme-surface));
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;
text-transform: uppercase;
color: rgba(var(--v-theme-on-surface), 0.55);
line-height: 1;
letter-spacing: 0.01em;
text-transform: none;
}
.server-batch-bar__divider {
align-self: stretch;
min-height: 44px;
opacity: 0.35;
min-height: 48px;
opacity: 0.5;
}
</style>
frontend/src/components/servers/ServerTableRowActions.vue
+59 -52
View File
@@ -1,50 +1,59 @@
<template>
<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>
<div class="server-row-actions d-flex align-center justify-end flex-nowrap ga-1">
<v-btn
class="server-row-actions__delete ml-1"
size="x-small"
variant="text"
size="small"
variant="tonal"
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 {
flex: 0 0 auto;
}
.server-row-actions__group :deep(.v-btn) {
letter-spacing: 0.02em;
.server-row-actions__btn {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
}
.server-row-actions__delete {
flex: 0 0 28px;
.server-row-actions__btn--icon {
min-width: 36px;
}
</style>
frontend/src/constants/serverTableHeaders.ts
+1 -1
View File
@@ -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 },
]