From 9fbf7bec1ad870d51246653b04eb9b3bc56a07c9 Mon Sep 17 00:00:00 2001
From: powersir <1576775122@qq.com>
Date: Mon, 11 Dec 2023 09:27:42 +0800
Subject: [PATCH] update:tabls-layout style

---
 src/layout/tabs-layout.tsx                  | 11 ++--
 src/pages/custom/product/material/index.tsx | 60 ++++++++++++++-------
 2 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/layout/tabs-layout.tsx b/src/layout/tabs-layout.tsx
index 12723b0..ceb535d 100644
--- a/src/layout/tabs-layout.tsx
+++ b/src/layout/tabs-layout.tsx
@@ -77,10 +77,13 @@ const TabsLayout: React.FC = () => {
               height: 'calc(100vh - 107px)'
             }}
           >
-            <div style={{
-              height: '100%',
-              overflow: 'auto'
-            }}>
+            <div 
+            className="flex flex-col h-full"
+            // style={{
+            //   height: '100%',
+            //   overflow: 'auto'
+            // }}
+            >
               {tab.children}
             </div>
 
diff --git a/src/pages/custom/product/material/index.tsx b/src/pages/custom/product/material/index.tsx
index d36edc5..b01011e 100644
--- a/src/pages/custom/product/material/index.tsx
+++ b/src/pages/custom/product/material/index.tsx
@@ -6,6 +6,7 @@ import type { FilterConfirmProps, TableRowSelection } from 'antd/es/table/interf
 import { t } from '@/utils/i18n';
 import { PlusOutlined, ExclamationCircleFilled, DeleteOutlined, SearchOutlined } from '@ant-design/icons';
 import { antdUtils } from '@/utils/antd';
+import { useSize, useEventListener  } from 'ahooks';
 import mData from '../../../../../mock/findMaterialPage.json'
 import MaterialClassifyView from './classify';
 
@@ -122,7 +123,7 @@ const TablePage: React.FC = () => {
     dataIndex: DataIndex,
   ) => {
     setOnSearching(true);
-    setTimeout(()=>{
+    setTimeout(() => {
       setOnSearching(false);
       confirm();
     }, 1000)
@@ -147,8 +148,8 @@ const TablePage: React.FC = () => {
           onSearch={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}
           allowClear
           style={{ marginBottom: 8, display: 'block' }}
-          enterButton="搜索" 
-          size="large" 
+          enterButton="搜索"
+          size="large"
           loading={onSearching}
         />
       </div>
@@ -257,8 +258,6 @@ const TablePage: React.FC = () => {
     },
   ];
 
-
-
   const data: Array<DataType> = mData as Array<DataType>;
 
   const [isDisableDelete, setDisableDelete] = useState<boolean>(true)
@@ -308,24 +307,47 @@ const TablePage: React.FC = () => {
     ],
   };
 
+  const [viewHeight, setViewHeight ] = useState(window.innerHeight - 120);
+  const ref = useRef(null);
+  const size = useSize(ref);
+  console.log('size', size);
+  useEventListener('resize', (ev) => {
+    console.log('resize', ev);
+    // if(ev.target) {
+    //   useSize(document)
+    // }
+    setViewHeight(window.innerHeight - 120)
+
+  });
   return (
     <>
-      <div className='flex flex-row'>
-        <Card className='basis-1/4  w-[100px] mb-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'>
-          <MaterialClassifyView/>
-        </Card>
-        <Card className='basis-3/4 mb-[10px] ml-[10px] dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]' bodyStyle={{
+      <div className='flex flex-row' ref={ref}>
+        <div className='basis-1/4  sticky top-0 w-[100px] mb-[10px]'>
+          <Card className=' dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px]'>
+            <MaterialClassifyView />
+          </Card>
+        </div>
+
+        <div className='basis-3/4 mb-[10px] ml-[10px]  overflow-auto' style={{height: viewHeight}}>
+          <Card className='dark:bg-[rgb(33,41,70)] bg-white roundle-lg px[12px] h-full' bodyStyle={{
             paddingTop: 0,
-            paddingBottom: 0
+            paddingBottom: 0,
+            height: '100%'
           }}>
-          <div className="py-[8px] flex flex-row-reverse">
-            <Button className="ml-5" danger size='middle' icon={<DeleteOutlined />} disabled={isDisableDelete}> 批量删除 </Button>
-            <Button className="ml-5" type='primary' size='middle' icon={<PlusOutlined />}> 新增素材 </Button>
-          </div>
-          <Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent'
-            pagination={{ position: ['bottomRight'] }}
-          />
-        </Card>
+            <div className='flex flex-col h-full'>
+              <div className="py-[8px] flex flex-row-reverse relative">
+                <Button className="ml-5" danger size='middle' icon={<DeleteOutlined />} disabled={isDisableDelete}> 批量删除 </Button>
+                <Button className="ml-5" type='primary' size='middle' icon={<PlusOutlined />}> 新增素材 </Button>
+              </div>
+              <div className='flex h-full overflow-auto mb-4'>
+                <Table rowKey="id" rowSelection={rowSelection} scroll={{ x: true }} columns={columns} dataSource={data} className='bg-transparent'
+                  pagination={{ position: ['bottomRight'] }}
+                />
+              </div>
+
+            </div>
+          </Card>
+        </div>
       </div>
     </>
   );