Initial commit

src/pages/ProcessGroupsPage.tsx

@@ -0,0 +1,193 @@
+import { Link, useParams } from 'react-router-dom'
+import { motion } from 'framer-motion'
+import { ArrowRight, FileText, Wrench, FileOutput } from 'lucide-react'
+import { processGroups, processesByProcessGroup, processGroupMap, knowledgeAreaMap } from '@/data'
+
+const containerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: { staggerChildren: 0.05 },
+  },
+}
+
+const itemVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: { opacity: 1, y: 0 },
+}
+
+export function ProcessGroupsPage() {
+  const { id } = useParams()
+  const selectedPG = id ? processGroupMap.get(id) : null
+  const processes = id ? processesByProcessGroup.get(id) || [] : []
+
+  if (selectedPG) {
+    // 显示过程组详情
+    return (
+      <div className="space-y-6">
+        {/* 面包屑 */}
+        <nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+          <Link to="/process-groups" className="hover:text-indigo-600 dark:hover:text-indigo-400">
+            过程组
+          </Link>
+          <span>/</span>
+          <span className="text-gray-900 dark:text-white">{selectedPG.name}</span>
+        </nav>
+
+        {/* 过程组标题 */}
+        <motion.div
+          initial={{ opacity: 0, y: -20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="rounded-xl p-6"
+          style={{ backgroundColor: `${selectedPG.color}15` }}
+        >
+          <div className="flex items-center gap-4">
+            <div
+              className="flex h-14 w-14 items-center justify-center rounded-xl text-white font-bold text-xl"
+              style={{ backgroundColor: selectedPG.color }}
+            >
+              {selectedPG.order}
+            </div>
+            <div>
+              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+                {selectedPG.name}
+              </h1>
+              <p className="text-gray-500 dark:text-gray-400">{selectedPG.nameEn}</p>
+            </div>
+          </div>
+          <p className="mt-4 text-gray-600 dark:text-gray-300">{selectedPG.description}</p>
+        </motion.div>
+
+        {/* 过程列表 */}
+        <motion.div
+          variants={containerVariants}
+          initial="hidden"
+          animate="visible"
+          className="space-y-4"
+        >
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            包含 {processes.length} 个过程
+          </h2>
+          {processes.map((process) => {
+            const ka = knowledgeAreaMap.get(process.knowledgeAreaId)
+            return (
+              <motion.div key={process.id} variants={itemVariants}>
+                <Link
+                  to={`/process/${process.id}`}
+                  className="group block bg-white dark:bg-gray-800 rounded-xl p-5 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md hover:border-gray-200 dark:hover:border-gray-600 transition-all"
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center gap-4">
+                      <div
+                        className="flex h-10 w-10 items-center justify-center rounded-lg text-white font-medium"
+                        style={{ backgroundColor: ka?.color || selectedPG.color }}
+                      >
+                        {process.code}
+                      </div>
+                      <div>
+                        <h3 className="font-semibold text-gray-900 dark:text-white">
+                          {process.name}
+                        </h3>
+                        <p className="text-sm text-gray-500 dark:text-gray-400">
+                          {process.nameEn}
+                        </p>
+                      </div>
+                    </div>
+                    <div className="flex items-center gap-4">
+                      {ka && (
+                        <span
+                          className="px-3 py-1 rounded-full text-xs font-medium text-white"
+                          style={{ backgroundColor: ka.color }}
+                        >
+                          {ka.name}
+                        </span>
+                      )}
+                      <ArrowRight
+                        size={20}
+                        className="text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 group-hover:translate-x-1 transition-all"
+                      />
+                    </div>
+                  </div>
+                  {/* ITTO统计 */}
+                  <div className="mt-4 flex items-center gap-6 text-sm text-gray-500 dark:text-gray-400">
+                    <span className="flex items-center gap-1">
+                      <FileText size={14} />
+                      {process.inputs.length} 输入
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <Wrench size={14} />
+                      {process.tools.length} 工具技术
+                    </span>
+                    <span className="flex items-center gap-1">
+                      <FileOutput size={14} />
+                      {process.outputs.length} 输出
+                    </span>
+                  </div>
+                </Link>
+              </motion.div>
+            )
+          })}
+        </motion.div>
+      </div>
+    )
+  }
+
+  // 显示过程组列表
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl font-bold text-gray-900 dark:text-white">过程组</h1>
+        <p className="text-gray-500 dark:text-gray-400 mt-1">
+          PMBOK第6版定义的5大项目管理过程组
+        </p>
+      </div>
+
+      <motion.div
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="space-y-4"
+      >
+        {processGroups.map((pg) => (
+          <motion.div key={pg.id} variants={itemVariants}>
+            <Link
+              to={`/process-groups/${pg.id}`}
+              className="group block bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm border border-gray-100 dark:border-gray-700 hover:shadow-md transition-all"
+              style={{ borderLeftWidth: 4, borderLeftColor: pg.color }}
+            >
+              <div className="flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <div
+                    className="flex h-14 w-14 items-center justify-center rounded-xl text-white font-bold text-xl"
+                    style={{ backgroundColor: pg.color }}
+                  >
+                    {pg.order}
+                  </div>
+                  <div>
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white">{pg.name}</h3>
+                    <p className="text-sm text-gray-500 dark:text-gray-400">{pg.nameEn}</p>
+                  </div>
+                </div>
+                <div className="flex items-center gap-4">
+                  <div className="text-right">
+                    <div className="text-2xl font-bold text-gray-900 dark:text-white">
+                      {pg.processCount}
+                    </div>
+                    <div className="text-sm text-gray-500 dark:text-gray-400">个过程</div>
+                  </div>
+                  <ArrowRight
+                    size={24}
+                    className="text-gray-400 group-hover:text-gray-600 dark:group-hover:text-gray-300 group-hover:translate-x-1 transition-all"
+                  />
+                </div>
+              </div>
+              <p className="mt-4 text-gray-500 dark:text-gray-400">
+                {pg.description}
+              </p>
+            </Link>
+          </motion.div>
+        ))}
+      </motion.div>
+    </div>
+  )
+}