fix: show ITTO rows by process

src/pages/IttoCollectionsPage.tsx

@@ -4,7 +4,6 @@ import { FileOutput, FileText, Wrench } from 'lucide-react'
 import {
   artifactMap,
   knowledgeAreas,
-  processGroups,
   processes,
   toolMap,
   normalizeProcessRef,
@@ -14,9 +13,10 @@ import type { Process, ProcessRef } from '@/types/itto'
 type ViewKey = 'inputs' | 'tools' | 'outputs'
 
 type CollectionRow = {
-  processGroupId: string
-  processGroupName: string
-  color: string
+  processId: string
+  processCode: string
+  processName: string
+  processNameEn: string
   items: string[]
 }
 
@@ -67,22 +67,16 @@ function uniqueItems(items: string[]) {
 
 function buildCollection(viewKey: ViewKey): CollectionArea[] {
   return knowledgeAreas.map((area) => {
-    const areaProcesses = processes.filter((process) => process.knowledgeAreaId === area.id)
-    const rows = processGroups.map((group) => {
-      const groupProcesses = areaProcesses.filter((process) => process.processGroupId === group.id)
-      const items = uniqueItems(
-        groupProcesses.flatMap((process) =>
-          getRefsByView(process, viewKey).map((ref) => formatRef(ref, viewKey))
-        )
-      )
-
-      return {
-        processGroupId: group.id,
-        processGroupName: group.name,
-        color: group.color,
-        items,
-      }
-    }).filter((row) => row.items.length > 0)
+    const rows = processes
+      .filter((process) => process.knowledgeAreaId === area.id)
+      .sort((a, b) => a.order - b.order)
+      .map((process) => ({
+        processId: process.id,
+        processCode: process.code,
+        processName: process.name,
+        processNameEn: process.nameEn,
+        items: uniqueItems(getRefsByView(process, viewKey).map((ref) => formatRef(ref, viewKey))),
+      }))
 
     return {
       id: area.id,
@@ -98,13 +92,14 @@ function buildCollection(viewKey: ViewKey): CollectionArea[] {
 export function IttoCollectionsPage() {
   const [activeTab, setActiveTab] = useState<ViewKey>('inputs')
   const collection = useMemo(() => buildCollection(activeTab), [activeTab])
+  const activeLabel = tabs.find((tab) => tab.key === activeTab)?.label
 
   return (
     <div className="space-y-4">
       <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
         <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">按知识领域与过程组汇总</p>
+          <p className="text-sm text-gray-500 dark:text-gray-400">按知识领域与子过程汇总</p>
         </div>
         <div className="inline-flex rounded-xl bg-white p-1 shadow-sm ring-1 ring-gray-100 dark:bg-gray-800 dark:ring-gray-700">
           {tabs.map((tab) => {
@@ -162,24 +157,30 @@ export function IttoCollectionsPage() {
               <table className="min-w-full divide-y divide-gray-100 dark:divide-gray-700">
                 <thead className="bg-gray-50 dark:bg-gray-900/40">
                   <tr>
-                    <th className="w-36 px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">
-                      过程组
+                    <th className="w-52 px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">
+                      子过程
                     </th>
                     <th className="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400">
-                      {tabs.find((tab) => tab.key === activeTab)?.label}
+                      {activeLabel}
                     </th>
                   </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-100 dark:divide-gray-700">
                   {area.rows.map((row) => (
-                    <tr key={row.processGroupId} className="align-top">
+                    <tr key={row.processId} className="align-top">
                       <td className="px-4 py-3">
-                        <span
-                          className="inline-flex rounded-full px-2.5 py-1 text-xs font-medium text-white"
-                          style={{ backgroundColor: row.color }}
-                        >
-                          {row.processGroupName}
-                        </span>
+                        <div className="flex items-start gap-2">
+                          <span
+                            className="mt-0.5 inline-flex shrink-0 rounded-md px-2 py-0.5 text-xs font-semibold text-white"
+                            style={{ backgroundColor: area.color }}
+                          >
+                            {row.processCode}
+                          </span>
+                          <div className="min-w-0">
+                            <div className="text-sm font-medium text-gray-900 dark:text-white">{row.processName}</div>
+                            <div className="text-xs text-gray-500 dark:text-gray-400">{row.processNameEn}</div>
+                          </div>
+                        </div>
                       </td>
                       <td className="px-4 py-3 text-sm leading-6 text-gray-700 dark:text-gray-300">
                         {row.items.join('；')}