mirror of
https://github.com/zyycn/codex-proxy-rs.git
synced 2026-11-06 08:06:19 +00:00
fix(frontend): polish dashboard and table interactions
Co-authored-by: Codex <noreply@openai.com>
This commit is contained in:
@@ -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>[]
|
||||
|
||||
@@ -121,8 +121,8 @@ export const accountColumns = [
|
||||
{
|
||||
key: 'actions',
|
||||
label: '操作',
|
||||
width: '120px',
|
||||
minWidth: '120px',
|
||||
width: '136px',
|
||||
minWidth: '136px',
|
||||
},
|
||||
] satisfies BaseTableColumn<AccountRow>[]
|
||||
|
||||
|
||||
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user