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

<script setup lang="ts">
import {
  AlertOutlined,
  ClockCircleOutlined,
  DesktopOutlined,
  LinkOutlined,
} from '@ant-design/icons-vue'
import { computed } from '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'
import type { RuntimeTask } from '../types'

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
}

const DOUBAO_CHALLENGE_DETAIL =
  '豆包账号触发人机验证，请在桌面客户端打开豆包完成验证码后再继续采集。'
const DOUBAO_CHALLENGE_PATTERN =
  /doubao_challenge_required|challenge_required|captcha_gate|risk_control|人机验证|人工验证|验证码|风控|安全验证/i

function isDoubaoPlatform(platform: string) {
  return platform.toLowerCase() === 'doubao'
}

function doubaoTaskChallengeKey(task: RuntimeTask) {
  return `${task.platform.toLowerCase()}::${task.accountId || task.accountName || 'unknown'}`
}

function doubaoAccountChallengeKey(account: {
  platform: string
  id: string
  displayName: string
  platformUid: string
}) {
  return `${account.platform.toLowerCase()}::${account.id || account.displayName || account.platformUid || 'unknown'}`
}

function isDoubaoChallengeTask(task: RuntimeTask) {
  if (!isDoubaoPlatform(task.platform)) {
    return false
  }

  return DOUBAO_CHALLENGE_PATTERN.test(`${task.summary || ''} ${task.title || ''}`)
}

function isDoubaoChallengeAccount(account: { platform: string; authState: string }) {
  return isDoubaoPlatform(account.platform) && account.authState === 'challenge_required'
}

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 issueItems = computed<RuntimeIssueItem[]>(() => {
  const doubaoChallengeTaskGroups = new Map<string, RuntimeTask[]>()

  for (const task of blockedTasks.value) {
    if (!isDoubaoChallengeTask(task)) {
      continue
    }

    const key = doubaoTaskChallengeKey(task)
    const group = doubaoChallengeTaskGroups.get(key)
    if (group) {
      group.push(task)
    } else {
      doubaoChallengeTaskGroups.set(key, [task])
    }
  }

  const doubaoChallengeAccountKeys = new Set(
    blockedAccounts.value
      .filter(isDoubaoChallengeAccount)
      .map((account) => doubaoAccountChallengeKey(account)),
  )
  const doubaoChallengeKeys = new Set([
    ...doubaoChallengeTaskGroups.keys(),
    ...doubaoChallengeAccountKeys,
  ])

  const taskIssues = blockedTasks.value
    .filter(
      (task) =>
        !isDoubaoPlatform(task.platform) || !doubaoChallengeKeys.has(doubaoTaskChallengeKey(task)),
    )
    .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 doubaoChallengeTaskIssues = Array.from(doubaoChallengeTaskGroups.entries())
    .filter(([key]) => !doubaoChallengeAccountKeys.has(key))
    .map(([key, challengeTasks]) => {
      const mergedTasks = blockedTasks.value.filter(
        (task) => isDoubaoPlatform(task.platform) && doubaoTaskChallengeKey(task) === key,
      )
      const representative = mergedTasks.reduce(
        (latest, task) => (task.updatedAt > latest.updatedAt ? task : latest),
        challengeTasks[0],
      )
      const metaParts = [
        `${representative.accountName || '豆包账号'} · ${translatePlatform(representative.platform)}`,
        mergedTasks.length > 1 ? `已合并 ${mergedTasks.length} 个失败任务` : '',
      ].filter(Boolean)

      return {
        id: `task-doubao-challenge-${key}`,
        kind: 'task' as const,
        title: '豆包需要人工验证',
        meta: metaParts.join(' · '),
        detail: DOUBAO_CHALLENGE_DETAIL,
        badgeLabel: '执行失败',
        badgeTone: 'danger' as const,
        at: Math.max(...mergedTasks.map((task) => task.updatedAt)),
      }
    })

  const accountIssues = blockedAccounts.value.map((account) => {
    const doubaoChallenge = isDoubaoChallengeAccount(account)

    return {
      id: `account-${account.id}`,
      kind: 'account' as const,
      title: doubaoChallenge ? '豆包需要人工验证' : account.displayName,
      meta: doubaoChallenge
        ? `${account.displayName || '豆包账号'} · ${translatePlatform(account.platform)}`
        : `${translatePlatform(account.platform)} · ${formatUid(account.platformUid)}`,
      detail: doubaoChallenge
        ? DOUBAO_CHALLENGE_DETAIL
        : account.authReason === 'risk_control'
          ? '平台触发风控，需要人工验证后恢复任务执行。'
          : '授权状态不可用，需要重新登录或确认账号状态。',
      badgeLabel: doubaoChallenge ? '执行失败' : blockedAccountLabel(account),
      badgeTone: healthTone(account.health) === 'warn' ? ('warn' as const) : ('danger' as const),
      at: account.lastVerifiedAt ?? account.lastSyncAt,
    }
  })

  return [...taskIssues, ...doubaoChallengeTaskIssues, ...accountIssues].sort(
    (left, right) => right.at - left.at,
  )
})
const issueBreakdown = computed(() => {
  const tasks = issueItems.value.filter((item) => item.kind === 'task').length
  const accounts = issueItems.value.filter((item) => item.kind === 'account').length

  return {
    tasks,
    accounts,
    total: tasks + accounts,
  }
})
</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>{{ issueBreakdown.total }}</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;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

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