feat: 新增八大绩效域页面与导航入口

AGENTS.md

@@ -0,0 +1,58 @@
+# AGENTS.md
+
+本文件用于约束本项目中的协作式开发行为，尤其是前端页面内容生成与文案表达。
+
+## 一、前台页面文案总原则
+
+前台页面是直接面向最终用户的，不是面向开发者的。
+
+因此，在所有前台展示内容中，必须严格遵守以下规则：
+
+1. 不要出现解释性词语
+   - 禁止出现类似：
+     - “这里先提供……”
+     - “方便你确认……”
+     - “后续再补……”
+     - “当前状态……”
+     - “首版……”
+     - “目录入口页面……”
+     - “样式展示……”
+   - 页面文案只能表达用户真正需要看到的信息，不得解释页面是怎么做的、为什么这样做、现在做到哪一步。
+
+2. 不要出现程序开发过程中的逻辑性话术
+   - 禁止出现类似：
+     - “入口页”
+     - “详情页后续再补”
+     - “左侧菜单未加入”
+     - “页面阶段”
+     - “开发中”
+     - “占位内容”
+     - “待完善”
+   - 不要把研发过程、实现阶段、功能规划暴露给用户。
+
+3. 前台页面文案必须自然、直接、面向用户
+   - 用户看到的应该是业务信息、学习内容、导航信息。
+   - 文案应简洁、稳定、可阅读，不带“给开发者看的说明”。
+
+4. 页面标题、副标题、说明文案要贴近现有页面风格
+   - 优先参考：
+     - `knowledge-areas`
+     - `process-groups`
+     - `principles`
+   - 保持简洁、克制、信息明确。
+
+## 二、前端实现约束
+
+1. 新增页面前，优先参考现有同类页面结构与视觉层级。
+2. 若用户明确要求“仿照某页面”，应优先复用该页面的信息组织方式，而不是自行发挥。
+3. 若只是为了后续扩展而暂时占位，也不能在前台页面展示“占位式说明文案”；应展示为正常页面。
+4. 开发说明、阶段说明、技术备注，只能出现在：
+   - 对用户的回复中
+   - 提交说明中
+   - 代码注释中
+   - 文档中
+   不得出现在前台页面正文中。
+
+## 三、执行优先级
+
+当“开发便利”与“前台用户体验”冲突时，优先保证前台用户体验。

src/App.tsx

