From f6e92c55260d44df1b6f45dd702697f214e7747f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=8F=B2=E6=82=A6?= <shiyue@hdzxbj.com>
Date: Tue, 3 Feb 2026 14:13:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(ProcessMatrix):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E5=85=A8=E5=B1=8F=E6=A8=A1=E5=BC=8F=E4=B8=8B=E7=9A=84=E5=B8=83?=
 =?UTF-8?q?=E5=B1=80=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在全屏模式下将流程卡片改为网格布局，优化显示效果并添加文本截断功能
---
 src/components/visualize/ProcessMatrix.tsx | 17 ++++++++++++-----
 src/pages/ProcessMatrixPage.tsx            |  5 ++++-
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/visualize/ProcessMatrix.tsx b/src/components/visualize/ProcessMatrix.tsx
index 002327f..c3c0262 100644
--- a/src/components/visualize/ProcessMatrix.tsx
+++ b/src/components/visualize/ProcessMatrix.tsx
@@ -13,9 +13,10 @@ import {
 
 interface ProcessMatrixProps {
   className?: string
+  isFullScreen?: boolean
 }
 
-export function ProcessMatrix({ className }: ProcessMatrixProps) {
+export function ProcessMatrix({ className, isFullScreen = false }: ProcessMatrixProps) {
   // 构建矩阵数据：knowledgeAreaId -> processGroupId -> Process[]
   const matrix = new Map<string, Map<string, typeof processes>>()
 
@@ -98,21 +99,27 @@ export function ProcessMatrix({ className }: ProcessMatrixProps) {
                     key={pg.id}
                     className="p-2 border border-gray-200 dark:border-gray-700 align-top bg-white dark:bg-gray-800"
                   >
-                    <div className="space-y-1">
+                    <div className={clsx(
+                      "gap-1",
+                      isFullScreen ? "grid grid-cols-2" : "space-y-1"
+                    )}>
                       {cellProcesses.map(p => (
                         <Link
                           key={p.id}
                           to={`/process/${p.id}`}
                           state={{ from: 'matrix' }}
-                          className="block px-2 py-1.5 rounded text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+                          className={clsx(
+                            "block px-2 py-1.5 rounded text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors",
+                            isFullScreen && "flex items-center h-full"
+                          )}
                         >
                           <span
-                            className="inline-block px-1.5 py-0.5 rounded text-white font-medium mr-1"
+                            className="inline-block px-1.5 py-0.5 rounded text-white font-medium mr-1 shrink-0"
                             style={{ backgroundColor: ka.color, fontSize: '10px' }}
                           >
                             {p.code}
                           </span>
-                          <span className="text-gray-700 dark:text-gray-300">
+                          <span className="text-gray-700 dark:text-gray-300 line-clamp-2">
                             {p.name}
                           </span>
                         </Link>
diff --git a/src/pages/ProcessMatrixPage.tsx b/src/pages/ProcessMatrixPage.tsx
index 62da3a2..f2a738d 100644
--- a/src/pages/ProcessMatrixPage.tsx
+++ b/src/pages/ProcessMatrixPage.tsx
@@ -82,7 +82,10 @@ export function ProcessMatrixPage() {
         )}
         
         <div className={clsx("relative", isFullScreen ? "flex-1 overflow-hidden" : "")}>
-            <ProcessMatrix className={clsx(isFullScreen && "h-full w-full overflow-auto no-scrollbar")} />
+            <ProcessMatrix
+              className={clsx(isFullScreen && "h-full w-full overflow-auto no-scrollbar")}
+              isFullScreen={isFullScreen}
+            />
         </div>
       </div>
     </div>