From b05cabd1bb56cebcaac4f8a68f2f453a8ec663ab Mon Sep 17 00:00:00 2001
From: yxsj245 <17737475682@163.com>
Date: Mon, 6 Oct 2025 15:42:01 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=94=B6=E7=BC=A9?=
 =?UTF-8?q?=E5=92=8C=E5=B1=95=E5=BC=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/build.yml             |   4 +-
 client/src/components/Layout.tsx        | 137 +++++++++++++++++-------
 client/src/pages/AboutProjectPage.tsx   |   2 +-
 client/src/pages/GameDeploymentPage.tsx |   5 +-
 4 files changed, 104 insertions(+), 44 deletions(-)

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 2054f2b..3560042 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -127,7 +127,7 @@ jobs:
           platforms: linux/amd64,linux/arm64
           push: true
           tags: |
-            xiaozhu674/gameservermanager:3.8.6
+            xiaozhu674/gameservermanager:3.8.7
             xiaozhu674/gameservermanager:latest
           cache-from: type=gha
           cache-to: type=gha,mode=max
@@ -164,7 +164,7 @@ jobs:
           platforms: linux/arm64
           push: true
           tags: |
-            xiaozhu674/gameservermanager:3.8.6-arm64-beta
+            xiaozhu674/gameservermanager:3.8.7-arm64-beta
           cache-from: type=gha
           cache-to: type=gha,mode=max
 
diff --git a/client/src/components/Layout.tsx b/client/src/components/Layout.tsx
index 4a8e748..c7b900b 100644
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@@ -29,7 +29,9 @@ import {
   Puzzle,
   HelpCircle,
   CheckCircle,
-  Coffee
+  Coffee,
+  ChevronLeft,
+  ChevronRight
 } from 'lucide-react'
 
 interface LayoutProps {
@@ -38,6 +40,10 @@ interface LayoutProps {
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useState(false)
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(() => {
+    const saved = localStorage.getItem('sidebarCollapsed')
+    return saved === 'true'
+  })
   const [isConnected, setIsConnected] = useState(socketClient.isConnected())
   const [showDisconnectModal, setShowDisconnectModal] = useState(false)
   const [reconnecting, setReconnecting] = useState(false)
@@ -73,6 +79,13 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
     await logout()
   }
 
+  // 切换侧边栏展开/收缩
+  const toggleSidebarCollapse = () => {
+    const newState = !sidebarCollapsed
+    setSidebarCollapsed(newState)
+    localStorage.setItem('sidebarCollapsed', String(newState))
+  }
+
   // 打开文件管理帮助模态框
   const handleOpenFileHelpModal = () => {
     setShowFileHelpModal(true)
@@ -330,17 +343,20 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       
       {/* 侧边栏 */}
       <div className={`
-        fixed inset-y-0 left-0 z-50 w-64 transform transition-transform duration-300 ease-in-out lg:translate-x-0
+        fixed inset-y-0 left-0 z-50 transform transition-all duration-300 ease-in-out lg:translate-x-0
         ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}
+        ${sidebarCollapsed ? 'w-16' : 'w-64'}
       `}>
         <div className="flex h-full flex-col glass border-r border-white/20 dark:border-gray-700/30">
           {/* Logo */}
-          <div className="flex h-16 items-center justify-between px-6 border-b border-white/20 dark:border-gray-700/30">
-            <div className="flex items-center space-x-3">
-              <Gamepad2 className="w-8 h-8 text-blue-500" />
-              <span className="text-xl font-bold font-game neon-text">
-                GSManager3
-              </span>
+          <div className="flex h-16 items-center justify-between px-3 border-b border-white/20 dark:border-gray-700/30">
+            <div className={`flex items-center ${sidebarCollapsed ? 'justify-center w-full' : 'space-x-3 px-3'}`}>
+              <Gamepad2 className={`text-blue-500 ${sidebarCollapsed ? 'w-6 h-6' : 'w-8 h-8'}`} />
+              {!sidebarCollapsed && (
+                <span className="text-xl font-bold font-game neon-text">
+                  GSManager3
+                </span>
+              )}
             </div>
             <button
               onClick={() => setSidebarOpen(false)}
@@ -359,17 +375,21 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
                   key={item.name}
                   to={item.href}
                   onClick={() => setSidebarOpen(false)}
+                  title={sidebarCollapsed ? item.name : ''}
                   className={`
-                    flex items-center space-x-2.5 px-3 py-2.5 rounded-lg transition-all duration-300 ease-in-out transform
+                    flex items-center rounded-lg transition-all duration-300 ease-in-out transform
                     hover:scale-105 hover:shadow-md active:scale-95
+                    ${sidebarCollapsed ? 'justify-center px-2 py-2.5' : 'space-x-2.5 px-3 py-2.5'}
                     ${isActive
                       ? 'bg-blue-600/20 text-blue-600 dark:text-blue-400 border border-blue-500/30 shadow-lg scale-105'
                       : 'text-black dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-black dark:hover:text-white'
                     }
                   `}
                 >
-                  <item.icon className="w-4 h-4" />
-                  <span className="font-medium">{item.name}</span>
+                  <item.icon className="w-4 h-4 flex-shrink-0" />
+                  {!sidebarCollapsed && (
+                    <span className="font-medium whitespace-nowrap">{item.name}</span>
+                  )}
                 </Link>
               )
             })}
