fix(frontend): polish dashboard and table interactions

Co-authored-by: Codex <noreply@openai.com>
This commit is contained in:
Zyy
2026-08-14 01:24:49 +08:00
co-authored by Codex
parent 2cb5cda077
commit bc4728332e
7 changed files with 26 additions and 25 deletions
@@ -82,6 +82,7 @@ const loadingIndicatorStyle = computed(() => {
const classes = computed(() => [
'inline-flex items-center justify-center border-0 font-bold leading-[1.15] transition-[background-color,box-shadow,color,opacity,transform] duration-150 cursor-pointer outline-none motion-safe:active:translate-y-px motion-safe:active:scale-[0.985]',
props.iconOnly ? iconOnlySizeClasses[props.size] : sizeClasses[props.size],
props.iconOnly ? 'shrink-0' : undefined,
props.iconOnly ? '' : 'rounded-(--cp-button-radius-base)',
'focus-visible:ring-2 focus-visible:ring-(--cp-info-border) focus-visible:ring-offset-2 focus-visible:ring-offset-(--cp-bg-surface)',
'disabled:cursor-not-allowed disabled:transform-none disabled:bg-(--cp-disabled-bg) disabled:text-(--cp-disabled-text) disabled:shadow-none',
@@ -91,8 +91,16 @@ const statusView = computed(() => {
iconClass: 'text-(--cp-success)',
}
}
if (updateInfo.value) {
return {
label: '已是最新',
icon: CheckCircle2,
badge: 'bg-(--cp-success-bg) text-(--cp-success-text)',
iconClass: 'text-(--cp-success)',
}
}
return {
label: updateInfo.value ? '已是最新' : '未检查',
label: '未检查',
icon: CheckCircle2,
badge: 'bg-(--cp-bg-muted) text-(--cp-text-secondary)',
iconClass: 'text-(--cp-text-muted)',
@@ -318,6 +326,7 @@ watch(
<BaseModal
v-model="open"
title="系统更新"
description="检查版本、查看发布说明并执行在线更新"
variant="success"
width="820px"
body-max-height="72dvh"
@@ -66,8 +66,8 @@ export const accountGroupColumns = [
{
key: 'actions',
label: '操作',
width: '100px',
minWidth: '100px',
width: '136px',
minWidth: '136px',
cellClass,
},
] satisfies BaseTableColumn<AccountGroup>[]
+2 -2
View File
@@ -121,8 +121,8 @@ export const accountColumns = [
{
key: 'actions',
label: '操作',
width: '120px',
minWidth: '120px',
width: '136px',
minWidth: '136px',
},
] satisfies BaseTableColumn<AccountRow>[]
+2 -2
View File
@@ -43,8 +43,8 @@ export const apiKeyColumns = [
{
key: 'actions',
label: '操作',
width: '172px',
minWidth: '172px',
width: '208px',
minWidth: '208px',
headerClass: relaxedActionCellClass,
cellClass: relaxedActionCellClass,
},
@@ -1,6 +1,6 @@
<script setup lang="ts">
import type { dashboardSnapshotView, MetricTone } from '../composables/presenter'
import { CircleCheck, CircleOff, RefreshCw, ShieldAlert, TriangleAlert } from '@lucide/vue'
import { CircleCheck, RefreshCw, ShieldAlert, TriangleAlert } from '@lucide/vue'
import { clamp } from 'es-toolkit'
import { computed } from 'vue'
@@ -106,8 +106,7 @@ const statusRows = computed(() => {
{ label: '正常', description: '暂无账号池观测', value: '—', tone: 'success', icon: CircleCheck },
{ label: '配额耗尽', description: '暂无账号池观测', value: '—', tone: 'warning', icon: TriangleAlert },
{ label: '限流中', description: '暂无账号池观测', value: '—', tone: 'normal', icon: RefreshCw },
{ label: '已停用', description: '暂无账号池观测', value: '—', tone: 'normal', icon: CircleOff },
{ label: '错误', description: '暂无账号池观测', value: '—', tone: 'danger', icon: ShieldAlert },
{ label: '待处理', description: '停用 — · 错误 —', value: '—', tone: 'danger', icon: ShieldAlert },
]
}
@@ -134,16 +133,9 @@ const statusRows = computed(() => {
icon: RefreshCw,
},
{
label: '已停用',
description: '账号已停用',
value: String(counts.disabled),
tone: 'normal',
icon: CircleOff,
},
{
label: '错误',
description: '账号状态异常',
value: String(counts.error),
label: '待处理',
description: `停用 ${counts.disabled} · 错误 ${counts.error}`,
value: String(counts.disabled + counts.error),
tone: 'danger',
icon: ShieldAlert,
},
@@ -165,8 +157,7 @@ const statusBars = computed(() => {
{ pct: (counts.normal / counts.total) * 100, cls: 'bg-(--cp-success)' },
{ pct: (counts.quotaExhausted / counts.total) * 100, cls: 'bg-(--cp-warning)' },
{ pct: (counts.rateLimited / counts.total) * 100, cls: 'bg-(--cp-normal)' },
{ pct: (counts.disabled / counts.total) * 100, cls: 'bg-(--cp-text-secondary)' },
{ pct: (counts.error / counts.total) * 100, cls: 'bg-(--cp-danger)' },
{ pct: ((counts.disabled + counts.error) / counts.total) * 100, cls: 'bg-(--cp-danger)' },
].filter(b => b.pct > 0)
})
</script>
@@ -333,11 +324,11 @@ const statusBars = computed(() => {
</div>
</div>
<div class="mt-5 grid h-67 w-full grid-rows-5 gap-2">
<div class="mt-6.5 grid h-65.5 w-full gap-2.5">
<div
v-for="row in statusRows"
:key="row.label"
class="grid min-h-0 grid-cols-[28px_14px_minmax(0,1fr)_76px] items-center rounded-[14px] bg-(--cp-bg-subtle) px-3.5"
class="grid h-14.5 grid-cols-[28px_14px_minmax(0,1fr)_76px] items-center rounded-[14px] bg-(--cp-bg-subtle) px-3.5"
>
<span
class="inline-flex size-7 items-center justify-center rounded-[9px]"
@@ -45,7 +45,7 @@ const columns: BaseTableColumn<BackupRecord>[] = [
{ key: 'expiresAt', label: '过期时间', width: 170 },
{ key: 'trigger', label: '触发方式', width: 100 },
{ key: 'startedAt', label: '开始时间', width: 170 },
{ key: 'actions', label: '操作', width: 96, fixed: 'right' },
{ key: 'actions', label: '操作', width: 112, minWidth: 112, fixed: 'right' },
]
function triggerLabel(value: string): string {