资产管理样式调整

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

 import React, { useEffect, useState } from 'react';
-import { SettingOutlined } from '@ant-design/icons';
 import { Spin, Tooltip, Typography, Dropdown, Menu } from 'antd';
 
 import { dispatch } from '../../../../model';

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

@@ -497,7 +497,7 @@ const AssetTable = (props) => {
           { 
             (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>
@@ -511,7 +511,7 @@ const AssetTable = (props) => {
             </React.Fragment> 
           }
           <Button onClick={onFilterElementClick}>要素设置</Button>
-          <Checkbox onChange={onRecursiveChange} checked={!recursive}>仅显示当前目录</Checkbox> */}
+          <Checkbox onChange={onRecursiveChange} checked={!recursive}>仅显示当前目录</Checkbox>
         </Space>
         <Space>
           <Input 
@@ -522,7 +522,7 @@ const AssetTable = (props) => {
             style={{ width: inputWidth }}
           />
           <Tooltip title={fullScreen?'取消全屏':'全屏'}>
-            <Button onClick={onFullScreenClick} icon={<img src={fullScreen?CancelFullScreenImg:FullScreenImg} width={20} height={20} />} type='text'></Button>
+            <Button onClick={onFullScreenClick} icon={<img src={fullScreen?CancelFullScreenImg:FullScreenImg} width={20} height={20} alt='' />} type='text'></Button>
           </Tooltip>
         </Space>
       </div>

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

@@ -525,23 +525,29 @@ const AssetTree = (props) => {
     </Menu>
   );
 
-  const loop = data =>
+  const loop = (data, isRootLeaf= true) =>
     data.map(item => {
       const index = item.text.indexOf(keyword);
       const beforeStr = item.text.substr(0, index);
       const afterStr = item.text.substr(index + keyword.length);
       const title =
         index > -1 ? (
-          <span>
+          <span 
+            className={isRootLeaf?'title-color': 'text-color'}
+            style={{ fontWeight: isRootLeaf?'bold': '' }}
+          >
             {beforeStr}
             <span className="site-tree-search-value">{keyword}</span>
             {afterStr}
           </span>
         ) : (
-          <span>{item.text}</span>
+          <span
+            className={isRootLeaf?'title-color': 'text-color'}
+            style={{ fontWeight: isRootLeaf?'bold': '' }}
+          >{item.text}</span>
         );
       if (item.children) {
-        return { title, key: item.nodeId, children: loop(item.children) };
+        return { title, key: item.nodeId, children: loop(item.children, false) };
       }
 
       return {
@@ -560,53 +566,53 @@ const AssetTree = (props) => {
       className={classes}
       title={ (reference===AssetBrowseReference||reference===ResourceBrowseReference || reference===AssetMountReference) ? null : (
         <div
-          className='p-3'
+          className='flex px-2'
           style={{
-            display: 'flex',
-            height: 52,
-            alignItems: 'center'
+            height: 60,
+            alignItems: 'center',
+            justifyContent: 'space-between',
           }}
         >
           <Tooltip title="新增目录">
             <PlusOutlined onClick={addDir} style={{ fontSize:16,cursor: (currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer', color: (currentDirType==='custom-root'||currentDirType==='custom')?'#bfbfbf': '' }}/>
           </Tooltip>
-          <Tooltip title="修改目录" className='ml-2'>
+          <Tooltip title="修改目录">
             <EditOutlined onClick={editDir} style={{ fontSize:16,cursor: 'pointer' }} />
           </Tooltip>
-          <Tooltip title="刷新目录" className='ml-2'>
+          <Tooltip title="刷新目录">
             <ReloadOutlined onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
-          <Tooltip title="导入目录" className='ml-2'>
+          <Tooltip title="导入目录">
             <ImportOutlined onClick={importDir} style={{ fontSize:16,cursor:(currentDirType==='custom-root'||currentDirType==='custom')?'not-allowed':'pointer', color: (currentDirType==='custom-root'||currentDirType==='custom')?'#bfbfbf': '' }} />
           </Tooltip>
-          <Dropdown overlay={exportMenu} placement="bottomLeft" className='ml-3'>
+          <Dropdown overlay={exportMenu} placement="bottomLeft" >
             <Tooltip title="导出目录">
               <ExportOutlined style={{ fontSize:16,cursor:'pointer' }} />
             </Tooltip>
           </Dropdown>
-          <Tooltip title="上移目录" className='ml-2'>
+          <Tooltip title="上移目录">
             <ArrowUpOutlined onClick={() => { moveNode(1); }} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
-          <Tooltip title="下移目录" className='ml-2'>
+          <Tooltip title="下移目录">
             <ArrowDownOutlined onClick={() => { moveNode(-1); }} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
-          <Tooltip title="删除目录" className='ml-2'>
+          <Tooltip title="删除目录">
             <DeleteOutlined onClick={deleteDir} style={{ fontSize:16,cursor:(currentDirType==='custom')?'not-allowed':'pointer', color: (currentDirType==='custom')?'#bfbfbf': '' }} />
           </Tooltip>
-          <Tooltip title="自定义目录" className='ml-2'>
+          <Tooltip title="自定义目录">
             <SettingOutlined onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
         </div>
       )}
       bordered={false} 
-      bodyStyle={{ padding: 10 }}
+      bodyStyle={{ padding: '24px 15px' }}
       headStyle={{ padding: 0 }}
       style={{ width: '100%' }} 
     >
       <Spin spinning={loading}>
         <Input  
           value={keyword}
-          style={{ marginBottom:10 }} 
+          style={{ marginBottom: 24 }} 
           onChange={(e) => { onChange(e) }}
         />
         <Tree

src/view/Manage/AssetManage/Component/AssetTree.less

@@ -7,7 +7,7 @@
   }
 
   .yy-tree{
-    height: calc(100vh - @header-height - @pm-4 - @pm-3 - 33px + 1px - 20px - 42px) !important;
+    height: calc(100vh - @header-height  - 30px - 60px - 104px) !important;
     overflow: auto !important;
   }
 
@@ -18,7 +18,7 @@
 
 .asset-tree-read-only {
   .yy-tree {
-    height: calc(100vh - @header-height - @pm-4 - 20px - 42px) !important;;
+    height: calc(100vh - @header-height - 30px - 60px - 104px) !important;;
     overflow: auto !important;
   }
 }

src/view/Manage/AssetManage/index.jsx

@@ -65,7 +65,9 @@ const AssetManage = (props) => {
       <div className='left'>
         <AssetTree onSelect={onTreeSelect} onDirectoryChange={onDirectoryChange} {...props} />
       </div>
-      <Separate width={15} />
+      {
+        expandTree && <Separate width={15} />
+      }
       <div className='middle'>
         <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} onElementsChange={onElementsChange} />
         <Separate height={15} />

src/view/Manage/AssetManage/index.less

@@ -43,7 +43,7 @@
   }
 
   .tree-toggle {
-    left: 15px;
+    left: 0;
   }
 
   .middle {