@@ -377,60 +397,97 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           
           {/* 用户信息和操作 */}
           <div className="border-t border-white/20 dark:border-gray-700/30 p-4 space-y-4">
+            {/* 展开/收缩切换按钮 (仅桌面端显示) */}
+            <button
+              onClick={toggleSidebarCollapse}
+              title={sidebarCollapsed ? '展开侧边栏' : '收缩侧边栏'}
+              className={`hidden lg:flex items-center w-full rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-md active:scale-95 text-black dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-black dark:hover:text-white ${
+                sidebarCollapsed ? 'justify-center px-2 py-2.5' : 'space-x-2.5 px-3 py-2.5'
+              }`}
+            >
+              {sidebarCollapsed ? (
+                <ChevronRight className="w-4 h-4" />
+              ) : (
+                <>
+                  <ChevronLeft className="w-4 h-4" />
+                  <span className="font-medium">收缩</span>
+                </>
+              )}
+            </button>
+
             {/* 主题切换 */}
             <button
               onClick={toggleTheme}
-              className="flex items-center space-x-2.5 w-full px-3 py-2.5 text-black dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-black dark:hover:text-white rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-md active:scale-95"
+              title={sidebarCollapsed ? (theme === 'dark' ? '浅色模式' : '深色模式') : ''}
+              className={`flex items-center w-full rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-md active:scale-95 text-black dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/10 hover:text-black dark:hover:text-white ${
+                sidebarCollapsed ? 'justify-center px-2 py-2.5' : 'space-x-2.5 px-3 py-2.5'
+              }`}
             >
               {theme === 'dark' ? (
-                <Sun className="w-4 h-4" />
+                <Sun className="w-4 h-4 flex-shrink-0" />
               ) : (
-                <Moon className="w-4 h-4" />
+                <Moon className="w-4 h-4 flex-shrink-0" />
+              )}
+              {!sidebarCollapsed && (
+                <span className="font-medium whitespace-nowrap">
+                  {theme === 'dark' ? '浅色模式' : '深色模式'}
+                </span>
               )}
-              <span className="font-medium">
-                {theme === 'dark' ? '浅色模式' : '深色模式'}
-              </span>
             </button>
             
             {/* 用户信息 */}
-            <div className="flex items-center space-x-2.5 px-3 py-2.5 bg-gray-100 dark:bg-white/5 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-md">
-              <div className="w-7 h-7 bg-blue-600 rounded-full flex items-center justify-center">
-                <User className="w-3.5 h-3.5 text-white" />
+            <div 
+              title={sidebarCollapsed ? `${user?.username} (${user?.role === 'admin' ? '管理员' : '用户'})` : ''}
+              className={`flex items-center bg-gray-100 dark:bg-white/5 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-md ${
+                sidebarCollapsed ? 'justify-center px-2 py-2.5' : 'space-x-2.5 px-3 py-2.5'
+              }`}
+            >
+              <div className={`bg-blue-600 rounded-full flex items-center justify-center flex-shrink-0 ${
+                sidebarCollapsed ? 'w-6 h-6' : 'w-7 h-7'
+              }`}>
+                <User className={`text-white ${sidebarCollapsed ? 'w-3 h-3' : 'w-3.5 h-3.5'}`} />
               </div>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-black dark:text-white truncate">
