feat(过程详情): 新增主要作用字段替换5W1H显示

- types/itto.ts: Process 新增 purpose 可选字段
- processes.json: P8.7 监督风险添加 purpose 示例数据
- ProcessDetailPage: 隐藏5W1H，改为显示主要作用卡片
- CLAUDE.md: 记录三类日常学习内容更新操作指南

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>

src/pages/ProcessDetailPage.tsx

@@ -1,19 +1,9 @@
 import { useParams, Link, useLocation, useNavigate } from 'react-router-dom'
 import { motion } from 'framer-motion'
-import { ArrowLeft, ArrowRight, FileText, Wrench, FileOutput, LayoutGrid, Workflow, User, Target, Clock, MapPin, HelpCircle, Cog, Eye, EyeOff } from 'lucide-react'
+import { ArrowLeft, ArrowRight, FileText, Wrench, FileOutput, LayoutGrid, Workflow, Eye, EyeOff, Info } from 'lucide-react'
 import { getProcessDetail, processes } from '@/data'
 import { useState, useEffect } from 'react'
 
-// 5W1H图标和标签配置
-const w5h1Config = {
-  who: { icon: User, label: 'Who', title: '谁负责', color: 'text-blue-600 dark:text-blue-400' },
-  what: { icon: Target, label: 'What', title: '做什么', color: 'text-emerald-600 dark:text-emerald-400' },
-  when: { icon: Clock, label: 'When', title: '何时', color: 'text-amber-600 dark:text-amber-400' },
-  where: { icon: MapPin, label: 'Where', title: '何地', color: 'text-purple-600 dark:text-purple-400' },
-  why: { icon: HelpCircle, label: 'Why', title: '为什么', color: 'text-rose-600 dark:text-rose-400' },
-  how: { icon: Cog, label: 'How', title: '如何做', color: 'text-indigo-600 dark:text-indigo-400' },
-}
-
 type IttoSection = 'inputs' | 'tools' | 'outputs'
 const STORAGE_KEY = 'ittoview:process-detail:itto-visibility'
 
@@ -78,7 +68,7 @@ export function ProcessDetailPage() {
 
   const ka = processDetail.knowledgeArea
   const pg = processDetail.processGroup
-  const w5h1 = (processDetail as any).w5h1
+  const purpose = (processDetail as any).purpose
 
   const currentIndex = processes.findIndex(p => p.id === id)
   const prevProcess = currentIndex > 0 ? processes[currentIndex - 1] : null
@@ -151,35 +141,19 @@ export function ProcessDetailPage() {
         </div>
       </motion.div>
 
-      {/* 5W1H记忆卡片 */}
-      {w5h1 && (
+      {/* 主要作用 */}
+      {purpose && (
         <motion.div
           initial={{ opacity: 0, y: 10 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.05 }}
-          className="bg-gradient-to-r from-slate-50 to-gray-50 dark:from-gray-800 dark:to-gray-800 rounded-xl p-4 border border-gray-200 dark:border-gray-700"
+          className="bg-indigo-50 dark:bg-indigo-900/20 rounded-xl p-4 border border-indigo-100 dark:border-indigo-800"
         >
-          <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3 flex items-center gap-2">
-            <span className="px-2 py-0.5 bg-indigo-100 dark:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 rounded text-xs">5W1H</span>
-            记忆要点
-          </h3>
-          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
-            {(Object.keys(w5h1Config) as Array<keyof typeof w5h1Config>).map((key) => {
-              const config = w5h1Config[key]
-              const Icon = config.icon
-              const value = w5h1[key]
-              return (
-                <div key={key} className="bg-white dark:bg-gray-700/50 rounded-lg p-2.5 border border-gray-100 dark:border-gray-600">
-                  <div className="flex items-center gap-1.5 mb-1">
-                    <Icon size={14} className={config.color} />
-                    <span className={`text-xs font-semibold ${config.color}`}>{config.label}</span>
-                    <span className="text-xs text-gray-400">({config.title})</span>
-                  </div>
-                  <p className="text-xs text-gray-700 dark:text-gray-300 leading-relaxed">{value}</p>
-                </div>
-              )
-            })}
+          <div className="flex items-center gap-2 mb-2">
+            <Info size={16} className="text-indigo-600 dark:text-indigo-400 shrink-0" />
+            <h3 className="text-sm font-semibold text-indigo-900 dark:text-indigo-100">主要作用</h3>
           </div>
+          <p className="text-sm text-indigo-800 dark:text-indigo-200 leading-relaxed">{purpose}</p>
         </motion.div>
       )}