feat(process): 添加5W1H记忆辅助信息并优化页面布局

- 在Process接口中添加5W1H可选字段
- 为所有过程添加5W1H记忆辅助信息
- 优化知识领域、过程组和过程详情页面的紧凑布局
- 在过程详情页添加5W1H记忆卡片展示
- 调整动画效果和间距提升用户体验

src/pages/KnowledgeAreasPage.tsx

@@ -5,14 +5,11 @@ import { knowledgeAreas, processesByKnowledgeArea, knowledgeAreaMap, processGrou
 
 const containerVariants = {
   hidden: { opacity: 0 },
-  visible: {
-    opacity: 1,
-    transition: { staggerChildren: 0.05 },
-  },
+  visible: { opacity: 1, transition: { staggerChildren: 0.03 } },
 }
 
 const itemVariants = {
-  hidden: { opacity: 0, y: 20 },
+  hidden: { opacity: 0, y: 10 },
   visible: { opacity: 1, y: 0 },
 }
 
@@ -22,106 +19,71 @@ export function KnowledgeAreasPage() {
   const processes = id ? processesByKnowledgeArea.get(id) || [] : []
 
   if (selectedKA) {
-    // 显示知识领域详情
     return (
-      <div className="space-y-6">
+      <div className="space-y-4">
         {/* 面包屑 */}
         <nav className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
-          <Link to="/knowledge-areas" className="hover:text-indigo-600 dark:hover:text-indigo-400">
-            知识领域
-          </Link>
+          <Link to="/knowledge-areas" className="hover:text-indigo-600 dark:hover:text-indigo-400">知识领域</Link>
           <span>/</span>
           <span className="text-gray-900 dark:text-white">{selectedKA.name}</span>
         </nav>
 
-        {/* 知识领域标题 */}
+        {/* 知识领域标题 - 紧凑版 */}
         <motion.div
-          initial={{ opacity: 0, y: -20 }}
+          initial={{ opacity: 0, y: -10 }}
           animate={{ opacity: 1, y: 0 }}
-          className="rounded-xl p-6"
+          className="rounded-xl p-4"
           style={{ backgroundColor: `${selectedKA.color}15` }}
         >
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-3">
             <div
-              className="flex h-14 w-14 items-center justify-center rounded-xl text-white font-bold text-xl"
+              className="flex h-12 w-12 items-center justify-center rounded-lg text-white font-bold text-lg"
               style={{ backgroundColor: selectedKA.color }}
             >
               {selectedKA.order}
             </div>
-            <div>
-              <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
-                {selectedKA.name}
-              </h1>
-              <p className="text-gray-500 dark:text-gray-400">{selectedKA.nameEn}</p>
+            <div className="flex-1">
+              <h1 className="text-xl font-bold text-gray-900 dark:text-white">{selectedKA.name}</h1>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{selectedKA.nameEn}</p>
+            </div>
+            <div className="text-right">
+              <div className="text-2xl font-bold text-gray-900 dark:text-white">{processes.length}</div>
+              <div className="text-xs text-gray-500">个过程</div>
             </div>
           </div>
-          <p className="mt-4 text-gray-600 dark:text-gray-300">{selectedKA.description}</p>
+          <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">{selectedKA.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>
+        {/* 过程列表 - 紧凑版 */}
+        <motion.div variants={containerVariants} initial="hidden" animate="visible" className="space-y-2">
           {processes.map((process) => {
             const pg = processGroupMap.get(process.processGroupId)
             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"
+                  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 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: selectedKA.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">
-                      {pg && (
-                        <span
-                          className="px-3 py-1 rounded-full text-xs font-medium text-white"
-                          style={{ backgroundColor: pg.color }}
-                        >
-                          {pg.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
+                    className="flex h-9 w-9 items-center justify-center rounded-lg text-white font-medium text-sm shrink-0"
+                    style={{ backgroundColor: selectedKA.color }}
+                  >
+                    {process.code}
                   </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 className="flex-1 min-w-0">
+                    <h3 className="font-medium text-gray-900 dark:text-white text-sm truncate">{process.name}</h3>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{process.nameEn}</p>
+                  </div>
+                  <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400 shrink-0">
+                    <span className="flex items-center gap-1"><FileText size={12} />{process.inputs.length}</span>
+                    <span className="flex items-center gap-1"><Wrench size={12} />{process.tools.length}</span>
+                    <span className="flex items-center gap-1"><FileOutput size={12} />{process.outputs.length}</span>
+                    {pg && (
+                      <span className="px-2 py-0.5 rounded-full text-xs font-medium text-white hidden sm:inline" style={{ backgroundColor: pg.color }}>
+                        {pg.name}
+                      </span>
+                    )}
+                    <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" />
                   </div>
                 </Link>
               </motion.div>
@@ -132,55 +94,41 @@ export function KnowledgeAreasPage() {
     )
   }
 
-  // 显示知识领域列表
+  // 显示知识领域列表 - 紧凑版双列
   return (
-    <div className="space-y-6">
+    <div className="space-y-4">
       <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版定义的10大项目管理知识领域
-        </p>
+        <h1 className="text-xl font-bold text-gray-900 dark:text-white">知识领域</h1>
+        <p className="text-sm text-gray-500 dark:text-gray-400">PMBOK第6版定义的10大项目管理知识领域</p>
       </div>
 
       <motion.div
         variants={containerVariants}
         initial="hidden"
         animate="visible"
-        className="grid md:grid-cols-2 gap-4"
+        className="grid md:grid-cols-2 gap-3"
       >
         {knowledgeAreas.map((ka) => (
           <motion.div key={ka.id} variants={itemVariants}>
             <Link
               to={`/knowledge-areas/${ka.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 transition-all"
-              style={{ borderLeftWidth: 4, borderLeftColor: ka.color }}
+              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"
+              style={{ borderLeftWidth: 3, borderLeftColor: ka.color }}
             >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center gap-4">
-                  <div
-                    className="flex h-12 w-12 items-center justify-center rounded-lg text-white font-bold text-lg"
-                    style={{ backgroundColor: ka.color }}
-                  >
-                    {ka.order}
-                  </div>
-                  <div>
-                    <h3 className="font-semibold text-gray-900 dark:text-white">{ka.name}</h3>
-                    <p className="text-sm text-gray-500 dark:text-gray-400">{ka.nameEn}</p>
-                  </div>
-                </div>
-                <div className="flex items-center gap-2">
-                  <span className="text-sm text-gray-500 dark:text-gray-400">
-                    {ka.processCount} 个过程
-                  </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
+                className="flex h-10 w-10 items-center justify-center rounded-lg text-white font-bold shrink-0"
+                style={{ backgroundColor: ka.color }}
+              >
+                {ka.order}
+              </div>
+              <div className="flex-1 min-w-0">
+                <h3 className="font-semibold text-gray-900 dark:text-white text-sm">{ka.name}</h3>
+                <p className="text-xs text-gray-500 dark:text-gray-400 truncate">{ka.nameEn}</p>
+              </div>
+              <div className="flex items-center gap-2 shrink-0">
+                <span className="text-sm font-medium text-gray-600 dark:text-gray-300">{ka.processCount}个</span>
+                <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" />
               </div>
-              <p className="mt-3 text-sm text-gray-500 dark:text-gray-400 line-clamp-2">
-                {ka.description}
-              </p>
             </Link>
           </motion.div>
         ))}