feat(desktop-client/home): break down runtime issues by tasks and accounts

Split the home dashboard runtime panel into a combined issue feed that
lists failed/unknown tasks alongside blocked accounts, with per-kind
counts and per-row detail/badges so operators can triage both classes
of breakage from one place.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/desktop-client/src/renderer/views/HomeView.vue

@@ -4,7 +4,7 @@ import { DesktopOutlined, LinkOutlined, ClockCircleOutlined, AlertOutlined } fro
 
 import StatusBadge from "../components/StatusBadge.vue";
 import { useDesktopRuntime } from "../composables/useDesktopRuntime";
-import { formatClock, formatRelativeTime } from "../lib/formatters";
+import { formatRelativeTime } from "../lib/formatters";
 import { translateDesktopPlatform } from "../lib/media-catalog";
 import { healthTone } from "../lib/runtime-ui";
 
@@ -24,6 +24,32 @@ function blockedAccountLabel(account: { authState: string; authReason: string |
   }
 }
 
+function translateTaskStatus(status: string) {
+  const map: Record<string, string> = {
+    failed: "执行失败",
+    unknown: "结果未知",
+  };
+  return map[status?.toLowerCase()] || status;
+}
+
+function formatIssueDetail(issue: RuntimeIssueItem) {
+  if (issue.detail) {
+    return issue.detail;
+  }
+  return issue.kind === "task" ? "任务执行结果需要人工确认。" : "账号授权状态需要重新处理。";
+}
+
+type RuntimeIssueItem = {
+  id: string;
+  kind: "task" | "account";
+  title: string;
+  meta: string;
+  detail: string;
+  badgeLabel: string;
+  badgeTone: "danger" | "warn";
+  at: number;
+};
+
 function translateEventTitle(title: string) {
   const map: Record<string, string> = {
     "Accounts Synced": "本地账号同步",
@@ -70,7 +96,7 @@ function formatUid(uid: string) {
   return (uid || "").replace(/^(?:platform:)+/gi, "");
 }
 
-const { snapshot, loading, refresh } = useDesktopRuntime();
+const { snapshot } = useDesktopRuntime();
 
 const tasks = computed(() => snapshot.value?.tasks ?? []);
 const accounts = computed(() => snapshot.value?.accounts ?? []);
@@ -79,6 +105,41 @@ const activity = computed(() => snapshot.value?.activity ?? []);
 const blockedAccounts = computed(() =>
   accounts.value.filter((item) => ["expired", "revoked", "challenge_required"].includes(item.authState)),
 );
+const blockedTasks = computed(() =>
+  tasks.value.filter((item) => ["failed", "unknown"].includes(item.status)),
+);
+const issueBreakdown = computed(() => ({
+  tasks: blockedTasks.value.length,
+  accounts: blockedAccounts.value.length,
+  total: blockedTasks.value.length + blockedAccounts.value.length,
+}));
+const issueItems = computed<RuntimeIssueItem[]>(() => {
+  const taskIssues = blockedTasks.value.map((task) => ({
+    id: `task-${task.id}`,
+    kind: "task" as const,
+    title: task.title || task.jobId,
+    meta: `${task.accountName} · ${translatePlatform(task.platform)}`,
+    detail: task.summary,
+    badgeLabel: translateTaskStatus(task.status),
+    badgeTone: "danger" as const,
+    at: task.updatedAt,
+  }));
+  const accountIssues = blockedAccounts.value.map((account) => ({
+    id: `account-${account.id}`,
+    kind: "account" as const,
+    title: account.displayName,
+    meta: `${translatePlatform(account.platform)} · ${formatUid(account.platformUid)}`,
+    detail:
+      account.authReason === "risk_control"
+        ? "平台触发风控，需要人工验证后恢复任务执行。"
+        : "授权状态不可用，需要重新登录或确认账号状态。",
+    badgeLabel: blockedAccountLabel(account),
+    badgeTone: healthTone(account.health) === "warn" ? "warn" as const : "danger" as const,
+    at: account.lastVerifiedAt ?? account.lastSyncAt,
+  }));
+
+  return [...taskIssues, ...accountIssues].sort((left, right) => right.at - left.at);
+});
 </script>
 
 <template>
@@ -124,7 +185,7 @@ const blockedAccounts = computed(() =>
         </div>
         <div class="metric-body">
           <strong>{{ snapshot?.summary.issuesOpen ?? 0 }}</strong>
-          <p>执行失败或需人工排查的阻断事项</p>
+          <p>任务异常 {{ issueBreakdown.tasks }} / 账号阻断 {{ issueBreakdown.accounts }}</p>
         </div>
       </article>
     </div>
@@ -133,24 +194,33 @@ const blockedAccounts = computed(() =>
       <article class="modern-card panel-card">
         <div class="card-header">
            <div class="header-text">
-              <h3>账号健康看板</h3>
-              <p>这里只展示已经确认过期、被风控或需要人工处理的账号。</p>
+              <h3>异常干预明细</h3>
+              <p>与顶部数字同源：失败或未知任务 + 需要人工处理的账号。</p>
            </div>
         </div>
-        <div v-if="blockedAccounts.length > 0" class="info-list">
-          <div v-for="account in blockedAccounts" :key="account.id" class="info-row record-row">
+        <div v-if="issueItems.length > 0" class="issue-summary-bar">
+          <span>共 {{ issueBreakdown.total }} 条</span>
+          <span>任务异常 {{ issueBreakdown.tasks }}</span>
+          <span>账号阻断 {{ issueBreakdown.accounts }}</span>
+        </div>
+        <div v-if="issueItems.length > 0" class="info-list">
+          <div v-for="issue in issueItems" :key="issue.id" class="info-row record-row issue-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 class="issue-title-line">
+                <span :class="['issue-kind', issue.kind]">{{ issue.kind === "task" ? "任务" : "账号" }}</span>
+                <span class="title">{{ issue.title }}</span>
+              </div>
+              <span class="subtitle">{{ issue.meta }}</span>
+              <p class="issue-detail">{{ formatIssueDetail(issue) }}</p>
             </div>
             <div class="info-stack" style="align-items: flex-end;">
-              <StatusBadge :tone="healthTone(account.health)" :label="blockedAccountLabel(account)" />
-              <span class="subtitle" style="margin-top: 6px;">{{ formatRelativeTime(account.lastVerifiedAt ?? account.lastSyncAt) }}</span>
+              <StatusBadge :tone="issue.badgeTone" :label="issue.badgeLabel" />
+              <span class="subtitle" style="margin-top: 6px;">{{ formatRelativeTime(issue.at) }}</span>
             </div>
           </div>
         </div>
         <div v-else class="empty-state">
-           <p>当前没有需要人工处理的阻断账号。</p>
+           <p>当前没有需要人工介入的异常。</p>
         </div>
       </article>
 
@@ -294,6 +364,26 @@ const blockedAccounts = computed(() =>
   line-height: 1.5;
 }
 
+.issue-summary-bar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 16px;
+}
+
+.issue-summary-bar span {
+  display: inline-flex;
+  align-items: center;
+  height: 28px;
+  padding: 0 10px;
+  border-radius: 999px;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  color: #475569;
+  font-size: 12px;
+  font-weight: 700;
+}
+
 /* List Styling */
 .info-list, .timeline-list {
   display: flex;
@@ -323,6 +413,63 @@ const blockedAccounts = computed(() =>
   align-items: center;
 }
 
+.issue-row {
+  align-items: flex-start;
+  gap: 18px;
+}
+
+.issue-row > .info-stack:first-child {
+  min-width: 0;
+  flex: 1;
+}
+
+.issue-row > .info-stack:last-child {
+  flex-shrink: 0;
+}
+
+.issue-title-line {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.issue-title-line .title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.issue-kind {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 20px;
+  min-width: 36px;
+  padding: 0 8px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 800;
+}
+
+.issue-kind.task {
+  color: #b91c1c;
+  background: #fee2e2;
+}
+
+.issue-kind.account {
+  color: #b45309;
+  background: #fef3c7;
+}
+
+.issue-detail {
+  margin: 6px 0 0;
+  color: #475569;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
 .timeline-item {
   display: flex;
   flex-direction: column;
@@ -372,10 +519,6 @@ const blockedAccounts = computed(() =>
   font-size: 13px;
 }
 
-.mono-text {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
-}
-
 .empty-state {
   padding: 40px;
   background: #f8fafc;
@@ -398,4 +541,14 @@ const blockedAccounts = computed(() =>
     grid-template-columns: 1fr;
   }
 }
+
+@media (max-width: 720px) {
+  .issue-row {
+    flex-direction: column;
+  }
+
+  .issue-row > .info-stack:last-child {
+    align-items: flex-start !important;
+  }
+}
 </style>