shiyue/ittoview
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 添加过程矩阵全屏功能并优化部署配置

Browse Source 
添加过程矩阵全屏查看功能，包括状态管理、快捷键支持和响应式布局
优化 Dockerfile 使用 npm ci 并添加生产环境标志
添加 nginx 配置支持 SPA 路由和静态资源缓存
This commit is contained in:
史悦
2026-02-03 09:02:44 +08:00
parent ae1ca8bfaa
commit 4fdc77e453
5 changed files with 118 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/pages/ProcessMatrixPage.tsx
View File

@@ -1,19 +1,89 @@
/**
* 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="space-y-6">
<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>
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-4 overflow-hidden">
<ProcessMatrix />
<div className={clsx("space-y-6", isFullScreen && "fixed inset-0 z-50 bg-white dark:bg-gray-900 p-0 m-0 space-y-0")}>
{/* 隐藏滚动条的样式 */}
{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")} />
</div>
</div>
</div>
)