feat: 新增流程总览图页面及导航功能

添加流程总览图页面,包含五组十域可交互SVG流程图,支持模块点击跳转至对应流程详情页。同时在侧边栏和首页添加导航入口,优化流程详情页的返回逻辑和布局样式。
This commit is contained in:
史悦
2026-02-06 10:59:26 +08:00
parent 59974c4969
commit 409e388403
8 changed files with 408 additions and 16 deletions

View File

@@ -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() {
</button>
)}
{fromRoadmap && (
<button
onClick={() => navigate('/process-roadmap')}
className="flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-amber-50 dark:bg-amber-900/30 text-amber-700 dark:text-amber-300 hover:bg-amber-100 dark:hover:bg-amber-900/50 transition-colors font-medium"
>
<Workflow size={14} />
</button>
)}
<nav className="flex items-center gap-1.5 text-gray-500 dark:text-gray-400">
<Link to="/knowledge-areas" className="hover:text-indigo-600 dark:hover:text-indigo-400"></Link>
<span>/</span>
@@ -205,6 +215,7 @@ export function ProcessDetailPage() {
{prevProcess ? (
<Link
to={`/process/${prevProcess.id}`}
state={location.state}
className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors text-sm"
>
<ArrowLeft size={16} />
@@ -217,6 +228,7 @@ export function ProcessDetailPage() {
{nextProcess ? (
<Link
to={`/process/${nextProcess.id}`}
state={location.state}
className="flex items-center gap-2 text-gray-600 dark:text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors text-right text-sm"
>
<div>