样式调整

src/view/Manage/AssetBrowse/index.jsx

 import React, { useState } from 'react';
-import { Row, Col } from 'antd';
 import AssetTable from "../AssetManage/Component/AssetTable";
 import AssetTree from '../AssetManage/Component/AssetTree';
 
+import '../AssetManage/index.less';
+
 const AssetBrowse = (props) => {
 
   const [ nodeId, setNodeId ] = useState(''); 
@@ -12,14 +13,14 @@ const AssetBrowse = (props) => {
   }
 
   return (
-    <Row gutter={15} style={{backgroundColor:'#ededed'}}>
-      <Col span={6}>
+    <div className='asset-manage'>
+      <div className='left'>
         <AssetTree onSelect={onTreeSelect} readOnly {...props} />
-      </Col>
-      <Col span={18}>
+      </div>
+      <div className='right'>
         <AssetTable nodeId={nodeId} readOnly {...props} />
-      </Col>
-    </Row>
+      </div>
+    </div>
   )
 }
 

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

 import React, { useEffect, useState } from 'react';
-import {Card, Spin, Button, Tooltip, Tree, Input, Dropdown, Menu, Space, Modal} from 'antd';
+import {Card, Spin, Tooltip, Tree, Input, Dropdown, Menu, Modal} from 'antd';
 import { PlusOutlined, ImportOutlined,EditOutlined,DeleteOutlined,ExportOutlined,SyncOutlined, SettingOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 
@@ -178,6 +178,8 @@ const AssetTree = (props) => {
   }
  
   const addDir = () => {
+    if (currentDirType==='custom-root'||currentDirType==='custom') return;
+
     setUpdateDirectoryAction('add');
     setUpdateDirectoryModalVisible(true);
   }
@@ -202,6 +204,8 @@ const AssetTree = (props) => {
   }
 
   const importDir = () => {
+    if (currentDirType==='custom-root'||currentDirType==='custom') return;
+
     setImportDirectoryVisible(true);
   }
 
@@ -356,35 +360,42 @@ const AssetTree = (props) => {
     <Card
       className={classes}
       title={ readOnly ? null : (
-        <Space size={5}>
+        <div
+          className='p-3'
+          style={{
+            display: 'flex',
+            height: 52,
+            alignItems: 'center'
+          }}
+        >
           <Tooltip title="新增目录">
-            <Button shape="circle" icon={<PlusOutlined />} onClick={addDir} disabled={currentDirType==='custom-root'||currentDirType==='custom'} />
+            <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="修改">
-            <Button shape="circle" icon={<EditOutlined />} onClick={editDir} />
+          <Tooltip title="修改" className='ml-3'>
+            <EditOutlined onClick={editDir} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
-          <Tooltip title="刷新">
-            <Button shape="circle" icon={<SyncOutlined />} onClick={refreshTree} />
+          <Tooltip title="刷新" className='ml-3'>
+            <SyncOutlined onClick={refreshTree} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
-          <Tooltip title="导入">
-            <Button shape="circle" icon={<ImportOutlined />} onClick={importDir} disabled={currentDirType==='custom-root'||currentDirType==='custom'} />
+          <Tooltip title="导入" className='ml-3'>
+            <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">
+          <Dropdown overlay={exportMenu} placement="bottomLeft" className='ml-3'>
             <Tooltip title="导出">
-              <Button shape="circle" icon={<ExportOutlined />} />
+              <ExportOutlined style={{ fontSize:16,cursor:'pointer' }} />
             </Tooltip>
           </Dropdown>
-          <Tooltip title="删除">
-            <Button shape="circle" icon={<DeleteOutlined />} onClick={deleteDir} disabled={currentDirType==='custom'} />
+          <Tooltip title="删除" className='ml-3'>
+            <DeleteOutlined onClick={deleteDir} style={{ fontSize:16,cursor:'pointer' }} disabled={currentDirType==='custom'} />
           </Tooltip>
-          <Tooltip title="自定义">
-            <Button shape="circle" icon={<SettingOutlined />} onClick={customDir} />
+          <Tooltip title="自定义" className='ml-3'>
+            <SettingOutlined onClick={customDir} style={{ fontSize:16,cursor:'pointer' }} />
           </Tooltip>
-        </Space>
+        </div>
       )}
       bordered={false} 
       bodyStyle={{ padding: 10 }}
-      headStyle={{ padding: 10 }}
+      headStyle={{ padding: 0 }}
       style={{ width: '100%' }} 
     >
       <Spin spinning={loading}>

src/view/Manage/AssetManage/index.jsx

 import React, { useState } from 'react';
-import { Row, Col } from 'antd';
+
 import AssetTable from './Component/AssetTable';
 import AssetTree from './Component/AssetTree';
 
+import './index.less';
+
 const AssetManage = (props) => {
 
   const [ nodeId, setNodeId ] = useState(''); 
@@ -12,14 +14,14 @@ const AssetManage = (props) => {
   }
 
   return (
-    <Row gutter={15} style={{backgroundColor:'#ededed'}}>
-      <Col span={6}>
+    <div className='asset-manage'>
+      <div className='left'>
         <AssetTree onSelect={onTreeSelect} {...props} />
-      </Col>
-      <Col span={18}>
+      </div>
+      <div className='right'>
         <AssetTable nodeId={nodeId} {...props} />
-      </Col>
-    </Row>
+      </div>
+    </div>
   )
 }
 

src/view/Manage/AssetManage/index.less

+.asset-manage {
+  display: flex;
+  background-color: #ECEEF3;
+
+  .left {
+    width: 230px;
+    background-color: #fff;
+    margin-right: 10px; 
+  }
+
+  .right {
+    width:calc(100% - 240px);
+    background-color: #fff;
+  }
+}
\ No newline at end of file

src/view/Manage/Model/Component/ModelTree.jsx

 import React, { useState, useEffect, useRef } from "react";
-import { Tooltip, Tree, Button, Modal, Spin } from "antd";
+import { Tooltip, Tree, Modal, Spin } from "antd";
 import { PlusOutlined, EditOutlined, SyncOutlined, DeleteOutlined  } from '@ant-design/icons';
 
 import UpdateTreeItemModal from './UpdateTreeItemModal';
@@ -237,44 +237,28 @@ const ModelTree = (props) => {
   return (
     <div className='model-tree'>
       <div
-        className='p-3'
+        className='p-4'
         style={{
           display: 'flex',
           borderBottom: "1px solid #EFEFEF",
+          height: 52,
+          alignItems: 'center'
         }}
       >
         <Tooltip title="新增目录">
-          <Button 
-            shape="circle" 
-            icon={<PlusOutlined />} 
-            onClick={add}
-          />
+          <PlusOutlined onClick={add} style={{ fontSize:16,cursor:'pointer' }} />
         </Tooltip>
-        <Tooltip title="修改" className='ml-3'>
-          <Button 
-            shape="circle" 
-            icon={<EditOutlined />} 
-            onClick={update}
-          />
+        <Tooltip title="修改" className='ml-4'>
+          <EditOutlined onClick={update} style={{ fontSize:16,cursor:'pointer' }} />
         </Tooltip>
-        <Tooltip title="刷新" className='ml-3'>
-          <Button 
-            shape="circle" 
-            icon={<SyncOutlined />} 
-            onClick={refresh}
-          />
+        <Tooltip title="刷新" className='ml-4'>
+          <SyncOutlined onClick={refresh} style={{ fontSize:16,cursor:'pointer' }} />
         </Tooltip>
-        <Tooltip title="删除" className='ml-3'>
-          <Button 
-            shape="circle" 
-            icon={<DeleteOutlined />} 
-            onClick={deleteNode}
-          />
+        <Tooltip title="删除" className='ml-4'>
+          <DeleteOutlined onClick={deleteNode} style={{ fontSize:16,cursor:'pointer' }} />
         </Tooltip>
       </div>
-      <div
-        className='p-3'
-      >
+      <div className='p-3'>
         <Spin spinning={loading} >
           <Tree 
             onExpand={onExpand}

src/view/Manage/Model/index.jsx

 import React from 'react';
-import { Row, Col, Button, Input, Space, Spin } from 'antd';
+import { Button, Input, Space, Spin } from 'antd';
 import copy from "copy-to-clipboard";  
 
 import ModelTree from './Component/ModelTree';
@@ -12,6 +12,8 @@ import ExportDDLModal from './Component/ExportDDLModal';
 import { showMessage, showNotifaction } from '../../../util';
 import { dispatch } from '../../../model'; 
 
+import './index.less';
+
 class Model extends React.Component {
 
   constructor() {
@@ -225,15 +227,11 @@ class Model extends React.Component {
     );
 
     return (
-      <div style={{ backgroundColor: '#ECEEF3' }}>
-        <Row>
-          <Col span={6} >
-            <div className='mr-4' style={{ backgroundColor: '#fff' }}>
+      <div className='data-model'>
+        <div className='left'>
           <ModelTree onSelect={this.onTreeSelect} {...this.props} />
         </div> 
-          </Col>
-          <Col span={18}>
-            <div style={{ backgroundColor: '#fff' }}>
+        <div className='right'>
           <div
             className='d-flex p-3'
             style={{
@@ -285,8 +283,6 @@ class Model extends React.Component {
           }
           </div>
         </div>
-          </Col>
-        </Row>
 
         <WordTemplateModal 
           visible={wordTemplateModalVisible}

src/view/Manage/Model/index.less

+.data-model {
+  display: flex;
+  background-color: #ECEEF3;
+
+  .left {
+    width: 230px;
+    background-color: #fff;
+    margin-right: 10px; 
+  }
+
+  .right {
+    width:calc(100% - 240px);
+    background-color: #fff;
+  }
+}
\ No newline at end of file