94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
/**
|
||
* 49过程矩阵页面
|
||
*/
|
||
import { useEffect } from 'react'
|
||
import { ProcessMatrix } from '@/components/visualize'
|
||
import { Maximize2, Minimize2 } from 'lucide-react'
|
||
import { useAppStore } from '@/stores/useAppStore'
|
||
import { clsx } from 'clsx'
|
||
|
||
export function ProcessMatrixPage() {
|
||
const isFullScreen = useAppStore((s) => s.matrixFullScreen)
|
||
const setMatrixFullScreen = useAppStore((s) => s.setMatrixFullScreen)
|
||
const setSidebarOpen = useAppStore((s) => s.setSidebarOpen)
|
||
|
||
const toggleFullScreen = () => {
|
||
if (!isFullScreen) {
|
||
setSidebarOpen(false)
|
||
}
|
||
setMatrixFullScreen(!isFullScreen)
|
||
}
|
||
|
||
// Handle Escape key to exit full screen
|
||
useEffect(() => {
|
||
const handleEsc = (e: KeyboardEvent) => {
|
||
if (e.key === 'Escape' && isFullScreen) {
|
||
setMatrixFullScreen(false)
|
||
}
|
||
}
|
||
window.addEventListener('keydown', handleEsc)
|
||
return () => window.removeEventListener('keydown', handleEsc)
|
||
}, [isFullScreen, setMatrixFullScreen])
|
||
|
||
return (
|
||
<div className={clsx(isFullScreen ? "fixed inset-0 z-50 bg-white dark:bg-gray-900 p-0 m-0" : "space-y-6")}>
|
||
{/* 隐藏滚动条的样式 */}
|
||
{isFullScreen && (
|
||
<style>{`
|
||
.no-scrollbar::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
.no-scrollbar {
|
||
-ms-overflow-style: none;
|
||
scrollbar-width: none;
|
||
}
|
||
`}</style>
|
||
)}
|
||
|
||
{!isFullScreen && (
|
||
<div className="flex justify-between items-end">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">49过程矩阵</h1>
|
||
<p className="text-gray-500 dark:text-gray-400 mt-1">
|
||
知识领域 × 过程组 的全景矩阵视图，点击过程可查看详情
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={toggleFullScreen}
|
||
className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors shadow-sm"
|
||
>
|
||
<Maximize2 className="w-4 h-4" />
|
||
全屏查看
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className={clsx(
|
||
"bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 overflow-hidden transition-all duration-300",
|
||
!isFullScreen && "p-4",
|
||
isFullScreen && "h-full w-full border-0 rounded-none shadow-none flex flex-col"
|
||
)}>
|
||
{isFullScreen && (
|
||
<div className="flex justify-between items-center px-4 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 shrink-0">
|
||
<span className="font-medium text-gray-900 dark:text-white">49过程矩阵全景图</span>
|
||
<button
|
||
onClick={toggleFullScreen}
|
||
className="flex items-center gap-2 px-3 py-1.5 text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-md hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors"
|
||
>
|
||
<Minimize2 className="w-4 h-4" />
|
||
退出全屏
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
<div className={clsx("relative", isFullScreen ? "flex-1 overflow-hidden" : "")}>
|
||
<ProcessMatrix
|
||
className={clsx(isFullScreen && "h-full w-full overflow-auto no-scrollbar")}
|
||
isFullScreen={isFullScreen}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|