From 07881a66d06528d16a86619d87c3e218101498f1 Mon Sep 17 00:00:00 2001
From: liangxu <liangxu0920@qq.com>
Date: Mon, 20 Apr 2026 16:04:39 +0800
Subject: [PATCH] style(desktop): refresh Home and Publish views with modern
 card layout
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/renderer/views/HomeView.vue           | 557 ++++++++------
 .../renderer/views/PublishManagementView.vue  | 682 +++++++++---------
 2 files changed, 685 insertions(+), 554 deletions(-)

diff --git a/apps/desktop-client/src/renderer/views/HomeView.vue b/apps/desktop-client/src/renderer/views/HomeView.vue
index d3838ad..951cf6e 100644
--- a/apps/desktop-client/src/renderer/views/HomeView.vue
+++ b/apps/desktop-client/src/renderer/views/HomeView.vue
@@ -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>
diff --git a/apps/desktop-client/src/renderer/views/PublishManagementView.vue b/apps/desktop-client/src/renderer/views/PublishManagementView.vue
index b27e372..c37b2ca 100644
--- a/apps/desktop-client/src/renderer/views/PublishManagementView.vue
+++ b/apps/desktop-client/src/renderer/views/PublishManagementView.vue
@@ -4,7 +4,6 @@ import type { DesktopPublishTaskListResponse, DesktopTaskInfo, JsonValue } from
 import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 
 import StatusBadge from "../components/StatusBadge.vue";
-import SurfaceCard from "../components/SurfaceCard.vue";
 import { useDesktopRuntime } from "../composables/useDesktopRuntime";
 import { formatDateTime, formatRelativeTime, titleCaseToken } from "../lib/formatters";
 
@@ -284,258 +283,396 @@ const tableColumns = [
 </script>
 
 <template>
-  <section class="page">
-    <header class="hero">
-      <div class="hero-copy">
-        <p class="eyebrow">PUBLISH EXECUTION DESK</p>
-        <h2>发布管理</h2>
-        <p class="hero-summary">
-          统一用一个 table 查看当前设备负责的待发布队列与已发送历史。页面固定每页 10 条，待发布任务会始终排在最前面，只有当前页的
-          PublishTasks 展示完后，才会继续补已发送历史记录。
-        </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>
+  <section class="page-container">
+    <section class="hero-card">
+      <div class="hero-header">
+        <div class="hero-title">
+          <p class="eyebrow">PUBLISH EXECUTION DESK</p>
+          <h2>发布管理</h2>
+          <p class="summary">
+            统一用一个 table 查看当前设备负责的待发布队列与已发送历史。页面固定每页 10 条，待发布任务会始终排在最前面，只有当前页的 PublishTasks 展示完后，才会继续补已发送历史记录。
+          </p>
         </div>
-
-        <div class="toolbar-search">
-          <a-input
-            v-model:value="searchTitle"
-            allow-clear
-            placeholder="搜索文章标题"
-            class="search-input"
-            @pressEnter="applySearch"
-          >
-            <template #prefix>
-              <SearchOutlined style="color: #bfbfbf" />
-            </template>
-          </a-input>
-          <a-button type="primary" @click="applySearch">搜索</a-button>
+        <div class="hero-actions">
+          <a-button type="primary" ghost class="modern-btn" :loading="loading" @click="refreshTasks()">
+            <template #icon><ReloadOutlined /></template>
+            刷新状态
+          </a-button>
         </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
-        row-key="id"
-        class="modern-table publish-table"
-        :columns="tableColumns"
-        :data-source="publishTasks"
-        :pagination="false"
-        :loading="loading"
-        :row-class-name="rowClassName"
-      >
-        <template #emptyText>
-          <a-empty description="暂无匹配的发布任务" />
-        </template>
+    <!-- Feedback Banners -->
+    <div v-if="actionMessage" class="feedback-banner success"><div class="success-text">{{ actionMessage }}</div></div>
+    <div v-if="error" class="feedback-banner error"><div class="error-text">{{ error }}</div></div>
+    <div v-if="actionError" class="feedback-banner error"><div class="error-text">{{ actionError }}</div></div>
 
-        <template #bodyCell="{ column, record }">
-          <template v-if="column.key === 'title'">
-            <div class="cell-primary-secondary">
-              <div class="info-stack">
-                <span class="title">{{ record.title }}</span>
-                <span class="subtitle">
-                  <template v-if="record.articleId">文章 #{{ record.articleId }} · </template>
-                  {{ isPendingStatus(record.status) ? "待发布队列" : "已发送历史" }}
-                </span>
-              </div>
-            </div>
+    <!-- Table Details Section -->
+    <section class="content-section">
+      <div class="hero-card" style="padding-bottom: 0;">
+        <div class="hero-header" style="padding: 24px 32px 16px; border-bottom: 1px solid #eef2f6; align-items: center;">
+          <div style="flex: 1;">
+            <h3 class="section-title">待发布与已发送记录</h3>
+            <p class="section-desc" style="margin-top: 4px;">支持按文章标题搜索，分页与总数以服务端返回的 PublishTasks 结果为准。</p>
+          </div>
+          
+          <!-- Filters ToolBar -->
+          <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 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)" />
-              <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 />
+          <template #bodyCell="{ column, record }">
+            <template v-if="column.key === 'title'">
+              <div class="cell-primary-secondary">
+                <div class="info-stack">
+                  <span class="title">{{ record.title }}</span>
+                  <span class="subtitle">
+                    <template v-if="record.articleId">文章 #{{ record.articleId }} · </template>
+                    {{ isPendingStatus(record.status) ? "待发布队列" : "已发送历史" }}
+                  </span>
                 </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>
