Bosch_Demo/safe-os-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance PlanningAgent with Markdown rendering and Tailwind Typography

Browse Source
This commit is contained in:
Ding Shuo
2026-03-13 10:52:06 +08:00
parent c8c687cf60
commit cca1b8d046
13 changed files with 2700 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
template/devops.html Normal file
View File

@@ -0,0 +1,144 @@
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SAFe OS - 开发运维 (DevOps)</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#2563EB',
planning: '#0EA5E9',
devops: '#10B981',
quality: '#8B5CF6'
}
}
}
}
</script>
</head>
<body class="bg-gray-50 flex h-screen overflow-hidden text-gray-800 font-sans">
<!-- 侧边栏导航 -->
<aside class="w-64 bg-white shadow-md flex flex-col z-10">
<div class="h-16 flex items-center px-6 border-b border-gray-100">
<i class="fa-solid fa-layer-group text-primary text-2xl mr-3"></i>
<span class="text-xl font-bold text-gray-800">SAFe OS</span>
</div>
<div class="p-4 flex-1">
<nav class="space-y-2">
<a href="index.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-primary rounded-lg font-medium transition-colors">
<i class="fa-solid fa-house w-6"></i> 总览控制台
</a>
<a href="planning.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-planning rounded-lg font-medium transition-colors">
<i class="fa-solid fa-chess-knight w-6"></i> 战略规划 (Planning)
</a>
<a href="devops.html" class="flex items-center px-4 py-3 bg-green-50 text-devops rounded-lg font-medium">
<i class="fa-solid fa-code-branch w-6"></i> 开发运维 (DevOps)
</a>
<a href="quality.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-quality rounded-lg font-medium transition-colors">
<i class="fa-solid fa-shield-halved w-6"></i> 质量门控 (Quality Gate)
</a>
</nav>
</div>
</aside>
<main class="flex-1 flex flex-col">
<header class="h-16 bg-white shadow-sm flex items-center px-8 border-b-4 border-devops">
<h1 class="text-xl font-semibold text-gray-800">开发运维 (DevOps)</h1>
</header>
<div class="p-8 flex-1 overflow-y-auto">
<!-- 进度条 -->
<div class="max-w-4xl mx-auto mb-10">
<div class="flex items-center justify-between">
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-devops text-white flex items-center justify-center font-bold relative z-10 mb-2">1</div>
<span class="text-sm font-semibold text-devops">需求输入</span>
</div>
<div class="flex-1 border-t-2 border-devops relative -top-3"></div>
<div class="flex flex-col items-center">
<div class="w-10 h-10 rounded-full bg-devops text-white flex items-center justify-center font-bold relative z-10 mb-2">2</div>
<span class="text-sm font-semibold text-devops">代码与测试生成</span>
</div>
<div class="flex-1 border-t-2 border-gray-300 relative -top-3"></div>
<div class="flex flex-col items-center opacity-50">
<div class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center font-bold relative z-10 mb-2">3</div>
<span class="text-sm font-semibold">自动化测试执行</span>
</div>
</div>
</div>
<!-- 主内容区域：代码与测试生成结果 -->
<div class="max-w-6xl mx-auto bg-white rounded-lg shadow-sm border border-gray-200 flex flex-col h-[600px]">
<div class="p-4 border-b bg-gray-50 font-bold flex justify-between items-center">
<span>AI 生成结果</span>
<button class="bg-devops text-white px-4 py-2 rounded text-sm hover:bg-green-600 transition-colors">执行自动化测试 <i class="fa-solid fa-play ml-1"></i></button>
</div>
<div class="flex flex-1 overflow-hidden">
<!-- 左侧：对话 -->
<div class="w-1/3 border-r border-gray-200 bg-gray-50 flex flex-col">
<div class="flex-1 p-4 overflow-y-auto space-y-4 text-sm">
<div class="bg-white p-3 rounded-lg border shadow-sm">
<p class="text-gray-800 font-semibold mb-1"><i class="fa-solid fa-robot text-devops mr-1"></i> Developer Agent</p>
<p class="text-gray-600">我已经根据您的 "登录功能" 需求，生成了用户控制器的代码框架和对应的单元测试（Jest）。</p>
<p class="text-gray-600 mt-2">测试用例涵盖了 5 种边界情况，您可以查看右侧代码。</p>
</div>
</div>
<div class="p-4 border-t border-gray-200 bg-white">
<div class="relative">
<input type="text" placeholder="向 AI 提出修改建议..." class="w-full pl-4 pr-10 py-2 border rounded-md focus:outline-none focus:border-devops text-sm">
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-devops p-1 hover:bg-green-50 rounded">
<i class="fa-solid fa-paper-plane"></i>
</button>
</div>
</div>
</div>
<!-- 右侧：代码编辑器视图 -->
<div class="w-2/3 bg-[#1e1e1e] text-gray-300 font-mono text-sm flex flex-col">
<div class="flex bg-[#2d2d2d] border-b border-[#404040]">
<button class="px-4 py-2 bg-[#1e1e1e] border-t-2 border-devops text-white">auth.controller.js</button>
<button class="px-4 py-2 hover:bg-[#1e1e1e] transition-colors">auth.controller.test.js</button>
</div>
<div class="flex-1 p-4 overflow-y-auto">
<pre><code><span class="text-purple-400">const</span> <span class="text-yellow-200">AuthService</span> = <span class="text-blue-400">require</span>(<span class="text-green-300">'../services/auth.service'</span>);
<span class="text-purple-400">class</span> <span class="text-yellow-200">AuthController</span> {
<span class="text-gray-500">// 处理用户登录请求</span>
<span class="text-purple-400">async</span> <span class="text-blue-300">login</span>(req, res) {
<span class="text-purple-400">try</span> {
<span class="text-purple-400">const</span> { username, password } = req.body;
<span class="text-purple-400">if</span> (!username || !password) {
<span class="text-purple-400">return</span> res.status(<span class="text-orange-300">400</span>).json({ error: <span class="text-green-300">"缺少必要的参数"</span> });
}
<span class="text-purple-400">const</span> token = <span class="text-purple-400">await</span> AuthService.<span class="text-blue-300">authenticate</span>(username, password);
<span class="text-purple-400">return</span> res.status(<span class="text-orange-300">200</span>).json({ token });
} <span class="text-purple-400">catch</span> (error) {
<span class="text-purple-400">if</span> (error.message === <span class="text-green-300">'AccountLocked'</span>) {
<span class="text-purple-400">return</span> res.status(<span class="text-orange-300">403</span>).json({ error: <span class="text-green-300">"账号已被锁定，请稍后再试"</span> });
}
<span class="text-purple-400">return</span> res.status(<span class="text-orange-300">401</span>).json({ error: <span class="text-green-300">"认证失败"</span> });
}
}
}
<span class="text-purple-400">module</span>.exports = <span class="text-purple-400">new</span> <span class="text-yellow-200">AuthController</span>();
</code></pre>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>