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

<script setup lang="ts">
import { computed, ref } from "vue";

import StatusBadge from "../components/StatusBadge.vue";
import SurfaceCard from "../components/SurfaceCard.vue";
import { useDesktopRuntime } from "../composables/useDesktopRuntime";
import { formatRelativeTime, titleCaseToken } from "../lib/formatters";
import { taskTone } from "../lib/runtime-ui";

const { snapshot, refresh } = useDesktopRuntime();
const actionPendingTaskId = ref<string | null>(null);
const actionError = ref<string | null>(null);

async function openReview(taskId: string) {
  actionPendingTaskId.value = taskId;
  actionError.value = null;
  try {
    await window.desktopBridge.app.openTaskReview(taskId);
  } catch (error) {
    actionError.value = error instanceof Error ? error.message : "打开审核页失败";
  } finally {
    actionPendingTaskId.value = null;
  }
}

async function resolveParkedTask(taskId: string, status: "succeeded" | "failed") {
  actionPendingTaskId.value = taskId;
  actionError.value = null;
  try {
    await window.desktopBridge.app.resolveParkedTask(taskId, status);
    await refresh();
  } catch (error) {
    actionError.value = error instanceof Error ? error.message : "回写审核结果失败";
  } finally {
    actionPendingTaskId.value = null;
  }
}

const columns = computed(() => {
  const tasks = snapshot.value?.tasks ?? [];
  return [
    {
      key: "queued",
      title: "Queued",
      description: "已经落库，等待 RabbitMQ 唤醒或客户端主动 lease。",
      items: tasks.filter((item) => item.status === "queued"),
    },
    {
      key: "in_progress",
      title: "In Progress",
      description: "当前被 client 持有活动租约，结果回写必须带 lease_token。",
      items: tasks.filter((item) => item.status === "in_progress"),
    },
    {
      key: "waiting_user",
      title: "Waiting User",
      description: "已释放 lease，不自动迁移，只允许原 target_client 恢复。",
      items: tasks.filter((item) => item.status === "waiting_user"),
    },
    {
      key: "exception",
      title: "Fallback / Terminal",
      description: "unknown、failed、succeeded 等终态或补偿态。",
      items: tasks.filter((item) => !["queued", "in_progress", "waiting_user"].includes(item.status)),
    },
  ];
});
</script>

<template>
  <section class="page">
    <header class="hero">
      <div class="hero-copy">
        <p class="eyebrow">WORKFLOW CENTER</p>
        <h2>任务调度中心</h2>
        <p class="hero-summary">
          基于 Lease-based 的可靠端云协议泳道。全局监控本地客户端在 MQ 下发、本地锁抢占、及人工介入补偿各个流转阶段的阻塞情况。
        </p>
      </div>
    </header>

    <div class="lane-grid">
      <SurfaceCard
        v-for="column in columns"
        :key="column.key"
        eyebrow="Task Lane"
        :title="column.title"
        :description="column.description"
      >
        <div class="lane-stack">
          <article v-for="task in column.items" :key="task.id" class="task-card">
            <div class="task-head">
              <div>
                <strong>{{ task.title }}</strong>
                <p>{{ task.accountName }} · {{ titleCaseToken(task.platform) }}</p>
              </div>
              <StatusBadge :tone="taskTone(task.status)" :label="task.status" />
            </div>

            <div class="task-flags">
              <StatusBadge tone="brand" :label="task.routing" subtle />
              <StatusBadge tone="info" :label="task.kind" subtle />
              <StatusBadge
                :tone="task.mode === 'manual' ? 'warn' : 'success'"
                :label="task.mode"
                subtle
              />
            </div>

            <p class="task-summary">{{ task.summary }}</p>

            <div v-if="task.status === 'waiting_user'" class="task-actions">
              <button
                type="button"
                class="action-button secondary"
                :disabled="actionPendingTaskId === task.id"
                @click="openReview(task.id)"
              >
                打开审核页
              </button>
              <button
                type="button"
                class="action-button success"
                :disabled="actionPendingTaskId === task.id"
                @click="resolveParkedTask(task.id, 'succeeded')"
              >
                标记已发布
              </button>
              <button
                type="button"
                class="action-button danger"
                :disabled="actionPendingTaskId === task.id"
                @click="resolveParkedTask(task.id, 'failed')"
              >
                标记失败
              </button>
            </div>

            <footer class="task-footer">
              <span>
                {{
                  task.leaseExpiresAt
                    ? `lease ${formatRelativeTime(task.leaseExpiresAt)}`
                    : "lease released"
                }}
              </span>
              <small>{{ formatRelativeTime(task.updatedAt) }}</small>
            </footer>
          </article>
          <p v-if="column.items.length === 0" class="empty-text">当前泳道为空。</p>
        </div>
        <p v-if="actionError" class="error-text">{{ actionError }}</p>
      </SurfaceCard>
    </div>
  </section>
</template>

<style scoped>
.page,
.lane-grid,
.lane-stack {
  display: grid;
  gap: 18px;
}

.hero {
  display: block;
}

.hero-copy {
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e6edf5;
  background: #ffffff;
}

.eyebrow,
.hero-summary,
h2 {
  margin: 0;
}

.eyebrow {
  color: #8c8c8c;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

h2 {
  margin-top: 8px;
  font-size: 24px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
}

.hero-summary {
  margin-top: 12px;
  max-width: 800px;
  color: #8c8c8c;
  line-height: 1.6;
  font-size: 13px;
}

.lane-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.task-card {
  padding: 16px;
  border-radius: 8px;
  border: 1px solid #e6edf5;
  background: #fafafb;
  transition: all 0.2s;
}

.task-card:hover {
  background: #ffffff;
  border-color: #91caff;
}

.task-head,
.task-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.task-head strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

.task-head p,
.task-summary {
  margin: 6px 0 0;
  color: #8c8c8c;
  line-height: 1.6;
  font-size: 13px;
}

.task-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.task-summary {
  margin-top: 14px;
}

.task-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.action-button {
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.2s;
}

.action-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.action-button.secondary {
  border-color: #d9d9d9;
  color: #595959;
}
.action-button.secondary:hover:not(:disabled) {
  border-color: #1677ff;
  color: #1677ff;
}

.action-button.success {
  border-color: #52c41a;
  color: #52c41a;
}
.action-button.success:hover:not(:disabled) {
  background: #f6ffed;
}

.action-button.danger {
  border-color: #ff4d4f;
  color: #ff4d4f;
}
.action-button.danger:hover:not(:disabled) {
  background: #fff2f0;
}

.task-footer {
  margin-top: 16px;
  color: #8c8c8c;
  font-size: 12px;
}

.empty-text {
  margin: 0;
  color: #8c8c8c;
  font-size: 13px;
}

.error-text {
  margin: 8px 0 0;
  color: #b91c1c;
}

html[data-theme="dark"] .task-card {
  background: rgba(255, 255, 255, 0.03);
}

html[data-theme="dark"] .action-button.secondary {
  background: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .action-button.success {
  color: #6ee7b7;
}

html[data-theme="dark"] .action-button.danger {
  color: #fca5a5;
}

@media (max-width: 1120px) {
  .hero,
  .lane-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .task-head,
  .task-footer {
    flex-direction: column;
  }
}
</style>