-      </a-table>
+        </a-table>
 
-      <div class="table-footer">
-        <p class="table-note">
-          当前页固定展示 10 条；待发布任务会先占满前面的页码，待 PublishTasks 展示完后才继续显示已发送历史记录。
-        </p>
-        <a-pagination
-          :current="currentPage"
-          :page-size="PAGE_SIZE"
-          :total="totalCount"
-          :show-size-changer="false"
-          @change="handlePageChange"
-        />
+        <div class="table-footer">
+          <a-pagination
+            :current="currentPage"
+            :page-size="PAGE_SIZE"
+            :total="totalCount"
+            :show-size-changer="false"
+            @change="handlePageChange"
+          />
+        </div>
       </div>
-    </SurfaceCard>
-
-    <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>
 
 <style scoped>
-.page {
-  display: grid;
-  gap: 18px;
+.page-container {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding-bottom: 40px;
+  max-width: 1400px;
 }
 
-.hero-copy {
-  padding: 28px;
-  border-radius: 12px;
-  border: 1px solid #e2e8f0;
-  background: linear-gradient(135deg, #ffffff, #f8fafc);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
+/* Hero Section */
+.hero-card {
+  background: #ffffff;
+  border-radius: 20px;
+  border: 1px solid #eef2f6;
+  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-summary,
-h2 {
-  margin: 0;
+.hero-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 36px 40px;
 }
 
 .eyebrow {
-  color: #8c8c8c;
-  font-size: 11px;
+  margin: 0 0 12px;
+  color: #64748b;
+  font-size: 13px;
+  font-weight: 700;
   letter-spacing: 0.1em;
   text-transform: uppercase;
 }
 
-h2 {
-  margin-top: 8px;
-  font-size: 24px;
-  font-weight: 600;
-  color: #1a1a1a;
-  line-height: 1.4;
+.hero-title h2 {
+  margin: 0;
+  font-size: 32px;
+  font-weight: 800;
+  color: #0f172a;
+  letter-spacing: -0.02em;
 }
 
-.hero-summary {
-  margin-top: 12px;
-  max-width: 860px;
-  color: #8c8c8c;
+.summary {
+  margin: 16px 0 0;
+  max-width: 800px;
+  color: #475569;
   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;
+  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;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-top: 18px;
-  margin-bottom: 16px;
+  flex-direction: column;
 }
-
-.toolbar-stats,
-.toolbar-search,
-.status-cell {
+.info-stack {
   display: flex;
-  align-items: center;
-  gap: 10px;
+  flex-direction: column;
+  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 {
   display: flex;
-  align-items: center;
   justify-content: flex-end;
   gap: 8px;
 }
 
 .icon-action-btn {
   color: #64748b;
-  border-radius: 6px;
+  border-radius: 8px;
   transition: all 0.2s ease;
-  background: transparent;
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border: none;
+  border: 1px solid transparent;
 }
 
 .icon-action-btn:hover {
   background: #f1f5f9;
   color: #0ea5e9;
+  border-color: #e2e8f0;
 }
 
 .action-placeholder-icon {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -543,149 +680,44 @@ h2 {
   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 {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 16px;
-  margin-top: 16px;
+  padding: 16px 32px 32px;
+  border-top: 1px solid #eef2f6;
+  background: transparent;
 }
 
 .table-note {
-  color: #8c8c8c;
-  font-size: 12px;
-  line-height: 1.6;
-}
-
-.success-text {
-  color: #15803d;
+  color: #94a3b8;
   font-size: 13px;
 }
 
-.error-text {
-  color: #b42318;
-  font-size: 13px;
+.feedback-banner {
+  padding: 16px 20px;
+  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 {
-  margin: 0;
-}
-
-: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 {
+/* Responsiveness */
+@media (max-width: 1024px) {
+  .hero-header {
     flex-direction: column;
-    align-items: stretch;
+    gap: 24px;
   }
-
-  .toolbar-search {
-    justify-content: stretch;
-  }
-
-  .search-input {
-    width: 100%;
+  .stats-strip {
+    flex-wrap: wrap;
+    gap: 24px;
   }
 }
 </style>