Browse Source

设置左侧导航区域,上部的BusinessZone不撑开整体页面

dengdx 1 week ago
parent
commit
f71545e82a
1 changed files with 55 additions and 52 deletions
  1. 55 52
      src/layouts/BusinessZone.tsx

+ 55 - 52
src/layouts/BusinessZone.tsx

@@ -151,63 +151,66 @@ const BusinessZone: React.FC<BusinessZoneProps> = ({ onMenuClick, collapsed }) =
   }, [items]);
 
   return (
-<div style={{ width: '100%',overflow: 'hidden' ,flex: '1 1 auto',position: 'relative' ,minHeight:'0'}}>
-  <p>1. 这里内容很多,会撑高。</p>
-    <p>2. 这里内容很多,会撑高。</p>
-    <p>3. 这里内容很多,会撑高。</p>
-    <p>4. 这里内容很多,会撑高。</p>
-    <p>5. 这里内容很多,会撑高。</p>
-    <p>6. 这里内容很多,会撑高。</p>
-    <p>7. 这里内容很多,会撑高。</p>
-    <p>8. 这里内容很多,会撑高。</p>
-    <p>9. 这里内容很多,会撑高。</p>
-    <p>10. 这里内容很多,会撑高。</p>
-    <p>11. 这里内容很多,会撑高。</p>
-    <p>12. 这里内容很多,会撑高。</p>
-    <p>13. 这里内容很多,会撑高。</p>
-    <p>14. 这里内容很多,会撑高。</p>
-    <p>15. 这里内容很多,会撑高。</p>
+    <div style={{ width: '100%', overflow: 'hidden', position: 'relative' }} className='grid grid-rows-[1fr] h-0 flex-grow'>
+      <div className='overflow-y-auto'>
+        {/* <p>1. 这里内容很多,会撑高。</p>
+        <p>2. 这里内容很多,会撑高。</p>
+        <p>3. 这里内容很多,会撑高。</p>
+        <p>4. 这里内容很多,会撑高。</p>
+        <p>5. 这里内容很多,会撑高。</p>
+        <p>6. 这里内容很多,会撑高。</p>
+        <p>7. 这里内容很多,会撑高。</p>
+        <p>8. 这里内容很多,会撑高。</p>
+        <p>9. 这里内容很多,会撑高。</p>
+        <p>10. 这里内容很多,会撑高。</p>
+        <p>11. 这里内容很多,会撑高。</p>
         <p>12. 这里内容很多,会撑高。</p>
-    <p>13. 这里内容很多,会撑高。</p>
-    <p>14. 这里内容很多,会撑高。</p>
-    <p>15. 这里内容很多,会撑高。</p>
+        <p>13. 这里内容很多,会撑高。</p>
+        <p>14. 这里内容很多,会撑高。</p>
+        <p>15. 这里内容很多,会撑高。</p>
         <p>12. 这里内容很多,会撑高。</p>
-    <p>13. 这里内容很多,会撑高。</p>
-    <p>14. 这里内容很多,会撑高。</p>
-    <p>15. 这里内容很多,会撑高。</p>
+        <p>13. 这里内容很多,会撑高。</p>
+        <p>14. 这里内容很多,会撑高。</p>
+        <p>15. 这里内容很多,会撑高。</p>
         <p>12. 这里内容很多,会撑高。</p>
-    <p>13. 这里内容很多,会撑高。</p>
-    <p>14. 这里内容很多,会撑高。</p>
-    <p>15. 这里内容很多,会撑高。</p>
+        <p>13. 这里内容很多,会撑高。</p>
+        <p>14. 这里内容很多,会撑高。</p>
+        <p>15. 这里内容很多,会撑高。</p>
         <p>12. 这里内容很多,会撑高。</p>
-    <p>13. 这里内容很多,会撑高。</p>
-    <p>14. 这里内容很多,会撑高。</p>
-    <p>1852. 这里内容很多,会撑高。</p>
-  {/* <Space direction="vertical"> */}
-        {/* {visibleItems.map((item) => (
-          <div key={item.key}>
-            <MeButton
-              icon={item.icon}
-              onClick={() => onMenuClick?.(item.key)}
-              username={typeof item.label === 'string' ? item.label : undefined}
-            />
-            {item.children && (
-              <Space direction="vertical" style={{ marginLeft: 20 }}>
-                {item.children.map((child) => (
-                  <MeButton
-                    key={child.key}
-                    onClick={() => onMenuClick?.(child.key)}
-                    username={typeof child.label === 'string' ? child.label : undefined}
-                  />
-                ))}
-              </Space>
-            )}
-          </div>
-        ))} */}
-      {/* </Space> */}
+        <p>13. 这里内容很多,会撑高。</p>
+        <p>14. 这里内容很多,会撑高。</p>
+        <p>15. 这里内容很多,会撑高。</p>
+        <p>12. 这里内容很多,会撑高。</p>
+        <p>13. 这里内容很多,会撑高。</p>
+        <p>14. 这里内容很多,会撑高。</p>
+        <p>1852. 这里内容很多,会撑高。</p> */}
+
+        {/* <div>444444</div> */}
+        <Space direction="vertical">
+          {visibleItems.map((item) => (
+            <div key={item.key}>
+              <MeButton
+                icon={item.icon}
+                onClick={() => onMenuClick?.(item.key)}
+                username={typeof item.label === 'string' ? item.label : undefined}
+              />
+              {item.children && (
+                <Space direction="vertical" style={{ marginLeft: 20 }}>
+                  {item.children.map((child) => (
+                    <MeButton
+                      key={child.key}
+                      onClick={() => onMenuClick?.(child.key)}
+                      username={typeof child.label === 'string' ? child.label : undefined}
+                    />
+                  ))}
+                </Space>
+              )}
+            </div>
+          ))}
+        </Space>
+      </div>
+    </div>
 
-</div>
-    
   );
 };