From 848126203e06a4520a3052108ff10633f80b7669 Mon Sep 17 00:00:00 2001
From: chiguyong <chiguyong@beyondsoft.com>
Date: Fri, 19 Jun 2026 01:35:02 +0800
Subject: [PATCH] =?UTF-8?q?feat(chat):=20U3=20TeamPlanCard=20=E8=A7=86?=
 =?UTF-8?q?=E8=A7=89=E5=8D=87=E7=BA=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 增加蓝色顶条、Lead 头像、阶段时间线状态图标
- 增加底部进度条与当前阶段提示
- 使用 --radius-card、--shadow-card、--font-mono 等设计令牌
- Scene3 预览场景补充 Lead 示例数据
---
 .../chat/helpers/useMessageRenderer.ts        | 198 +++++++++++++
 .../components/chat/messages/TeamPlanCard.vue | 271 ++++++++++++++++++
 .../preview/scenes/Scene3TeamPlan.vue         |  93 ++++++
 3 files changed, 562 insertions(+)
 create mode 100644 src/agentkit/server/frontend/src/components/chat/helpers/useMessageRenderer.ts
 create mode 100644 src/agentkit/server/frontend/src/components/chat/messages/TeamPlanCard.vue
 create mode 100644 src/agentkit/server/frontend/src/components/preview/scenes/Scene3TeamPlan.vue

