feat(ProcessMatrix): 添加全屏模式下的布局优化
在全屏模式下将流程卡片改为网格布局,优化显示效果并添加文本截断功能
This commit is contained in:
@@ -13,9 +13,10 @@ import {
|
|||||||
|
|
||||||
interface ProcessMatrixProps {
|
interface ProcessMatrixProps {
|
||||||
className?: string
|
className?: string
|
||||||
|
isFullScreen?: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
export function ProcessMatrix({ className }: ProcessMatrixProps) {
|
export function ProcessMatrix({ className, isFullScreen = false }: ProcessMatrixProps) {
|
||||||
// 构建矩阵数据:knowledgeAreaId -> processGroupId -> Process[]
|
// 构建矩阵数据:knowledgeAreaId -> processGroupId -> Process[]
|
||||||
const matrix = new Map<string, Map<string, typeof processes>>()
|
const matrix = new Map<string, Map<string, typeof processes>>()
|
||||||
|
|
||||||
@@ -98,21 +99,27 @@ export function ProcessMatrix({ className }: ProcessMatrixProps) {
|
|||||||
key={pg.id}
|
key={pg.id}
|
||||||
className="p-2 border border-gray-200 dark:border-gray-700 align-top bg-white dark:bg-gray-800"
|
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 => (
|
{cellProcesses.map(p => (
|
||||||
<Link
|
<Link
|
||||||
key={p.id}
|
key={p.id}
|
||||||
to={`/process/${p.id}`}
|
to={`/process/${p.id}`}
|
||||||
state={{ from: 'matrix' }}
|
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
|
<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' }}
|
style={{ backgroundColor: ka.color, fontSize: '10px' }}
|
||||||
>
|
>
|
||||||
{p.code}
|
{p.code}
|
||||||
</span>
|
</span>
|
||||||
<span className="text-gray-700 dark:text-gray-300">
|
<span className="text-gray-700 dark:text-gray-300 line-clamp-2">
|
||||||
{p.name}
|
{p.name}
|
||||||
</span>
|
</span>
|
||||||
</Link>
|
</Link>
|
||||||
|
|||||||
@@ -82,7 +82,10 @@ export function ProcessMatrixPage() {
|
|||||||
)}
|
)}
|
||||||
|
|
||||||
<div className={clsx("relative", isFullScreen ? "flex-1 overflow-hidden" : "")}>
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user