From 409e3884034033e23683c40d1cacbd4395e85996 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= Date: Fri, 6 Feb 2026 10:59:26 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=B5=81=E7=A8=8B?= =?UTF-8?q?=E6=80=BB=E8=A7=88=E5=9B=BE=E9=A1=B5=E9=9D=A2=E5=8F=8A=E5=AF=BC?= =?UTF-8?q?=E8=88=AA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 添加流程总览图页面，包含五组十域可交互SVG流程图，支持模块点击跳转至对应流程详情页。同时在侧边栏和首页添加导航入口，优化流程详情页的返回逻辑和布局样式。 --- src/App.tsx | 2 + src/components/layout/Layout.tsx | 4 +- src/components/layout/Sidebar.tsx | 2 + src/components/visualize/ProcessMatrix.tsx | 28 +- src/pages/HomePage.tsx | 12 +- src/pages/ProcessDetailPage.tsx | 14 +- src/pages/ProcessRoadmapPage.tsx | 361 +++++++++++++++++++++ src/pages/index.ts | 1 + 8 files changed, 408 insertions(+), 16 deletions(-) create mode 100644 src/pages/ProcessRoadmapPage.tsx diff --git a/src/App.tsx b/src/App.tsx index c90b774..1642a7b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,6 +6,7 @@ import { ProcessGroupsPage } from './pages/ProcessGroupsPage' import { ProcessDetailPage } from './pages/ProcessDetailPage' import { ProcessMatrixPage } from './pages/ProcessMatrixPage' import { ProcessGraphPage } from './pages/ProcessGraphPage' +import { ProcessRoadmapPage } from './pages/ProcessRoadmapPage' import { ArtifactDetailPage } from './pages/ArtifactDetailPage' import { ToolDetailPage } from './pages/ToolDetailPage' import { SettingsPage } from './pages/SettingsPage' @@ -21,6 +22,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index b957aa1..0dc9c36 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -30,9 +30,7 @@ export function Layout({ children }: LayoutProps) { sidebarOpen ? 'lg:ml-64' : 'lg:ml-20' )} > -
- {children} -
+ {children} diff --git a/src/components/layout/Sidebar.tsx b/src/components/layout/Sidebar.tsx index 3a24895..1878470 100644 --- a/src/components/layout/Sidebar.tsx +++ b/src/components/layout/Sidebar.tsx @@ -6,6 +6,7 @@ import { BookOpen, Layers, LayoutGrid, + Workflow, Share2, Settings, ChevronLeft, @@ -15,6 +16,7 @@ import { const navItems = [ { path: '/', label: '首页', icon: Home }, { path: '/process-matrix', label: '49过程矩阵', icon: LayoutGrid }, + { path: '/process-roadmap', label: '流程总览图', icon: Workflow }, { path: '/knowledge-areas', label: '知识领域', icon: BookOpen }, { path: '/process-groups', label: '过程组', icon: Layers }, { path: '/process-graph', label: '过程关系图', icon: Share2 }, diff --git a/src/components/visualize/ProcessMatrix.tsx b/src/components/visualize/ProcessMatrix.tsx index c3c0262..5f9d06a 100644 --- a/src/components/visualize/ProcessMatrix.tsx +++ b/src/components/visualize/ProcessMatrix.tsx @@ -110,18 +110,26 @@ export function ProcessMatrix({ className, isFullScreen = false }: ProcessMatrix state={{ from: 'matrix' }} className={clsx( "block px-2 py-1.5 rounded text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors", - isFullScreen && "flex items-center h-full" + isFullScreen && "h-full" )} + title={p.name} > - - {p.code} - - - {p.name} - +
+ + {p.code} + + + {p.name} + +
))} {cellProcesses.length === 0 && ( diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx index eb92f5d..dbba6cc 100644 --- a/src/pages/HomePage.tsx +++ b/src/pages/HomePage.tsx @@ -1,6 +1,6 @@ import { Link } from 'react-router-dom' import { motion } from 'framer-motion' -import { BookOpen, Layers, LayoutGrid, ArrowRight } from 'lucide-react' +import { BookOpen, Layers, LayoutGrid, Workflow, ArrowRight } from 'lucide-react' import { stats } from '@/data' const features = [ @@ -12,6 +12,14 @@ const features = [ color: 'from-emerald-500 to-teal-500', count: stats.processCount, }, + { + icon: Workflow, + title: '流程总览图', + description: '五组十域可交互SVG流程图，支持模块点击跳转', + link: '/process-roadmap', + color: 'from-orange-500 to-amber-500', + count: null, + }, { icon: BookOpen, title: '知识领域', @@ -116,7 +124,7 @@ export function HomePage() { variants={containerVariants} initial="hidden" animate="visible" - className="grid md:grid-cols-3 gap-6" + className="grid md:grid-cols-2 xl:grid-cols-4 gap-6" > {features.map((feature) => { const Icon = feature.icon diff --git a/src/pages/ProcessDetailPage.tsx b/src/pages/ProcessDetailPage.tsx index 84bcd85..5ad2d56 100644 --- a/src/pages/ProcessDetailPage.tsx +++ b/src/pages/ProcessDetailPage.tsx @@ -1,6 +1,6 @@ import { useParams, Link, useLocation, useNavigate } from 'react-router-dom' import { motion } from 'framer-motion' -import { ArrowLeft, ArrowRight, FileText, Wrench, FileOutput, LayoutGrid, User, Target, Clock, MapPin, HelpCircle, Cog } from 'lucide-react' +import { ArrowLeft, ArrowRight, FileText, Wrench, FileOutput, LayoutGrid, Workflow, User, Target, Clock, MapPin, HelpCircle, Cog } from 'lucide-react' import { getProcessDetail, processes, artifactMap, toolMap } from '@/data' // 5W1H图标和标签配置 @@ -20,6 +20,7 @@ export function ProcessDetailPage() { const processDetail = id ? getProcessDetail(id) : null const fromMatrix = location.state?.from === 'matrix' + const fromRoadmap = location.state?.from === 'roadmap' if (!processDetail) { return ( @@ -53,6 +54,15 @@ export function ProcessDetailPage() { 返回矩阵 )} + {fromRoadmap && ( + + )}