diff --git a/src/agentkit/server/frontend/src/components/chat/helpers/useMessageRenderer.ts b/src/agentkit/server/frontend/src/components/chat/helpers/useMessageRenderer.ts
new file mode 100644
index 0000000..c71d3be
--- /dev/null
+++ b/src/agentkit/server/frontend/src/components/chat/helpers/useMessageRenderer.ts
@@ -0,0 +1,198 @@
+import { computed, type Component } from 'vue'
+import type { IChatMessage } from '@/api/types'
+import UserBubble from '@/components/chat/messages/UserBubble.vue'
+import AssistantText from '@/components/chat/messages/AssistantText.vue'
+import TeamPlanCard from '@/components/chat/messages/TeamPlanCard.vue'
+import BoardBannerCard from '@/components/chat/messages/BoardBannerCard.vue'
+import BoardRoundCard from '@/components/chat/messages/BoardRoundCard.vue'
+import BoardConclusionCard from '@/components/chat/messages/BoardConclusionCard.vue'
+import ErrorCard from '@/components/chat/messages/ErrorCard.vue'
+
+export type MessageViewType =
+  | 'user'
+  | 'assistant'
+  | 'team_plan'
+  | 'board_banner'
+  | 'board_speech'
+  | 'board_summary'
+  | 'board_conclusion'
+  | 'milestone'
+  | 'error'
+
+export interface MessageShellMeta {
+  name: string
+  meta?: string
+  avatar?: string
+  color?: string
+}
+
+export interface MessageRenderSpec {
+  type: MessageViewType
+  shell: MessageShellMeta
+  component: Component
+  props: Record<string, unknown>
+}
+
+export function resolveMessageType(message: IChatMessage): MessageViewType {
+  if (message.role === 'user') return 'user'
+  if (message.status === 'error' || message.message_type === 'error') return 'error'
+
+  switch (message.message_type) {
+    case 'plan_update':
+      return 'team_plan'
+    case 'board_started':
+      return 'board_banner'
+    case 'board_speech':
+      return 'board_speech'
+    case 'board_summary':
+      return 'board_summary'
+    case 'board_conclusion':
+      return 'board_conclusion'
+    case 'milestone':
+      return 'milestone'
+    default:
+      return 'assistant'
+  }
+}
+
+function formatTime(timestamp: string): string {
+  return new Date(timestamp).toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+
+export function useMessageRenderer(message: IChatMessage) {
+  return computed<MessageRenderSpec>(() => {
+    const type = resolveMessageType(message)
+    const time = formatTime(message.timestamp)
+
+    switch (type) {
+      case 'user':
+        return {
+          type,
+          shell: { name: '用户', meta: time },
+          component: UserBubble,
+          props: { content: message.content || '' },
+        }
+
+      case 'team_plan': {
+        const phases = message.plan_phases ?? []
+        return {
+          type,
+          shell: {
+            name: message.expert_name || '专家团',
+            meta: time,
+            avatar: message.expert_avatar,
+            color: message.expert_color,
+          },
+          component: TeamPlanCard,
+          props: {
+            phases,
+            leadName: message.expert_name || 'Lead',
+            leadAvatar: message.expert_avatar,
+            leadColor: message.expert_color,
+          },
+        }
+      }
+
+      case 'board_banner': {
+        const data = message.board_started
+        const experts = data?.experts ?? []
+        return {
+          type,
+          shell: { name: '私董会', meta: time },
+          component: BoardBannerCard,
+          props: {
+            topic: data?.topic || message.content || '未命名主题',
+            experts,
+            maxRounds: data?.max_rounds ?? 5,
+            currentRound: message.board_round ?? 1,
+          },
+        }
+      }
+
+      case 'board_speech':
+        return {
+          type,
+          shell: {
+            name: message.expert_name || '专家',
+            meta: message.board_round ? `第 ${message.board_round} 轮${message.board_role === 'moderator' ? ' · 主持' : ''}` : time,
+            avatar: message.expert_avatar,
+            color: message.expert_color || '#a855f7',
+          },
+          component: BoardRoundCard,
+          props: {
+            name: message.expert_name || '专家',
+            avatar: message.expert_avatar || '',
+            color: message.expert_color || '#a855f7',
+            round: message.board_round,
+            role: message.board_role === 'moderator' ? 'moderator' : 'expert',
+            content: message.content || '',
+          },
+        }
+
+      case 'board_summary':
+        return {
+          type,
+          shell: {
+            name: message.expert_name || '主持人',
+            meta: message.board_round ? `第 ${message.board_round} 轮 · 小结` : time,
+            avatar: message.expert_avatar,
+            color: message.expert_color || '#a855f7',
+          },
+          component: BoardRoundCard,
+          props: {
+            name: message.expert_name || '主持人',
+            avatar: message.expert_avatar || '',
+            color: message.expert_color || '#a855f7',
+            round: message.board_round,
+            role: 'summary',
+            content: message.content || '',
+          },
+        }
+
+      case 'board_conclusion':
+        return {
+          type,
+          shell: { name: '主持人', meta: time },
+          component: BoardConclusionCard,
+          props: {
+            data: message.board_conclusion ?? {
+              summary: message.content || '',
+              decision_advice: '',
+              total_rounds: message.board_round ?? 0,
+              consensus_points: [],
+              dissent_points: [],
+            },
+          },
+        }
+
+      case 'error':
+        return {
+          type,
+          shell: { name: '系统', meta: time },
+          component: ErrorCard,
+          props: {
+            title: '请求失败',
+            detail: message.error_detail || message.content || '',
+          },
+        }
+
+      case 'milestone':
+      case 'assistant':
+      default:
+        return {
+          type,
+          shell: {
+            name: message.expert_name || 'AI Agent',
+            meta: time,
+            avatar: message.expert_avatar,
+            color: message.expert_color,
+          },
+          component: AssistantText,
+          props: { message },
+        }
+    }
+  })
+}
diff --git a/src/agentkit/server/frontend/src/components/chat/messages/TeamPlanCard.vue b/src/agentkit/server/frontend/src/components/chat/messages/TeamPlanCard.vue
new file mode 100644
index 0000000..96f34b7
--- /dev/null
+++ b/src/agentkit/server/frontend/src/components/chat/messages/TeamPlanCard.vue
@@ -0,0 +1,271 @@
+<template>
+  <div class="team-plan-card">
+    <div class="team-plan-card__bar" />
+    <div class="team-plan-card__header">
+      <div class="team-plan-card__lead">
+        <span
+          class="team-plan-card__lead-avatar"
+          :style="leadColor ? { background: leadColor } : undefined"
+        >
+          {{ leadAvatar }}
+        </span>
+        <span class="team-plan-card__label">
+          {{ leadName }}<span class="team-plan-card__label-suffix">· 专家团计划</span>
+        </span>
+      </div>
+      <span class="team-plan-card__count">{{ completedCount }}/{{ phases.length }} 阶段完成</span>
+    </div>
+
+    <div v-if="phases.length > 0" class="team-plan-card__body">
+      <div
+        v-for="phase in phases"
+        :key="phase.id"
+        class="team-plan-card__phase"
+        :class="`team-plan-card__phase--${phase.status}`"
+      >
+        <span class="team-plan-card__phase-dot" aria-hidden="true">
+          {{ statusIcon(phase.status) }}
+        </span>
+        <div class="team-plan-card__phase-info">
+          <span class="team-plan-card__phase-name" :title="phase.task_description || phase.name">
+            {{ phase.name }}
+          </span>
+          <span class="team-plan-card__phase-expert">{{ phase.assigned_expert }}</span>
+        </div>
+        <span class="team-plan-card__phase-status">{{ statusLabel(phase.status) }}</span>
+      </div>
+    </div>
+
+    <div class="team-plan-card__footer">
+      <div class="team-plan-card__progress">
+        <div
+          class="team-plan-card__progress-fill"
+          :style="{ width: `${progressPercent}%` }"
+        />
+      </div>
+      <span class="team-plan-card__progress-text">
+        当前: {{ currentPhaseName || '—' }} / {{ phases.length }} 阶段
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ITeamPlanPhase } from '@/api/types'
+
+interface Props {
+  phases: ITeamPlanPhase[]
+  leadName?: string
+  leadAvatar?: string
+  leadColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  leadName: 'Lead',
+  leadAvatar: '🧑‍💼',
+})
+
+const completedCount = computed(() => props.phases.filter((p) => p.status === 'completed').length)
+
+const progressPercent = computed(() => {
+  if (props.phases.length === 0) return 0
+  return Math.min((completedCount.value / props.phases.length) * 100, 100)
+})
+
+const currentPhaseName = computed(() => {
+  const running = props.phases.find((p) => p.status === 'in_progress')
+  if (running) return running.name
+  const pending = props.phases.find((p) => p.status === 'pending')
+  if (pending) return pending.name
+  return props.phases[props.phases.length - 1]?.name
+})
+
+function statusLabel(status: string): string {
+  const labels: Record<string, string> = {
+    pending: '待执行',
+    in_progress: '执行中',
+    completed: '已完成',
+    failed: '失败',
+  }
+  return labels[status] || status
+}
+
+function statusIcon(status: string): string {
+  const icons: Record<string, string> = {
+    pending: '○',
+    in_progress: '●',
+    completed: '✓',
+    failed: '✕',
+  }
+  return icons[status] || '○'
+}
+</script>
+
+<style scoped>
+.team-plan-card {
+  width: 100%;
+  background: var(--bg-primary);
+  border: 1px solid var(--accent-team-soft);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+}
+
+.team-plan-card__bar {
+  height: 4px;
+  background: var(--accent-team);
+}
+
+.team-plan-card__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.team-plan-card__lead {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.team-plan-card__lead-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: var(--radius-full);
+  font-size: 12px;
+  background: var(--accent-team-soft);
+}
+
+.team-plan-card__label {
+  font-size: var(--font-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--text-primary);
+}
+
+.team-plan-card__label-suffix {
+  margin-left: var(--space-1);
+  color: var(--text-tertiary);
+  font-weight: var(--font-weight-normal);
+}
+
+.team-plan-card__count {
+  font-size: var(--font-xs);
+  color: var(--text-tertiary);
+}
+
+.team-plan-card__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3) var(--space-4);
+}
+
+.team-plan-card__phase {
+  display: grid;
+  grid-template-columns: 20px 1fr 60px;
+  gap: var(--space-2);
+  align-items: center;
+  font-size: var(--font-sm);
+  color: var(--text-secondary);
+}
+
+.team-plan-card__phase-dot {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  font-size: 10px;
+  border-radius: var(--radius-full);
+  color: var(--text-tertiary);
+}
+
+.team-plan-card__phase--in_progress .team-plan-card__phase-dot {
+  color: var(--accent-team);
+}
+
+.team-plan-card__phase--completed .team-plan-card__phase-dot {
+  color: var(--color-success);
+}
+
+.team-plan-card__phase--failed .team-plan-card__phase-dot {
+  color: var(--color-error);
+}
+
+.team-plan-card__phase-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.team-plan-card__phase-name {
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.team-plan-card__phase-expert {
+  font-family: var(--font-mono);
+  font-size: var(--font-xs);
+  color: var(--text-tertiary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.team-plan-card__phase-status {
+  font-size: var(--font-xs);
+  color: var(--text-tertiary);
+  text-align: right;
+}
+
+.team-plan-card__phase--in_progress .team-plan-card__phase-status {
+  color: var(--accent-team);
+}
+
+.team-plan-card__phase--completed .team-plan-card__phase-status {
+  color: var(--color-success);
+}
+
+.team-plan-card__phase--failed .team-plan-card__phase-status {
+  color: var(--color-error);
+}
+
+.team-plan-card__footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-2) var(--space-4) var(--space-3);
+  border-top: 1px solid var(--border-color);
+}
+
+.team-plan-card__progress {
+  flex: 1;
+  height: 6px;
+  background: var(--bg-tertiary);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+.team-plan-card__progress-fill {
+  height: 100%;
+  background: var(--accent-team);
+  border-radius: var(--radius-full);
+  transition: width 0.3s ease;
+}
+
+.team-plan-card__progress-text {
+  font-size: var(--font-xs);
+  color: var(--text-tertiary);
+  white-space: nowrap;
+}
+</style>
diff --git a/src/agentkit/server/frontend/src/components/preview/scenes/Scene3TeamPlan.vue b/src/agentkit/server/frontend/src/components/preview/scenes/Scene3TeamPlan.vue
new file mode 100644
index 0000000..c3a6dbb
--- /dev/null
+++ b/src/agentkit/server/frontend/src/components/preview/scenes/Scene3TeamPlan.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="s3">
+    <div class="s3__messages">
+      <MessageShell role="user" name="用户" meta="10:40">
+        <UserBubble content="@team 帮我设计一个电商订单模块" />
+      </MessageShell>
+
+      <MessageShell role="assistant" name="AI Agent" meta="10:40">
+        <AssistantText :message="planIntroMessage" />
+        <TeamPlanCard
+          :phases="phases"
+          lead-name="tech_lead"
+          lead-avatar="T"
+          lead-color="#3b82f6"
+        />
+      </MessageShell>
+
+      <MessageShell role="assistant" name="tech_lead" meta="10:41" avatar="T" color="#3b82f6">
+        <AssistantText :message="expertMessage" />
+      </MessageShell>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { MessageShell, UserBubble, AssistantText, TeamPlanCard } from '@/components/chat/messages'
+import type { IChatMessage, ITeamPlanPhase } from '@/api/types'
+
+const planIntroMessage: IChatMessage = {
+  id: 's3-plan-intro',
+  role: 'assistant',
+  content: '已组建开发专家团队，正在分解任务：',
+  timestamp: new Date().toISOString(),
+  status: 'completed',
+}
+
+const phases: ITeamPlanPhase[] = [
+  {
+    id: 'p1',
+    name: '需求拆解与表设计',
+    assigned_expert: 'tech_lead',
+    status: 'completed',
+    depends_on: [],
+  },
+  {
+    id: 'p2',
+    name: '后端 API 实现',
+    assigned_expert: 'backend_engineer',
+    status: 'in_progress',
+    depends_on: ['p1'],
+  },
+  {
+    id: 'p3',
+    name: '前端订单页面',
+    assigned_expert: 'frontend_engineer',
+    status: 'pending',
+    depends_on: ['p2'],
+  },
+  {
+    id: 'p4',
+    name: '接口测试与 Code Review',
+    assigned_expert: 'qa_engineer',
+    status: 'pending',
+    depends_on: ['p3'],
+  },
+]
+
+const expertMessage: IChatMessage = {
+  id: 's3-expert',
+  role: 'assistant',
+  content: '我建议订单表至少包含：`order_id`、`user_id`、`status`、`total_amount`、`created_at`。同时引入状态机管理订单生命周期，避免直接修改状态字段。',
+  timestamp: new Date().toISOString(),
+  status: 'completed',
+}
+</script>
+
+<style scoped>
+.s3 {
+  max-width: var(--max-chat-width);
+  margin: 0 auto;
+  padding: 48px 0 24px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.s3__messages {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  flex: 1;
+}
+</style>