资产管理样式调整

src/index.less

@@ -15,7 +15,7 @@ body {
   'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
   sans-serif;
   font-variant: tabular-nums;
-  line-height: 1.5;
+  line-height: 1.0;
   background-color: #fff;
   -webkit-font-feature-settings: 'tnum';
           font-feature-settings: 'tnum';
@@ -118,7 +118,7 @@ div[id^='__qiankun_microapp_wrapper_'] {
 }
 
 .yy-table-tbody > tr > td  {
-  padding: 8px 8px !important;
+  padding: 19px 8px !important;
 }
 
 .yy-table-tbody > .yy-table-measure-row > td  {
@@ -193,5 +193,89 @@ tr.drop-over-upward td {
     font-size: 13px !important;
     padding: 4px 8px !important;
   } 
+}
+
+.primary-color {
+  color: #196AD2;
+}
+
+.title-color {
+  color: #020202;
+}
+
+.text-color {
+  color: #5B5B5B;
+}
+
+.m-common {
+  margin: 24px 15px;
+}
+
+.mx-common {
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+.ml-common {
+  margin-left: 15px;
+}
+
+.mr-common {
+  margin-right: 15px;
+}
+
+.my-common {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.mt-common {
+  margin-top: 24px;
+}
+
+.mb-common {
+  margin-bottom: 24px;
+}
+
+.p-common {
+  padding: 24px 15px;
+}
+
+.px-common {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.pl-common {
+  padding-left: 15px;
+}
+
+.pr-common {
+  padding-right: 15px;
+}
+
+.py-common {
+  padding-top: 24px;
+  padding-bottom: 24px;
+}
+
+.pt-common {
+  padding-top: 24px;
+}
+
+.pb-common {
+  padding-bottom: 24px;
+}
+
+.yy-table-row {
+  color: #363636 !important;
+  .yy-typography {
+    color: #363636 !important;
+  }
+}
 
+.yy-table-select-row {
+  .yy-table-cell {
+    background-color: #F6F6F6 !important;
+  }
 }
\ No newline at end of file

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

@@ -9,7 +9,8 @@ import AttributeRelationModal from "./AttributeRelationModal";
 import FilterElementModal from './FilterElementModal';
 import { showNotifaction } from '../../../../util';
 
-import record from '../../../../assets/record.png'; 
+import more from '../Assets/more_h.png';
+import record from '../Assets/record.png'; 
 
 const { Paragraph, Text } = Typography;
 
@@ -84,22 +85,22 @@ const AssetDirectory = (props) => {
   const elementManageMenu = (
     <Menu>
       <Menu.Item>
-        <div onClick={onImportElementBtnClick}>
+        <div className='text-center' onClick={onImportElementBtnClick}>
           导入要素
         </div>
       </Menu.Item>
       <Menu.Item>
-        <div onClick={onExportElementBtnClick}>
+        <div className='text-center' onClick={onExportElementBtnClick}>
           导出要素
         </div>
       </Menu.Item>
       <Menu.Item>
-        <div onClick={onFilterElementClick}>
+        <div className='text-center' onClick={onFilterElementClick}>
           要素管理
         </div>
       </Menu.Item>
       <Menu.Item>
-        <div onClick={onAttributeRelationBtnClick}>
+        <div className='text-center' onClick={onAttributeRelationBtnClick}>
           元数据属性关联
         </div>
       </Menu.Item>
@@ -109,63 +110,92 @@ const AssetDirectory = (props) => {
   return (
     <Spin spinning={loading}>
       <div
-        className='flex'
+        className='flex p-common'
         style={{
           alignItems: 'center',
           justifyContent: 'space-between',
           color: 'rgba(0, 0, 0, 0.85)',
-          padding: '10px 12px',
           borderBottom: '1px solid #f0f0f0',
         }}
       >
         <div style={{ flex: 1, overflow: 'hidden'}}>
-          <Typography>
+          <div>
+            <div className='mb-common'>
               <Paragraph>
                 <Tooltip title={dir?.name||''}>
-                <Text>名称:&nbsp;{dir?.name||''}</Text>
+                  <Text className='title-color'>
+                    名称:&nbsp;
+                    <Text className='text-color'>{dir?.name||''}</Text>
+                  </Text>
                 </Tooltip>
                 &nbsp;&nbsp;
                 <Tooltip title={dir?.code||''}>
-                <Text>编号:&nbsp;{dir?.code||''}</Text>
+                  <Text className='title-color'>
+                    编号:&nbsp;
+                    <Text className='text-color'>{dir?.code||''}</Text>
+                  </Text>
                 </Tooltip>
               </Paragraph>
-            <Paragraph >
+            </div>
+            <div className='mb-common'>
+              <Paragraph>
                 <Tooltip title={dir?.desc||''}>
-                <Text ellipsis={true}>
-                  描述:&nbsp;{dir?.desc||''}
+                  <Text className='title-color' ellipsis={true}>
+                    描述:&nbsp;
+                    <Text className='text-color'>{dir?.desc||''}</Text>
                   </Text>
                 </Tooltip>
               </Paragraph>
+            </div>
             {
               (reference === AssetManageReference) && 
-                <Paragraph >
+                <Paragraph>
                   <Tooltip title={dir?.remarks||''}>
-                    <Text ellipsis={true}>
-                    备注:&nbsp;{dir?.remarks||''}
+                    <Text className='title-color' ellipsis={true}>
+                      备注:&nbsp;
+                      <Text className='text-color'>{dir?.remarks||''}</Text>
                     </Text>
                   </Tooltip>
                 </Paragraph>
             }
-          </Typography>
+          </div>
         </div>
         <div 
           className='flex' 
           style={{
-            width: 100,
+            width: 150,
             alignItems: 'center',
             justifyContent: 'center'
           }}
         >
-          <img src={record} style={{ width: 30, height: 30 }} alt="" />
-          <div>
-            <div>记录数</div>
-            <div>{assetCount}</div>
+          <img src={record} style={{ width: 53, height: 53 }} alt="" />
+          <div
+            className='flex ml-2'
+            style={{
+              flexDirection: 'column',
+              alignItems: 'center',
+              justifyContent: 'center'
+            }}
+          >
+            <div className='text-color'>记录数</div>
+            <div className='title-color' style={{ fontSize: 25, fontWeight: 'bold' }}>{assetCount}</div>
           </div>
         </div>
         
         {
           (reference===AssetManageReference) && <Dropdown overlay={elementManageMenu} placement="bottomCenter">
-            <SettingOutlined style={{ fontSize:16,cursor:'pointer', marginBottom: 50 }} />
+            <div
+              className='flex primary-color'
+              style={{
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                marginBottom: 58,
+              }}
+            >
+              <img src={more} style={{ width: 20, height: 20 }} alt="" />
+              <span style={{ fontSize: 10 }}>更多</span>
+            </div>
           </Dropdown>
         }
       

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

@@ -13,6 +13,9 @@ import { dispatch, dispatchLatestHomepage } from '../../../../model';
 import { showMessage, showNotifaction, getQueryParam, inputWidth, isSzseEnv } from '../../../../util';
 import { AnchorId, AnchorTimestamp, AssetBrowseReference, AssetManageReference, AssetRecycleReference, ResourceBrowseReference } from '../../../../util/constant';
 
+import FullScreenImg from '../Assets/fullScreen.png';
+import CancelFullScreenImg from '../Assets/cancelFullScreen.png';
+
 import "./AssetTable.less";
 
 const { Text } = Typography;
@@ -468,9 +471,9 @@ const AssetTable = (props) => {
   let scrollY = null;
   if ((assets||[]).length>0) {
     if (fullScreen) {
-      scrollY = 'calc(100vh - 182px - 52px - 12px)';
+      scrollY = 'calc(100vh - 182px - 80px)';
     } else if (reference===AssetManageReference) {
-      scrollY = 'calc(100vh - 182px - 84px - 52px - 12px)';
+      scrollY = 'calc(100vh - 182px - 139px - 15px - 80px)';
     } else if (reference===AssetBrowseReference||reference===ResourceBrowseReference) {
       scrollY = 'calc(100vh - 182px - 84px - 52px - 12px)';
     } else if (reference===AssetRecycleReference) {
@@ -481,16 +484,13 @@ const AssetTable = (props) => {
   return(
     <div className={classes}>
       <div
-        className='flex'
+        className='flex p-common'
         style={{
           alignItems: 'center',
           justifyContent: 'space-between',
-          borderBottom: '1px solid #EFEFEF',
-          height: 52,
-          padding: '0 12px'
         }}
       > 
-        <Space>
+        <Space size={15}>
           { 
             (reference===AssetManageReference) && <Button onClick={addAsset}>新增</Button>
           }
@@ -521,13 +521,13 @@ const AssetTable = (props) => {
             onChange={onSearchInputChange} 
             style={{ width: inputWidth }}
           />
-          <Button onClick={onFullScreenClick}>全屏</Button>
+          <Tooltip title={fullScreen?'取消全屏':'全屏'}>
+            <Button onClick={onFullScreenClick} icon={<img src={fullScreen?CancelFullScreenImg:FullScreenImg} width={20} height={20} />} type='text'></Button>
+          </Tooltip>
         </Space>
       </div>
       <div
-        style={{
-          padding: '12px 12px 0',
-        }}
+        className='px-common'
       >
         <Table
           rowSelection={rowSelection}
@@ -551,7 +551,7 @@ const AssetTable = (props) => {
           }}
           rowClassName={(record, index) => {
             if (record?.id===anchorId || record?.id===selectItem?.id) {
-              return 'highlight-row';
+              return 'yy-table-select-row';
             }
 
             return '';

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

+const Space = (props) => {
+  const { width = '100%', height = '100%' } = props;
+
+  return (
+    <div style={{ width, height, background: '#f0f2f5' }} />
+  )
+}
+
+export default Space;
\ No newline at end of file

src/view/Manage/AssetManage/index.jsx

@@ -7,6 +7,7 @@ import AssetTree from './Component/AssetTree';
 import AssetDirectory from './Component/AssetDirectory';
 import AssetTable from './Component/AssetTable';
 import AssetAction from './Component/AssetAction';
+import Space from './Component/Space';
 
 import { AssetManageReference } from '../../../util/constant';
 
@@ -64,17 +65,18 @@ const AssetManage = (props) => {
       <div className='left'>
         <AssetTree onSelect={onTreeSelect} onDirectoryChange={onDirectoryChange} {...props} />
       </div>
-      <div className='tree-toggle-wrap'>
-        <div className='tree-toggle' onClick={treeToggleClick}>
-        { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
-        </div>
-      </div>
+      <Space width={15} />
       <div className='middle'>
         <AssetDirectory id={nodeId} assetCount={assetCount} directoryChanged={directoryChanged} onElementsChange={onElementsChange} />
+        <Space height={15} />
         <AssetTable nodeId={nodeId} reference={AssetManageReference} elementsChanged={elementsChanged} assetActionChanged={assetActionChanged} onSelect={onTableSelect} onCountChange={onAssetCountChange} {...props} />
       </div>
-      <div className='right'>
+      <Space width='15px' />
+      {/* <div className='right'>
         <AssetAction form={form} id={assetId} dirId={assetDirId} action='detail' onChange={onAssetActionChange} />
+      </div> */}
+      <div className='tree-toggle' onClick={treeToggleClick}>
+      { expandTree ? <CaretLeftOutlined /> : <CaretRightOutlined /> }
       </div>
     </div>
   )

src/view/Manage/AssetManage/index.less

@@ -10,16 +10,11 @@
     overflow: hidden;
   }
 
-  .tree-toggle-wrap {
-    position: relative;
-    width: 20px;
-    height: calc(100vh - 94px);
-  
   .tree-toggle {
     display: flex;
     justify-content: center;
     align-items: center;
-      left: 0;
+    left: 245px;
     right: 0;
     background: #f2f5fc;
     position: absolute;
@@ -31,10 +26,10 @@
     transform: translateY(-50%);
     cursor: pointer;
   }
-  }
 
   .middle {
-    width: calc(100% - 250px - 400px);
+    // width: calc(100% - 230px - 400px - 30px);
+    width: calc(100% - 230px - 30px);
   }
 
   .right {
@@ -48,7 +43,12 @@
     width: 0;
   }
 
+  .tree-toggle {
+    left: 15px;
+  }
+
   .middle {
-    width: calc(100% - 20px - 400px);
+    // width: calc(100% - 400px - 30px);
+    width: calc(100% - 30px);
   }
 }
\ No newline at end of file