@@ -28,6 +28,7 @@ function App() {
         <Route path="/process-practice" element={<ProcessPracticePage />} />
         <Route path="/principles" element={<PrinciplesPage />} />
         <Route path="/performance-domains" element={<PerformanceDomainsPage />} />
+        <Route path="/performance-domains/:id" element={<PerformanceDomainsPage />} />
         <Route path="/artifact/:id" element={<ArtifactDetailPage />} />
         <Route path="/tool/:id" element={<ToolDetailPage />} />
         <Route path="/settings" element={<SettingsPage />} />

src/components/layout/Sidebar.tsx

@@ -12,6 +12,7 @@ import {
   ChevronRight,
   GraduationCap,
   BookMarked,
+  Gauge,
 } from 'lucide-react'
 
 const navItems = [
@@ -22,6 +23,7 @@ const navItems = [
   { path: '/process-groups', label: '过程组', icon: Layers },
   { path: '/process-graph', label: '过程关系图', icon: Share2 },
   { path: '/principles', label: '十二项原则', icon: BookMarked },
+  { path: '/performance-domains', label: '八大绩效域', icon: Gauge },
   { path: '/settings', label: '设置', icon: Settings },
 ]
 

src/data/changelog.json

@@ -1,5 +1,12 @@
 {
   "changelogEntries": [
+    {
+      "id": "2026-04-10-performance-domains-pages",
+      "date": "2026-04-10",
+      "type": "feat",
+      "title": "新增八大绩效域目录与详情页面，并加入左侧导航入口",
+      "scope": "绩效域"
+    },
     {
       "id": "2026-03-24-process-detail-shortcut-restore",
       "date": "2026-03-24",

src/data/performance-domains.ts

@@ -1,3 +1,16 @@
+export interface PerformanceDomainCheckItem {
+  goal: string
+  indicators: string[]
+}
+
+export interface PerformanceDomainDetail {
+  summary?: string
+  expectedGoals: string[]
+  keyPoints: string[]
+  interactions: string[]
+  checks: PerformanceDomainCheckItem[]
+}
+
 export interface PerformanceDomainItem {
   id: string
   name: string
@@ -5,6 +18,7 @@ export interface PerformanceDomainItem {
   description: string
   color: string
   accentClass: string
+  detail?: PerformanceDomainDetail
 }
 
 export const performanceDomains: PerformanceDomainItem[] = [
@@ -12,64 +26,503 @@ export const performanceDomains: PerformanceDomainItem[] = [
     id: 'PD01',
     name: '干系人绩效域',
     nameEn: 'Stakeholders',
-    description: '关注干系人的识别、参与、沟通与期望管理，确保项目价值被关键相关方理解和支持。',
+    description: '关注干系人的识别、参与、沟通与期望管理。',
     color: '#6366F1',
     accentClass: 'from-indigo-500 to-violet-500',
+    detail: {
+      expectedGoals: [
+        '与干系人建立高效的工作关系',
+        '干系人认同项目目标',
+        '支持项目的干系人提高了满意度，并从中收益',
+        '反对项目的干系人没有对项目产生负面影响',
+      ],
+      keyPoints: [
+        '在项目整个生命周期过程中，为了有效执行干系人绩效域，项目经理需要重点促进干系人的参与。',
+      ],
+      interactions: [
+        '干系人为项目团队定义需求和范围并对其进行优先级排序。',
+        '干系人参与并制定规划。',
+        '干系人确定项目可交付物和项目成果的验收和质量标准。',
+        '客户、高层管理人员、项目管理办公室领导或项目集经理等干系人将重点关注项目及其可交付物绩效的测量。',
+      ],
+      checks: [
+        {
+          goal: '与干系人建立高效的工作关系',
+          indicators: [
+            '干系人参与的连续性。通过观察、记录方式，对干系人参与的连续性进行衡量。',
+          ],
+        },
+        {
+          goal: '干系人认同项目目标',
+          indicators: [
+            '变更的频率。对项目范围、产品需求的大量变更或修改可能表明干系人没有参与进来或与项目目标不一致。',
+          ],
+        },
+        {
+          goal: '支持项目的干系人提高了满意度，并从中收益',
+          indicators: [
+            '干系人行为。干系人的行为可表明项目受益人是否对项目感到满意和表示支持，或者他们是否反对项目。',
+            '干系人满意度。可通过调研、访谈和焦点小组方式，确定干系人满意度，判断干系人是否感到满意和表示支持，或者他们对项目及其可交付物是否表示反对。',
+          ],
+        },
+        {
+          goal: '反对项目的干系人没有对项目产生负面影响',
+          indicators: [
+            '干系人相关问题和风险。对项目问题日志和风险登记册的审查可以识别与单个干系人有关的问题和风险。',
+          ],
+        },
+      ],
+    },
   },
   {
     id: 'PD02',
     name: '团队绩效域',
     nameEn: 'Team',
-    description: '聚焦团队文化、协作方式、领导力与能力建设，提升项目团队的执行效率与凝聚力。',
+    description: '聚焦团队文化、协作方式、领导力与能力建设。',
     color: '#8B5CF6',
     accentClass: 'from-violet-500 to-fuchsia-500',
+    detail: {
+      expectedGoals: [
+        '共享责任',
+        '建立高绩效团队',
+        '所有团队成员都展现出相应的领导力和人际关系技能',
+      ],
+      keyPoints: [
+        '项目团队文化',
+        '高绩效项目团队',
+        '领导力技能',
+      ],
+      interactions: [
+        '团队绩效域聚焦于项目经理和项目团队成员在整个项目生命周期过程中的技能。',
+        '这些技能已融入项目的其他各个方面。',
+        '在整个项目期间，项目团队成员都需要全程展现团队相关的领导力素质和技能。',
+      ],
+      checks: [
+        {
+          goal: '共享责任',
+          indicators: [
+            '目标和责任心。所有项目团队成员都了解愿景和目标。',
+            '项目团队对项目的可交付物和项目成果承担责任。',
+          ],
+        },
+        {
+          goal: '建立高绩效团队',
+          indicators: [
+            '信任与协作程度。项目团队彼此信任，相互协作。',
+            '适应变化的能力。项目团队适应不断变化的情况并在面对挑战时有韧性。',
+            '彼此赋能。项目团队感到被赋能，同时项目团队对其成员赋能并认可。',
+          ],
+        },
+        {
+          goal: '所有团队成员都展现出相应的领导力和人际关系技能',
+          indicators: [
+            '管理和领导力风格适宜性。项目团队成员运用批判性思维和人际关系技能。',
+            '项目团队成员的管理和领导力风格适合项目的背景和环境。',
+          ],
+        },
+      ],
+    },
   },
   {
     id: 'PD03',
     name: '开发/生命周期绩效域',
     nameEn: 'Development Approach & Life Cycle',
-    description: '围绕开发方法、生命周期模型与交付节奏进行选择和管理，匹配项目环境与目标。',
+    description: '围绕开发方法、生命周期模型与交付节奏进行选择和管理。',
     color: '#EC4899',
     accentClass: 'from-pink-500 to-rose-500',
+    detail: {
+      expectedGoals: [
+        '开发方法与项目可交付物相符合',
+        '将项目交付与干系人价值紧密关联',
+        '项目生命周期由促进交付节奏的项目阶段和产生项目交付物所需的开发方法组成',
+      ],
+      keyPoints: [
+        '交付节奏',
+        '开发方法',
+      ],
+      interactions: [
+        '开发方法和生命周期绩效域与干系人绩效域、规划绩效域、不确定性绩效域、交付绩效域、项目工作绩效域和团队绩效域相互作用。',
+        '如果一个可交付物存在要与干系人验收相关的大量风险，则可能会选择迭代方法，向市场发布最小可行产品，以便在开发其他特性和功能之前获得反馈。',
+        '所选的生命周期会影响进行规划的方式。预测型生命周期会提前进行大部分规划工作，项目进展中使用滚动式规划和渐进明细来重新规划，随着威胁和机会的发生，计划也会得到更新。',
+        '开发方法和交付节奏是减轻项目不确定性的方法。如果一个可交付物存在与监管要求相关的大量风险，则可能会选择预测型方法，进行额外测试、文档编写，并采用健全的流程和程序。',
+        '在考虑交付节奏和开发方法时，开发方法和生命周期绩效域与交付绩效域的关注点会有很多重叠。交付节奏是确保实际项目的价值交付和可行性规划保持一致的主要因素之一。',
+        '在项目团队能力和项目团队领导力技能方面，项目工作绩效域、团队绩效域与开发方法和生命周期绩效域会相互作用。项目团队的工作方式和项目经理的风格会因开发方法的不同而存在很大差异。采用预测型方法时，通常需要更加重视预先规划、测量和控制；适应型方法，特别是在使用敏捷方法时，需要更多的服务型领导风格，而且可能会形成自我管理的项目团队。',
+      ],
+      checks: [
+        {
+          goal: '开发方法与项目可交付物相符合',
+          indicators: [
+            '产品质量和变更成本。采用适宜的开发方法，预测型、混合型或适应型，可交付物的产品质量比较高，变更成本相对较小。',
+          ],
+        },
+        {
+          goal: '将项目交付与干系人价值紧密关联',
+          indicators: [
+            '价值导向型项目阶段。按照价值导向将项目工作从启动到收尾划分为多个项目阶段，项目阶段中包括适当的退出标准。',
+          ],
+        },
+        {
+          goal: '项目生命周期由促进交付节奏的项目阶段和产生项目交付物所需的开发方法组成',
+          indicators: [
+            '适宜的交付节奏和开发方法。如果项目具有多个可交付物，且交付节奏和开发方法不同，可将生命周期阶段进行重叠或重复。',
+          ],
+        },
+      ],
+    },
   },
   {
     id: 'PD04',
     name: '规划绩效域',
     nameEn: 'Planning',
-    description: '强调范围、进度、成本、资源等多维规划活动，形成可执行且可持续调整的计划体系。',
+    description: '强调范围、进度、成本、资源等多维规划活动。',
     color: '#F59E0B',
     accentClass: 'from-amber-500 to-orange-500',
+    detail: {
+      expectedGoals: [
+        '项目以有条理、协调一致的方式推进',
+        '应用系统的方法交付项目成果',
+        '对演变情况进行详细说明',
+        '规划投入的时间成本是适当的',
+        '规划的内容对管理干系人的需求而言是充分的',
+        '可以根据新出现的和不断变化的需求进行调整',
+      ],
+      keyPoints: [
+        '规划的影响因素。每个项目都是独特的，不同项目规划的数量、时间安排和频率也各不相同。',
+        '项目估算',
+        '项目团队组成和结构规划',
+        '沟通规划',
+        '实物资源规划',
+        '采购规划',
+        '变更规划',
+        '度量指标和一致性',
+      ],
+      interactions: [
+        '规划会在整个项目生命周期过程中进行，并与其他各个绩效域相整合。',
+        '在项目开始时，会确定预期成果，并制订实现这些成果的高层级计划。根据选定的开发方法和生命周期，可以提前进行详细的规划，在项目进行中可根据实际情况对计划做出调整。',
+        '在项目团队规划如何应对不确定性和风险时，不确定性绩效域和规划绩效域会相互作用。',
+        '在整个项目执行过程中，规划将指导项目工作、成果和价值的交付。',
+        '项目团队和干系人将制定度量指标并将绩效与计划进行比较，需要时可能会修订计划或制订新计划。',
+        '项目团队成员、环境和项目的细节会影响项目团队有效合作以及干系人的积极参与。',
+      ],
+      checks: [
+        {
+          goal: '项目以有条理、协调一致的方式推进',
+          indicators: [
+            '绩效偏差。对照项目基准和其他度量指标对项目结果进行绩效审查，表明项目正在按计划进行，绩效偏差处于临界值范围内。',
+          ],
+        },
+        {
+          goal: '应用系统的方法交付项目成果',
+          indicators: [
+            '规划的整体性。交付进度、资金提供、资源可用性、采购等表明项目是以整体方式进行规划的，没有差距或不一致之处。',
+          ],
+        },
+        {
+          goal: '对演变情况进行详细说明',
+          indicators: [
+            '规划的详尽程度。与当前信息相比，可交付物和需求的初步信息是适当的、详尽的。与可行性研究与评估相比，当前信息表明项目可以生成预期的可交付物和成果。',
+          ],
+        },
+        {
+          goal: '规划投入的时间成本是适当的',
+          indicators: [
+            '规划适宜性。项目计划和文件表明规划水平适合于项目。',
+          ],
+        },
+        {
+          goal: '规划的内容对管理干系人的需求而言是充分的',
+          indicators: [
+            '规划的充分性。沟通管理计划和干系人信息表明沟通足以满足干系人的期望。',
+          ],
+        },
+        {
+          goal: '可以根据新出现的和不断变化的需求进行调整',
+          indicators: [
+            '可适应变化。采用待办事项列表的项目，在整个项目期间会对各个计划做出调整。采用变更控制过程的项目具有变更控制委员会，会议的变更日志和文档表明变更控制过程正在得到应用。',
+          ],
+        },
+      ],
+    },
   },
   {
     id: 'PD05',
     name: '项目工作绩效域',
     nameEn: 'Project Work',
-    description: '关注项目工作的组织、协调、实施与持续改进，确保工作流顺畅并支撑目标达成。',
+    description: '关注项目工作的组织、协调、实施与持续改进。',
     color: '#10B981',
     accentClass: 'from-emerald-500 to-teal-500',
+    detail: {
+      expectedGoals: [
+        '高效且有效的项目绩效',
+        '适合项目和环境的项目过程',
+        '干系人适当的沟通和参与',
+        '对实物资源进行了有效管理',
+        '对采购进行了有效管理',
+        '有效处理了变更',
+        '通过持续学习和过程改进提高了团队能力',
+      ],
+      keyPoints: [
+        '项目过程',
+        '项目制约因素',
+        '专注于工作过程和能力',
+        '管理沟通和参与',
+        '管理实物资源',
+        '处理采购事宜',
+        '监督新工作和变更',
+        '学习和持续改进',
+      ],
+      interactions: [
+        '项目工作绩效域与项目的其他绩效域相互作用，而且对其他绩效域具有促进作用。',
+        '项目工作可促进并支持有效率且有效果的规划、交付和度量。',
+        '项目工作可为项目团队互动和干系人参与提供有效的环境。',
+        '项目工作可为驾驭不确定性、模糊性和复杂性提供支持，平衡其他项目制约因素。',
+      ],
+      checks: [
+        {
+          goal: '高效且有效的项目绩效',
+          indicators: [
+            '状态报告。通过状态报告可以表明项目工作有效率且有效果。',
+          ],
+        },
+        {
+          goal: '适合项目和环境的项目过程',
+          indicators: [
+            '过程的适宜性。证据表明，项目过程是为满足项目和环境的需要而裁剪的。',
+            '过程相关性和有效性。过程审计和质量保证活动表明，过程具有相关性且正得到有效使用。',
+          ],
+        },
+        {
+          goal: '干系人适当的沟通和参与',
+          indicators: [
+            '沟通有效性。项目沟通管理计划和沟通文件表明，所计划的信息与干系人进行了沟通。如有新的信息沟通需求或误解，可能表明干系人的沟通和参与活动缺乏成效。',
+          ],
+        },
+        {
+          goal: '对实物资源进行了有效管理',
+          indicators: [
+            '资源利用率。所用材料的数量、抛弃的废料和返工量表明，资源正得到高效利用。',
+          ],
+        },
+        {
+          goal: '对采购进行了有效管理',
+          indicators: [
+            '采购过程适宜。采购审计表明，所采用的适当流程足以开展采购工作，而且承包商正在按计划开展工作。',
+          ],
+        },
+        {
+          goal: '有效处理了变更',
+          indicators: [
+            '变更处理情况。使用预测型方法的项目已建立变更日志，该日志表明，正在对变更做出全面评估，同时考虑了范围、进度、预算、资源、干系人和风险的影响。采用适应型方法的项目已建立待办事项列表，该列表显示完成范围的比率和增加新范围的比率。',
+          ],
+        },
+        {
+          goal: '通过持续学习和过程改进提高了团队能力',
+          indicators: [
+            '团队绩效。团队状态报告表明，错误和返工减少，而效率提高。',
+          ],
+        },
+      ],
+    },
   },
   {
     id: 'PD06',
     name: '交付绩效域',
     nameEn: 'Delivery',
-    description: '聚焦价值交付、质量达成与成果验收，确保项目输出真正满足业务需求与预期。',
+    description: '聚焦价值交付、质量达成与成果验收。',
     color: '#06B6D4',
     accentClass: 'from-cyan-500 to-sky-500',
+    detail: {
+      expectedGoals: [
+        '项目有助于实现业务目标和战略',
+        '项目实现了预期成果',
+        '在预定时间内实现了项目收益',
+        '项目团队对需求有清晰的理解',
+        '干系人接受项目可交付物和成果，并对其满意',
+      ],
+      keyPoints: [
+        '价值的交付',
+        '可交付物',
+        '质量',
+      ],
+      interactions: [
+        '交付绩效域是在规划绩效域中所执行所有工作的终点。',
+        '交付节奏基于开发方法和生命周期绩效域中工作的结构方式。',
+        '项目工作绩效域通过建立各种过程、管理实物资源、管理采购等促使交付工作。',
+        '项目团队成员在此绩效域中执行工作，工作性质会影响项目团队驾驭不确定性的方式。',
+      ],
+      checks: [
+        {
+          goal: '项目有助于实现业务目标和战略',
+          indicators: [
+            '目标一致性。组织的战略计划、可行性研究报告以及项目授权文件表明，项目可交付物和业务目标保持一致。',
+          ],
+        },
+        {
+          goal: '项目实现了预期成果',
+          indicators: [
+            '项目完成度。项目基础数据表明，项目仍处于正轨，可实现预期成果。',
+          ],
+        },
+        {
+          goal: '在预定时间内实现了项目收益',
+          indicators: [
+            '项目收益。进度表明财务指标和所规划的交付正在按计划实现。',
+          ],
+        },
+        {
+          goal: '项目团队对需求有清晰的理解',
+          indicators: [
+            '需求稳定性。在预测型项目中，初始需求的变更很少，表明对需求的真正理解度较高。在需求不断演变的适应型项目中，项目进展中阶段性需求确认反映了干系人对需求的理解。',
+          ],
+        },
+        {
+          goal: '干系人接受项目可交付物和成果，并对其满意',
+          indicators: [
+            '干系人满意度。访谈、观察和最终用户反馈可表明干系人对可交付物的满意度。',
+            '质量问题。投诉或退货等质量相关问题的数量也可用于表示满意度。',
+          ],
+        },
+      ],
+    },
   },
   {
     id: 'PD07',
     name: '测量绩效域',
     nameEn: 'Measurement',
-    description: '通过度量指标、绩效数据和分析机制，及时掌握项目状态并支持决策与调整。',
+    description: '通过度量指标、绩效数据和分析机制掌握项目状态。',
     color: '#3B82F6',
     accentClass: 'from-blue-500 to-indigo-500',
+    detail: {
+      expectedGoals: [
+        '对项目状况充分理解',
+        '数据充分，可支持决策',
+        '及时采取行动，确保项目最佳绩效',
+        '能够基于预测和评估作出决策，实现目标并产生价值',
+      ],
+      keyPoints: [
+        '制定有效的度量指标',
+        '度量内容及相应指标',
+        '展示度量信息和结果',
+        '度量陷阱',
+        '基于度量进行诊断',
+        '持续改进',
+      ],
+      interactions: [
+        '度量绩效域与规划绩效域、项目工作绩效域和交付绩效域相互作用。',
+        '规划构成了交付和规划比较的基础。',
+        '度量绩效域通过提供最新信息来支持规划绩效域的活动。',
+        '在项目团队成员制订计划并创建可度量的可交付物时，团队绩效域和干系人绩效域会相互作用。',
+        '当不可预测的事件发生时，无论是积极事件还是消极事件，它们会影响项目绩效，从而影响项目的度量指标。应对不确定事件带来的变更时，要同时更新受此变更影响的度量。',
+        '可以根据绩效度量结果启动不确定性绩效域中的活动，例如识别风险和机会。',
+        '作为项目工作的一部分，应与项目团队和其他干系人合作，以便制定度量指标、收集数据、分析数据、做出决策并报告项目状态。',
+      ],
+      checks: [
+        {
+          goal: '对项目状况充分理解',
+          indicators: [
+            '度量结果和报告。通过审计度量结果和报告，可表明数据是否可靠。',
+          ],
+        },
+        {
+          goal: '数据充分，可支持决策',
+          indicators: [
+            '度量结果。度量结果可表明项目是否按预期进行，或者是否存在偏差。',
+          ],
+        },
+        {
+          goal: '及时采取行动，确保项目最佳绩效',
+          indicators: [
+            '度量结果。度量结果提供了提前指标以及当前状态，可导致及时的决策和行动。',
+          ],
+        },
+        {
+          goal: '能够基于预测和评估作出决策，实现目标并产生价值',
+          indicators: [
+            '工作绩效数据。回顾过去的预测和当前的工作绩效数据，可发现以前的预测是否准确地反映了目前的情况。',
+            '将实际绩效与计划绩效进行比较，并评估业务文档，可表明项目实现预期价值的可能性。',
+          ],
+        },
+      ],
+    },
   },
   {
     id: 'PD08',
     name: '不确定性绩效域',
     nameEn: 'Uncertainty',
-    description: '针对风险、复杂性、模糊性和变化进行识别与应对，增强项目的适应性和韧性。',
+    description: '针对风险、复杂性、模糊性和变化进行识别与应对。',
     color: '#EF4444',
     accentClass: 'from-red-500 to-pink-500',
+    detail: {
+      expectedGoals: [
+        '了解项目的运行环境，包括技术、社会、政治、市场和经济环境等',
+        '积极识别、分析和应对不确定性',
+        '了解项目中多个因素之间的相互依赖关系',
+        '能够对威胁和机会进行预测，了解问题的后果',
+        '最小化不确定性对项目交付的负面影响',
+        '能够利用机会改进项目的绩效和成果',
+        '有效利用成本和进度储备，与项目目标保持一致等',
+      ],
+      keyPoints: [
+        '风险',
+        '模糊性',
+        '复杂性',
+        '不确定性的应对方法',
+      ],
+      interactions: [
+        '从产品或可交付物角度看，不确定性绩效域与其他7个绩效域都相互作用。',
+        '随着规划的进行，可将减少不确定性和风险的活动纳入计划。这些活动是在交付绩效域中执行的，度量可以表明随着时间的推移风险级别是否会有所变化。',
+        '项目团队成员和其他干系人是不确定性的主要信息来源，在应对各种形式的不确定性方面，他们可以提供信息、建议和协助。',
+        '生命周期和开发方法的选择将影响不确定性的应对方式。在范围相对稳定并采用预测型方法的项目中，可以使用进度和预算储备来应对风险。',
+        '在采用适应型方法的项目中，在系统如何互动或干系人如何反应方面可能存在不确定性，项目团队可以调整计划，以反映对不断演变情况的理解，还可以使用储备来应对不确定性的影响。',
+      ],
+      checks: [
+        {
+          goal: '了解项目的运行环境，包括技术、社会、政治、市场和经济环境等',
+          indicators: [
+            '环境因素。团队在评估不确定性、风险和应对措施时考虑了环境因素。',
+          ],
+        },
+        {
+          goal: '积极识别、分析和应对不确定性',
+          indicators: [
+            '风险应对措施。与项目制约因素，例如预算、进度和绩效的优先级排序保持一致。',
+          ],
+        },
+        {
+          goal: '了解项目中多个因素之间的相互依赖关系',
+          indicators: [
+            '应对措施适宜性。应对风险、复杂性和模糊性的措施适合于项目。',
+          ],
+        },
+        {
+          goal: '能够对威胁和机会进行预测，了解问题的后果',
+          indicators: [
+            '风险管理机制或系统。用于识别、分析和应对风险的系统非常强大。',
+          ],
+        },
+        {
+          goal: '最小化不确定性对项目交付的负面影响',
+          indicators: [
+            '项目绩效处于临界值内。满足计划的交付日期，预算执行情况处于偏差临界值内。',
+          ],
+        },
+        {
+          goal: '能够利用机会改进项目的绩效和成果',
+          indicators: [
+            '利用机会的机制。团队使用既定机制来识别和利用机会。',
+          ],
+        },
+        {
+          goal: '有效利用成本和进度储备，与项目目标保持一致',
+          indicators: [
+            '储备使用。团队采取步骤主动预防威胁，有效使用成本或进度储备。',
+          ],
+        },
+      ],
+    },
   },
 ]
+
+export const performanceDomainMap = new Map<string, PerformanceDomainItem>(
+  performanceDomains.map(domain => [domain.id, domain])
+)

src/pages/PerformanceDomainsPage.tsx

@@ -1,8 +1,7 @@
+import { Link, useParams } from 'react-router-dom'
 import { motion } from 'framer-motion'
 import {
   ArrowRight,
-  BadgeCheck,
-  BarChart3,
   GitBranch,
   Handshake,
   Rocket,
@@ -10,28 +9,21 @@ import {
   Users,
   Workflow,
   AlertTriangle,
+  BarChart3,
+  CheckCircle2,
+  Link2,
+  SearchCheck,
 } from 'lucide-react'
-import { performanceDomains } from '@/data/performance-domains'
+import { performanceDomains, performanceDomainMap } from '@/data/performance-domains'
 
 const containerVariants = {
   hidden: { opacity: 0 },
-  visible: {
+  visible: { opacity: 1, transition: { staggerChildren: 0.03 } },
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.06,
-    },
-  },
 }
 
 const itemVariants = {
-  hidden: { opacity: 0, y: 16 },
+  hidden: { opacity: 0, y: 10 },
-  visible: {
+  visible: { opacity: 1, y: 0 },
-    opacity: 1,
-    y: 0,
-    transition: {
-      duration: 0.35,
-    },
-  },
 }
 
 const iconMap = {
@@ -46,99 +38,202 @@ const iconMap = {
 } as const
 
 export function PerformanceDomainsPage() {
-  return (
+  const { id } = useParams()
-    <div className="space-y-6">
+  const selectedDomain = id ? performanceDomainMap.get(id) : null
-      <motion.div
+
-        initial={{ opacity: 0, y: -16 }}
+  if (selectedDomain?.detail) {
-        animate={{ opacity: 1, y: 0 }}
+    const Icon = iconMap[selectedDomain.id as keyof typeof iconMap]
-        transition={{ duration: 0.4 }}
+    const detail = selectedDomain.detail
-        className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-indigo-900 to-purple-900 p-6 text-white"
+
-      >
+    return (
-        <div className="relative z-10 max-w-3xl">
+      <div className="space-y-4">
-          <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-sm text-white/90">
+        <nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-            <BadgeCheck size={16} />
+          <Link to="/performance-domains" className="hover:text-indigo-600 dark:hover:text-indigo-400">绩效域</Link>
-            PMBOK 第七版 · 八大绩效域
+          <span>/</span>
+          <span className="text-gray-900 dark:text-white">{selectedDomain.name}</span>
+        </nav>
+
+        <motion.div
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="rounded-xl p-4"
+          style={{ backgroundColor: `${selectedDomain.color}15` }}
+        >
+          <div className="flex items-center gap-3">
+            <div
+              className="flex h-12 w-12 items-center justify-center rounded-lg text-white shrink-0"
+              style={{ backgroundColor: selectedDomain.color }}
+            >
+              <Icon size={22} />
+            </div>
+            <div className="flex-1 min-w-0">
+              <h1 className="text-xl font-bold text-gray-900 dark:text-white">{selectedDomain.name}</h1>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{selectedDomain.nameEn}</p>
+            </div>
           </div>
-          <h1 className="text-2xl font-bold md:text-3xl">八大绩效域</h1>
+        </motion.div>
-          <p className="mt-3 text-sm leading-6 text-white/80 md:text-base">
+
-            这里先提供目录入口页面，集中展示八大绩效域的学习入口与结构分组，方便你先确认页面风格与信息排布。
+        <div className="grid gap-4 xl:grid-cols-2">
-          </p>
+          <motion.section
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className="rounded-xl bg-white dark:bg-gray-800 p-4 shadow-sm border border-gray-100 dark:border-gray-700"
+          >
+            <div className="mb-3 flex items-center gap-2">
+              <CheckCircle2 size={18} className="text-emerald-500" />
+              <h2 className="text-base font-semibold text-gray-900 dark:text-white">预期目标</h2>
+            </div>
+            <div className="space-y-3">
+              {detail.expectedGoals.map((goal, index) => (
+                <div key={goal} className="flex gap-3">
+                  <div
+                    className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium text-white"
+                    style={{ backgroundColor: selectedDomain.color }}
+                  >
+                    {index + 1}
+                  </div>
+                  <p className="text-sm text-gray-700 dark:text-gray-300">{goal}</p>
+                </div>
+              ))}
+            </div>
+          </motion.section>
+
+          <motion.section
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.05 }}
+            className="rounded-xl bg-white dark:bg-gray-800 p-4 shadow-sm border border-gray-100 dark:border-gray-700"
+          >
+            <div className="mb-3 flex items-center gap-2">
+              <Target size={18} className="text-amber-500" />
+              <h2 className="text-base font-semibold text-gray-900 dark:text-white">绩效要点</h2>
+            </div>
+            <div className="space-y-3">
+              {detail.keyPoints.map((point, index) => (
+                <div key={index} className="rounded-lg bg-gray-50 dark:bg-gray-700/40 px-3 py-2 text-sm text-gray-700 dark:text-gray-300">
+                  {point}
+                </div>
+              ))}
+            </div>
+          </motion.section>
         </div>
 
-        <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/10" />
+        <motion.section
-        <div className="absolute -bottom-16 left-10 h-36 w-36 rounded-full bg-fuchsia-400/20" />
+          initial={{ opacity: 0, y: 10 }}
-      </motion.div>
+          animate={{ opacity: 1, y: 0 }}
-
+          transition={{ delay: 0.1 }}
-      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+          className="rounded-xl bg-white dark:bg-gray-800 p-4 shadow-sm border border-gray-100 dark:border-gray-700"
-        {[
+        >
-          { label: '绩效域数量', value: 8, color: 'text-indigo-600' },
+          <div className="mb-3 flex items-center gap-2">
-          { label: '当前状态', value: '目录页', color: 'text-emerald-600' },
+            <Link2 size={18} className="text-indigo-500" />
-          { label: '页面阶段', value: '首版', color: 'text-amber-600' },
+            <h2 className="text-base font-semibold text-gray-900 dark:text-white">与其他绩效域的相互作用</h2>
-          { label: '左侧菜单', value: '未加入', color: 'text-rose-600' },
-        ].map((item) => (
-          <div
-            key={item.label}
-            className="rounded-xl border border-gray-100 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800"
-          >
-            <div className={`text-2xl font-bold ${item.color}`}>{item.value}</div>
-            <div className="mt-1 text-sm text-gray-500 dark:text-gray-400">{item.label}</div>
           </div>
-        ))}
+          <div className="space-y-3">
+            {detail.interactions.map((item, index) => (
+              <div key={index} className="flex gap-3">
+                <div className="mt-1 h-2 w-2 shrink-0 rounded-full" style={{ backgroundColor: selectedDomain.color }} />
+                <p className="text-sm text-gray-700 dark:text-gray-300">{item}</p>
+              </div>
+            ))}
+          </div>
+        </motion.section>
+
+        <motion.section
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.15 }}
+          className="rounded-xl bg-white dark:bg-gray-800 p-4 shadow-sm border border-gray-100 dark:border-gray-700"
+        >
+          <div className="mb-3 flex items-center gap-2">
+            <SearchCheck size={18} className="text-cyan-500" />
+            <h2 className="text-base font-semibold text-gray-900 dark:text-white">检查方法</h2>
+          </div>
+          <div className="space-y-3">
+            {detail.checks.map((check) => (
+              <div key={check.goal} className="rounded-lg border border-gray-100 dark:border-gray-700 overflow-hidden">
+                <div className="px-4 py-3 text-sm font-semibold text-white" style={{ backgroundColor: selectedDomain.color }}>
+                  {check.goal}
+                </div>
+                <div className="space-y-2 bg-gray-50 dark:bg-gray-900/40 px-4 py-3">
+                  {check.indicators.map((indicator, index) => (
+                    <div key={index} className="flex gap-3">
+                      <div className="mt-1 h-1.5 w-1.5 shrink-0 rounded-full bg-gray-400" />
+                      <p className="text-sm text-gray-700 dark:text-gray-300">{indicator}</p>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </motion.section>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h1 className="text-xl font-bold text-gray-900 dark:text-white">绩效域</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400">8大项目绩效域</p>
       </div>
 
       <motion.div
         variants={containerVariants}
         initial="hidden"
         animate="visible"
-        className="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
+        className="grid md:grid-cols-2 gap-3"
       >
         {performanceDomains.map((domain, index) => {
           const Icon = iconMap[domain.id as keyof typeof iconMap]
+          const canOpen = Boolean(domain.detail)
 
           return (
             <motion.div key={domain.id} variants={itemVariants}>
-              <div className="group h-full rounded-2xl border border-gray-100 bg-white p-5 shadow-sm transition-all hover:-translate-y-1 hover:shadow-md dark:border-gray-700 dark:bg-gray-800">
+              {canOpen ? (
-                <div className="flex items-start justify-between gap-4">
+                <Link
-                  <div className="flex items-center gap-4">
+                  to={`/performance-domains/${domain.id}`}
-                    <div className={`flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br ${domain.accentClass} text-white shadow-sm`}>
+                  className="group flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md transition-all"
-                      <Icon size={22} />
+                  style={{ borderLeftWidth: 3, borderLeftColor: domain.color }}
-                    </div>
+                >
-                    <div>
+                  <div
-                      <div className="text-xs font-medium uppercase tracking-wide text-gray-400">
+                    className="flex h-10 w-10 items-center justify-center rounded-lg text-white shrink-0"
-                        {String(index + 1).padStart(2, '0')}
-                      </div>
-                      <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
-                        {domain.name}
-                      </h2>
-                    </div>
-                  </div>
-                  <span
-                    className="rounded-full px-2.5 py-1 text-xs font-medium text-white"
                     style={{ backgroundColor: domain.color }}
                   >
-                    入口
+                    <Icon size={18} />
-                  </span>
+                  </div>
-                </div>
+                  <div className="flex-1 min-w-0">
-
+                    <div className="flex items-center gap-2">
-                <p className="mt-4 text-sm leading-6 text-gray-600 dark:text-gray-300">
+                      <span className="text-xs font-semibold text-gray-400 dark:text-gray-500">
-                  {domain.description}
+                        {String(index + 1).padStart(2, '0')}
-                </p>
+                      </span>
-
+                      <h3 className="font-semibold text-gray-900 dark:text-white text-sm truncate">{domain.name}</h3>
-                <div className="mt-4 rounded-xl bg-gray-50 px-4 py-3 dark:bg-gray-700/50">
+                    </div>
-                  <div className="text-xs text-gray-500 dark:text-gray-400">英文标识</div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{domain.nameEn}</p>
-                  <div className="mt-1 text-sm font-medium text-gray-900 dark:text-white">
+                  </div>
-                    {domain.nameEn}
+                  <ArrowRight size={16} className="text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 group-hover:translate-x-0.5 transition-all shrink-0" />
+                </Link>
+              ) : (
+                <div
+                  className="flex items-center gap-3 bg-white dark:bg-gray-800 rounded-lg p-3 shadow-sm border border-gray-100 dark:border-gray-700"
+                  style={{ borderLeftWidth: 3, borderLeftColor: domain.color }}
+                >
+                  <div
+                    className="flex h-10 w-10 items-center justify-center rounded-lg text-white shrink-0"
+                    style={{ backgroundColor: domain.color }}
+                  >
+                    <Icon size={18} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs font-semibold text-gray-400 dark:text-gray-500">
+                        {String(index + 1).padStart(2, '0')}
+                      </span>
+                      <h3 className="font-semibold text-gray-900 dark:text-white text-sm truncate">{domain.name}</h3>
+                    </div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{domain.nameEn}</p>
                   </div>
                 </div>
-
+              )}
-                <div className="mt-5 flex items-center justify-between border-t border-dashed border-gray-200 pt-4 text-sm dark:border-gray-700">
-                  <span className="text-gray-500 dark:text-gray-400">详情页后续再补</span>
-                  <span className="inline-flex items-center gap-1 font-medium text-indigo-600 dark:text-indigo-400">
-                    查看入口样式
-                    <ArrowRight size={16} className="transition-transform group-hover:translate-x-1" />
-                  </span>
-                </div>
-              </div>
             </motion.div>
           )
         })}