Compare commits
3 Commits
cheng-0312
...
99a3281d58
| Author | SHA1 | Date | |
|---|---|---|---|
| 99a3281d58 | |||
|
cca1b8d046 | ||
|
|
c8c687cf60 |
@@ -6,6 +6,7 @@
|
|||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet" />
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet" />
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||||||
<title>SAFe OS — Multi-Agent 敏捷协同指挥中心</title>
|
<title>SAFe OS — Multi-Agent 敏捷协同指挥中心</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|||||||
1754
package-lock.json
generated
1754
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -9,9 +9,13 @@
|
|||||||
"preview": "vite preview"
|
"preview": "vite preview"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@tailwindcss/typography": "^0.5.19",
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
"react-dom": "^18.3.1",
|
"react-dom": "^18.3.1",
|
||||||
"react-router-dom": "^6.28.0"
|
"react-markdown": "^10.1.0",
|
||||||
|
"react-router-dom": "^6.28.0",
|
||||||
|
"rehype-raw": "^7.0.0",
|
||||||
|
"remark-gfm": "^4.0.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^25.4.0",
|
"@types/node": "^25.4.0",
|
||||||
|
|||||||
@@ -4,10 +4,14 @@ import PlanningAgent from "./pages/PlanningAgent";
|
|||||||
import DevOpsAgent from "./pages/DevOpsAgent";
|
import DevOpsAgent from "./pages/DevOpsAgent";
|
||||||
import QualityGate from "./pages/QualityGate";
|
import QualityGate from "./pages/QualityGate";
|
||||||
|
|
||||||
|
import Home from "./pages/Home";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
return (
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route element={<Layout />}>
|
<Route element={<Layout />}>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/home" element={<Home />} />
|
||||||
<Route path="/planning" element={<PlanningAgent />} />
|
<Route path="/planning" element={<PlanningAgent />} />
|
||||||
<Route path="/devops" element={<DevOpsAgent />} />
|
<Route path="/devops" element={<DevOpsAgent />} />
|
||||||
<Route path="/quality" element={<Navigate to="/quality/dashboard" replace />} />
|
<Route path="/quality" element={<Navigate to="/quality/dashboard" replace />} />
|
||||||
|
|||||||
235
src/Layout.tsx
235
src/Layout.tsx
@@ -1,158 +1,123 @@
|
|||||||
import { useEffect, useMemo, useState } from "react";
|
import { useMemo } from "react";
|
||||||
import { NavLink, Outlet, useLocation } from "react-router-dom";
|
import { NavLink, Outlet, useLocation } from "react-router-dom";
|
||||||
|
|
||||||
const QUALITY_SUB_ITEMS = [
|
|
||||||
{ to: "/quality/dashboard", title: "Overview" },
|
|
||||||
{ to: "/quality/pr-list", title: "PR List" },
|
|
||||||
{ to: "/quality/settings", title: "Settings" },
|
|
||||||
] as const;
|
|
||||||
|
|
||||||
const PAGE_TITLES: Record<string, string> = {
|
const PAGE_TITLES: Record<string, string> = {
|
||||||
"/planning": "Strategic Planning Workspace",
|
"/": "总览控制台",
|
||||||
"/devops": "Delivery Execution Workspace",
|
"/planning": "战略规划 (Planning)",
|
||||||
"/quality/dashboard": "Quality Gate Overview",
|
"/devops": "开发运维 (DevOps)",
|
||||||
"/quality/pr-list": "Quality Gate · PR List",
|
"/quality": "质量门控 (Quality Gate Dashboard)",
|
||||||
"/quality/settings": "Quality Gate · Settings",
|
"/quality/dashboard": "质量门控 (Quality Gate Dashboard)",
|
||||||
|
"/quality/pr-list": "合并请求审查 (PR List)",
|
||||||
|
"/quality/settings": "质量设置",
|
||||||
};
|
};
|
||||||
|
|
||||||
export default function Layout() {
|
export default function Layout() {
|
||||||
const { pathname } = useLocation();
|
const { pathname } = useLocation();
|
||||||
const inQuality = pathname.startsWith("/quality");
|
|
||||||
const [qualityExpanded, setQualityExpanded] = useState<boolean>(inQuality);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (inQuality) {
|
|
||||||
setQualityExpanded(true);
|
|
||||||
}
|
|
||||||
}, [inQuality]);
|
|
||||||
|
|
||||||
const pageTitle = useMemo(() => {
|
const pageTitle = useMemo(() => {
|
||||||
if (PAGE_TITLES[pathname]) {
|
return PAGE_TITLES[pathname] || "SAFe OS";
|
||||||
return PAGE_TITLES[pathname];
|
}, [pathname]);
|
||||||
}
|
|
||||||
if (inQuality) {
|
|
||||||
return "Quality Gate";
|
|
||||||
}
|
|
||||||
return "SAFe OS";
|
|
||||||
}, [pathname, inQuality]);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-screen w-screen bg-[#fafafa]">
|
<div className="bg-gray-50 flex h-screen w-screen overflow-hidden text-gray-800 font-sans">
|
||||||
{/* ─── Sidebar ─── */}
|
{/* 侧边栏导航 */}
|
||||||
<nav className="w-[280px] shrink-0 bg-surface-dark text-txt-inverse flex flex-col py-8 border-r border-white/10">
|
<aside className="w-64 bg-white shadow-md flex flex-col z-10 shrink-0">
|
||||||
<div className="px-8 mb-9 text-2xl font-extrabold tracking-tight select-none">
|
<div className="h-16 flex items-center px-6 border-b border-gray-100">
|
||||||
SAFe <span className="text-magenta">OS</span>
|
<i className="fa-solid fa-layer-group text-[#2563EB] text-2xl mr-3"></i>
|
||||||
|
<span className="text-xl font-bold text-gray-800">SAFe OS</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="px-8 text-[11px] text-gray-500 uppercase font-bold tracking-widest mb-4">
|
<div className="p-4 flex-1">
|
||||||
Agent Pipeline
|
<div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mb-4">主导模块</div>
|
||||||
|
<nav className="space-y-2">
|
||||||
|
<NavLink
|
||||||
|
to="/"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
|
||||||
|
isActive && pathname === '/'
|
||||||
|
? "bg-blue-50 text-[#2563EB]"
|
||||||
|
: "text-gray-600 hover:bg-gray-50 hover:text-[#2563EB]"
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<i className="fa-solid fa-house w-6"></i> 总览控制台
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/planning"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
|
||||||
|
isActive
|
||||||
|
? "bg-blue-50 text-[#0EA5E9]"
|
||||||
|
: "text-gray-600 hover:bg-gray-50 hover:text-[#0EA5E9]"
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<i className="fa-solid fa-chess-knight w-6"></i> 战略规划 (Planning)
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/devops"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
|
||||||
|
isActive
|
||||||
|
? "bg-green-50 text-[#10B981]"
|
||||||
|
: "text-gray-600 hover:bg-gray-50 hover:text-[#10B981]"
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<i className="fa-solid fa-code-branch w-6"></i> 开发运维 (DevOps)
|
||||||
|
</NavLink>
|
||||||
|
<NavLink
|
||||||
|
to="/quality/dashboard"
|
||||||
|
className={({ isActive }) =>
|
||||||
|
`flex items-center px-4 py-3 rounded-lg font-medium transition-colors ${
|
||||||
|
pathname.startsWith('/quality')
|
||||||
|
? "bg-purple-50 text-[#8B5CF6]"
|
||||||
|
: "text-gray-600 hover:bg-gray-50 hover:text-[#8B5CF6]"
|
||||||
|
}`
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<i className="fa-solid fa-shield-halved w-6"></i> 质量门控 (Quality Gate)
|
||||||
|
</NavLink>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div className="text-xs font-semibold text-gray-400 uppercase tracking-wider mt-8 mb-4">设置与支持</div>
|
||||||
|
<nav className="space-y-2">
|
||||||
|
<a href="#" className="flex items-center px-4 py-3 text-gray-600 hover:bg-gray-50 rounded-lg transition-colors">
|
||||||
|
<i className="fa-solid fa-gear w-6"></i> 平台设置
|
||||||
|
</a>
|
||||||
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<NavLink
|
<div className="p-4 border-t border-gray-100 flex items-center">
|
||||||
to="/planning"
|
<img src="https://ui-avatars.com/api/?name=Admin&background=F3F4F6&color=374151" alt="User" className="w-10 h-10 rounded-full mr-3" />
|
||||||
className={({ isActive }) =>
|
<div>
|
||||||
`mx-4 rounded-xl flex items-center gap-3 px-4 py-3 border border-transparent transition-all cursor-pointer ${
|
<p className="text-sm font-semibold">项目管理员</p>
|
||||||
isActive
|
<p className="text-xs text-gray-500">在线</p>
|
||||||
? "border-magenta/40 bg-white/10"
|
</div>
|
||||||
: "hover:bg-white/5"
|
</div>
|
||||||
}`
|
</aside>
|
||||||
}
|
|
||||||
>
|
{/* 主内容区 */}
|
||||||
{({ isActive }) => (
|
<main className="flex-1 flex flex-col h-screen overflow-y-auto relative min-w-0">
|
||||||
<>
|
{/* 顶部导航 */}
|
||||||
<span
|
<header className="h-16 bg-white shadow-sm flex items-center justify-between px-8 z-0 shrink-0">
|
||||||
className={`w-2 h-2 rounded-full shrink-0 ${
|
<h1 className="text-xl font-semibold text-gray-800">{pageTitle}</h1>
|
||||||
isActive ? "bg-magenta" : "bg-gray-600"
|
{pathname === '/' && (
|
||||||
}`}
|
<div className="flex items-center space-x-4">
|
||||||
/>
|
<div className="relative">
|
||||||
<div>
|
<i className="fa-solid fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
|
||||||
<div className="font-bold text-[0.95rem]">1. Planning Council Agent</div>
|
<input type="text" placeholder="全局搜索需求、代码或 PR..." className="pl-10 pr-4 py-2 border border-gray-200 rounded-full text-sm focus:outline-none focus:border-[#2563EB] focus:ring-1 focus:ring-[#2563EB] w-64 transition-all" />
|
||||||
<div className="text-xs text-gray-400">Business and architecture planning</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
<button className="relative p-2 text-gray-500 hover:text-[#2563EB] transition-colors">
|
||||||
)}
|
<i className="fa-regular fa-bell text-xl"></i>
|
||||||
</NavLink>
|
<span className="absolute top-1 right-1 w-2.5 h-2.5 bg-red-500 rounded-full border-2 border-white"></span>
|
||||||
|
</button>
|
||||||
<NavLink
|
|
||||||
to="/devops"
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`mx-4 rounded-xl flex items-center gap-3 px-4 py-3 border border-transparent transition-all cursor-pointer ${
|
|
||||||
isActive
|
|
||||||
? "border-magenta/40 bg-white/10"
|
|
||||||
: "hover:bg-white/5"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{({ isActive }) => (
|
|
||||||
<>
|
|
||||||
<span
|
|
||||||
className={`w-2 h-2 rounded-full shrink-0 ${
|
|
||||||
isActive ? "bg-magenta" : "bg-gray-600"
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<div className="font-bold text-[0.95rem]">2. DevOps Agent</div>
|
|
||||||
<div className="text-xs text-gray-400">Story breakdown and implementation</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</NavLink>
|
|
||||||
|
|
||||||
<div className="mx-4 rounded-xl border border-transparent">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setQualityExpanded((v) => !v)}
|
|
||||||
className={`w-full rounded-xl flex items-center gap-3 px-4 py-3 transition-all text-left ${
|
|
||||||
inQuality ? "bg-white/10 border border-magenta/40" : "hover:bg-white/5"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
<span
|
|
||||||
className={`w-2 h-2 rounded-full shrink-0 ${
|
|
||||||
inQuality ? "bg-magenta" : "bg-gray-600"
|
|
||||||
}`}
|
|
||||||
/>
|
|
||||||
<div className="min-w-0 flex-1">
|
|
||||||
<div className="font-bold text-[0.95rem]">3. Quality Gate Agent</div>
|
|
||||||
<div className="text-xs text-gray-400">Automated validation and review</div>
|
|
||||||
</div>
|
|
||||||
<span className={`text-xs text-gray-400 transition-transform ${qualityExpanded ? "rotate-90" : ""}`}>
|
|
||||||
▶
|
|
||||||
</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{qualityExpanded && (
|
|
||||||
<div className="pl-10 pr-3 pb-3 pt-1 flex flex-col gap-1">
|
|
||||||
{QUALITY_SUB_ITEMS.map((sub) => (
|
|
||||||
<NavLink
|
|
||||||
key={sub.to}
|
|
||||||
to={sub.to}
|
|
||||||
className={({ isActive }) =>
|
|
||||||
`text-xs font-bold px-3 py-2 rounded-lg transition-colors ${
|
|
||||||
isActive
|
|
||||||
? "text-magenta bg-white/10"
|
|
||||||
: "text-gray-400 hover:text-white hover:bg-white/5"
|
|
||||||
}`
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{sub.title}
|
|
||||||
</NavLink>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-auto px-8 text-[0.7rem] text-gray-600">
|
|
||||||
T-Systems · SAFe Multi-Agent Demo UI
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* ─── Main workspace ─── */}
|
|
||||||
<main className="flex-1 flex flex-col bg-white min-w-0">
|
|
||||||
<header className="h-20 px-10 flex items-center justify-between border-b border-border/80 bg-white/90 backdrop-blur shrink-0">
|
|
||||||
<h1 className="text-2xl font-extrabold tracking-tight">{pageTitle}</h1>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<div className="flex-1 overflow-hidden">
|
{/* 内容画布 */}
|
||||||
|
<div className="flex-1 w-full bg-gray-50 overflow-y-auto">
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
134
src/pages/Home.tsx
Normal file
134
src/pages/Home.tsx
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div className="p-8 max-w-7xl mx-auto w-full">
|
||||||
|
{/* 欢迎与 AI 提示 */}
|
||||||
|
<div className="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 className="text-3xl font-bold mb-2">欢迎回来, SAFe OS 团队 👋</h2>
|
||||||
|
<p className="text-blue-100 mb-4 text-lg">AI Agent 已经准备就绪，今天想从哪个环节开始推进项目？</p>
|
||||||
|
<div className="flex items-center text-sm bg-black/20 inline-block px-4 py-2 rounded-lg backdrop-blur-sm">
|
||||||
|
<i className="fa-solid fa-robot mr-2 text-blue-300"></i> AI 状态: <span className="text-green-300 ml-1 font-semibold">✓ 运行中 (随时可唤醒)</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="hidden md:block text-right">
|
||||||
|
<div className="text-5xl font-bold opacity-20"><i className="fa-brands fa-hubspot"></i></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 数据概览精要 */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
|
||||||
|
<div className="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">规划中需求</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-800">24 <span className="text-xs text-green-500 font-normal"><i className="fa-solid fa-arrow-up"></i> 3</span></p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">待合入代码 (PRs)</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-800">12 <span className="text-xs text-red-500 font-normal"><i className="fa-solid fa-arrow-down"></i> 2</span></p>
|
||||||
|
</div>
|
||||||
|
<div className="bg-white p-5 rounded-xl text-center border border-gray-100 shadow-sm">
|
||||||
|
<p className="text-sm text-gray-500 mb-1">质量健康度</p>
|
||||||
|
<p className="text-2xl font-bold text-gray-800 focus-text">92% <span className="text-xs text-green-500 font-normal">优秀</span></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 三大核心模块入口卡片 */}
|
||||||
|
<h3 className="text-lg font-bold text-gray-800 mb-4">核心工作流入口</h3>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
|
||||||
|
{/* 模块 1: 战略规划 (Planning) */}
|
||||||
|
<div className="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group flex flex-col hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
|
||||||
|
<div className="h-2 bg-[#0EA5E9]"></div>
|
||||||
|
<div className="p-6 flex-1">
|
||||||
|
<div className="w-12 h-12 bg-blue-50 text-[#0EA5E9] rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-[#0EA5E9] group-hover:text-white transition-colors">
|
||||||
|
<i className="fa-solid fa-chess-knight"></i>
|
||||||
|
</div>
|
||||||
|
<h4 className="text-xl font-bold text-gray-800 mb-2">战略规划</h4>
|
||||||
|
<p className="text-gray-500 mb-4 text-sm min-h-[60px]">一站式需求管理与分析。利用自然语言或文档，AI帮助您生成验收标准、拆解任务和预测边界情况。</p>
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-6">
|
||||||
|
<div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||||||
|
<i className="fa-solid fa-check text-[#0EA5E9] mr-2 w-4"></i> 智能需求分析与拆解
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||||||
|
<i className="fa-solid fa-check text-[#0EA5E9] mr-2 w-4"></i> 上下文动态问题对话
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-6 py-4 bg-gray-50 border-t border-gray-100">
|
||||||
|
<Link to="/planning" className="block text-center w-full py-2 bg-white border border-gray-200 text-[#0EA5E9] font-semibold rounded-lg hover:border-[#0EA5E9] hover:bg-blue-50 transition-colors">
|
||||||
|
进入规划看板 →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 模块 2: 开发运维 (DevOps) */}
|
||||||
|
<div className="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group flex flex-col hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
|
||||||
|
<div className="h-2 bg-[#10B981]"></div>
|
||||||
|
<div className="p-6 flex-1">
|
||||||
|
<div className="w-12 h-12 bg-green-50 text-[#10B981] rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-[#10B981] group-hover:text-white transition-colors">
|
||||||
|
<i className="fa-solid fa-code-branch"></i>
|
||||||
|
</div>
|
||||||
|
<h4 className="text-xl font-bold text-gray-800 mb-2">开发运维</h4>
|
||||||
|
<p className="text-gray-500 mb-4 text-sm min-h-[60px]">智能研发辅助流水线。输入功能点描述即可生成规范的代码框架和单元测试代码，一键直达测试验证。</p>
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-6">
|
||||||
|
<div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||||||
|
<i className="fa-solid fa-check text-[#10B981] mr-2 w-4"></i> AI 代码框架生成
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||||||
|
<i className="fa-solid fa-check text-[#10B981] mr-2 w-4"></i> 自动化测试与建议
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-6 py-4 bg-gray-50 border-t border-gray-100">
|
||||||
|
<Link to="/devops" className="block text-center w-full py-2 bg-white border border-gray-200 text-[#10B981] font-semibold rounded-lg hover:border-[#10B981] hover:bg-green-50 transition-colors">
|
||||||
|
开启开发流水线 →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 模块 3: 质量门控 (Quality Gate) */}
|
||||||
|
<div className="module-card bg-white rounded-2xl overflow-hidden border border-gray-100 shadow-sm relative group flex flex-col hover:-translate-y-1 hover:shadow-xl transition-all duration-300">
|
||||||
|
<div className="h-2 bg-[#8B5CF6]"></div>
|
||||||
|
<div className="p-6 flex-1">
|
||||||
|
<div className="w-12 h-12 bg-purple-50 text-[#8B5CF6] rounded-xl flex items-center justify-center text-2xl mb-4 group-hover:bg-[#8B5CF6] group-hover:text-white transition-colors">
|
||||||
|
<i className="fa-solid fa-shield-halved"></i>
|
||||||
|
</div>
|
||||||
|
<h4 className="text-xl font-bold text-gray-800 mb-2">质量门控</h4>
|
||||||
|
<p className="text-gray-500 mb-4 text-sm min-h-[60px]">项目质量的守护神。提供可视化的Dashboard概览，智能审查 PR 修改，拦截代码漏洞与规范问题。</p>
|
||||||
|
|
||||||
|
<div className="space-y-3 mb-6">
|
||||||
|
<div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||||||
|
<i className="fa-solid fa-check text-[#8B5CF6] mr-2 w-4"></i> PR 级智能安全扫描
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center text-sm text-gray-600 bg-gray-50 p-2 rounded">
|
||||||
|
<i className="fa-solid fa-check text-[#8B5CF6] mr-2 w-4"></i> 对话式漏洞修复建议
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="px-6 py-4 bg-gray-50 border-t border-gray-100">
|
||||||
|
<Link to="/quality" className="block text-center w-full py-2 bg-white border border-gray-200 text-[#8B5CF6] font-semibold rounded-lg hover:border-[#8B5CF6] hover:bg-purple-50 transition-colors">
|
||||||
|
查看质量大盘 →
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 全局悬浮 AI Agent 助手入口（占位） */}
|
||||||
|
<div className="fixed bottom-10 right-10 flex flex-col items-end z-50">
|
||||||
|
<div className="bg-white px-4 py-3 rounded-2xl shadow-lg border border-gray-100 mb-4 relative animate-fade-in-up">
|
||||||
|
<p className="text-sm text-gray-600">需要我帮您新建一个“提测需求”还是“审查PR”呢？</p>
|
||||||
|
<div className="absolute -bottom-2 right-6 w-4 h-4 bg-white border-b border-r border-gray-100 transform rotate-45"></div>
|
||||||
|
</div>
|
||||||
|
<button className="w-16 h-16 bg-[#2563EB] text-white rounded-full shadow-2xl flex items-center justify-center text-3xl hover:bg-blue-700 transition-colors ai-pulse">
|
||||||
|
<i className="fa-brands fa-hubspot"></i>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,4 +1,7 @@
|
|||||||
import { useCallback, useEffect, useReducer, useRef, useState } from "react";
|
import { useCallback, useEffect, useReducer, useRef, useState } from "react";
|
||||||
|
import ReactMarkdown from "react-markdown";
|
||||||
|
import remarkGfm from "remark-gfm";
|
||||||
|
import rehypeRaw from "rehype-raw";
|
||||||
import { API } from "../config";
|
import { API } from "../config";
|
||||||
|
|
||||||
/* ─── Types ─── */
|
/* ─── Types ─── */
|
||||||
@@ -294,7 +297,18 @@ export default function PlanningAgent() {
|
|||||||
{msg.role === "assistant" && (
|
{msg.role === "assistant" && (
|
||||||
<span className="badge mb-3 block w-fit">SYSTEM / RE-ACT LOOP</span>
|
<span className="badge mb-3 block w-fit">SYSTEM / RE-ACT LOOP</span>
|
||||||
)}
|
)}
|
||||||
{msg.content || "Thinking..."}
|
{msg.role === "assistant" ? (
|
||||||
|
<div className="prose prose-sm max-w-none prose-p:my-1 prose-pre:bg-gray-800 prose-pre:text-gray-100 prose-code:text-magenta prose-code:bg-magenta/10 prose-code:px-1 prose-code:rounded prose-li:my-0">
|
||||||
|
<ReactMarkdown
|
||||||
|
remarkPlugins={[remarkGfm]}
|
||||||
|
rehypePlugins={[rehypeRaw]}
|
||||||
|
>
|
||||||
|
{msg.content || "Thinking..."}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
msg.content || "Thinking..."
|
||||||
|
)}
|
||||||
{msg.status === "failed" && (
|
{msg.status === "failed" && (
|
||||||
<span className="text-red-500 text-xs block mt-2">Failed to send</span>
|
<span className="text-red-500 text-xs block mt-2">Failed to send</span>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -30,5 +30,7 @@ export default {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
plugins: [],
|
plugins: [
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
],
|
||||||
};
|
};
|
||||||
|
|||||||
144
template/devops.html
Normal file
144
template/devops.html
Normal 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>
|
||||||
237
template/index.html
Normal file
237
template/index.html
Normal file
@@ -0,0 +1,237 @@
|
|||||||
|
<!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>
|
||||||
134
template/planning.html
Normal file
134
template/planning.html
Normal file
@@ -0,0 +1,134 @@
|
|||||||
|
<!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> 战略规划 (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>
|
||||||
|
</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>
|
||||||
151
template/quality.html
Normal file
151
template/quality.html
Normal file
@@ -0,0 +1,151 @@
|
|||||||
|
<!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>
|
||||||
108
template/工程页面内容总结.md
Normal file
108
template/工程页面内容总结.md
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
# 工程产品功能描述
|
||||||
|
|
||||||
|
以下是当前工程产品的功能描述，从用户视角出发，帮助 UI 工程师重新设计页面和交互：
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### **产品概览**
|
||||||
|
- **产品名称**: SAFe OS
|
||||||
|
- **目标用户**: 软件开发团队、项目经理、质量保证工程师。
|
||||||
|
- **核心目标**: 提供一个集成的工作平台，支持战略规划、开发运维管理、质量门控等功能，提升团队协作效率。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### **主要功能模块**
|
||||||
|
|
||||||
|
#### **1. 战略规划模块（Planning）**
|
||||||
|
- **用户目标**: 帮助项目经理进行需求分析、任务分解和优先级规划。
|
||||||
|
- **核心功能**:
|
||||||
|
- **需求管理**: 用户可以输入需求描述，系统自动生成功能需求、非功能需求、验收标准等。
|
||||||
|
- **任务分解**: 系统支持将需求分解为具体任务，生成任务清单。
|
||||||
|
- **边界情况分析**: 系统提示用户考虑潜在的边界情况，确保需求全面。
|
||||||
|
- **AI 交互特点**:
|
||||||
|
- 用户通过自然语言输入需求，AI Agent 提供实时分析和建议。
|
||||||
|
- AI 会根据上下文动态生成问题，帮助用户完善需求。
|
||||||
|
- **数据交互说明**:
|
||||||
|
- 前端通过 API 将用户输入的需求发送到后端。
|
||||||
|
- 后端调用 AI 模型进行需求分析，返回结构化的需求数据（功能需求、非功能需求、验收标准等）。
|
||||||
|
- 前端实时更新界面，展示分析结果，并允许用户进一步编辑。
|
||||||
|
- **用户交互流程**:
|
||||||
|
- 用户可以通过文本框输入需求，也可以上传包含需求的文件（如 Word 或 PDF）。
|
||||||
|
- 系统解析文件内容并提取关键信息，展示在界面上供用户确认。
|
||||||
|
- 用户可以对提取的内容进行修改或补充，最终确认后进入任务分解阶段。
|
||||||
|
|
||||||
|
#### **2. 开发运维模块（DevOps）**
|
||||||
|
- **用户目标**: 帮助开发团队高效完成代码开发、测试和部署。
|
||||||
|
- **核心功能**:
|
||||||
|
- **代码生成**: 用户输入功能描述，AI Agent 自动生成代码模板和单元测试。
|
||||||
|
- **测试执行**: 系统支持自动化测试执行，展示测试通过率、失败用例等信息。
|
||||||
|
- **实施建议**: AI 提供代码实现的优化建议，帮助开发者提升代码质量。
|
||||||
|
- **操作流程**:
|
||||||
|
- 用户通过一个多步骤的进度条界面完成操作，每一步都有明确的指引。
|
||||||
|
- 例如：需求输入 → 代码生成 → 测试生成 → 测试执行 → 结果分析。
|
||||||
|
- 每一步完成后，用户可以选择继续下一步或返回修改。
|
||||||
|
- **AI 交互特点**:
|
||||||
|
- 用户可以通过对话式界面与 AI 讨论代码实现细节。
|
||||||
|
- AI 提供实时反馈，例如代码片段、测试结果和优化建议。
|
||||||
|
- **数据交互说明**:
|
||||||
|
- 前端通过 API 将用户输入的功能描述发送到后端。
|
||||||
|
- 后端调用代码生成服务，返回生成的代码模板和单元测试。
|
||||||
|
- 测试执行时，前端发送测试请求到后端，后端运行测试并返回测试结果（通过率、失败用例、错误日志等）。
|
||||||
|
- 前端根据后端返回的数据动态更新进度条和结果展示。
|
||||||
|
- **用户交互流程**:
|
||||||
|
- 用户在界面上输入功能描述，或上传包含功能需求的文件。
|
||||||
|
- 系统解析需求后，生成代码模板并展示给用户。
|
||||||
|
- 用户可以对生成的代码进行修改或直接运行测试。
|
||||||
|
- 测试完成后，系统展示测试结果，并提供优化建议。
|
||||||
|
|
||||||
|
#### **3. 质量门控模块（Quality Gate）**
|
||||||
|
- **用户目标**: 帮助质量保证工程师监控代码质量，确保交付物符合标准。
|
||||||
|
- **核心功能**:
|
||||||
|
- **质量概览（Dashboard）**: 展示项目的整体质量状态，包括问题数量、严重性分布等。
|
||||||
|
- **PR 列表**: 展示所有待审核的 Pull Request，包含扫描状态、问题详情等。
|
||||||
|
- **数据来源**:
|
||||||
|
- 后端提供 PR 的详细信息，包括：
|
||||||
|
- PR 标题、作者、状态（打开、合并、关闭）。
|
||||||
|
- 代码变更文件的数量、每个文件的修改行数（新增/删除）。
|
||||||
|
- 安全扫描结果，包括问题的行号、严重性、规则说明等。
|
||||||
|
- AI 生成的代码审查建议。
|
||||||
|
- **质量设置**: 用户可以配置质量门控的规则，例如代码覆盖率要求、安全扫描标准等。
|
||||||
|
- **操作特点**:
|
||||||
|
- 用户可以点击 PR 查看详细信息，包括代码变更和扫描报告。
|
||||||
|
- 系统支持通过图表展示问题分布，帮助用户快速定位高风险区域。
|
||||||
|
- **AI 交互特点**:
|
||||||
|
- AI 自动分析 PR 的代码质量，生成详细的扫描报告。
|
||||||
|
- 用户可以通过与 AI 对话，快速定位问题并获取修复建议。
|
||||||
|
- **数据交互说明**:
|
||||||
|
- 前端通过 API 请求后端获取 PR 列表和详细信息。
|
||||||
|
- 后端调用静态代码分析工具和安全扫描服务，生成扫描报告并返回给前端。
|
||||||
|
- 前端根据后端返回的数据动态渲染 PR 列表和图表。
|
||||||
|
- 用户提交质量设置时，前端将配置数据发送到后端，后端保存并应用新规则。
|
||||||
|
- **用户交互流程**:
|
||||||
|
- 用户在 PR 列表中选择一个 PR，查看详细的代码变更和扫描结果。
|
||||||
|
- 系统展示问题的分布图表，用户可以点击具体问题查看代码上下文。
|
||||||
|
- 用户可以通过界面直接修改质量规则，或与 AI 讨论修复建议。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### **用户体验目标**
|
||||||
|
- **简洁直观**: 页面布局清晰，用户可以快速找到所需功能。
|
||||||
|
- **高效交互**: 通过对话式交互和实时反馈，减少用户操作步骤。
|
||||||
|
- **数据驱动**: 以数据图表为核心，帮助用户快速理解项目状态。
|
||||||
|
- **模块化设计**: 各模块功能独立，用户可以根据需求自由切换。
|
||||||
|
- **AI 驱动**: 每个模块都集成 AI Agent，提供智能化的辅助功能。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### **设计建议**
|
||||||
|
- **导航优化**: 提供更清晰的导航结构，例如在侧边栏中分组显示主要模块和子功能。
|
||||||
|
- **视觉层次**: 通过颜色、字体大小等方式突出重要信息，例如关键数据和操作按钮。
|
||||||
|
- **用户引导**: 在每个模块中添加新手引导，帮助用户快速上手。
|
||||||
|
- **响应式设计**: 确保页面在不同设备上的良好显示效果。
|
||||||
|
- **AI 交互设计**:
|
||||||
|
- 在页面中突出 AI Agent 的入口，例如对话框或悬浮按钮。
|
||||||
|
- 提供 AI 的实时状态反馈，例如“正在分析...”、“已完成”等提示。
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
以上描述从用户功能和 AI Agent 的交互角度出发，帮助 UI 工程师理解产品目标和用户需求，从而设计出更符合用户期望的界面和交互。
|
||||||
Reference in New Issue
Block a user