+ {/* 内容画布 */}
+
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
new file mode 100644
index 0000000..bdb7768
--- /dev/null
+++ b/src/pages/Home.tsx
@@ -0,0 +1,134 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+export default function Home() {
+ return (
+
+ {/* 欢迎与 AI 提示 */}
+
+
+
欢迎回来, SAFe OS 团队 👋
+
AI Agent 已经准备就绪，今天想从哪个环节开始推进项目？
+
+ AI 状态: ✓ 运行中 (随时可唤醒)
+
+
+
+
+
+ {/* 数据概览精要 */}
+
+
+ {/* 三大核心模块入口卡片 */}
+
核心工作流入口
+
+
+ {/* 模块 1: 战略规划 (Planning) */}
+
+
+
+
+
+
+
战略规划
+
一站式需求管理与分析。利用自然语言或文档，AI帮助您生成验收标准、拆解任务和预测边界情况。
+
+
+
+ 智能需求分析与拆解
+
+
+ 上下文动态问题对话
+
+
+
+
+
+ 进入规划看板 →
+
+
+
+
+ {/* 模块 2: 开发运维 (DevOps) */}
+
+
+
+
+
+
+
开发运维
+
智能研发辅助流水线。输入功能点描述即可生成规范的代码框架和单元测试代码，一键直达测试验证。
+
+
+
+ AI 代码框架生成
+
+
+ 自动化测试与建议
+
+
+
+
+
+ 开启开发流水线 →
+
+
+
+
+ {/* 模块 3: 质量门控 (Quality Gate) */}
+
+
+
+
+
+
+
质量门控
+
项目质量的守护神。提供可视化的Dashboard概览，智能审查 PR 修改，拦截代码漏洞与规范问题。
+
+
+
+ PR 级智能安全扫描
+
+
+ 对话式漏洞修复建议
+
+
+
+
+
+ 查看质量大盘 →
+
+
+
+
+
+
+ {/* 全局悬浮 AI Agent 助手入口（占位） */}
+
+
+
需要我帮您新建一个“提测需求”还是“审查PR”呢？
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/pages/PlanningAgent.tsx b/src/pages/PlanningAgent.tsx
index 8f7bede..869c0dd 100644
--- a/src/pages/PlanningAgent.tsx
+++ b/src/pages/PlanningAgent.tsx
@@ -1,4 +1,7 @@
import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
import { API } from "../config";
/* ─── Types ─── */
@@ -294,7 +297,18 @@ export default function PlanningAgent() {
{msg.role === "assistant" && (
SYSTEM / RE-ACT LOOP
)}
- {msg.content || "Thinking..."}
+ {msg.role === "assistant" ? (
+
+
+ {msg.content || "Thinking..."}
+
+
+ ) : (
+ msg.content || "Thinking..."
+ )}
{msg.status === "failed" && (
Failed to send
)}
diff --git a/tailwind.config.js b/tailwind.config.js
index a2e35ac..f40227c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -30,5 +30,7 @@ export default {
},
},
},
- plugins: [],
+ plugins: [
+ require('@tailwindcss/typography'),
+ ],
};
diff --git a/template/devops.html b/template/devops.html
new file mode 100644
index 0000000..591dde6
--- /dev/null
+++ b/template/devops.html
@@ -0,0 +1,144 @@
+
+
+
+
+
+
SAFe OS - 开发运维 (DevOps)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ AI 生成结果
+
+
+
+
+
+
+
+
+
Developer Agent
+
我已经根据您的 "登录功能" 需求，生成了用户控制器的代码框架和对应的单元测试（Jest）。
+
测试用例涵盖了 5 种边界情况，您可以查看右侧代码。
+
+
+
+
+
+
+
+
+
+
+
+
+
const AuthService = require('../services/auth.service');
+
+class AuthController {
+ // 处理用户登录请求
+ async login(req, res) {
+ try {
+ const { username, password } = req.body;
+
+ if (!username || !password) {
+ return res.status(400).json({ error: "缺少必要的参数" });
+ }
+
+ const token = await AuthService.authenticate(username, password);
+ return res.status(200).json({ token });
+
+ } catch (error) {
+ if (error.message === 'AccountLocked') {
+ return res.status(403).json({ error: "账号已被锁定，请稍后再试" });
+ }
+ return res.status(401).json({ error: "认证失败" });
+ }
+ }
+}
+
+module.exports = new AuthController();
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/template/index.html b/template/index.html
new file mode 100644
index 0000000..ae35cad
--- /dev/null
+++ b/template/index.html
@@ -0,0 +1,237 @@
+
+
+
+
+
+
SAFe OS - AI Agent 统一平台入口
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
欢迎回来, SAFe OS 团队 👋
+
AI Agent 已经准备就绪，今天想从哪个环节开始推进项目？
+
+ AI 状态: ✓ 运行中 (随时可唤醒)
+
+
+
+
+
+
+
+
+
+
核心工作流入口
+
+
+
+
+
+
+
+
+
+
战略规划
+
一站式需求管理与分析。利用自然语言或文档，AI帮助您生成验收标准、拆解任务和预测边界情况。
+
+
+
+ 智能需求分析与拆解
+
+
+ 上下文动态问题对话
+
+
+
+
+
+
+
+
+
+
+
+
+
+
开发运维
+
智能研发辅助流水线。输入功能点描述即可生成规范的代码框架和单元测试代码，一键直达测试验证。
+
+
+
+ AI 代码框架生成
+
+
+ 自动化测试与建议
+
+
+
+
+
+
+
+
+
+
+
+
+
+
质量门控
+
项目质量的守护神。提供可视化的Dashboard概览，智能审查 PR 修改，拦截代码漏洞与规范问题。
+
+
+
+ PR 级智能安全扫描
+
+
+ 对话式漏洞修复建议
+
+
+
+
+
+
+
+
+
+
+
+
+
+
需要我帮您新建一个“提测需求”还是“审查PR”呢？
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/template/planning.html b/template/planning.html
new file mode 100644
index 0000000..eda6475
--- /dev/null
+++ b/template/planning.html
@@ -0,0 +1,134 @@
+
+
+
+
+
+
SAFe OS - 战略规划 (Planning)
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
需求输入 & 分析
+
+
+
+
+ 您好！我是需求分析助手。请描述您的需求或上传需求文档。
+
+
+ 我需要一个用户登录功能，支持密码和短信验证码，且多次错误锁定。
+
+
+ 正在提取需求并分析边界条件...
+
+
+
+
+
+
+
+
+
+ 需求拆解结果面板
+
+
+
+
+
+
登录功能需求分析文档
+
+
+
功能需求 (Functional)
+
+ - 支持用户名/手机号与密码登录
+ - 支持手机号与短信验证码登录
+
+
+
+
+
边界条件与非功能需求
+
+ - 多次错误：连续错误 5 次锁定账号 15 分钟
+ - 验证码时效：短信验证码有效期 5 分钟
+
+
+
+
+
提取的任务清单
+
+
TASK-101 UI：登录界面设计
+
TASK-102 后端：密码验证与Token派发
+
TASK-103 后端：短信验证码发送与校验
+
+
+
+
+
+
+
+
+
等待通过左侧对话输入需求
+
AI 分析完成后将在此展示结构化的需求文档和任务清单
+
+
+
+
+
+
\ No newline at end of file
diff --git a/template/quality.html b/template/quality.html
new file mode 100644
index 0000000..34791e4
--- /dev/null
+++ b/template/quality.html
@@ -0,0 +1,151 @@
+
+
+
+
+
+
SAFe OS - 质量门控 (Quality Gate)
+
+
+
+
+
+
+
+
+
+
+
+ 质量门控 (Quality Gate)Dashboard
+
+
+
+
+
+
+
+
+
+
+
合并请求审查 (PR List)
+ 共 3 个待处理
+
+
+
+
+
+
+
+
PR #102: feat: 实现用户登录与注册接口
+
+ 2小时前
+ 作者: zhangsan
+ +120行
+ -20行
+
+
+
+
+ 扫描未通过
+ 1个高危漏洞
+
+
+
+
+
+
+
+
+
+
PR #101: fix: 首页在移动端布局错位问题
+
+ 5小时前
+ 作者: lisi
+ +15行
+ -10行
+
+
+
+
+ 扫描通过
+ 可合并
+
+
+
+
+
+
+
+
+
+ PR #102 质量扫描报告
+
+
+
+
+
+
[高危] SQL 注入风险
+
文件: auth.service.js, 第 45 行
+
- const query = `SELECT * FROM users WHERE username = '${req.body.username}'`;
++ const query = 'SELECT * FROM users WHERE username = ?'; // 修复建议: 使用参数化查询
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/template/工程页面内容总结.md b/template/工程页面内容总结.md
new file mode 100644
index 0000000..c5a7739
--- /dev/null
+++ b/template/工程页面内容总结.md
@@ -0,0 +1,108 @@
+# 工程产品功能描述
+
+以下是当前工程产品的功能描述，从用户视角出发，帮助 UI 工程师重新设计页面和交互：
+
+---
+
+### **产品概览**
+- **产品名称**: SAFe OS
+- **目标用户**: 软件开发团队、项目经理、质量保证工程师。
+- **核心目标**: 提供一个集成的工作平台，支持战略规划、开发运维管理、质量门控等功能，提升团队协作效率。
+
+---
+
+### **主要功能模块**
+
+#### **1. 战略规划模块（Planning）**
+- **用户目标**: 帮助项目经理进行需求分析、任务分解和优先级规划。
+- **核心功能**:
+ - **需求管理**: 用户可以输入需求描述，系统自动生成功能需求、非功能需求、验收标准等。
+ - **任务分解**: 系统支持将需求分解为具体任务，生成任务清单。
+ - **边界情况分析**: 系统提示用户考虑潜在的边界情况，确保需求全面。
+ - **AI 交互特点**:
+ - 用户通过自然语言输入需求，AI Agent 提供实时分析和建议。
+ - AI 会根据上下文动态生成问题，帮助用户完善需求。
+ - **数据交互说明**:
+ - 前端通过 API 将用户输入的需求发送到后端。
+ - 后端调用 AI 模型进行需求分析，返回结构化的需求数据（功能需求、非功能需求、验收标准等）。
+ - 前端实时更新界面，展示分析结果，并允许用户进一步编辑。
+ - **用户交互流程**:
+ - 用户可以通过文本框输入需求，也可以上传包含需求的文件（如 Word 或 PDF）。
+ - 系统解析文件内容并提取关键信息，展示在界面上供用户确认。
+ - 用户可以对提取的内容进行修改或补充，最终确认后进入任务分解阶段。
+
+#### **2. 开发运维模块（DevOps）**
+- **用户目标**: 帮助开发团队高效完成代码开发、测试和部署。
+- **核心功能**:
+ - **代码生成**: 用户输入功能描述，AI Agent 自动生成代码模板和单元测试。
+ - **测试执行**: 系统支持自动化测试执行，展示测试通过率、失败用例等信息。
+ - **实施建议**: AI 提供代码实现的优化建议，帮助开发者提升代码质量。
+ - **操作流程**:
+ - 用户通过一个多步骤的进度条界面完成操作，每一步都有明确的指引。
+ - 例如：需求输入 → 代码生成 → 测试生成 → 测试执行 → 结果分析。
+ - 每一步完成后，用户可以选择继续下一步或返回修改。
+ - **AI 交互特点**:
+ - 用户可以通过对话式界面与 AI 讨论代码实现细节。
+ - AI 提供实时反馈，例如代码片段、测试结果和优化建议。
+ - **数据交互说明**:
+ - 前端通过 API 将用户输入的功能描述发送到后端。
+ - 后端调用代码生成服务，返回生成的代码模板和单元测试。
+ - 测试执行时，前端发送测试请求到后端，后端运行测试并返回测试结果（通过率、失败用例、错误日志等）。
+ - 前端根据后端返回的数据动态更新进度条和结果展示。
+ - **用户交互流程**:
+ - 用户在界面上输入功能描述，或上传包含功能需求的文件。
+ - 系统解析需求后，生成代码模板并展示给用户。
+ - 用户可以对生成的代码进行修改或直接运行测试。
+ - 测试完成后，系统展示测试结果，并提供优化建议。
+
+#### **3. 质量门控模块（Quality Gate）**
+- **用户目标**: 帮助质量保证工程师监控代码质量，确保交付物符合标准。
+- **核心功能**:
+ - **质量概览（Dashboard）**: 展示项目的整体质量状态，包括问题数量、严重性分布等。
+ - **PR 列表**: 展示所有待审核的 Pull Request，包含扫描状态、问题详情等。
+ - **数据来源**:
+ - 后端提供 PR 的详细信息，包括：
+ - PR 标题、作者、状态（打开、合并、关闭）。
+ - 代码变更文件的数量、每个文件的修改行数（新增/删除）。
+ - 安全扫描结果，包括问题的行号、严重性、规则说明等。
+ - AI 生成的代码审查建议。
+ - **质量设置**: 用户可以配置质量门控的规则，例如代码覆盖率要求、安全扫描标准等。
+ - **操作特点**:
+ - 用户可以点击 PR 查看详细信息，包括代码变更和扫描报告。
+ - 系统支持通过图表展示问题分布，帮助用户快速定位高风险区域。
+ - **AI 交互特点**:
+ - AI 自动分析 PR 的代码质量，生成详细的扫描报告。
+ - 用户可以通过与 AI 对话，快速定位问题并获取修复建议。
+ - **数据交互说明**:
+ - 前端通过 API 请求后端获取 PR 列表和详细信息。
+ - 后端调用静态代码分析工具和安全扫描服务，生成扫描报告并返回给前端。
+ - 前端根据后端返回的数据动态渲染 PR 列表和图表。
+ - 用户提交质量设置时，前端将配置数据发送到后端，后端保存并应用新规则。
+ - **用户交互流程**:
+ - 用户在 PR 列表中选择一个 PR，查看详细的代码变更和扫描结果。
+ - 系统展示问题的分布图表，用户可以点击具体问题查看代码上下文。
+ - 用户可以通过界面直接修改质量规则，或与 AI 讨论修复建议。
+
+---
+
+### **用户体验目标**
+- **简洁直观**: 页面布局清晰，用户可以快速找到所需功能。
+- **高效交互**: 通过对话式交互和实时反馈，减少用户操作步骤。
+- **数据驱动**: 以数据图表为核心，帮助用户快速理解项目状态。
+- **模块化设计**: 各模块功能独立，用户可以根据需求自由切换。
+- **AI 驱动**: 每个模块都集成 AI Agent，提供智能化的辅助功能。
+
+---
+
+### **设计建议**
+- **导航优化**: 提供更清晰的导航结构，例如在侧边栏中分组显示主要模块和子功能。
+- **视觉层次**: 通过颜色、字体大小等方式突出重要信息，例如关键数据和操作按钮。
+- **用户引导**: 在每个模块中添加新手引导，帮助用户快速上手。
+- **响应式设计**: 确保页面在不同设备上的良好显示效果。
+- **AI 交互设计**:
+ - 在页面中突出 AI Agent 的入口，例如对话框或悬浮按钮。
+ - 提供 AI 的实时状态反馈，例如“正在分析...”、“已完成”等提示。
+
+---
+
+以上描述从用户功能和 AI Agent 的交互角度出发，帮助 UI 工程师理解产品目标和用户需求，从而设计出更符合用户期望的界面和交互。
\ No newline at end of file