= {
+ red: "text-red-600",
+ amber: "text-amber-600",
+ green: "text-emerald-600",
+ blue: "text-sky-600",
+ slate: "text-slate-400 dark:text-[var(--dash-text-dim)]",
+};
+
+// ── 主组件（有真实数据走真实渲染，否则回退静态占位） ─────────────────────────────
+
+export function EnvironmentDetail({ data }: { data?: EnvData | null }) {
+ return data ? : ;
+}
+
+function EnvPlaceholder() {
+ return (
+
+ {/* 1. 顶部 5 个环境指数卡 */}
+
+ {KPIS.map((k) => {
+ const TrendIco = TREND_ICON[k.trend];
+ return (
+
+
+
+
+
+ {k.label}
+
+
+ {k.value}
+
+
+ 较昨日
+
+
+ {k.delta}
+
+
+
+ );
+ })}
+
+
+ {/* 2. 信息环境（5 栏） */}
+
信息环境
+
+ {INFO_ENV.map((f) => (
+
+ ))}
+
+
+ {/* 3. 人文环境（4 栏） */}
+
人文环境
+
+ {HUMAN_ENV.map((f) => (
+
+ ))}
+
+
+ {/* 4. 环境综合研判 + 信息来源与参考 */}
+
+
+
+
+ {REVIEW.map((r, i) => (
+ -
+
+ {i + 1}
+
+ {r}
+
+ ))}
+
+
+
+
+
+
+
+ {SOURCES.map((s) => (
+
+ | {s.name} |
+ {s.type} |
+
+ {s.trust}
+ |
+ {s.updated} |
+
+ ))}
+
+
+
+
+
+ {field.rows.map((r) => (
+
+
- {r.label}
+ - {r.value}
+
+ ))}
+
+
+
+ {children}
+
+ );
+}
+
+// ── 真实数据渲染 ──────────────────────────────────────────────────────────────
+function EnvReal({ data }: { data: EnvData }) {
+ return (
+
+ {data.info.length > 0 && (
+ <>
+
信息环境
+
+ {data.info.map((s, i) => (
+
+ ))}
+
+
+ )}
+ {data.human.length > 0 && (
+ <>
+
人文环境
+
+ {data.human.map((s, i) => (
+
+ ))}
+
+
+ )}
+
+ {section.paragraphs.map((p, i) => (
+ -
+
+ {p}
+
+ ))}
+
+
+ );
+}
diff --git a/frontend-web/src/roundtable-planning/dashboard-agent/Judgement.tsx b/frontend-web/src/roundtable-planning/dashboard-agent/Judgement.tsx
new file mode 100644
index 00000000..0642bc62
--- /dev/null
+++ b/frontend-web/src/roundtable-planning/dashboard-agent/Judgement.tsx
@@ -0,0 +1,360 @@
+/**
+ * 「大屏绘制智能体」情况判断页 —— 敌我优劣 / 条件限制 / 风险应对 / 综合研判
+ * （按设计图 dp-5.png 一比一实现）。
+ *
+ * **dashboard-agent 独占**：作为 DashboardApp `pages` 插槽里「情况判断」Tab 的内容，
+ * 不影响多智能体会商（Step3）大屏多页的样式。当前为「静态页面」，文案为占位内容，
+ * 动态数据后续接入。版式包含：
+ * 1. 敌我优劣势分析（敌方优势/劣势 + 我方优势/劣势 四张要点卡）
+ * 2. 条件与限制（资源/法理/政治/时间 四张约束键值卡）
+ * 3. 风险与应对（风险表）+ 判断结论（综合研判）
+ */
+import { Swords, ShieldX, ShieldCheck, ShieldAlert, Package, Scale, Landmark, Clock, AlertTriangle, Gavel, type LucideIcon } from "lucide-react";
+
+import { Card, CardTitle, FooterNote, Table, Td, Tag, Val, NoData, type Tone } from "@/roundtable-planning/dashboard-agent/ui";
+import type { JudgeData } from "@/roundtable-planning/dashboard-agent/sq-report";
+
+// ── 占位数据 ──────────────────────────────────────────────────────────────────
+
+interface BulletCardData {
+ icon: LucideIcon;
+ title: string;
+ items: string[];
+}
+const SWOT: BulletCardData[] = [
+ {
+ icon: Swords,
+ title: "敌方优势",
+ items: [
+ "火力密度大，远程打击能力强",
+ "信息系统较完善，情报获取渠道多",
+ "机动能力强，可快速集结兵力",
+ "体系作战能力较强，协同较成熟",
+ ],
+ },
+ {
+ icon: ShieldX,
+ title: "敌方劣势",
+ items: [
+ "地形适应性差，山地作战能力不足",
+ "部队协同较弱，指挥链路较长",
+ "兵力部署分散，防御纵深不足",
+ "后勤补给线长，维护保障压力大",
+ ],
+ },
+ {
+ icon: ShieldCheck,
+ title: "我方优势",
+ items: [
+ "占据有利地形，防御体系完备",
+ "群众基础好，保障支援能力强",
+ "部队士气高昂，战斗意志坚定",
+ "熟悉地形地貌，机动灵活",
+ ],
+ },
+ {
+ icon: ShieldAlert,
+ title: "我方劣势",
+ items: [
+ "远程火力相对不足，打击体系待完善",
+ "部分装备老化，信息化程度待提升",
+ "防空反导能力有限，制空压力较大",
+ "特定方向兵力薄弱，需重点加强",
+ ],
+ },
+];
+
+interface KvRow {
+ label: string;
+ value: string;
+ tone: Tone;
+}
+interface ConstraintData {
+ icon: LucideIcon;
+ title: string;
+ rows: KvRow[];
+ footer: string;
+}
+const CONSTRAINTS: ConstraintData[] = [
+ {
+ icon: Package,
+ title: "资源约束",
+ rows: [
+ { label: "弹药储备", value: "充足", tone: "green" },
+ { label: "燃油保障", value: "适中", tone: "amber" },
+ { label: "医疗资源", value: "紧张", tone: "red" },
+ { label: "兵员补充", value: "适中", tone: "amber" },
+ { label: "通信物资", value: "适中", tone: "amber" },
+ ],
+ footer: "资源总体可支撑当前作战，医疗与持续保障需重点关注。",
+ },
+ {
+ icon: Scale,
+ title: "法理约束",
+ rows: [
+ { label: "作战法理依据", value: "符合", tone: "green" },
+ { label: "国际人道法", value: "合规", tone: "green" },
+ { label: "平民保护责任", value: "严格", tone: "red" },
+ { label: "舆论道义争取", value: "有利", tone: "green" },
+ ],
+ footer: "行动总体合法合规，应在法理框架内规范实施。",
+ },
+ {
+ icon: Landmark,
+ title: "政治约束",
+ rows: [
+ { label: "政治敏感度", value: "高", tone: "red" },
+ { label: "对外关系影响", value: "中", tone: "amber" },
+ { label: "国内舆论支持", value: "较高", tone: "green" },
+ { label: "国际舆论环境", value: "一般", tone: "slate" },
+ ],
+ footer: "政治考量需贯穿全程，注重舆论与外交配合。",
+ },
+ {
+ icon: Clock,
+ title: "时间约束",
+ rows: [
+ { label: "现有作战窗口", value: "36 小时内", tone: "red" },
+ { label: "兵力集结时限", value: "48 小时内", tone: "amber" },
+ { label: "后勤展开时间", value: "72 小时内", tone: "amber" },
+ { label: "上级决心时限", value: "60 小时内", tone: "amber" },
+ ],
+ footer: "时间窗口偏紧，须加快决策与力量展开。",
+ },
+];
+
+interface RiskRow {
+ item: string;
+ level: string;
+ levelTone: Tone;
+ impact: string;
+ plan: string;
+}
+const RISKS: RiskRow[] = [
+ { item: "敌火力突袭风险", level: "高", levelTone: "red", impact: "前沿阵地与人员装备损失", plan: "强化伪装防护与机动疏散" },
+ { item: "敌增援兵力介入", level: "中", levelTone: "amber", impact: "局部兵力对比变化", plan: "预置阻援力量，封控通道" },
+ { item: "通信干扰破坏", level: "中", levelTone: "amber", impact: "指挥效率下降", plan: "启用备份链路与抗扰手段" },
+ { item: "网络攻击渗透", level: "高", levelTone: "red", impact: "信息系统受损", plan: "加固防护，分区隔离" },
+ { item: "舆论造谣攻击", level: "低", levelTone: "green", impact: "局部认知影响", plan: "及时澄清，权威发声" },
+];
+
+interface StatBlock {
+ value: string;
+ caption: string;
+}
+const CONCLUSION_STATS: StatBlock[] = [
+ { value: "我方占优", caption: "敌我对比" },
+ { value: "中高", caption: "整体风险" },
+ { value: "积极进取", caption: "决策倾向" },
+];
+const CONCLUSION_POINTS = [
+ "当前总体态势有利，敌方兵力行动受牵制。",
+ "我方占据地利与人和，具备掌握主动的条件。",
+];
+const CONCLUSION = "总体态势有利，敌方行动受牵制；建议积极把握主动，稳中求进、择机而动。";
+
+// ── 主组件（有真实数据走真实渲染，否则回退静态占位） ─────────────────────────────
+
+export function Judgement({ data }: { data?: JudgeData | null }) {
+ return data ? : ;
+}
+
+function JudgePlaceholder() {
+ return (
+
+ {/* 1. 敌我优劣势分析 */}
+
敌我优劣势分析
+
+ {SWOT.map((c) => (
+
+
+
+ {c.items.map((it) => (
+ -
+
+ {it}
+
+ ))}
+
+
+ ))}
+
+
+ {/* 2. 条件与限制 */}
+
条件与限制
+
+ {CONSTRAINTS.map((c) => (
+
+
+
+
+ {c.rows.map((r) => (
+
+
- {r.label}
+ -
+ {r.value}
+
+
+ ))}
+
+
+ ))}
+
+
+ {/* 3. 风险与应对 + 判断结论 */}
+
风险与应对
+
+ {/* 风险与应对表 */}
+
+
+
+
+ {RISKS.map((r) => (
+
+ | {r.item} |
+
+ {r.level}
+ |
+ {r.impact} |
+ {r.plan} |
+
+ ))}
+
+
+
+ {/* 判断结论（综合研判） */}
+
+
+
+
+ {CONCLUSION_STATS.map((s) => (
+
+
{s.value}
+
{s.caption}
+
+ ))}
+
+
+ {CONCLUSION_POINTS.map((p) => (
+ -
+
+ {p}
+
+ ))}
+
+
+
+
+
+ {n}
+
+
{children}
+
+ );
+}
+
+// ── 真实数据渲染 ──────────────────────────────────────────────────────────────
+function SwotCard({ title, icon, items, dot }: { title: string; icon: LucideIcon; items: Array<{ title: string; content: string }>; dot: Tone }) {
+ const dotColor = dot === "green" ? "bg-emerald-500" : "bg-red-600";
+ return (
+
+
+
+ {items.map((it, i) => (
+ -
+
+
+ {it.title && {it.title}：}
+ {it.content}
+
+
+ ))}
+
+
+ );
+}
+
+function JudgeReal({ data }: { data: JudgeData }) {
+ const hasSwot = data.strengths.length > 0 || data.weaknesses.length > 0;
+ const hasRisk = data.risks.length > 0 || data.responses.length > 0;
+ return (
+
+ {hasSwot && (
+ <>
+
优劣势分析
+
+ {data.strengths.length > 0 && }
+ {data.weaknesses.length > 0 && }
+
+
+ )}
+
+ {data.constraints.length > 0 && (
+ <>
+
条件与限制
+
+ {data.constraints.map((c, i) => (
+
+
+
+ {c.items.map((it, j) => (
+ -
+
+ {it}
+
+ ))}
+
+
+ ))}
+
+
+ )}
+
+ {hasRisk && (
+ <>
+
风险与应对
+
+ {data.risks.length > 0 && (
+
+
+
+ {data.risks.map((r, i) => (
+ -
+
+ {r}
+
+ ))}
+
+
+ )}
+ {data.responses.length > 0 && (
+
+
+
+ {data.responses.map((r, i) => (
+ -
+ {i + 1}
+ {r}
+
+ ))}
+
+
+ )}
+
+
+ )}
+
+ {/* 1. 上排：口径 + 叙事 + 上级要求 */}
+
+ {/* 口径 */}
+
+
+
+
+ {TONE_META.map((m) => (
+
+
- {m.label}
+ - {m.value}
+
+ ))}
+
+
+ {TONE_POINTS.map((p) => (
+ -
+
+ {p}
+
+ ))}
+
+
+
+ {/* 叙事 */}
+
+
+
+
+ {NARRATIVES.map((n) => (
+
+ | {n.no} |
+ {n.title} |
+ {n.point} |
+ {n.time} |
+
+ ))}
+
+
+
+ {/* 上级要求 */}
+
+
+
+ {ORDERS.map((o, i) => (
+ -
+
+ {i + 1}
+
+ {o}
+
+ ))}
+
+
+ {ORDER_META.map((m) => (
+
+
- {m.label}
+ - {m.value}
+
+ ))}
+
+
+
+
+ {/* 2. 下排：重点发布日历 + 口径关键词 + 传播任务分工速览 */}
+
+ {/* 重点发布日历 */}
+
+
+
+
+
+
+ 查看完整日历
+
+
+ {/* 口径关键词 */}
+
+
+
+ {KEYWORDS.map((g) => (
+
+
+ {g.name}
+
+
+ {g.words.map((w) => (
+
+ {w}
+
+ ))}
+
+
+ ))}
+
+
+ {/* 传播任务分工速览 */}
+
+
+
+
+ {TASKS.map((t) => (
+
+ | {t.dept} |
+ {t.task} |
+ {t.deadline} |
+
+ ))}
+
+
+
+
+
{title}
+
+ {items.map((it) => (
+ -
+ {it.time}
+ {it.event}
+ {it.status}
+
+ ))}
+
+
+
+ {/* 口径 */}
+ {data.speeches.length > 0 && (
+
+
+
+
+ )}
+
+ {/* 上级要求 */}
+ {data.orders.length > 0 && (
+
+
+
+ {data.orders.map((o, i) => (
+ -
+ {i + 1}
+ {o}
+
+ ))}
+
+
+ )}
+
+
+ {/* 叙事 */}
+ {data.narratives.length > 0 && (
+
+
+
+
+ )}
+
+ {/* 口径关键词（取自叙事标签） */}
+ {keywords.length > 0 && (
+
+
+
+ {keywords.map((w) => (
+ {w}
+ ))}
+
+
+ )}
+
+ {/* 1. 顶部指标 */}
+
+ {metrics.map((m) => (
+
+
+
+
+
+ {m.label}
+
+ {m.value}
+
+ ))}
+
+
+ {/* 2. 关键战情摘要 */}
+ {summary.length > 0 && (
+
+
+
+
+ )}
+
+ {/* 3. 三栏概览 */}
+ {columns.length > 0 && (
+
+ {columns.map((col) => (
+
+
+
+
+ {col.rows.map((row) => (
+
+
- {row.label}
+ - {row.value}
+
+ ))}
+
+ {col.focus.length > 0 && (
+
+
{col.focusTitle}
+
+ {col.focus.map((f, i) => (
+ -
+
+ {f}
+
+ ))}
+
+
+ )}
+
+ ))}
+
+ )}
+
+ {/* 4. 情况判断 / 决策建议 / 处置建议 */}
+ {(judgePoints.length > 0 || decisionPoints.length > 0 || disposalPoints.length > 0) && (
+
+ {judgePoints.length > 0 && (
+
+ )}
+ {decisionPoints.length > 0 && (
+
+ )}
+ {disposalPoints.length > 0 && (
+
+ )}
+
+ )}
+
+ {points.map((p, i) => (
+ -
+ {i + 1}
+ {p}
+
+ ))}
+
+ {footer && {footer}}
+
+ );
+}
diff --git a/frontend-web/src/roundtable-planning/dashboard-agent/sq-report.ts b/frontend-web/src/roundtable-planning/dashboard-agent/sq-report.ts
new file mode 100644
index 00000000..b0d7bff8
--- /dev/null
+++ b/frontend-web/src/roundtable-planning/dashboard-agent/sq-report.ts
@@ -0,0 +1,289 @@
+/**
+ * 「大屏绘制智能体」战情报告（selectSqReport）→ 各页面展示模型 的适配器。
+ *
+ * 接口经 `fetchDashboardInputJson` → `extractSqReport` 后得到：
+ * `{ taskId, source, categories: { [类目]: 反序列化内容 } }`
+ * 类目键（categoryType 去掉「 JSON」后缀）：敌情目标 / 敌情关键事件 / 敌情对手叙事 /
+ * 我情口径 / 我情叙事 / 我情上级要求 / 信息环境 / 人文环境 / 优劣势分析 /
+ * 条件与限制 / 风险及应对 / 决心建议 / 处置建议 / 行动方案。
+ *
+ * 本模块把这些**异构、自由文本**的内容防御式地适配成每个页面要用的结构化模型；
+ * 任一类目缺失/为空 → 对应页面 data 为 null，页面回退到静态占位（先做对接，编辑后续再说）。
+ */
+
+// ── 防御式取值 ────────────────────────────────────────────────────────────────
+function asArray(v: unknown): unknown[] {
+ return Array.isArray(v) ? v : [];
+}
+function asObj(v: unknown): Record {
+ return v && typeof v === "object" && !Array.isArray(v) ? (v as Record) : {};
+}
+function asStr(v: unknown): string {
+ if (typeof v === "string") return v;
+ if (v == null) return "";
+ if (typeof v === "number" || typeof v === "boolean") return String(v);
+ return "";
+}
+function strArr(v: unknown): string[] {
+ return asArray(v).map(asStr).filter((s) => s.trim().length > 0);
+}
+
+/** 取 categories 容器（输入即 fetchDashboardInputJson 的返回）。 */
+export function getSqCategories(input: unknown): Record | null {
+ const o = asObj(input);
+ const cats = asObj(o.categories);
+ return Object.keys(cats).length > 0 ? cats : null;
+}
+
+// ── 各页面展示模型 ────────────────────────────────────────────────────────────
+
+export interface EnemyData {
+ targets: Array<{ name: string; category: string; note: string }>;
+ events: Array<{ topic: string; count: number; items: Array<{ time: string; title: string; brief: string }> }>;
+ narratives: Array<{ topic: string; narrator: string; intention: string; type: string; summary: string }>;
+}
+
+export interface OursData {
+ speeches: Array<{ title: string; summary: string; direction: string; time: string }>;
+ narratives: Array<{ title: string; intent: string; tags: string[]; content: string }>;
+ orders: string[];
+}
+
+export interface EnvSection {
+ title: string;
+ paragraphs: string[];
+}
+export interface EnvData {
+ info: EnvSection[];
+ human: EnvSection[];
+}
+
+export interface JudgeData {
+ strengths: Array<{ title: string; content: string }>;
+ weaknesses: Array<{ title: string; content: string }>;
+ constraints: Array<{ title: string; items: string[] }>;
+ risks: string[];
+ responses: string[];
+}
+
+export interface DecisionData {
+ taskTitle: string;
+ taskIntro: string;
+ objectives: string[];
+ targets: Array<{ name: string; desc: string; reason: string; impact: string; basis: string }>;
+ keyPoints: string[];
+ summary: string;
+}
+
+export interface DisposalData {
+ goal: string;
+ summary: string;
+ items: Array<{ content: string; method: string; tone: string; effect: string; subject: string; basis: string }>;
+}
+
+export interface SqReport {
+ enemy: EnemyData | null;
+ ours: OursData | null;
+ environment: EnvData | null;
+ judgement: JudgeData | null;
+ decision: DecisionData | null;
+ disposal: DisposalData | null;
+}
+
+// ── 适配函数（每个返回 null 表示该类目无可用数据） ─────────────────────────────
+
+function adaptEnemy(cats: Record): EnemyData | null {
+ // 敌方目标：组织 + 人物实体
+ const tgt = asObj(cats["敌情目标"]);
+ const targets = [...asArray(tgt.organization), ...asArray(tgt.human)]
+ .map((e) => {
+ const o = asObj(e);
+ return { name: asStr(o.name), category: asStr(o.text) || asStr(o.etype), note: asStr(o.reason) };
+ })
+ .filter((t) => t.name);
+
+ // 关键事件：按 topic 分组
+ const events = asArray(cats["敌情关键事件"])
+ .map((g) => {
+ const o = asObj(g);
+ const items = asArray(o.events)
+ .map((ev) => {
+ const e = asObj(ev);
+ return { time: asStr(e.date) || asStr(e.publish_time), title: asStr(e.title), brief: asStr(e.content) };
+ })
+ .filter((i) => i.title);
+ return { topic: asStr(o.topic), count: typeof o.count === "number" ? o.count : items.length, items };
+ })
+ .filter((g) => g.topic || g.items.length > 0);
+
+ // 对手叙事
+ const narratives = asArray(cats["敌情对手叙事"])
+ .map((n) => {
+ const o = asObj(n);
+ return {
+ topic: asStr(o.topic) || asStr(o.event_name),
+ narrator: asStr(o.narrator) || asStr(o.entity),
+ intention: asStr(o.intention) || asStr(o.intent_of_the_opponent),
+ type: asStr(o.topicType) || asStr(o.narrative_topic_types),
+ summary: asStr(o.summary) || asStr(o.event_summary),
+ };
+ })
+ .filter((n) => n.topic || n.summary);
+
+ if (targets.length === 0 && events.length === 0 && narratives.length === 0) return null;
+ return { targets, events, narratives };
+}
+
+function adaptOurs(cats: Record): OursData | null {
+ const speech = asObj(cats["我情口径"]);
+ const speeches = [
+ ...asArray(speech.selfSpeech).map((s) => {
+ const o = asObj(s);
+ return {
+ title: asStr(o.trendSpeechTitle) || asStr(o.trendSpeechTitleMini),
+ summary: asStr(o.trendSpeechLike) || asStr(o.trendSpeechContent),
+ direction: asStr(o.narrativeDirection),
+ time: asStr(o.trendSpeechTime),
+ };
+ }),
+ ...asArray(speech.selfConsistents).map((s) => {
+ const o = asObj(s);
+ return {
+ title: asStr(o.trendConsistentTitleMini) || asStr(o.trendConsistentTitle),
+ summary: asStr(o.trendConsistentLike) || asStr(o.trendConsistentContent),
+ direction: asStr(o.narrativeDirection),
+ time: asStr(o.trendConsistentTime),
+ };
+ }),
+ ].filter((s) => s.title || s.summary);
+
+ const narratives = asArray(cats["我情叙事"])
+ .map((n) => {
+ const o = asObj(n);
+ return {
+ title: asStr(o["标题"]),
+ intent: asStr(o["意图"]),
+ tags: strArr(o["标签"]),
+ content: asStr(o["内容"]),
+ };
+ })
+ .filter((n) => n.title || n.content);
+
+ // 上级要求：字符串（含编号），按行拆分、去掉行首编号
+ const orderRaw = cats["我情上级要求"];
+ const orderText = typeof orderRaw === "string" ? orderRaw : asStr(orderRaw);
+ const orders = orderText
+ .split(/\r?\n/)
+ .map((l) => l.trim().replace(/^[0-9]+[.、)]\s*/, ""))
+ .filter((l) => l.length > 0);
+
+ if (speeches.length === 0 && narratives.length === 0 && orders.length === 0) return null;
+ return { speeches, narratives, orders };
+}
+
+function adaptEnv(cats: Record): EnvData | null {
+ const toSections = (raw: unknown): EnvSection[] =>
+ Object.entries(asObj(raw))
+ .filter(([k]) => k !== "type")
+ .map(([title, v]) => ({ title, paragraphs: strArr(v) }))
+ .filter((s) => s.paragraphs.length > 0);
+ const info = toSections(cats["信息环境"]);
+ const human = toSections(cats["人文环境"]);
+ if (info.length === 0 && human.length === 0) return null;
+ return { info, human };
+}
+
+function adaptJudge(cats: Record): JudgeData | null {
+ const sw = asObj(cats["优劣势分析"]);
+ const mapTC = (v: unknown) =>
+ asArray(v)
+ .map((x) => {
+ const o = asObj(x);
+ return { title: asStr(o["title"]), content: asStr(o["content"]) };
+ })
+ .filter((x) => x.title || x.content);
+ const strengths = mapTC(sw["优势"]);
+ const weaknesses = mapTC(sw["劣势"]);
+
+ const con = asObj(cats["条件与限制"]);
+ const constraints = Object.entries(con)
+ .map(([title, v]) => ({ title: title.replace(/分析与?/, ""), items: strArr(v) }))
+ .filter((c) => c.items.length > 0);
+
+ const risk = asObj(cats["风险及应对"]);
+ const risks = strArr(risk["风险分析"]);
+ const responses = strArr(risk["应对方案"]);
+
+ if (strengths.length === 0 && weaknesses.length === 0 && constraints.length === 0 && risks.length === 0 && responses.length === 0)
+ return null;
+ return { strengths, weaknesses, constraints, risks, responses };
+}
+
+function adaptDecision(cats: Record): DecisionData | null {
+ const root = asObj(cats["决心建议"]);
+ const core = asObj(root["决心建议"]);
+ const targets = asArray(core["打击目标"])
+ .map((t) => {
+ const o = asObj(t);
+ return {
+ name: asStr(o["目标名称"]),
+ desc: asStr(o["目标描述"]),
+ reason: asStr(o["选择理由"]),
+ impact: asStr(o["潜在影响"]),
+ basis: asStr(o["推荐依据"]),
+ };
+ })
+ .filter((t) => t.name || t.desc);
+ const data: DecisionData = {
+ taskTitle: asStr(core["任务标题"]),
+ taskIntro: asStr(core["任务简介"]),
+ objectives: strArr(core["作战目的"]),
+ targets,
+ keyPoints: strArr(root["实施要点"]),
+ summary: asStr(root["决心建议总结"]),
+ };
+ if (!data.taskTitle && !data.taskIntro && data.objectives.length === 0 && targets.length === 0 && data.keyPoints.length === 0 && !data.summary)
+ return null;
+ return data;
+}
+
+function adaptDisposal(cats: Record): DisposalData | null {
+ const root = asObj(cats["处置建议"]);
+ const items = asArray(root["处置建议"])
+ .map((it) => {
+ const o = asObj(it);
+ const subj = asObj(o["处置主体"]);
+ return {
+ content: asStr(o["建议内容"]),
+ method: asStr(o["处置方式与步骤"]),
+ tone: asStr(o["口径基调"]),
+ effect: asStr(o["预期效果"]),
+ subject: asStr(subj["主责单位"]),
+ basis: asStr(o["立场与原则"]),
+ };
+ })
+ .filter((i) => i.content || i.method);
+ const data: DisposalData = {
+ goal: asStr(root["目标"]),
+ summary: asStr(root["处置建议总结"]),
+ items,
+ };
+ if (!data.goal && !data.summary && items.length === 0) return null;
+ return data;
+}
+
+/** 把 fetchDashboardInputJson 的返回解析成各页面展示模型（无 categories → 全 null）。 */
+export function parseSqReport(input: unknown): SqReport {
+ const cats = getSqCategories(input);
+ if (!cats) {
+ return { enemy: null, ours: null, environment: null, judgement: null, decision: null, disposal: null };
+ }
+ return {
+ enemy: adaptEnemy(cats),
+ ours: adaptOurs(cats),
+ environment: adaptEnv(cats),
+ judgement: adaptJudge(cats),
+ decision: adaptDecision(cats),
+ disposal: adaptDisposal(cats),
+ };
+}
diff --git a/frontend-web/src/roundtable-planning/dashboard-agent/ui.tsx b/frontend-web/src/roundtable-planning/dashboard-agent/ui.tsx
new file mode 100644
index 00000000..5e20b994
--- /dev/null
+++ b/frontend-web/src/roundtable-planning/dashboard-agent/ui.tsx
@@ -0,0 +1,187 @@
+/**
+ * 「大屏绘制智能体」战情页公共 UI 片段（卡片 / 标题 / 更多按钮 / 色块徽标 / 表格）。
+ *
+ * **dashboard-agent 独占**：仅供战情系列静态页（SituationOverview / EnemyDetail / …）
+ * 复用，不影响会商共享的 DashboardApp / dashboard 组件群。配色对齐设计图（白底 + 红色强调）。
+ */
+import { ChevronRight, Inbox, type LucideIcon } from "lucide-react";
+
+/** 空数据占位（接口返回为空 / 该类目缺失时显示）。 */
+export function NoData({ label = "暂无数据" }: { label?: string }) {
+ return (
+
+
+ {label}
+
+ );
+}
+
+/** 卡片外框（白底 + slate 细边 + 轻阴影）。 */
+export function Card({ className = "", children }: { className?: string; children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+/** 卡片标题（红色图标 + 标题 + 可选徽标 + 可选右侧操作 + 底部分隔线）。 */
+export function CardTitle({
+ icon: Icon,
+ title,
+ badges,
+ action,
+}: {
+ icon: LucideIcon;
+ title: string;
+ badges?: React.ReactNode;
+ action?: React.ReactNode;
+}) {
+ return (
+
+
+
+
+
+
+ {title}
+
+ {badges &&
{badges}
}
+
+ {action}
+
+
+
+ );
+}
+
+export type Tone = "red" | "amber" | "green" | "blue" | "slate";
+
+const TONE_CLASS: Record = {
+ red: "bg-red-50 text-red-600 dark:bg-red-500/15",
+ amber: "bg-amber-50 text-amber-600 dark:bg-amber-500/15",
+ green: "bg-emerald-50 text-emerald-600 dark:bg-emerald-500/15",
+ blue: "bg-sky-50 text-sky-600 dark:bg-sky-500/15",
+ slate: "bg-slate-100 text-slate-500 dark:bg-white/10 dark:text-[var(--dash-text-sec)]",
+};
+
+/** 语义色块徽标（高/中/低、上升/持平/下降、偏高 等）。 */
+export function Tag({ tone, children }: { tone: Tone; children: React.ReactNode }) {
+ return (
+
+ {children}
+
+ );
+}
+
+const VAL_TEXT: Record = {
+ red: "text-red-600",
+ amber: "text-amber-600",
+ green: "text-emerald-600",
+ blue: "text-sky-600",
+ slate: "text-slate-400 dark:text-[var(--dash-text-dim)]",
+};
+
+/** 语义色取值文字（键值行右侧的 高/中/充足/紧张 等，以颜色表强弱）。 */
+export function Val({ tone, children }: { tone: Tone; children: React.ReactNode }) {
+ return {children};
+}
+
+/** 紧凑表格（表头灰字 + 行细分隔线，对齐设计图密集表格）。 */
+export function Table({ head, children }: { head: string[]; children: React.ReactNode }) {
+ return (
+
+
+
+ {head.map((h) => (
+ |
+ {h}
+ |
+ ))}
+
+
+ {children}
+
+ );
+}
+
+/** 表格数据单元（统一内边距 + 细分隔线 + 顶对齐）。 */
+export function Td({ className = "", children }: { className?: string; children?: React.ReactNode }) {
+ return (
+
+ {children}
+ |
+ );
+}
+
+/** 卡片底部「说明 / 动态」提示条（左侧色条 + 浅底）。 */
+export function FooterNote({
+ label,
+ tone = "red",
+ children,
+}: {
+ label: string;
+ tone?: Tone;
+ children: React.ReactNode;
+}) {
+ const border = tone === "green" ? "border-emerald-500" : tone === "blue" ? "border-sky-500" : "border-red-500";
+ const labelColor =
+ tone === "green"
+ ? "text-emerald-700 dark:text-emerald-400"
+ : tone === "blue"
+ ? "text-sky-700 dark:text-sky-400"
+ : "text-red-600";
+ const bg =
+ tone === "green" ? "bg-emerald-50 dark:bg-emerald-500/10" : tone === "blue" ? "bg-sky-50 dark:bg-sky-500/10" : "bg-red-50 dark:bg-red-500/10";
+ return (
+
+ {label}：
+ {children}
+
+ );
+}
diff --git a/frontend-web/src/roundtable-planning/dashboard/DashboardApp.tsx b/frontend-web/src/roundtable-planning/dashboard/DashboardApp.tsx
index 5a003174..91816cd3 100644
--- a/frontend-web/src/roundtable-planning/dashboard/DashboardApp.tsx
+++ b/frontend-web/src/roundtable-planning/dashboard/DashboardApp.tsx
@@ -8,7 +8,7 @@
* - 不传 data 时回落参考 demo（DEMO_DATA）。
*/
import './dashboard.css';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
import { TabType } from './types';
import {
DashboardDataProvider,
@@ -31,23 +31,48 @@ import {
const TAB_ICONS = [LayoutGrid, Users, Megaphone, ShieldAlert, FileText, Activity];
-export function DashboardApp({ data = DEMO_DATA }: { data?: DashboardDataValue }) {
- const [activeTab, setActiveTab] = useState('overview');
+/** 自定义页（dashboard-agent 战情多页用）：一个 Tab = id + 标签 + 图标 + 正文。 */
+export interface DashboardPage {
+ id: string;
+ label: string;
+ icon?: ReactNode;
+ content: ReactNode;
+}
- // 数据切换（切历史记录/重绘 → data 引用变化）时复位到总览：避免停留在上一份数据
- // 钻入的某个席位详情页，而新数据里无同名席位导致「加载席位数据失败」。
+export function DashboardApp({
+ data = DEMO_DATA,
+ pages,
+}: {
+ data?: DashboardDataValue;
+ /**
+ * 可选自定义页集：传入时整套 Tab（标签/图标）与正文都由它驱动，替换默认的
+ * 「总览 + 各席位」（dashboard-agent 用它注入战情多页）。会商 Step3 不传 → 行为零变化。
+ */
+ pages?: DashboardPage[];
+}) {
+ const usingPages = !!pages && pages.length > 0;
+ const firstTab: TabType = usingPages ? pages![0].id : 'overview';
+ const [activeTab, setActiveTab] = useState(firstTab);
+
+ // 数据/页集切换（切历史记录/重绘 → data 引用变化）时复位到首个 Tab：避免停留在上一份
+ // 数据钻入的某个席位详情页，而新数据里无同名席位导致「加载席位数据失败」。
useEffect(() => {
- setActiveTab('overview');
- }, [data]);
+ setActiveTab(firstTab);
+ }, [data, firstTab]);
- // 导航 Tab：总览 + 各席位（由数据动态生成，原参考为写死的固定 6 项）。
- const tabs: TabType[] = ['overview', ...data.SEAT_CARDS.map((s) => s.id)];
+ // 导航 Tab：自定义页集 → 各页 id；否则总览 + 各席位（由数据动态生成）。
+ const tabs: TabType[] = usingPages
+ ? pages!.map((p) => p.id)
+ : ['overview', ...data.SEAT_CARDS.map((s) => s.id)];
- const getTabLabel = (tab: TabType) =>
- tab === 'overview' ? '总览' : data.SEAT_CARDS.find((c) => c.id === tab)?.title ?? tab;
+ const getTabLabel = (tab: TabType) => {
+ if (usingPages) return pages!.find((p) => p.id === tab)?.label ?? tab;
+ return tab === 'overview' ? '总览' : data.SEAT_CARDS.find((c) => c.id === tab)?.title ?? tab;
+ };
const getTabIcon = (tab: TabType) => {
const cls = 'w-4 h-4';
+ if (usingPages) return pages!.find((p) => p.id === tab)?.icon ?? ;
if (tab === 'overview') return ;
const idx = data.SEAT_CARDS.findIndex((c) => c.id === tab);
const Ico = TAB_ICONS[(idx >= 0 ? idx : 0) % TAB_ICONS.length];
@@ -109,7 +134,18 @@ export function DashboardApp({ data = DEMO_DATA }: { data?: DashboardDataValue }
{/* Body */}
- {activeTab === 'overview' ? (
+ {usingPages ? (
+
+ {pages!.find((p) => p.id === activeTab)?.content}
+
+ ) : activeTab === 'overview' ? (
(null);
+ // 战情报告解析结果（selectSqReport → 各页面展示模型）；解析失败/无数据 → null（页面回退占位）。
+ const [sqReport, setSqReport] = useState(null);
const dashboard = useStep3Dashboard({
intentReady: null,
@@ -113,7 +133,8 @@ export default function DashboardAgentPage() {
} = dashboard;
const [loading, setLoading] = useState(true);
- const [view, setView] = useState("chat");
+ // 静态阶段默认进「大屏页面」，直接展示静态版式（见 STATIC_PREVIEW）。
+ const [view, setView] = useState(STATIC_PREVIEW ? "page" : "chat");
const [renderMode, setRenderMode] = useState("app");
// 真实接口请求失败/无数据时的提示（真实模式不拿假数据兜底，改为提示+重试）。
const [inputError, setInputError] = useState(null);
@@ -152,6 +173,12 @@ export default function DashboardAgentPage() {
fetchDashboardInputJson(taskId).catch(() => null),
]);
inputRef.current = input;
+ // 解析战情报告 → 各页面展示模型（容错：异常/无数据均不抛错，页面回退占位）。
+ try {
+ setSqReport(parseSqReport(input));
+ } catch {
+ setSqReport(null);
+ }
const savedDialogues = (session?.transcript as Step2Dialogue[] | undefined) ?? [];
const validReport = session?.reportJson && parseReportJson(session.reportJson);
if (validReport) {
@@ -161,14 +188,20 @@ export default function DashboardAgentPage() {
} else if (savedDialogues.length > 0) {
// 有历史聊天但无有效结果 → 进生成过程展示历史，不自动重跑（点「重新绘制」可重生成）。
hydrateTranscriptRef.current(savedDialogues, session?.reportJson ?? null);
- setView("chat");
+ // 静态阶段仍停在「大屏页面」看版式（历史对话可点「编辑」查看）。
+ setView(STATIC_PREVIEW ? "page" : "chat");
} else {
// 无任何记录 → 接口返回了真实数据才启动模型抽取；否则提示（真实模式不拿假数据兜底）。
- setView("chat");
- if (input) {
- startRef.current();
+ // 静态阶段（STATIC_PREVIEW）：不自动抽取，停在「大屏页面」展示静态版式。
+ if (STATIC_PREVIEW) {
+ setView("page");
} else {
- setInputError("未获取到任务数据：接口请求失败或未返回内容，请稍后重试。");
+ setView("chat");
+ if (input) {
+ startRef.current();
+ } else {
+ setInputError("未获取到任务数据：接口请求失败或未返回内容，请稍后重试。");
+ }
}
}
} finally {
@@ -218,6 +251,30 @@ export default function DashboardAgentPage() {
);
const hasResult = !!dashboardData || !!dashboardHtml;
+ // 展示层脱敏：所有页面文本经 desensitizeDeep 深度替换后再渲染（与会商大屏一致）。
+ const safeReport = useMemo(() => {
+ if (!sqReport) return null;
+ try {
+ return desensitizeDeep(sqReport) as SqReport;
+ } catch {
+ return sqReport; // 脱敏异常不影响展示
+ }
+ }, [sqReport]);
+
+ // 战情多页：总览 + 六个详情页；详情页传入对应的（脱敏后）真实数据（无则页面回退占位）。
+ const dashPages: DashboardPage[] = useMemo(
+ () => [
+ { id: "overview", label: "总览", icon: , content: },
+ { id: "enemy", label: "敌情", icon: , content: },
+ { id: "ours", label: "我情", icon: , content: },
+ { id: "field", label: "战场环境", icon: , content: },
+ { id: "judge", label: "情况判断", icon: , content: },
+ { id: "decision", label: "决心建议", icon: , content: },
+ { id: "disposal", label: "处置建议", icon: , content: },
+ ],
+ [safeReport],
+ );
+
// 网页渲染：blob URL 作 iframe src（:target 导航需独立文档 URL，见 Step3DashboardMode 注释）。
const [htmlBlobUrl, setHtmlBlobUrl] = useState(null);
useEffect(() => {
@@ -392,13 +449,27 @@ export default function DashboardAgentPage() {
{/* 主体 */}
{loading ? (
+ // 加载框：请求战情报告期间显示，拿到数据后再渲染大屏（避免先闪占位再跳真实数据）。
正在请求任务数据…
-
拉取接口返回后将自动开始智能体抽取绘制
+
拉取接口返回后展示大屏
+ ) : view === "page" ? (
+ renderMode === "html" && htmlBlobUrl ? (
+
+ ) : (
+
+
+
+ )
) : inputError && dialogues.length === 0 ? (
@@ -414,19 +485,6 @@ export default function DashboardAgentPage() {
- ) : view === "page" ? (
- renderMode === "html" && htmlBlobUrl ? (
-
- ) : (
-
-
-
- )
) : (