feat(desktop): implement workspace foundation + desktop-client skeleton
Plan 0 (workspaces): add workspaces + workspace_memberships schema, extend JWT/Actor/claims with primary_workspace_id, seed default workspace per tenant, thread workspace_id through tenant monitoring quota. Plan A (desktop skeleton): new Electron app (apps/desktop-client) with main/ preload/renderer, shared Vue component package (packages/ui-shared), and server surface — desktop client registration + token rotation + heartbeat, SSE task event stream, desktop accounts/tasks/content handlers, publish job endpoint, and supporting repositories, services, sqlc queries, and migrations. Hard cutover per plan: remove browser-extension monitoring callback endpoints, stub legacy media API in admin-web, and delete monitoring_callback_handler.go.
This commit is contained in:
@@ -0,0 +1,350 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user