151 lines
9.1 KiB
HTML
151 lines
9.1 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 - 质量门控 (Quality Gate)</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 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 bg-purple-50 text-quality rounded-lg font-medium">
|
|
<i class="fa-solid fa-shield-halved w-6"></i> 质量门控 (Quality Gate)
|
|
</a>
|
|
</nav>
|
|
</div>
|
|
</aside>
|
|
|
|
<main class="flex-1 flex flex-col overflow-y-auto">
|
|
<header class="h-16 bg-white shadow-sm flex items-center px-8 border-b-4 border-quality sticky top-0 z-10">
|
|
<h1 class="text-xl font-semibold text-gray-800">质量门控 (Quality Gate)Dashboard</h1>
|
|
</header>
|
|
|
|
<div class="p-8 max-w-7xl mx-auto w-full">
|
|
|
|
<!-- 质量概览统计卡片 -->
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8">
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
|
|
<div class="text-gray-500 mb-1 text-sm font-semibold">质量状态</div>
|
|
<div class="text-2xl font-bold text-green-500">通过 (Passed)</div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
|
|
<div class="text-gray-500 mb-1 text-sm font-semibold">代码覆盖率</div>
|
|
<div class="text-2xl font-bold text-gray-800">89.4%</div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
|
|
<div class="text-gray-500 mb-1 text-sm font-semibold">严重安全漏洞</div>
|
|
<div class="text-2xl font-bold text-red-500">2 <span class="text-sm font-normal text-gray-400">待修复</span></div>
|
|
</div>
|
|
<div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
|
|
<div class="text-gray-500 mb-1 text-sm font-semibold">遗留技术债</div>
|
|
<div class="text-2xl font-bold text-orange-500">48h</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PR 列表 -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-8">
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50 flex justify-between items-center">
|
|
<h2 class="font-bold text-gray-800">合并请求审查 (PR List)</h2>
|
|
<span class="text-sm text-gray-500">共 3 个待处理</span>
|
|
</div>
|
|
<div class="divide-y divide-gray-200">
|
|
<!-- PR Item 1: 扫描失败被拦截 -->
|
|
<div class="p-4 hover:bg-gray-50 transition-colors flex items-center justify-between cursor-pointer">
|
|
<div class="flex items-center space-x-4">
|
|
<span class="w-2 h-2 rounded-full bg-red-500"></span>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-800 hover:text-quality">PR #102: feat: 实现用户登录与注册接口</h3>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
<span class="mr-3"><i class="fa-regular fa-clock"></i> 2小时前</span>
|
|
<span class="mr-3"><i class="fa-regular fa-user"></i> 作者: zhangsan</span>
|
|
<span class="text-green-600 mr-2">+120行</span>
|
|
<span class="text-red-500">-20行</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4 text-sm">
|
|
<span class="px-2 py-1 bg-red-50 text-red-600 rounded border border-red-100"><i class="fa-solid fa-xmark mr-1"></i> 扫描未通过</span>
|
|
<span class="text-red-500 font-bold">1个高危漏洞</span>
|
|
<button class="bg-quality text-white px-3 py-1.5 rounded hover:bg-purple-600">查看详情</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PR Item 2: 扫描通过 -->
|
|
<div class="p-4 hover:bg-gray-50 transition-colors flex items-center justify-between cursor-pointer opacity-70">
|
|
<div class="flex items-center space-x-4">
|
|
<span class="w-2 h-2 rounded-full bg-green-500"></span>
|
|
<div>
|
|
<h3 class="font-semibold text-gray-800">PR #101: fix: 首页在移动端布局错位问题</h3>
|
|
<p class="text-sm text-gray-500 mt-1">
|
|
<span class="mr-3"><i class="fa-regular fa-clock"></i> 5小时前</span>
|
|
<span class="mr-3"><i class="fa-regular fa-user"></i> 作者: lisi</span>
|
|
<span class="text-green-600 mr-2">+15行</span>
|
|
<span class="text-red-500">-10行</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center space-x-4 text-sm">
|
|
<span class="px-2 py-1 bg-green-50 text-green-600 rounded border border-green-100"><i class="fa-solid fa-check mr-1"></i> 扫描通过</span>
|
|
<span class="text-gray-500">可合并</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- AI 扫描详情面板示例 (假装点击了 PR #102 后展开的详情) -->
|
|
<div class="bg-purple-50 rounded-lg shadow-inner border border-purple-100 p-6">
|
|
<div class="flex items-start justify-between mb-4">
|
|
<h3 class="font-bold text-gray-800 text-lg flex items-center">
|
|
<i class="fa-solid fa-robot text-quality mr-2"></i> PR #102 质量扫描报告
|
|
</h3>
|
|
<button class="text-gray-400 hover:text-gray-600"><i class="fa-solid fa-xmark text-xl"></i></button>
|
|
</div>
|
|
|
|
<div class="bg-white p-4 rounded border border-gray-200 mb-4">
|
|
<h4 class="text-red-600 font-semibold mb-2"><i class="fa-solid fa-triangle-exclamation mr-1"></i> [高危] SQL 注入风险</h4>
|
|
<p class="text-gray-600 text-sm mb-2">文件: <code class="bg-gray-100 px-1 rounded">auth.service.js</code>, 第 45 行</p>
|
|
<pre class="bg-gray-800 text-gray-300 p-3 rounded font-mono text-sm mb-4"><code><span class="text-red-400">- const query = `SELECT * FROM users WHERE username = '${req.body.username}'`;</span>
|
|
<span class="text-green-400">+ const query = 'SELECT * FROM users WHERE username = ?'; // 修复建议: 使用参数化查询</span></code></pre>
|
|
<button class="bg-gray-100 border border-gray-300 px-3 py-1.5 rounded text-sm hover:bg-gray-200 transition-colors">
|
|
<i class="fa-solid fa-comment-dots text-quality mr-1"></i> 让 AI 帮我自动修复这段代码
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</main>
|
|
</body>
|
|
</html> |