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 { computed } from "vue";
|
||||||
import { DesktopOutlined, LinkOutlined, ClockCircleOutlined, AlertOutlined } from "@ant-design/icons-vue";
|
import { DesktopOutlined, LinkOutlined, ClockCircleOutlined, AlertOutlined } from "@ant-design/icons-vue";
|
||||||
|
|
||||||
import MetricCard from "../components/MetricCard.vue";
|
|
||||||
import StatusBadge from "../components/StatusBadge.vue";
|
import StatusBadge from "../components/StatusBadge.vue";
|
||||||
import SurfaceCard from "../components/SurfaceCard.vue";
|
|
||||||
import { useDesktopRuntime } from "../composables/useDesktopRuntime";
|
import { useDesktopRuntime } from "../composables/useDesktopRuntime";
|
||||||
import { formatClock, formatRelativeTime, titleCaseToken } from "../lib/formatters";
|
import { formatClock, formatRelativeTime, titleCaseToken } from "../lib/formatters";
|
||||||
import { healthTone, taskTone } from "../lib/runtime-ui";
|
import { healthTone, taskTone } from "../lib/runtime-ui";
|
||||||
@@ -108,273 +106,374 @@ const subsystemCards = computed(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<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">
|
<article class="modern-card metric-card">
|
||||||
<MetricCard
|
<div class="metric-head">
|
||||||
eyebrow="在线节点"
|
<div class="icon-wrap info"><LinkOutlined /></div>
|
||||||
:value="snapshot?.summary.onlineClients ?? 0"
|
<span class="eyebrow">已绑账号</span>
|
||||||
label="当前处于活跃状态的桌面客户端"
|
</div>
|
||||||
tone="brand"
|
<div class="metric-body">
|
||||||
:icon="DesktopOutlined"
|
<strong>{{ snapshot?.summary.accountsBound ?? 0 }}</strong>
|
||||||
/>
|
<p>已授权挂载至本空间的媒体账号</p>
|
||||||
<MetricCard
|
</div>
|
||||||
eyebrow="已绑账号"
|
</article>
|
||||||
:value="snapshot?.summary.accountsBound ?? 0"
|
|
||||||
label="已授权挂载至本空间的媒体账号"
|
<article class="modern-card metric-card">
|
||||||
tone="info"
|
<div class="metric-head">
|
||||||
:icon="LinkOutlined"
|
<div class="icon-wrap warn"><ClockCircleOutlined /></div>
|
||||||
/>
|
<span class="eyebrow">排队任务</span>
|
||||||
<MetricCard
|
</div>
|
||||||
eyebrow="排队任务"
|
<div class="metric-body">
|
||||||
:value="snapshot?.summary.queuedTasks ?? 0"
|
<strong>{{ snapshot?.summary.queuedTasks ?? 0 }}</strong>
|
||||||
label="当前积压等待端侧领取的发布任务"
|
<p>当前积压等待端侧领取的发布任务</p>
|
||||||
tone="warn"
|
</div>
|
||||||
:icon="ClockCircleOutlined"
|
</article>
|
||||||
/>
|
|
||||||
<MetricCard
|
<article class="modern-card metric-card">
|
||||||
eyebrow="异常干预"
|
<div class="metric-head">
|
||||||
:value="snapshot?.summary.issuesOpen ?? 0"
|
<div class="icon-wrap danger"><AlertOutlined /></div>
|
||||||
label="执行失败或需人工排查的阻断事项"
|
<span class="eyebrow">异常干预</span>
|
||||||
tone="danger"
|
</div>
|
||||||
:icon="AlertOutlined"
|
<div class="metric-body">
|
||||||
/>
|
<strong>{{ snapshot?.summary.issuesOpen ?? 0 }}</strong>
|
||||||
|
<p>执行失败或需人工排查的阻断事项</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="panel-grid">
|
<div class="panels-grid">
|
||||||
<SurfaceCard
|
<article class="modern-card panel-card">
|
||||||
eyebrow="风险巡检"
|
<div class="card-header">
|
||||||
title="账号健康看板"
|
<div class="header-text">
|
||||||
description="把需要修复登录态、验证码或风险确认的账号单独拉出来。"
|
<h3>账号健康看板</h3>
|
||||||
>
|
<p>把需要修复登录态、验证码或风险确认的账号单独拉出来。</p>
|
||||||
<div v-if="riskyAccounts.length > 0" class="list-stack">
|
</div>
|
||||||
<article v-for="account in riskyAccounts" :key="account.id" class="list-row">
|
</div>
|
||||||
<div class="list-head-content">
|
<div v-if="riskyAccounts.length > 0" class="info-list">
|
||||||
<strong>{{ account.displayName }}</strong>
|
<div v-for="account in riskyAccounts" :key="account.id" class="info-row record-row">
|
||||||
<p>{{ translatePlatform(account.platform) }} · {{ formatUid(account.platformUid) }}</p>
|
<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>
|
||||||
<div class="list-side">
|
<div class="info-stack" style="align-items: flex-end;">
|
||||||
<StatusBadge :tone="healthTone(account.health)" :label="translateHealth(account.health)" />
|
<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>
|
</div>
|
||||||
</article>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p v-else class="empty-text" style="margin-top: 16px;">当前没有异常账号。</p>
|
<div v-else class="empty-state">
|
||||||
</SurfaceCard>
|
<p>当前没有发现异常账号，一切运行正常。</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
|
||||||
<SurfaceCard
|
<article class="modern-card panel-card">
|
||||||
eyebrow="事件追踪"
|
<div class="card-header">
|
||||||
title="最近事件"
|
<div class="header-text">
|
||||||
description="系统底层状态流转的历史快照，主要用作诊断上下文。"
|
<h3>最近事件</h3>
|
||||||
>
|
<p>系统底层状态流转的历史快照，主要用作诊断上下文。</p>
|
||||||
<div v-if="activity.length > 0" class="timeline">
|
</div>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
<p v-else class="empty-text" style="margin-top: 16px;">当前没有最近事件记录。</p>
|
<div v-if="activity.length > 0" class="timeline-list">
|
||||||
</SurfaceCard>
|
<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>
|
</div>
|
||||||
|
|
||||||
<SurfaceCard
|
<article class="modern-card panel-card">
|
||||||
eyebrow="核心子系统"
|
<div class="card-header">
|
||||||
title="引擎状态快照"
|
<div class="header-text">
|
||||||
description="用于快速确认 transport、lease manager 和 vault 这三段是否处在可工作状态。"
|
<h3>引擎状态快照</h3>
|
||||||
>
|
<p>用于快速确认 transport、lease manager 和 vault 这三部分核心子系统是否处在正常工作状态。</p>
|
||||||
<div class="subsystem-grid">
|
</div>
|
||||||
<article v-for="card in subsystemCards" :key="card.title" class="subsystem-card">
|
|
||||||
<strong>{{ card.title }}</strong>
|
|
||||||
<pre>{{ card.detail }}</pre>
|
|
||||||
</article>
|
|
||||||
</div>
|
</div>
|
||||||
</SurfaceCard>
|
<div class="subsystem-grid">
|
||||||
|
<div v-for="card in subsystemCards" :key="card.title" class="subsystem-block">
|
||||||
<p v-if="loading" class="loading-text">正在刷新运行快照…</p>
|
<span class="title">{{ card.title }}</span>
|
||||||
|
<div class="code-block">
|
||||||
|
<pre>{{ card.detail }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page {
|
.page-container {
|
||||||
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;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
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;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feed-title {
|
.timeline-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.feed-dot {
|
.timeline-head {
|
||||||
width: 6px;
|
display: flex;
|
||||||
height: 6px;
|
justify-content: space-between;
|
||||||
border-radius: 50%;
|
align-items: center;
|
||||||
background: #1677ff;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.feed-dot.success {
|
.timeline-body p {
|
||||||
background: #52c41a;
|
margin: 0 0 0 18px;
|
||||||
}
|
|
||||||
|
|
||||||
.feed-dot.warn {
|
|
||||||
background: #faad14;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-dot.danger {
|
|
||||||
background: #ff4d4f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-title strong {
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
font-weight: 600;
|
color: #475569;
|
||||||
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);
|
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
font-size: 12px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] .list-row,
|
.feed-dot {
|
||||||
html[data-theme="dark"] .subsystem-card {
|
width: 8px;
|
||||||
background: rgba(255, 255, 255, 0.03);
|
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) {
|
.code-block {
|
||||||
.panel-grid,
|
background: #f8fafc;
|
||||||
.subsystem-grid,
|
border: 1px solid #eef2f6;
|
||||||
.metric-grid {
|
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;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 720px) {
|
|
||||||
.timeline-head {
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -4,7 +4,6 @@ import type { DesktopPublishTaskListResponse, DesktopTaskInfo, JsonValue } from
|
|||||||
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
import { computed, onMounted, onUnmounted, ref, watch } from "vue";
|
||||||
|
|
||||||
import StatusBadge from "../components/StatusBadge.vue";
|
import StatusBadge from "../components/StatusBadge.vue";
|
||||||
import SurfaceCard from "../components/SurfaceCard.vue";
|
|
||||||
import { useDesktopRuntime } from "../composables/useDesktopRuntime";
|
import { useDesktopRuntime } from "../composables/useDesktopRuntime";
|
||||||
import { formatDateTime, formatRelativeTime, titleCaseToken } from "../lib/formatters";
|
import { formatDateTime, formatRelativeTime, titleCaseToken } from "../lib/formatters";
|
||||||
|
|
||||||
@@ -284,258 +283,396 @@ const tableColumns = [
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<section class="page">
|
<section class="page-container">
|
||||||
<header class="hero">
|
<section class="hero-card">
|
||||||
<div class="hero-copy">
|
<div class="hero-header">
|
||||||
<p class="eyebrow">PUBLISH EXECUTION DESK</p>
|
<div class="hero-title">
|
||||||
<h2>发布管理</h2>
|
<p class="eyebrow">PUBLISH EXECUTION DESK</p>
|
||||||
<p class="hero-summary">
|
<h2>发布管理</h2>
|
||||||
统一用一个 table 查看当前设备负责的待发布队列与已发送历史。页面固定每页 10 条，待发布任务会始终排在最前面，只有当前页的
|
<p class="summary">
|
||||||
PublishTasks 展示完后，才会继续补已发送历史记录。
|
统一用一个 table 查看当前设备负责的待发布队列与已发送历史。页面固定每页 10 条，待发布任务会始终排在最前面，只有当前页的 PublishTasks 展示完后，才会继续补已发送历史记录。
|
||||||
</p>
|
</p>
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<SurfaceCard
|
|
||||||
eyebrow="Publish Tasks"
|
|
||||||
title="待发布与已发送记录"
|
|
||||||
description="支持按文章标题搜索，分页与总数以服务端返回的 PublishTasks 结果为准。"
|
|
||||||
>
|
|
||||||
<template #action>
|
|
||||||
<a-button :loading="loading" @click="refreshTasks()">
|
|
||||||
<template #icon><ReloadOutlined /></template>
|
|
||||||
刷新
|
|
||||||
</a-button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<div class="table-toolbar">
|
|
||||||
<div class="toolbar-stats">
|
|
||||||
<span class="stat-chip">总数 {{ totalCount }}</span>
|
|
||||||
<span class="stat-chip">等待发布 {{ pendingCount }}</span>
|
|
||||||
<span class="stat-chip">已发送 {{ historyTotal }}</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="hero-actions">
|
||||||
<div class="toolbar-search">
|
<a-button type="primary" ghost class="modern-btn" :loading="loading" @click="refreshTasks()">
|
||||||
<a-input
|
<template #icon><ReloadOutlined /></template>
|
||||||
v-model:value="searchTitle"
|
刷新状态
|
||||||
allow-clear
|
</a-button>
|
||||||
placeholder="搜索文章标题"
|
|
||||||
class="search-input"
|
|
||||||
@pressEnter="applySearch"
|
|
||||||
>
|
|
||||||
<template #prefix>
|
|
||||||
<SearchOutlined style="color: #bfbfbf" />
|
|
||||||
</template>
|
|
||||||
</a-input>
|
|
||||||
<a-button type="primary" @click="applySearch">搜索</a-button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="stats-strip">
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">历史总数</div>
|
||||||
|
<div class="stat-value">{{ totalCount }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">等待发布</div>
|
||||||
|
<div class="stat-value">{{ pendingCount }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="stat-card">
|
||||||
|
<div class="stat-label">已发送</div>
|
||||||
|
<div class="stat-value">{{ historyTotal }}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<a-table
|
<!-- Feedback Banners -->
|
||||||
row-key="id"
|
<div v-if="actionMessage" class="feedback-banner success"><div class="success-text">{{ actionMessage }}</div></div>
|
||||||
class="modern-table publish-table"
|
<div v-if="error" class="feedback-banner error"><div class="error-text">{{ error }}</div></div>
|
||||||
:columns="tableColumns"
|
<div v-if="actionError" class="feedback-banner error"><div class="error-text">{{ actionError }}</div></div>
|
||||||
:data-source="publishTasks"
|
|
||||||
:pagination="false"
|
|
||||||
:loading="loading"
|
|
||||||
:row-class-name="rowClassName"
|
|
||||||
>
|
|
||||||
<template #emptyText>
|
|
||||||
<a-empty description="暂无匹配的发布任务" />
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template #bodyCell="{ column, record }">
|
<!-- Table Details Section -->
|
||||||
<template v-if="column.key === 'title'">
|
<section class="content-section">
|
||||||
<div class="cell-primary-secondary">
|
<div class="hero-card" style="padding-bottom: 0;">
|
||||||
<div class="info-stack">
|
<div class="hero-header" style="padding: 24px 32px 16px; border-bottom: 1px solid #eef2f6; align-items: center;">
|
||||||
<span class="title">{{ record.title }}</span>
|
<div style="flex: 1;">
|
||||||
<span class="subtitle">
|
<h3 class="section-title">待发布与已发送记录</h3>
|
||||||
<template v-if="record.articleId">文章 #{{ record.articleId }} · </template>
|
<p class="section-desc" style="margin-top: 4px;">支持按文章标题搜索，分页与总数以服务端返回的 PublishTasks 结果为准。</p>
|
||||||
{{ isPendingStatus(record.status) ? "待发布队列" : "已发送历史" }}
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
<!-- Filters ToolBar -->
|
||||||
</div>
|
<div style="display: flex; gap: 12px; align-items: center;">
|
||||||
|
<a-input
|
||||||
|
v-model:value="searchTitle"
|
||||||
|
allow-clear
|
||||||
|
placeholder="搜索文章标题"
|
||||||
|
style="width: 280px;"
|
||||||
|
@pressEnter="applySearch"
|
||||||
|
>
|
||||||
|
<template #prefix>
|
||||||
|
<SearchOutlined style="color: #94a3b8" />
|
||||||
|
</template>
|
||||||
|
</a-input>
|
||||||
|
<a-button type="primary" class="modern-btn" style="border-radius: 8px; font-weight: 500;" @click="applySearch">搜索</a-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a-table
|
||||||
|
row-key="id"
|
||||||
|
class="modern-table publish-table"
|
||||||
|
:columns="tableColumns"
|
||||||
|
:data-source="publishTasks"
|
||||||
|
:pagination="false"
|
||||||
|
:loading="loading"
|
||||||
|
:row-class-name="rowClassName"
|
||||||
|
>
|
||||||
|
<template #emptyText>
|
||||||
|
<div style="padding: 60px; color: #94a3b8;"><a-empty description="暂无匹配的发布任务" /></div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template v-else-if="column.key === 'account'">
|
<template #bodyCell="{ column, record }">
|
||||||
<div class="cell-primary-secondary">
|
<template v-if="column.key === 'title'">
|
||||||
<div class="info-stack">
|
<div class="cell-primary-secondary">
|
||||||
<span class="title">{{ record.accountName }}</span>
|
<div class="info-stack">
|
||||||
<span class="subtitle">{{ translatePlatform(record.platform) }}</span>
|
<span class="title">{{ record.title }}</span>
|
||||||
</div>
|
<span class="subtitle">
|
||||||
</div>
|
<template v-if="record.articleId">文章 #{{ record.articleId }} · </template>
|
||||||
</template>
|
{{ isPendingStatus(record.status) ? "待发布队列" : "已发送历史" }}
|
||||||
|
</span>
|
||||||
<template v-else-if="column.key === 'status'">
|
|
||||||
<div class="status-cell">
|
|
||||||
<StatusBadge :tone="statusTone(record.status)" :label="statusLabel(record.status)" />
|
|
||||||
<span v-if="isPendingStatus(record.status)" class="status-note">优先展示</span>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="column.key === 'meta'">
|
|
||||||
<div class="cell-primary-secondary meta-cell">
|
|
||||||
<div class="info-stack">
|
|
||||||
<span class="subtitle strong-text">{{ record.summary }}</span>
|
|
||||||
<span v-if="record.errorMessage" class="error-text">{{ record.errorMessage }}</span>
|
|
||||||
<span class="subtitle">
|
|
||||||
尝试 {{ record.attempts }} 次
|
|
||||||
<template v-if="record.leaseExpiresAt"> · 租约 {{ formatRelativeTime(record.leaseExpiresAt) }} 到期</template>
|
|
||||||
<template v-else-if="record.externalArticleUrl"> · 已生成外链</template>
|
|
||||||
<template v-else-if="record.externalManageUrl"> · 已生成管理链接</template>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="column.key === 'time'">
|
|
||||||
<div class="cell-primary-secondary">
|
|
||||||
<div class="info-stack">
|
|
||||||
<span class="title">{{ formatDateTime(record.updatedAt) }}</span>
|
|
||||||
<span class="subtitle">更新于 {{ formatRelativeTime(record.updatedAt) }}</span>
|
|
||||||
<span class="subtitle">创建于 {{ formatDateTime(record.createdAt) }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-else-if="column.key === 'actions'">
|
|
||||||
<div class="action-buttons">
|
|
||||||
<a-popconfirm
|
|
||||||
v-if="!isPendingStatus(record.status)"
|
|
||||||
title="确定要重试本次发布吗？"
|
|
||||||
placement="topRight"
|
|
||||||
ok-text="确定"
|
|
||||||
cancel-text="取消"
|
|
||||||
@confirm="retryTask(record.id)"
|
|
||||||
>
|
|
||||||
<a-tooltip title="再次发送" placement="top">
|
|
||||||
<a-button
|
|
||||||
type="text"
|
|
||||||
class="icon-action-btn"
|
|
||||||
:loading="actionPendingTaskId === record.id"
|
|
||||||
>
|
|
||||||
<template #icon><SendOutlined /></template>
|
|
||||||
</a-button>
|
|
||||||
</a-tooltip>
|
|
||||||
</a-popconfirm>
|
|
||||||
<a-tooltip v-else title="排队中...">
|
|
||||||
<div class="action-placeholder-icon">
|
|
||||||
<ClockCircleOutlined />
|
|
||||||
</div>
|
</div>
|
||||||
</a-tooltip>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
|
||||||
|
<template v-else-if="column.key === 'account'">
|
||||||
|
<div class="cell-primary-secondary">
|
||||||
|
<div class="info-stack">
|
||||||
|
<span class="title">{{ record.accountName }}</span>
|
||||||
|
<span class="subtitle">{{ translatePlatform(record.platform) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else-if="column.key === 'status'">
|
||||||
|
<div class="status-cell">
|
||||||
|
<StatusBadge :tone="statusTone(record.status)" :label="statusLabel(record.status)" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else-if="column.key === 'meta'">
|
||||||
|
<div class="cell-primary-secondary meta-cell">
|
||||||
|
<div class="info-stack">
|
||||||
|
<span class="subtitle strong-text">{{ record.summary }}</span>
|
||||||
|
<span v-if="record.errorMessage" class="error-text">{{ record.errorMessage }}</span>
|
||||||
|
<span class="subtitle mono-detail">
|
||||||
|
尝试 {{ record.attempts }} 次
|
||||||
|
<template v-if="record.leaseExpiresAt"> · 租约 {{ formatRelativeTime(record.leaseExpiresAt) }} 到期</template>
|
||||||
|
<template v-else-if="record.externalArticleUrl"> · 已生成外链</template>
|
||||||
|
<template v-else-if="record.externalManageUrl"> · 已生成管理链接</template>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else-if="column.key === 'time'">
|
||||||
|
<div class="cell-primary-secondary">
|
||||||
|
<div class="info-stack">
|
||||||
|
<span class="title mono-text">{{ formatDateTime(record.updatedAt) }}</span>
|
||||||
|
<span class="subtitle">更新于 {{ formatRelativeTime(record.updatedAt) }}</span>
|
||||||
|
<span class="subtitle">创建 {{ formatDateTime(record.createdAt) }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else-if="column.key === 'actions'">
|
||||||
|
<div class="action-buttons">
|
||||||
|
<a-popconfirm
|
||||||
|
v-if="!isPendingStatus(record.status)"
|
||||||
|
title="确定要重试本次发布吗？"
|
||||||
|
placement="topRight"
|
||||||
|
ok-text="确定"
|
||||||
|
cancel-text="取消"
|
||||||
|
@confirm="retryTask(record.id)"
|
||||||
|
>
|
||||||
|
<a-tooltip title="再次发送" placement="top">
|
||||||
|
<a-button
|
||||||
|
type="text"
|
||||||
|
class="icon-action-btn"
|
||||||
|
:loading="actionPendingTaskId === record.id"
|
||||||
|
>
|
||||||
|
<template #icon><SendOutlined /></template>
|
||||||
|
</a-button>
|
||||||
|
</a-tooltip>
|
||||||
|
</a-popconfirm>
|
||||||
|
<a-tooltip v-else title="排队中...">
|
||||||
|
<div class="action-placeholder-icon">
|
||||||
|
<ClockCircleOutlined />
|
||||||
|
</div>
|
||||||
|
</a-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</a-table>
|
||||||
</a-table>
|
|
||||||
|
|
||||||
<div class="table-footer">
|
<div class="table-footer">
|
||||||
<p class="table-note">
|
<a-pagination
|
||||||
当前页固定展示 10 条；待发布任务会先占满前面的页码，待 PublishTasks 展示完后才继续显示已发送历史记录。
|
:current="currentPage"
|
||||||
</p>
|
:page-size="PAGE_SIZE"
|
||||||
<a-pagination
|
:total="totalCount"
|
||||||
:current="currentPage"
|
:show-size-changer="false"
|
||||||
:page-size="PAGE_SIZE"
|
@change="handlePageChange"
|
||||||
:total="totalCount"
|
/>
|
||||||
:show-size-changer="false"
|
</div>
|
||||||
@change="handlePageChange"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</SurfaceCard>
|
</section>
|
||||||
|
|
||||||
<p v-if="actionMessage" class="success-text">{{ actionMessage }}</p>
|
|
||||||
<p v-if="error" class="error-text page-feedback">{{ error }}</p>
|
|
||||||
<p v-if="actionError" class="error-text page-feedback">{{ actionError }}</p>
|
|
||||||
</section>
|
</section>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.page {
|
.page-container {
|
||||||
display: grid;
|
display: flex;
|
||||||
gap: 18px;
|
flex-direction: column;
|
||||||
|
gap: 32px;
|
||||||
|
padding-bottom: 40px;
|
||||||
|
max-width: 1400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-copy {
|
/* Hero Section */
|
||||||
padding: 28px;
|
.hero-card {
|
||||||
border-radius: 12px;
|
background: #ffffff;
|
||||||
border: 1px solid #e2e8f0;
|
border-radius: 20px;
|
||||||
background: linear-gradient(135deg, #ffffff, #f8fafc);
|
border: 1px solid #eef2f6;
|
||||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.01);
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eyebrow,
|
.hero-header {
|
||||||
.hero-summary,
|
display: flex;
|
||||||
h2 {
|
justify-content: space-between;
|
||||||
margin: 0;
|
align-items: flex-start;
|
||||||
|
padding: 36px 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.eyebrow {
|
.eyebrow {
|
||||||
color: #8c8c8c;
|
margin: 0 0 12px;
|
||||||
font-size: 11px;
|
color: #64748b;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 700;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2 {
|
.hero-title h2 {
|
||||||
margin-top: 8px;
|
margin: 0;
|
||||||
font-size: 24px;
|
font-size: 32px;
|
||||||
font-weight: 600;
|
font-weight: 800;
|
||||||
color: #1a1a1a;
|
color: #0f172a;
|
||||||
line-height: 1.4;
|
letter-spacing: -0.02em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hero-summary {
|
.summary {
|
||||||
margin-top: 12px;
|
margin: 16px 0 0;
|
||||||
max-width: 860px;
|
max-width: 800px;
|
||||||
color: #8c8c8c;
|
color: #475569;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modern-btn {
|
||||||
|
border-radius: 8px;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 20px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Stats Strip */
|
||||||
|
.stats-strip {
|
||||||
|
display: flex;
|
||||||
|
padding: 24px 40px;
|
||||||
|
background: #f8fafc;
|
||||||
|
border-top: 1px solid #eef2f6;
|
||||||
|
gap: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #64748b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stat-value {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f172a;
|
||||||
|
line-height: 1;
|
||||||
|
font-feature-settings: "tnum";
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content Section */
|
||||||
|
.content-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #0f172a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-desc {
|
||||||
|
margin: 8px 0 0;
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 15px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modern Enterprise Table Styles */
|
||||||
|
:deep(.modern-table) {
|
||||||
|
padding: 0 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.modern-table .ant-table-thead > tr > th) {
|
||||||
|
background-color: transparent !important;
|
||||||
|
color: #64748b;
|
||||||
|
font-weight: 600;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
|
border-bottom: 1px solid #e2e8f0;
|
||||||
|
padding: 16px 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-toolbar {
|
:deep(.modern-table .ant-table-tbody > tr > td) {
|
||||||
|
padding: 16px 12px;
|
||||||
|
border-bottom: 1px solid #f1f5f9;
|
||||||
|
color: #0f172a;
|
||||||
|
vertical-align: top;
|
||||||
|
transition: background-color 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.modern-table .ant-table-tbody > tr:last-child > td) {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.modern-table .ant-table-tbody > tr:hover > td) {
|
||||||
|
background-color: #f8fafc !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.publish-table .publish-row--pending > td) {
|
||||||
|
background: #fdfcee !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cell-primary-secondary {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
justify-content: space-between;
|
|
||||||
gap: 16px;
|
|
||||||
margin-top: 18px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
}
|
||||||
|
.info-stack {
|
||||||
.toolbar-stats,
|
|
||||||
.toolbar-search,
|
|
||||||
.status-cell {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
gap: 10px;
|
gap: 2px;
|
||||||
|
}
|
||||||
|
.info-stack .title {
|
||||||
|
font-weight: 600;
|
||||||
|
color: #0f172a;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.info-stack .subtitle {
|
||||||
|
color: #64748b;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
.info-stack .mono-text {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
|
}
|
||||||
|
.info-stack .mono-detail {
|
||||||
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #94a3b8;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-stack .strong-text {
|
||||||
|
color: #1e293b;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.error-text {
|
||||||
|
color: #ef4444;
|
||||||
|
font-size: 13px;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.success-text {
|
||||||
|
color: #10b981;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Action Buttons */
|
||||||
.action-buttons {
|
.action-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-action-btn {
|
.icon-action-btn {
|
||||||
color: #64748b;
|
color: #64748b;
|
||||||
border-radius: 6px;
|
border-radius: 8px;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
background: transparent;
|
width: 36px;
|
||||||
width: 32px;
|
height: 36px;
|
||||||
height: 32px;
|
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
border: none;
|
border: 1px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-action-btn:hover {
|
.icon-action-btn:hover {
|
||||||
background: #f1f5f9;
|
background: #f1f5f9;
|
||||||
color: #0ea5e9;
|
color: #0ea5e9;
|
||||||
|
border-color: #e2e8f0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-placeholder-icon {
|
.action-placeholder-icon {
|
||||||
width: 32px;
|
width: 36px;
|
||||||
height: 32px;
|
height: 36px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -543,149 +680,44 @@ h2 {
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolbar-stats {
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar-search {
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
width: 280px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-chip {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 32px;
|
|
||||||
padding: 0 12px;
|
|
||||||
border-radius: 999px;
|
|
||||||
background: #f8fafc;
|
|
||||||
color: #475569;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 600;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
|
|
||||||
}
|
|
||||||
|
|
||||||
.cell-primary-secondary {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
min-height: 52px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-stack {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
min-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title,
|
|
||||||
.subtitle,
|
|
||||||
.table-note,
|
|
||||||
.status-note,
|
|
||||||
.action-placeholder,
|
|
||||||
.success-text,
|
|
||||||
.error-text {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: #111827;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.5;
|
|
||||||
word-break: break-word;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subtitle {
|
|
||||||
color: #8c8c8c;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.strong-text {
|
|
||||||
color: #4b5563;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meta-cell {
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-note,
|
|
||||||
.action-placeholder {
|
|
||||||
color: #8c8c8c;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table-footer {
|
.table-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
gap: 16px;
|
padding: 16px 32px 32px;
|
||||||
margin-top: 16px;
|
border-top: 1px solid #eef2f6;
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-note {
|
.table-note {
|
||||||
color: #8c8c8c;
|
color: #94a3b8;
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
|
|
||||||
.success-text {
|
|
||||||
color: #15803d;
|
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.error-text {
|
.feedback-banner {
|
||||||
color: #b42318;
|
padding: 16px 20px;
|
||||||
font-size: 13px;
|
border-radius: 12px;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
}
|
||||||
|
.feedback-banner.error {
|
||||||
|
border-color: #fca5a5;
|
||||||
|
background: #fef2f2;
|
||||||
|
}
|
||||||
|
.feedback-banner.success {
|
||||||
|
border-color: #6ee7b7;
|
||||||
|
background: #ecfdf5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-feedback {
|
/* Responsiveness */
|
||||||
margin: 0;
|
@media (max-width: 1024px) {
|
||||||
}
|
.hero-header {
|
||||||
|
|
||||||
:deep(.publish-table .ant-table-thead > tr > th) {
|
|
||||||
background: #f8fafc;
|
|
||||||
color: #475569;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: 600;
|
|
||||||
border-bottom: 1px solid #e2e8f0;
|
|
||||||
padding: 12px 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.publish-table .ant-table-tbody > tr > td) {
|
|
||||||
border-bottom: 1px solid #f1f5f9;
|
|
||||||
vertical-align: top;
|
|
||||||
background: #ffffff;
|
|
||||||
padding: 16px;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.publish-table .publish-row--pending > td) {
|
|
||||||
background: #fefce8;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.publish-table .ant-table-tbody > tr:hover > td) {
|
|
||||||
background: #f8fafc;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 980px) {
|
|
||||||
.table-toolbar,
|
|
||||||
.table-footer {
|
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: stretch;
|
gap: 24px;
|
||||||
}
|
}
|
||||||
|
.stats-strip {
|
||||||
.toolbar-search {
|
flex-wrap: wrap;
|
||||||
justify-content: stretch;
|
gap: 24px;
|
||||||
}
|
|
||||||
|
|
||||||
.search-input {
|
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user