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

<script setup lang="ts">
import { computed } from "vue";
import { DesktopOutlined, LinkOutlined, ClockCircleOutlined, AlertOutlined } from "@ant-design/icons-vue";

import StatusBadge from "../components/StatusBadge.vue";
import { useDesktopRuntime } from "../composables/useDesktopRuntime";
import { formatRelativeTime } from "../lib/formatters";
import { translateDesktopPlatform } from "../lib/media-catalog";
import { healthTone } from "../lib/runtime-ui";

function translatePlatform(platform: string) {
  return translateDesktopPlatform(platform);
}

function blockedAccountLabel(account: { authState: string; authReason: string | null }) {
  switch (account.authState) {
    case "challenge_required":
      return account.authReason === "risk_control" ? "触发风控" : "待验证";
    case "revoked":
      return "已停用";
    case "expired":
    default:
      return "已过期";
  }
}

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": "本地账号同步",
    "Heartbeat Healthy": "心跳连接正常",
    "Desktop Stream Connected": "单点事件流已连接",
    "Desktop Runtime Started": "调度节点已启动",
    "Desktop Runtime Armed": "任务消费端已就绪",
    "Desktop Stream Reconnecting": "单点事件流重连中",
    "Desktop Stream Backoff": "单点事件流退避等待",
    "Heartbeat Failed": "心跳连接失败",
    "Account Sync Failed": "账号同步失败",
    "Account Unbound": "账号已解绑",
    "Specific Lease Missed": "指定任务领取失败",
    "Pull Fallback Failed": "兜底拉取失败",
    "Task Leased": "任务已领取",
    "Task Completed As Failed": "任务执行失败",
    "Task Completed As Unknown": "任务执行结果待确认",
    "Task Succeeded": "任务执行成功",
    "Task Failed": "任务执行失败",
    "Lease Extend Failed": "租约续期失败",
    "Desktop Client Token Expired": "客户端令牌已过期",
  };
  return map[title] || title;
}

function translateEventDetail(detail: string) {
  const exactMap: Record<string, string> = {
    "已启动 SSE、heartbeat 和 pull fallback。": "已启动 SSE、心跳上报和兜底拉取。",
    "client heartbeat 已写回服务端。": "客户端心跳已回写到服务端。",
  };

  return (exactMap[detail] || detail)
    .replace(/\brouting=rabbitmq-primary\b/gi, "路由：主消息队列通道")
    .replace(/\brouting=db-recovery\b/gi, "路由：数据库兜底拉取")
    .replace(/\bdesktop client\b/gi, "桌面客户端")
    .replace(/\bclient heartbeat\b/gi, "客户端心跳")
    .replace(/\bpull fallback\b/gi, "兜底拉取")
    .replace(/\bheartbeat\b/gi, "心跳上报")
    .replace(/\bClient\b/g, "客户端")
    .replace(/\bunknown_error\b/gi, "未知错误");
}

function formatUid(uid: string) {
  return (uid || "").replace(/^(?:platform:)+/gi, "");
}

const { snapshot } = useDesktopRuntime();

const tasks = computed(() => snapshot.value?.tasks ?? []);
const accounts = computed(() => snapshot.value?.accounts ?? []);
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>
  <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>

      <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>任务异常 {{ issueBreakdown.tasks }} / 账号阻断 {{ issueBreakdown.accounts }}</p>
        </div>
      </article>
    </div>

    <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="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">
              <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="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>
        </div>
      </article>

      <article class="modern-card panel-card">
        <div class="card-header">
           <div class="header-text">
              <h3>最近事件</h3>
              <p>系统底层状态流转的历史快照，主要用作诊断上下文。</p>
           </div>
        </div>
        <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>
  </section>
</template>

<style scoped>
.page-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 40px;
  max-width: 1400px;
}

/* Metrics Top Grid */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 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;
}

.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;
  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;
}

.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;
  gap: 8px;
}

.timeline-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.timeline-body p {
  margin: 0 0 0 18px;
  font-size: 13px;
  color: #475569;
  line-height: 1.6;
}

.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; }

/* 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;
}

.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 {
    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>