style(desktop): refresh Home and Publish views with modern card layout
Inline the card styling on HomeView and PublishManagementView instead of leaning on the generic MetricCard/SurfaceCard wrappers — larger numerics, softer radii, clearer section headers, and a stats strip on the Publish hero. No behavioral changes. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,9 +2,7 @@
|
||||
import { computed } from "vue";
|
||||
import { DesktopOutlined, LinkOutlined, ClockCircleOutlined, AlertOutlined } from "@ant-design/icons-vue";
|
||||
|
||||
import MetricCard from "../components/MetricCard.vue";
|
||||
import StatusBadge from "../components/StatusBadge.vue";
|
||||
import SurfaceCard from "../components/SurfaceCard.vue";
|
||||
import { useDesktopRuntime } from "../composables/useDesktopRuntime";
|
||||
import { formatClock, formatRelativeTime, titleCaseToken } from "../lib/formatters";
|
||||
import { healthTone, taskTone } from "../lib/runtime-ui";
|
||||
@@ -108,273 +106,374 @@ const subsystemCards = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section class="page">
|
||||
<section class="page-container">
|
||||
<div class="metrics-grid">
|
||||
<article class="modern-card metric-card">
|
||||
<div class="metric-head">
|
||||
<div class="icon-wrap brand"><DesktopOutlined /></div>
|
||||
<span class="eyebrow">在线节点</span>
|
||||
</div>
|
||||
<div class="metric-body">
|
||||
<strong>{{ snapshot?.summary.onlineClients ?? 0 }}</strong>
|
||||
<p>当前处于活跃状态的桌面客户端</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="metric-grid">
|
||||
<MetricCard
|
||||
eyebrow="在线节点"
|
||||
:value="snapshot?.summary.onlineClients ?? 0"
|
||||
label="当前处于活跃状态的桌面客户端"
|
||||
tone="brand"
|
||||
:icon="DesktopOutlined"
|
||||
/>
|
||||
<MetricCard
|
||||
eyebrow="已绑账号"
|
||||
:value="snapshot?.summary.accountsBound ?? 0"
|
||||
label="已授权挂载至本空间的媒体账号"
|
||||
tone="info"
|
||||
:icon="LinkOutlined"
|
||||
/>
|
||||
<MetricCard
|
||||
eyebrow="排队任务"
|
||||
:value="snapshot?.summary.queuedTasks ?? 0"
|
||||
label="当前积压等待端侧领取的发布任务"
|
||||
tone="warn"
|
||||
:icon="ClockCircleOutlined"
|
||||
/>
|
||||
<MetricCard
|
||||
eyebrow="异常干预"
|
||||
:value="snapshot?.summary.issuesOpen ?? 0"
|
||||
label="执行失败或需人工排查的阻断事项"
|
||||
tone="danger"
|
||||
:icon="AlertOutlined"
|
||||
/>
|
||||
<article class="modern-card metric-card">
|
||||
<div class="metric-head">
|
||||
<div class="icon-wrap info"><LinkOutlined /></div>
|
||||
<span class="eyebrow">已绑账号</span>
|
||||
</div>
|
||||
<div class="metric-body">
|
||||
<strong>{{ snapshot?.summary.accountsBound ?? 0 }}</strong>
|
||||
<p>已授权挂载至本空间的媒体账号</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="modern-card metric-card">
|
||||
<div class="metric-head">
|
||||
<div class="icon-wrap warn"><ClockCircleOutlined /></div>
|
||||
<span class="eyebrow">排队任务</span>
|
||||
</div>
|
||||
<div class="metric-body">
|
||||
<strong>{{ snapshot?.summary.queuedTasks ?? 0 }}</strong>
|
||||
<p>当前积压等待端侧领取的发布任务</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="modern-card metric-card">
|
||||
<div class="metric-head">
|
||||
<div class="icon-wrap danger"><AlertOutlined /></div>
|
||||
<span class="eyebrow">异常干预</span>
|
||||
</div>
|
||||
<div class="metric-body">
|
||||
<strong>{{ snapshot?.summary.issuesOpen ?? 0 }}</strong>
|
||||
<p>执行失败或需人工排查的阻断事项</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<div class="panel-grid">
|
||||
<SurfaceCard
|
||||
eyebrow="风险巡检"
|
||||
title="账号健康看板"
|
||||
description="把需要修复登录态、验证码或风险确认的账号单独拉出来。"
|
||||
>
|
||||
<div v-if="riskyAccounts.length > 0" class="list-stack">
|
||||
<article v-for="account in riskyAccounts" :key="account.id" class="list-row">
|
||||
<div class="list-head-content">
|
||||
<strong>{{ account.displayName }}</strong>
|
||||
<p>{{ translatePlatform(account.platform) }} · {{ formatUid(account.platformUid) }}</p>
|
||||
<div class="panels-grid">
|
||||
<article class="modern-card panel-card">
|
||||
<div class="card-header">
|
||||
<div class="header-text">
|
||||
<h3>账号健康看板</h3>
|
||||
<p>把需要修复登录态、验证码或风险确认的账号单独拉出来。</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="riskyAccounts.length > 0" class="info-list">
|
||||
<div v-for="account in riskyAccounts" :key="account.id" class="info-row record-row">
|
||||
<div class="info-stack">
|
||||
<span class="title">{{ account.displayName }}</span>
|
||||
<span class="subtitle">{{ translatePlatform(account.platform) }} · <span class="mono-text">{{ formatUid(account.platformUid) }}</span></span>
|
||||
</div>
|
||||
<div class="list-side">
|
||||
<div class="info-stack" style="align-items: flex-end;">
|
||||
<StatusBadge :tone="healthTone(account.health)" :label="translateHealth(account.health)" />
|
||||
<small>{{ formatRelativeTime(account.lastSyncAt) }}</small>
|
||||
<span class="subtitle" style="margin-top: 6px;">{{ formatRelativeTime(account.lastSyncAt) }}</span>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="empty-text" style="margin-top: 16px;">当前没有异常账号。</p>
|
||||
</SurfaceCard>
|
||||
<div v-else class="empty-state">
|
||||
<p>当前没有发现异常账号，一切运行正常。</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<SurfaceCard
|
||||
eyebrow="事件追踪"
|
||||
title="最近事件"
|
||||
description="系统底层状态流转的历史快照，主要用作诊断上下文。"
|
||||
>
|
||||
<div v-if="activity.length > 0" class="timeline">
|
||||
<article v-for="entry in activity" :key="entry.id" class="feed-card">
|
||||
<div class="feed-head">
|
||||
<div class="feed-title">
|
||||
<span class="feed-dot" :class="entry.severity"></span>
|
||||
<strong>{{ translateEventTitle(entry.title) }}</strong>
|
||||
</div>
|
||||
<small>{{ formatRelativeTime(entry.at) }}</small>
|
||||
</div>
|
||||
<p>{{ translateEventDetail(entry.detail) }}</p>
|
||||
</article>
|
||||
<article class="modern-card panel-card">
|
||||
<div class="card-header">
|
||||
<div class="header-text">
|
||||
<h3>最近事件</h3>
|
||||
<p>系统底层状态流转的历史快照，主要用作诊断上下文。</p>
|
||||
</div>
|
||||
</div>
|
||||
<p v-else class="empty-text" style="margin-top: 16px;">当前没有最近事件记录。</p>
|
||||
</SurfaceCard>
|
||||
<div v-if="activity.length > 0" class="timeline-list">
|
||||
<div v-for="entry in activity" :key="entry.id" class="timeline-item record-row">
|
||||
<div class="timeline-head">
|
||||
<div style="display:flex; align-items:center; gap: 10px;">
|
||||
<span :class="['feed-dot', entry.severity]"></span>
|
||||
<span class="title">{{ translateEventTitle(entry.title) }}</span>
|
||||
</div>
|
||||
<span class="subtitle">{{ formatRelativeTime(entry.at) }}</span>
|
||||
</div>
|
||||
<div class="timeline-body">
|
||||
<p>{{ translateEventDetail(entry.detail) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="empty-state">
|
||||
<p>当前没有最近事件记录。</p>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<SurfaceCard
|
||||
eyebrow="核心子系统"
|
||||
title="引擎状态快照"
|
||||
description="用于快速确认 transport、lease manager 和 vault 这三段是否处在可工作状态。"
|
||||
>
|
||||
<div class="subsystem-grid">
|
||||
<article v-for="card in subsystemCards" :key="card.title" class="subsystem-card">
|
||||
<strong>{{ card.title }}</strong>
|
||||
<pre>{{ card.detail }}</pre>
|
||||
</article>
|
||||
<article class="modern-card panel-card">
|
||||
<div class="card-header">
|
||||
<div class="header-text">
|
||||
<h3>引擎状态快照</h3>
|
||||
<p>用于快速确认 transport、lease manager 和 vault 这三部分核心子系统是否处在正常工作状态。</p>
|
||||
</div>
|
||||
</div>
|
||||
</SurfaceCard>
|
||||
|
||||
<p v-if="loading" class="loading-text">正在刷新运行快照…</p>
|
||||
<div class="subsystem-grid">
|
||||
<div v-for="card in subsystemCards" :key="card.title" class="subsystem-block">
|
||||
<span class="title">{{ card.title }}</span>
|
||||
<div class="code-block">
|
||||
<pre>{{ card.detail }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: grid;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.metric-grid,
|
||||
.panel-grid,
|
||||
.subsystem-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.metric-grid {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.panel-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.list-stack,
|
||||
.timeline {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 16px;
|
||||
max-height: 380px;
|
||||
overflow-y: auto;
|
||||
padding-right: 8px; /* For scrollbar breathing room */
|
||||
}
|
||||
|
||||
.list-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6edf5;
|
||||
background: #fafafb;
|
||||
}
|
||||
|
||||
.list-row strong {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.list-row p {
|
||||
margin: 6px 0 0;
|
||||
color: #8c8c8c;
|
||||
line-height: 1.55;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.list-side {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.list-side small,
|
||||
.timeline-head small {
|
||||
color: var(--geo-color-text-tertiary);
|
||||
}
|
||||
|
||||
.empty-text,
|
||||
.loading-text {
|
||||
margin: 0;
|
||||
color: var(--geo-color-text-secondary);
|
||||
}
|
||||
|
||||
.feed-card {
|
||||
padding: 12px 14px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6edf5;
|
||||
background: #fafafb;
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 24px;
|
||||
padding-bottom: 40px;
|
||||
max-width: 1400px;
|
||||
}
|
||||
|
||||
.feed-head {
|
||||
/* Metrics Top Grid */
|
||||
.metrics-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.modern-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #eef2f6;
|
||||
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(0, 0, 0, 0.01);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modern-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 12px 20px -8px rgba(0, 0, 0, 0.04), 0 4px 6px -4px rgba(0, 0, 0, 0.02);
|
||||
border-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.metric-card {
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
.metric-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.metric-head .eyebrow {
|
||||
margin: 0;
|
||||
color: #64748b;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.icon-wrap {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
.icon-wrap.brand { background: #e0f2fe; color: #0284c7; }
|
||||
.icon-wrap.info { background: #f1f5f9; color: #475569; }
|
||||
.icon-wrap.warn { background: #fef9c3; color: #ca8a04; }
|
||||
.icon-wrap.danger { background: #fee2e2; color: #dc2626; }
|
||||
|
||||
.metric-body strong {
|
||||
display: block;
|
||||
font-size: 36px;
|
||||
font-weight: 800;
|
||||
color: #0f172a;
|
||||
font-feature-settings: 'tnum';
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.metric-body p {
|
||||
margin: 12px 0 0;
|
||||
font-size: 13px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Two Column Panels Grid */
|
||||
.panels-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.panel-card {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.header-text h3 {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.header-text p {
|
||||
margin: 8px 0 0;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* List Styling */
|
||||
.info-list, .timeline-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.record-row {
|
||||
padding: 16px 20px;
|
||||
border-radius: 14px;
|
||||
background: #f8fafc;
|
||||
border: 1px solid #f1f5f9;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.record-row:hover {
|
||||
background: #ffffff;
|
||||
border-color: #e2e8f0;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.02);
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feed-title {
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.feed-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #1677ff;
|
||||
.timeline-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.feed-dot.success {
|
||||
background: #52c41a;
|
||||
}
|
||||
|
||||
.feed-dot.warn {
|
||||
background: #faad14;
|
||||
}
|
||||
|
||||
.feed-dot.danger {
|
||||
background: #ff4d4f;
|
||||
}
|
||||
|
||||
.feed-title strong {
|
||||
.timeline-body p {
|
||||
margin: 0 0 0 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.feed-head small {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
}
|
||||
|
||||
.feed-card p {
|
||||
margin: 0 0 0 14px;
|
||||
color: #595959;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.subsystem-grid {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.subsystem-card {
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid #e6edf5;
|
||||
background: #fafafb;
|
||||
}
|
||||
|
||||
.subsystem-card strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.subsystem-card pre {
|
||||
margin: 12px 0 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
color: var(--geo-color-text-secondary);
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .list-row,
|
||||
html[data-theme="dark"] .subsystem-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
.feed-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
background-color: #cbd5e1;
|
||||
}
|
||||
.feed-dot.success { background-color: #10b981; }
|
||||
.feed-dot.warn { background-color: #f59e0b; }
|
||||
.feed-dot.danger { background-color: #ef4444; }
|
||||
.feed-dot.info { background-color: #0ea5e9; }
|
||||
|
||||
/* Subsystems Bottom Panel */
|
||||
.subsystem-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.subsystem-block {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.subsystem-block .title {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
@media (max-width: 1240px) {
|
||||
.panel-grid,
|
||||
.subsystem-grid,
|
||||
.metric-grid {
|
||||
.code-block {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #eef2f6;
|
||||
border-radius: 14px;
|
||||
padding: 20px;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.code-block pre {
|
||||
margin: 0;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Base Typo */
|
||||
.info-stack {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
color: #0f172a;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #64748b;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.mono-text {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 40px;
|
||||
background: #f8fafc;
|
||||
border-radius: 14px;
|
||||
border: 1px dashed #e2e8f0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin: 0;
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Responsiveness */
|
||||
@media (max-width: 1024px) {
|
||||
.panels-grid, .subsystem-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.timeline-head {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user