feat: 新增流程总览图页面及导航功能
添加流程总览图页面,包含五组十域可交互SVG流程图,支持模块点击跳转至对应流程详情页。同时在侧边栏和首页添加导航入口,优化流程详情页的返回逻辑和布局样式。
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user