144 lines
8.7 KiB
HTML
144 lines
8.7 KiB
HTML
|
<!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>
|