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

添加过程矩阵全屏查看功能，包括状态管理、快捷键支持和响应式布局
优化 Dockerfile 使用 npm ci 并添加生产环境标志
添加 nginx 配置支持 SPA 路由和静态资源缓存

src/pages/ProcessMatrixPage.tsx

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