237 lines
14 KiB
HTML
237 lines
14 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 - AI Agent 统一平台入口</title>
|
||
<!-- 引入 Tailwind CSS 进行快速样式构建 -->
|
||
<script src="https://cdn.tailwindcss.com"></script>
|
||
<!-- 引入 FontAwesome 图标库 -->
|
||
<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',
|
||
secondary: '#4F46E5',
|
||
planning: '#0EA5E9',
|
||
devops: '#10B981',
|
||
quality: '#8B5CF6'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.module-card {
|
||
transition: transform 0.2s, box-shadow 0.2s;
|
||
}
|
||
.module-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
|
||
}
|
||
.ai-pulse {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
@keyframes pulse {
|
||
0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
|
||
70% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
|
||
100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); }
|
||
}
|
||
</style>
|
||
</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">
|
||
<div class="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">主导模块</div>
|
||
<nav class="space-y-2">
|
||
<a href="index.html" class="flex items-center px-4 py-3 bg-blue-50 text-primary rounded-lg font-medium">
|
||
<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 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> 开发运维 (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 class="text-xs font-semibold text-gray-400 uppercase tracking-wider mt-8 mb-4">设置与支持</div>
|
||
<nav class="space-y-2">
|
||
<a href="#" class="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
|
||
<i class="fa-solid fa-gear w-6"></i> 平台设置
|
||
</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="p-4 border-t border-gray-100 flex items-center">
|
||
<img src="https://ui-avatars.com/api/?name=Admin&background=F3F4F6&color=374151" alt="User" class="w-10 h-10 rounded-full mr-3">
|
||
<div>
|
||
<p class="text-sm font-semibold">项目管理员</p>
|
||
<p class="text-xs text-gray-500">在线</p>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="flex-1 flex flex-col h-screen overflow-y-auto relative">
|
||
<!-- 顶部导航 -->
|
||
<header class="h-16 bg-white shadow-sm flex items-center justify-between px-8 z-0">
|
||
<h1 class="text-xl font-semibold text-gray-800">总览控制台</h1>
|
||
<div class="flex items-center space-x-4">
|
||
<div class="relative">
|
||
<i class="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||
<input type="text" placeholder="全局搜索需求、代码或 PR..." class="pl-10 pr-4 py-2 border border-gray-200 rounded-full text-sm focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary w-64 transition-all">
|
||
</div>
|
||
<button class="relative p-2 text-gray-500 hover:text-primary transition-colors">
|
||
<i class="fa-regular fa-bell text-xl"></i>
|
||
<span class="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
|
||
</button>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 内容画布 -->
|
||
<div class="p-8 max-w-7xl mx-auto w-full">
|
||
<!-- 欢迎与 AI 提示 -->
|
||
<div class="bg-gradient-to-r from-blue-600 to-indigo-700 rounded-2xl p-8 text-white mb-8 shadow-lg flex justify-between items-center">
|
||
<div>
|
||
<h2 class="text-3xl font-bold mb-2">欢迎回来, SAFe OS 团队 👋</h2>
|
||
<p class="text-blue-100 mb-4 text-lg">AI Agent 已经准备就绪，今天想从哪个环节开始推进项目？</p>
|
||
<div class="flex items-center text-sm bg-black/20 inline-block px-4 py-2 rounded-lg backdrop-blur-sm">
|
||
<i class="fa-solid fa-robot mr-2 text-blue-300"></i> AI 状态: <span class="text-green-300 ml-1 font-semibold">✓ 运行中 (随时可唤醒)</span>
|
||
</div>
|
||
</div>
|
||
<div class="hidden md:block text-right">
|
||
<div class="text-5xl font-bold opacity-20"><i class="fa-brands fa-hubspot"></i></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据概览精要 -->
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||
<div class="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
|
||
<p class="text-sm text-gray-500 mb-1">规划中需求</p>
|
||
<p class="text-2xl font-bold text-gray-800">24 <span class="text-xs text-green-500 font-normal"><i class="fa-solid fa-arrow-up"></i> 3</span></p>
|
||
</div>
|
||
<div class="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
|
||
<p class="text-sm text-gray-500 mb-1">待合入代码 (PRs)</p>
|
||
<p class="text-2xl font-bold text-gray-800">12 <span class="text-xs text-red-500 font-normal"><i class="fa-solid fa-arrow-down"></i> 2</span></p>
|
||
</div>
|
||
<div class="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
|
||
<p class="text-sm text-gray-500 mb-1">质量健康度</p>
|
||
<p class="text-2xl font-bold text-gray-800 focus-text">92% <span class="text-xs text-green-500 font-normal">优秀</span></p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 三大核心模块入口卡片 -->
|
||
<h3 class="text-lg font-bold text-gray-800 mb-4">核心工作流入口</h3>
|
||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||
|
||
<!-- 模块 1: 战略规划 (Planning) -->
|
||
<div class="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group cursor-pointer flex flex-col">
|
||
<div class="h-2 bg-planning"></div>
|
||
<div class="p-6 flex-1">
|
||
<div class="w-12 h-12 bg-blue-50 text-planning rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-planning group-hover:text-white transition-colors">
|
||
<i class="fa-solid fa-chess-knight"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold text-gray-800 mb-2">战略规划</h4>
|
||
<p class="text-gray-500 mb-4 text-sm min-h-[60px]">一站式需求管理与分析。利用自然语言或文档，AI帮助您生成验收标准、拆解任务和预测边界情况。</p>
|
||
|
||
<div class="space-y-3 mb-6">
|
||
<div class="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||
<i class="fa-solid fa-check text-planning mr-2 w-4"></i> 智能需求分析与拆解
|
||
</div>
|
||
<div class="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||
<i class="fa-solid fa-check text-planning mr-2 w-4"></i> 上下文动态问题对话
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
|
||
<a href="planning.html" class="block text-center w-full py-2 bg-white border border-gray-200 text-planning font-semibold rounded-lg hover:border-planning hover:bg-blue-50 transition-colors">
|
||
进入规划看板 →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块 2: 开发运维 (DevOps) -->
|
||
<div class="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group cursor-pointer flex flex-col">
|
||
<div class="h-2 bg-devops"></div>
|
||
<div class="p-6 flex-1">
|
||
<div class="w-12 h-12 bg-green-50 text-devops rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-devops group-hover:text-white transition-colors">
|
||
<i class="fa-solid fa-code-branch"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold text-gray-800 mb-2">开发运维</h4>
|
||
<p class="text-gray-500 mb-4 text-sm min-h-[60px]">智能研发辅助流水线。输入功能点描述即可生成规范的代码框架和单元测试代码，一键直达测试验证。</p>
|
||
|
||
<div class="space-y-3 mb-6">
|
||
<div class="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||
<i class="fa-solid fa-check text-devops mr-2 w-4"></i> AI 代码框架生成
|
||
</div>
|
||
<div class="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||
<i class="fa-solid fa-check text-devops mr-2 w-4"></i> 自动化测试与建议
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
|
||
<a href="devops.html" class="block text-center w-full py-2 bg-white border border-gray-200 text-devops font-semibold rounded-lg hover:border-devops hover:bg-green-50 transition-colors">
|
||
开启开发流水线 →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 模块 3: 质量门控 (Quality Gate) -->
|
||
<div class="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group cursor-pointer flex flex-col">
|
||
<div class="h-2 bg-quality"></div>
|
||
<div class="p-6 flex-1">
|
||
<div class="w-12 h-12 bg-purple-50 text-quality rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-quality group-hover:text-white transition-colors">
|
||
<i class="fa-solid fa-shield-halved"></i>
|
||
</div>
|
||
<h4 class="text-xl font-bold text-gray-800 mb-2">质量门控</h4>
|
||
<p class="text-gray-500 mb-4 text-sm min-h-[60px]">项目质量的守护神。提供可视化的Dashboard概览，智能审查 PR 修改，拦截代码漏洞与规范问题。</p>
|
||
|
||
<div class="space-y-3 mb-6">
|
||
<div class="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||
<i class="fa-solid fa-check text-quality mr-2 w-4"></i> PR 级智能安全扫描
|
||
</div>
|
||
<div class="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||
<i class="fa-solid fa-check text-quality mr-2 w-4"></i> 对话式漏洞修复建议
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="px-6 py-4 bg-gray-50 border-t border-gray-100">
|
||
<a href="quality.html" class="block text-center w-full py-2 bg-white border border-gray-200 text-quality font-semibold rounded-lg hover:border-quality hover:bg-purple-50 transition-colors">
|
||
查看质量大盘 →
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<!-- 全局悬浮 AI Agent 助手入口 -->
|
||
<div class="fixed bottom-10 right-10 flex flex-col items-end z-50">
|
||
<!-- 气泡提示 -->
|
||
<div class="bg-white px-4 py-3 rounded-2xl shadow-lg border border-gray-100 mb-4 relative animate-fade-in-up">
|
||
<p class="text-sm text-gray-600">需要我帮您新建一个“提测需求”还是“审查PR”呢？</p>
|
||
<div class="absolute -bottom-2 right-6 w-4 h-4 bg-white border-b border-r border-gray-100 transform rotate-45"></div>
|
||
</div>
|
||
<!-- 悬浮按钮 -->
|
||
<button class="w-16 h-16 bg-primary text-white rounded-full shadow-2xl flex items-center justify-center text-3xl hover:bg-blue-700 transition-colors ai-pulse">
|
||
<i class="fa-brands fa-hubspot"></i>
|
||
</button>
|
||
</div>
|
||
|
||
</body>
|
||
</html> |