-                  {user?.username}
-                </p>
-                <div className="flex items-center space-x-1">
-                  <p className="text-xs text-gray-600 dark:text-gray-400">
-                    {user?.role === 'admin' ? '管理员' : '用户'}
+              {!sidebarCollapsed && (
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-black dark:text-white truncate">
+                    {user?.username}
                   </p>
-                  {isSponsor && (
-                    <div className="flex items-center space-x-1">
-                      <Crown className="w-3 h-3 text-yellow-500" />
-                      <span className="text-xs text-yellow-600 dark:text-yellow-400 font-medium">
-                        赞助者
-                      </span>
-                    </div>
-                  )}
+                  <div className="flex items-center space-x-1">
+                    <p className="text-xs text-gray-600 dark:text-gray-400">
+                      {user?.role === 'admin' ? '管理员' : '用户'}
+                    </p>
+                    {isSponsor && (
+                      <div className="flex items-center space-x-1">
+                        <Crown className="w-3 h-3 text-yellow-500" />
+                        <span className="text-xs text-yellow-600 dark:text-yellow-400 font-medium">
+                          赞助者
+                        </span>
+                      </div>
+                    )}
+                  </div>
                 </div>
-              </div>
+              )}
             </div>
             
             {/* 登出按钮 */}
             <button
               onClick={handleLogout}
-              className="flex items-center space-x-2.5 w-full px-3 py-2.5 text-red-400 hover:bg-red-500/10 hover:text-red-300 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-md active:scale-95"
+              title={sidebarCollapsed ? '登出' : ''}
+              className={`flex items-center w-full rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105 hover:shadow-md active:scale-95 text-red-400 hover:bg-red-500/10 hover:text-red-300 ${
+                sidebarCollapsed ? 'justify-center px-2 py-2.5' : 'space-x-2.5 px-3 py-2.5'
+              }`}
             >
-              <LogOut className="w-4 h-4" />
-              <span className="font-medium">登出</span>
+              <LogOut className="w-4 h-4 flex-shrink-0" />
+              {!sidebarCollapsed && (
+                <span className="font-medium whitespace-nowrap">登出</span>
+              )}
             </button>
           </div>
         </div>
       </div>
       
       {/* 主内容区域 */}
-      <div className="lg:pl-64">
+      <div className={`transition-all duration-300 ${sidebarCollapsed ? 'lg:pl-16' : 'lg:pl-64'}`}>
         {/* 顶部栏 */}
         <div className="sticky top-0 z-30 flex h-16 items-center justify-between px-6 glass border-b border-gray-200 dark:border-gray-700/30">
           <button
diff --git a/client/src/pages/AboutProjectPage.tsx b/client/src/pages/AboutProjectPage.tsx
index 698b8f5..d350b26 100644
--- a/client/src/pages/AboutProjectPage.tsx
+++ b/client/src/pages/AboutProjectPage.tsx
@@ -254,7 +254,7 @@ const AboutProjectPage: React.FC = () => {
                     </div>
                     <div className="flex justify-between">
                       <span className="text-gray-600 dark:text-gray-400">版本：</span>
-                      <span className="text-black dark:text-white font-medium">3.8.6</span>
+                      <span className="text-black dark:text-white font-medium">3.8.7</span>
                     </div>
                     <div className="flex justify-between">
                       <span className="text-gray-600 dark:text-gray-400">开发者：</span>
diff --git a/client/src/pages/GameDeploymentPage.tsx b/client/src/pages/GameDeploymentPage.tsx
index 127ad6d..758fb71 100644
--- a/client/src/pages/GameDeploymentPage.tsx
+++ b/client/src/pages/GameDeploymentPage.tsx
@@ -2658,6 +2658,9 @@ const GameDeploymentPage: React.FC = () => {
               <p className="text-yellow-700 dark:text-yellow-300 mb-4">
                 在线部署功能需要有效的赞助者密钥才能使用。请前往设置页面配置您的密钥。
               </p>
+              <p className="text-yellow-700 dark:text-yellow-300 mb-4">
+                在线部署是采用GSManager官方中国大陆服务器由开发团队亲自手动配置的服务端具有一键安装和百分百的成功率保障
+              </p>
               <button
                 onClick={() => navigate('/settings')}
                 className="bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-2 rounded-lg transition-colors"
@@ -3366,7 +3369,7 @@ const GameDeploymentPage: React.FC = () => {
               搜索Minecraft整合包
             </h3>
             <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
-              整合包内容来源于 <a href="https://modrinth.com/" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">Modrinth</a> 平台
+              整合包内容来源于 <a href="https://modrinth.com/" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">Modrinth</a> 平台。若您是中国大陆网路可能会受到网络影响造成的部署失败，建议使用代理后再次部署。
             </p>
 
             <div className="flex space-x-4 mb-4">