134 lines
7.5 KiB
HTML
134 lines
7.5 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 - 战略规划 (Planning)</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 bg-blue-50 text-planning rounded-lg font-medium">
|
||
<i class="fa-solid fa-chess-knight w-6"></i> 战略规划
|
||
</a>
|
||
<a href="devops.html" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 hover:text-devops rounded-lg font-medium transition-colors">
|
||
<i class="fa-solid fa-code-branch w-6"></i> 开发运维
|
||
</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> 质量门控
|
||
</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-planning">
|
||
<h1 class="text-xl font-semibold text-gray-800">战略规划 (Planning)</h1>
|
||
</header>
|
||
|
||
<div class="p-8 flex-1 overflow-y-auto flex gap-6">
|
||
<!-- 左侧：AI 分析聊天/上传 -->
|
||
<div class="w-1/3 bg-white rounded-lg shadow-sm border border-gray-200 flex flex-col">
|
||
<div class="p-4 border-b bg-gray-50 font-bold">需求输入 & 分析</div>
|
||
|
||
<div class="flex-1 p-4 overflow-y-auto space-y-4">
|
||
<!-- 聊天记录示例 -->
|
||
<div class="bg-blue-50 text-blue-800 p-3 rounded-lg rounded-tl-none">
|
||
您好！我是需求分析助手。请描述您的需求或上传需求文档。
|
||
</div>
|
||
<div class="bg-gray-100 text-gray-800 p-3 rounded-lg rounded-tr-none ml-8">
|
||
我需要一个用户登录功能，支持密码和短信验证码，且多次错误锁定。
|
||
</div>
|
||
<div class="bg-blue-50 text-blue-800 p-3 rounded-lg rounded-tl-none">
|
||
<i class="fa-solid fa-spinner fa-spin mr-2"></i> 正在提取需求并分析边界条件...
|
||
</div>
|
||
</div>
|
||
|
||
<div class="p-4 border-t border-gray-200">
|
||
<div class="relative">
|
||
<i class="fa-solid fa-paperclip absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-primary"></i>
|
||
<input type="text" placeholder="输入需求描述..." class="w-full pl-10 pr-12 py-2 border rounded-full focus:outline-none focus:border-planning">
|
||
<button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-planning p-2 hover:bg-blue-50 rounded-full">
|
||
<i class="fa-solid fa-paper-plane"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧：需求拆解结果展示 -->
|
||
<div class="flex-1 bg-white rounded-lg shadow-sm border border-gray-200 flex flex-col">
|
||
<div class="p-4 border-b bg-gray-50 font-bold flex justify-between items-center">
|
||
<span>需求拆解结果面板</span>
|
||
<button class="bg-planning text-white px-3 py-1 rounded text-sm hover:bg-blue-600">确认并生成任务</button>
|
||
</div>
|
||
|
||
<div class="p-6 overflow-y-auto pointer-events-none opacity-50 blur-[1px]">
|
||
<!-- Placeholder Data -->
|
||
<h3 class="font-bold text-lg mb-4">登录功能需求分析文档</h3>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="font-semibold text-gray-700 border-l-4 border-planning pl-2 mb-2">功能需求 (Functional)</h4>
|
||
<ul class="list-disc pl-5 space-y-1 text-gray-600">
|
||
<li>支持用户名/手机号与密码登录</li>
|
||
<li>支持手机号与短信验证码登录</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="mb-6">
|
||
<h4 class="font-semibold text-gray-700 border-l-4 border-planning pl-2 mb-2">边界条件与非功能需求</h4>
|
||
<ul class="list-disc pl-5 space-y-1 text-gray-600">
|
||
<li>多次错误：连续错误 5 次锁定账号 15 分钟</li>
|
||
<li>验证码时效：短信验证码有效期 5 分钟</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold text-gray-700 border-l-4 border-planning pl-2 mb-2">提取的任务清单</h4>
|
||
<div class="border rounded-md divide-y">
|
||
<div class="p-3 bg-gray-50 flex justify-between"><span class="font-mono text-sm">TASK-101</span> <span>UI：登录界面设计</span></div>
|
||
<div class="p-3 bg-gray-50 flex justify-between"><span class="font-mono text-sm">TASK-102</span> <span>后端：密码验证与Token派发</span></div>
|
||
<div class="p-3 bg-gray-50 flex justify-between"><span class="font-mono text-sm">TASK-103</span> <span>后端：短信验证码发送与校验</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 遮罩层提示等 -->
|
||
<div class="absolute inset-0 flex items-center justify-center p-8 ml-[33%] rounded text-center">
|
||
<div class="bg-white/80 p-8 rounded-lg shadow-lg backdrop-blur">
|
||
<i class="fa-solid fa-robot text-4xl text-planning mb-4"></i>
|
||
<p class="text-xl font-bold">等待通过左侧对话输入需求</p>
|
||
<p class="text-gray-500 mt-2">AI 分析完成后将在此展示结构化的需求文档和任务清单</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</body>
|
||
</html> |