feat(ProcessMatrix): 添加全屏模式下的布局优化

在全屏模式下将流程卡片改为网格布局,优化显示效果并添加文本截断功能
This commit is contained in:
史悦
2026-02-03 14:13:54 +08:00
parent 2226bca3b0
commit f6e92c5526
2 changed files with 16 additions and 6 deletions

View File

@@ -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>

View File

@@ -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>