feat (1.41.0 -> 1.42.0): 优化响应式布局,移除最小宽度限制并支持更多屏幕尺寸

- 在 app.css 中移除页面 min-width 和 min-height 限制
- 在 useEffectiveBreakpoint.ts 中注释掉强制大屏幕逻辑
- 在 BasicLayout.tsx 中调整响应式断点配置并添加测试标识
- 在 BottomBar.tsx 中优化布局属性并添加测试支持
- 优化导航栏在不同断点下的显示和位置

改动文件:
- src/app.css
- src/hooks/useEffectiveBreakpoint.ts
- src/layouts/BasicLayout.tsx
- src/layouts/BottomBar.tsx
- package-lock.json

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "zsis",
-  "version": "1.34.9",
+  "version": "1.41.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "zsis",
-      "version": "1.34.9",
+      "version": "1.41.0",
       "dependencies": {
         "@babel/runtime": "^7.24.4",
         "@cornerstonejs/core": "^3.28.0",

src/app.css

@@ -3,8 +3,6 @@
 @tailwind utilities;
 
 html,page, body {
-  min-width: 1600px !important;
-  min-height: 900px !important;
   overflow:auto !important;
   overflow-y: auto !important;
   background-color: var(--color-bg-layout, #ffffff) !important;

src/hooks/useEffectiveBreakpoint.ts

@@ -11,34 +11,34 @@ const { useBreakpoint } = Grid;
  */
 const useEffectiveBreakpoint = () => {
     const screens = useBreakpoint();
-    const [isForcedLarge, setIsForcedLarge] = useState(false);
-
-    useEffect(() => {
-        const handleResize = () => {
-            // Check if window width is less than the min-width (1700px)
-            // We use a slightly smaller buffer or exact match depending on needs, 
-            // but strictly < 1700 matches the CSS min-width logic.
-            setIsForcedLarge(window.innerWidth < 1700);
-        };
-
-        // Initial check
-        handleResize();
-
-        window.addEventListener('resize', handleResize);
-        return () => window.removeEventListener('resize', handleResize);
-    }, []);
-
-    if (isForcedLarge) {
-        // Return a breakpoint object that mimics a very large screen
-        return {
-            xs: true,
-            sm: true,
-            md: true,
-            lg: true,
-            xl: true,
-            xxl: true,
-        };
-    }
+    // const [isForcedLarge, setIsForcedLarge] = useState(false);
+
+    // useEffect(() => {
+    //     const handleResize = () => {
+    //         // Check if window width is less than the min-width (1700px)
+    //         // We use a slightly smaller buffer or exact match depending on needs, 
+    //         // but strictly < 1700 matches the CSS min-width logic.
+    //         setIsForcedLarge(window.innerWidth < 1700);
+    //     };
+
+    //     // Initial check
+    //     handleResize();
+
+    //     window.addEventListener('resize', handleResize);
+    //     return () => window.removeEventListener('resize', handleResize);
+    // }, []);
+
+    // if (isForcedLarge) {
+    //     // Return a breakpoint object that mimics a very large screen
+    //     return {
+    //         xs: true,
+    //         sm: true,
+    //         md: true,
+    //         lg: true,
+    //         xl: true,
+    //         xxl: true,
+    //     };
+    // }
 
     return screens;
 };

src/layouts/BasicLayout.tsx

@@ -143,6 +143,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
             {/* 品牌区域 */}
             <Col xl={4} lg={4} md={5} sm={0} xs={0} className="h-full">
               <img
+                data-testid="logo-image"
                 src={logo}
                 alt="Logo"
                 className="h-full w-auto object-contain"
@@ -186,13 +187,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
           className="xxl:h-[90vh] xl:h-[90vh] lg:h-[90vh] md:h-[90vh] sm:h-[90vh] xs:h-[90vh] pt-2"
         >
           {/* 导航区域 */}
-          <Col xl={2} lg={2} md={0} sm={0} xs={0} className="h-full">
+          <Col xl={2} lg={0} md={0} sm={0} xs={0} className="h-full">
             <NavMenu onMenuClick={handleMenuClick} />
           </Col>
           {/* 内容区域 */}
           <Col
             xl={22}
-            lg={22}
+            lg={24}
             xs={24}
             md={24}
             sm={24}
@@ -210,15 +211,13 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
         {/* 第一行：品牌和状态区域 */}
         {pageLayoutConfig.brandAndStatusPosition === 'bottom' && (
           <Row
-            className="xl:h-[9vh] text-[100%]"
+            className="xl:h-[9vh] md:h-[9vh] text-[100%]"
             style={{ borderBottom: '1px solid #e5e7eb' }}
           >
             {/* 品牌区域 */}
             <Col xl={8} lg={8} md={5} sm={0} xs={0} className="h-full">
               {/* 底部通栏：仅在桌面端显示 */}
-              <div className="xl:block lg:block md:hidden sm:hidden xs:hidden h-full">
-                <BottomBar />
-              </div>
+              <BottomBar />
             </Col>
             {/* 状态区域 */}
             <Col
@@ -300,8 +299,8 @@ const BasicLayout: React.FC<BasicLayoutProps> = () => {
           </TabBar>
         </div>
         <NavbarFloat
-          className="fixed hidden sm:hidden xs:hidden md:block lg:hidden xl:hidden"
-          position="right"
+          className="fixed hidden sm:hidden xs:hidden md:block lg:block xl:hidden"
+          position="left"
           onMenuClick={handleMenuClick}
         />
       </Layout>

src/layouts/BottomBar.tsx

@@ -33,7 +33,9 @@ const BottomBar: React.FC = () => {
     return (
         <>
             <Row
-                gutter={12}
+                data-testid="bottom-bar"
+                // gutter={12}
+                wrap={false}
                 style={{
                     position: 'sticky',
                     bottom: 0,