资产管理页面调整

src/view/Manage/AssetManage/Component/AssetTable.jsx

 import React,{ useState, useEffect, useRef } from "react";
-import { Button, Pagination, Space, Modal, Input, Table, Tooltip, Checkbox, Typography } from "antd";
+import { Button, Pagination, Space, Modal, Input, Table, Tooltip, Checkbox, Typography, Dropdown, Menu } from "antd";
 import classNames from 'classnames';
 import SmoothScroll from 'smooth-scroll';
 import { Resizable } from 'react-resizable';
+import ResizeObserver from 'rc-resize-observer';
 
 import FilterElementModal from './FilterElementModal';
 import AssetMount from '../../AssetRecycle/Component/AssetMount';
@@ -72,6 +73,7 @@ const AssetTable = (props) => {
   const [ batchCatalogChange, setBatchCatalogChange ] = useState(false);
   const [ fullScreen, setFullScreen ] = useState(false);
   const [ recursive, setRecursive ] = useState(true);
+  const [ compact, setCompact ] = useState(false);
 
   const [ modal, contextHolder ] = Modal.useModal();
   const anchorId = getQueryParam(AnchorId, props.location.search);
@@ -459,6 +461,44 @@ const AssetTable = (props) => {
     setColumns(nextColumns);
   };
 
+  const moreMenu = (
+    <Menu>
+      {
+        (reference===AssetManageReference) && <Menu.Item>
+          <div className='text-center' onClick={importAsset}>
+            导入
+          </div>
+        </Menu.Item>
+      }
+
+      {
+        (reference===AssetManageReference || reference===AssetRecycleReference) && <React.Fragment>
+          <Menu.Item disabled={(checkedKeys||[]).length===0}>
+            <div className='text-center' onClick={exportAsset}>
+              导出
+            </div>
+          </Menu.Item>
+          <Menu.Item disabled={(checkedKeys||[]).length===0}>
+            <div className='text-center' onClick={onBatchCatalogChangeBtnClick}>
+            {(reference===AssetRecycleReference)?'挂载':'变更目录'}
+            </div>
+          </Menu.Item>
+          <Menu.Item disabled={(checkedKeys||[]).length===0}>
+            <div className='text-center' onClick={deleteAssets}>
+              删除
+            </div>
+          </Menu.Item>
+        </React.Fragment>
+      }
+      
+      <Menu.Item>
+        <div className='text-center' onClick={onFilterElementClick}>
+          要素设置
+        </div>
+      </Menu.Item>
+    </Menu>
+  );
+
   const rowSelection = {
     selectedRowKeys: checkedKeys,
     onChange: onSelectChange,
@@ -482,7 +522,7 @@ const AssetTable = (props) => {
   }
 
   return(
-    <div className={classes}>
+    <div className={classes}> 
       <div
         className='flex p-common'
         style={{
@@ -494,23 +534,29 @@ const AssetTable = (props) => {
           { 
             (reference===AssetManageReference) && <Button onClick={addAsset}>新增</Button>
           }
-          { 
-            (reference===AssetManageReference) && <Button onClick={importAsset}>导入</Button>
-          }
           {
-            (reference===AssetManageReference || reference===AssetRecycleReference) && <React.Fragment>
-              <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
-                <Button onClick={exportAsset} disabled={(checkedKeys||[]).length===0} >导出</Button>
-              </Tooltip>
-              <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
-                <Button onClick={onBatchCatalogChangeBtnClick} disabled={(checkedKeys||[]).length===0} >{(reference===AssetRecycleReference)?'挂载':'变更目录'}</Button>
-              </Tooltip>
-              <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
-                <Button onClick={deleteAssets} disabled={(checkedKeys||[]).length===0} >删除</Button>
-              </Tooltip>
-            </React.Fragment> 
+            compact ? <Dropdown overlay={moreMenu} placement="bottomCenter"> 
+              <Button>其他操作</Button>
+            </Dropdown> : <React.Fragment>
+              { 
+                (reference===AssetManageReference) && <Button onClick={importAsset}>导入</Button>
+              }
+              {
+                (reference===AssetManageReference || reference===AssetRecycleReference) && <React.Fragment>
+                  <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
+                    <Button onClick={exportAsset} disabled={(checkedKeys||[]).length===0} >导出</Button>
+                  </Tooltip>
+                  <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
+                    <Button onClick={onBatchCatalogChangeBtnClick} disabled={(checkedKeys||[]).length===0} >{(reference===AssetRecycleReference)?'挂载':'变更目录'}</Button>
+                  </Tooltip>
+                  <Tooltip title={(checkedKeys||[]).length===0?'请先选择资产':''}>
+                    <Button onClick={deleteAssets} disabled={(checkedKeys||[]).length===0} >删除</Button>
+                  </Tooltip>
+                </React.Fragment> 
+              }
+              <Button onClick={onFilterElementClick}>要素设置</Button>
+            </React.Fragment>
           }
-          <Button onClick={onFilterElementClick}>要素设置</Button>
           <Checkbox onChange={onRecursiveChange} checked={!recursive}>仅显示当前目录</Checkbox>
         </Space>
         <Space>
@@ -529,51 +575,61 @@ const AssetTable = (props) => {
       <div
         className='px-common'
       >
-        <Table
-          rowSelection={rowSelection}
-          components={{
-            header: {
-              cell: ResizeableHeaderCell,
+        <ResizeObserver
+          onResize={({ width }) => {
+            if (width < 960 && !compact) {
+              setCompact(true);
+            } else if (width >= 960 && compact) {
+              setCompact(false);
             }
           }}
-          onRow={(record) => {
-            return {
-              id: `data-asset-${record?.id}`,
-              onClick: (e) => {
-                setSelectItem(record);
-                onSelect && onSelect(record?.id, record?.dirId);
-
-                if (reference !== AssetManageReference) {
-                  setAssetDetailDrawerVisible(true);
+        >
+          <Table
+            rowSelection={rowSelection}
+            components={{
+              header: {
+                cell: ResizeableHeaderCell,
+              }
+            }}
+            onRow={(record) => {
+              return {
+                id: `data-asset-${record?.id}`,
+                onClick: (e) => {
+                  setSelectItem(record);
+                  onSelect && onSelect(record?.id, record?.dirId);
+
+                  if (reference !== AssetManageReference) {
+                    setAssetDetailDrawerVisible(true);
+                  }
                 }
               }
-            }
-          }}
-          rowClassName={(record, index) => {
-            if (record?.id===anchorId || record?.id===selectItem?.id) {
-              return 'yy-table-select-row';
-            }
+            }}
+            rowClassName={(record, index) => {
+              if (record?.id===anchorId || record?.id===selectItem?.id) {
+                return 'yy-table-select-row';
+              }
 
-            return '';
-          }}
-          loading={loading}
-          columns={
-            columns.map((column, index) => { 
-              return {
-                ...column,
-                onHeaderCell: column => ({
-                  width: column.width,
-                  onResize: handleResize(index),
-                }),
-              };
-            })
-          } 
-          rowKey='id'
-          dataSource={assets}
-          pagination={false}
-          size='default'
-          scroll={{ x: 1000, y: scrollY }}
-        />
+              return '';
+            }}
+            loading={loading}
+            columns={
+              columns.map((column, index) => { 
+                return {
+                  ...column,
+                  onHeaderCell: column => ({
+                    width: column.width,
+                    onResize: handleResize(index),
+                  }),
+                };
+              })
+            } 
+            rowKey='id'
+            dataSource={assets}
+            pagination={false}
+            size='default'
+            scroll={{ x: 1000, y: scrollY }}
+          />
+        </ResizeObserver>
       </div> 
       <Pagination
         size="small"