feat: 新增八大绩效域目录页并更新部署配置

docker-compose.yml

@@ -8,4 +8,4 @@ services:
     container_name: ittoview
     ports:
       - "11.144.144.9:8035:80"
-    restart: unless-stopped
+    restart: always

src/App.tsx

@@ -11,6 +11,7 @@ import { ToolDetailPage } from './pages/ToolDetailPage'
 import { SettingsPage } from './pages/SettingsPage'
 import ProcessPracticePage from './pages/ProcessPracticePage'
 import PrinciplesPage from './pages/PrinciplesPage'
+import { PerformanceDomainsPage } from './pages/PerformanceDomainsPage'
 
 function App() {
   return (
@@ -26,6 +27,7 @@ function App() {
         <Route path="/process-graph" element={<ProcessGraphPage />} />
         <Route path="/process-practice" element={<ProcessPracticePage />} />
         <Route path="/principles" element={<PrinciplesPage />} />
+        <Route path="/performance-domains" element={<PerformanceDomainsPage />} />
         <Route path="/artifact/:id" element={<ArtifactDetailPage />} />
         <Route path="/tool/:id" element={<ToolDetailPage />} />
         <Route path="/settings" element={<SettingsPage />} />

src/data/performance-domains.ts

@@ -0,0 +1,75 @@
+export interface PerformanceDomainItem {
+  id: string
+  name: string
+  nameEn: string
+  description: string
+  color: string
+  accentClass: string
+}
+
+export const performanceDomains: PerformanceDomainItem[] = [
+  {
+    id: 'PD01',
+    name: '干系人绩效域',
+    nameEn: 'Stakeholders',
+    description: '关注干系人的识别、参与、沟通与期望管理，确保项目价值被关键相关方理解和支持。',
+    color: '#6366F1',
+    accentClass: 'from-indigo-500 to-violet-500',
+  },
+  {
+    id: 'PD02',
+    name: '团队绩效域',
+    nameEn: 'Team',
+    description: '聚焦团队文化、协作方式、领导力与能力建设，提升项目团队的执行效率与凝聚力。',
+    color: '#8B5CF6',
+    accentClass: 'from-violet-500 to-fuchsia-500',
+  },
+  {
+    id: 'PD03',
+    name: '开发/生命周期绩效域',
+    nameEn: 'Development Approach & Life Cycle',
+    description: '围绕开发方法、生命周期模型与交付节奏进行选择和管理，匹配项目环境与目标。',
+    color: '#EC4899',
+    accentClass: 'from-pink-500 to-rose-500',
+  },
+  {
+    id: 'PD04',
+    name: '规划绩效域',
+    nameEn: 'Planning',
+    description: '强调范围、进度、成本、资源等多维规划活动，形成可执行且可持续调整的计划体系。',
+    color: '#F59E0B',
+    accentClass: 'from-amber-500 to-orange-500',
+  },
+  {
+    id: 'PD05',
+    name: '项目工作绩效域',
+    nameEn: 'Project Work',
+    description: '关注项目工作的组织、协调、实施与持续改进，确保工作流顺畅并支撑目标达成。',
+    color: '#10B981',
+    accentClass: 'from-emerald-500 to-teal-500',
+  },
+  {
+    id: 'PD06',
+    name: '交付绩效域',
+    nameEn: 'Delivery',
+    description: '聚焦价值交付、质量达成与成果验收，确保项目输出真正满足业务需求与预期。',
+    color: '#06B6D4',
+    accentClass: 'from-cyan-500 to-sky-500',
+  },
+  {
+    id: 'PD07',
+    name: '测量绩效域',
+    nameEn: 'Measurement',
+    description: '通过度量指标、绩效数据和分析机制，及时掌握项目状态并支持决策与调整。',
+    color: '#3B82F6',
+    accentClass: 'from-blue-500 to-indigo-500',
+  },
+  {
+    id: 'PD08',
+    name: '不确定性绩效域',
+    nameEn: 'Uncertainty',
+    description: '针对风险、复杂性、模糊性和变化进行识别与应对，增强项目的适应性和韧性。',
+    color: '#EF4444',
+    accentClass: 'from-red-500 to-pink-500',
+  },
+]

src/pages/PerformanceDomainsPage.tsx

@@ -0,0 +1,148 @@
+import { motion } from 'framer-motion'
+import {
+  ArrowRight,
+  BadgeCheck,
+  BarChart3,
+  GitBranch,
+  Handshake,
+  Rocket,
+  Target,
+  Users,
+  Workflow,
+  AlertTriangle,
+} from 'lucide-react'
+import { performanceDomains } from '@/data/performance-domains'
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.06,
+    },
+  },
+}
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 16 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.35,
+    },
+  },
+}
+
+const iconMap = {
+  PD01: Handshake,
+  PD02: Users,
+  PD03: GitBranch,
+  PD04: Target,
+  PD05: Workflow,
+  PD06: Rocket,
+  PD07: BarChart3,
+  PD08: AlertTriangle,
+} as const
+
+export function PerformanceDomainsPage() {
+  return (
+    <div className="space-y-6">
+      <motion.div
+        initial={{ opacity: 0, y: -16 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4 }}
+        className="relative overflow-hidden rounded-2xl bg-gradient-to-br from-slate-900 via-indigo-900 to-purple-900 p-6 text-white"
+      >
+        <div className="relative z-10 max-w-3xl">
+          <div className="mb-3 inline-flex items-center gap-2 rounded-full bg-white/10 px-3 py-1 text-sm text-white/90">
+            <BadgeCheck size={16} />
+            PMBOK 第七版 · 八大绩效域
+          </div>
+          <h1 className="text-2xl font-bold md:text-3xl">八大绩效域</h1>
+          <p className="mt-3 text-sm leading-6 text-white/80 md:text-base">
+            这里先提供目录入口页面，集中展示八大绩效域的学习入口与结构分组，方便你先确认页面风格与信息排布。
+          </p>
+        </div>
+
+        <div className="absolute -right-10 -top-10 h-40 w-40 rounded-full bg-white/10" />
+        <div className="absolute -bottom-16 left-10 h-36 w-36 rounded-full bg-fuchsia-400/20" />
+      </motion.div>
+
+      <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
+        {[
+          { label: '绩效域数量', value: 8, color: 'text-indigo-600' },
+          { label: '当前状态', value: '目录页', color: 'text-emerald-600' },
+          { label: '页面阶段', value: '首版', color: 'text-amber-600' },
+          { 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>
+
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="grid gap-4 md:grid-cols-2 xl:grid-cols-3"
+      >
+        {performanceDomains.map((domain, index) => {
+          const Icon = iconMap[domain.id as keyof typeof iconMap]
+
+          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">
+                <div className="flex items-start justify-between gap-4">
+                  <div className="flex items-center gap-4">
+                    <div className={`flex h-12 w-12 items-center justify-center rounded-xl bg-gradient-to-br ${domain.accentClass} text-white shadow-sm`}>
+                      <Icon size={22} />
+                    </div>
+                    <div>
+                      <div className="text-xs font-medium uppercase tracking-wide text-gray-400">
+                        {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 }}
+                  >
+                    入口
+                  </span>
+                </div>
+
+                <p className="mt-4 text-sm leading-6 text-gray-600 dark:text-gray-300">
+                  {domain.description}
+                </p>
+
+                <div className="mt-4 rounded-xl bg-gray-50 px-4 py-3 dark:bg-gray-700/50">
+                  <div className="text-xs text-gray-500 dark:text-gray-400">英文标识</div>
+                  <div className="mt-1 text-sm font-medium text-gray-900 dark:text-white">
+                    {domain.nameEn}
+                  </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>
+          )
+        })}
+      </motion.div>
+    </div>
+  )
+}

src/pages/index.ts

@@ -8,3 +8,5 @@ export { ProcessGraphPage } from './ProcessGraphPage'
 export { ArtifactDetailPage } from './ArtifactDetailPage'
 export { ToolDetailPage } from './ToolDetailPage'
 export { SettingsPage } from './SettingsPage'
+
+export { PerformanceDomainsPage } from './PerformanceDomainsPage'