资产管理页面调整

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,
@@ -495,6 +535,10 @@ const AssetTable = (props) => {
             (reference===AssetManageReference) && <Button onClick={addAsset}>新增</Button>
           }
           {
+            compact ? <Dropdown overlay={moreMenu} placement="bottomCenter"> 
+              <Button>其他操作</Button>
+            </Dropdown> : <React.Fragment>
+              { 
                 (reference===AssetManageReference) && <Button onClick={importAsset}>导入</Button>
               }
               {
@@ -511,6 +555,8 @@ const AssetTable = (props) => {
                 </React.Fragment> 
               }
               <Button onClick={onFilterElementClick}>要素设置</Button>
+            </React.Fragment>
+          }
           <Checkbox onChange={onRecursiveChange} checked={!recursive}>仅显示当前目录</Checkbox>
         </Space>
         <Space>
@@ -529,6 +575,15 @@ const AssetTable = (props) => {
       <div
         className='px-common'
       >
+        <ResizeObserver
+          onResize={({ width }) => {
+            if (width < 960 && !compact) {
+              setCompact(true);
+            } else if (width >= 960 && compact) {
+              setCompact(false);
+            }
+          }}
+        >
           <Table
             rowSelection={rowSelection}
             components={{
@@ -574,6 +629,7 @@ const AssetTable = (props) => {
             size='default'
             scroll={{ x: 1000, y: scrollY }}
           />
+        </ResizeObserver>
       </div> 
       <Pagination
         size="small"