模型简介样式修改

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

 import React, { useState, useEffect, useRef } from "react";
-import { Tooltip, Modal, Pagination, Table, Descriptions } from 'antd';
+import { Tooltip, Modal, Pagination, Table, Descriptions, Popover } from 'antd';
 import { DownOutlined, UpOutlined } from '@ant-design/icons';
 import SmoothScroll from 'smooth-scroll';
 import classnames from 'classnames';
@@ -19,9 +19,36 @@ const ModelNameColumn = (props) => {
   const { text, record, detailItem } = props;
   const [ data, setData ] = useState(record);
 
+  const cols = [
+    {
+      title: '序号',
+      dataIndex: 'key',
+      render: (text, record, index) => {
+        return (index+1).toString();
+      },
+      width: 60,
+      ellipsis: true,
+    },
+    {
+      title: '字段中文名称',
+      width: 160,
+      dataIndex: 'cnName',
+      editable: true,
+      ellipsis: true,
+    },
+    {
+      title: '字段英文名称',
+      width: 160,
+      dataIndex: 'name',
+      editable: true,
+      ellipsis: true,
+    },
+  ];
+
   let _textComponent = <span>{text}</span>;
   if (data.digest) {
-    _textComponent = <Descriptions className='model-table-descritpion' column={1} size='small'>
+    _textComponent = <div style={{ width: 400, maxHeight: 600, overflow: 'auto' }}>
+      <Descriptions className='model-digest-descritpion' column={2} size='small'>
         <Descriptions.Item label='模型名称'>
         { data.digest.name||'' }
         </Descriptions.Item>
@@ -31,31 +58,22 @@ const ModelNameColumn = (props) => {
         <Descriptions.Item label='描述'>
         { data.digest.remark||'' }
         </Descriptions.Item>
-      <Descriptions.Item label='字段'>
-      {
-        (data.digest.attributeDigests||[]).map((item, index) => {
-          if (index > 9) return null;
-          return (
-            <React.Fragment key={index}>
-            { (index > 0) && <br /> }
-            {`${item.name||''} ${item.cnName||''}`}
-            </React.Fragment>
-          )
-        })
-      }
-      {
-        (data.digest.attributeDigests||[]).length>10 && <React.Fragment>
-          <br />
-          ...
-        </React.Fragment>
-      }
-      </Descriptions.Item>
       </Descriptions>
+      <Table 
+        className='mt-2'
+        dataSource={data.digest.attributeDigests||[]}
+        columns={cols}
+        loading={false}
+        pagination={false}
+        size='small'
+      />
+    </div>
   }
 
   return (
-    <Tooltip 
-      title={_textComponent}
+    <Popover 
+      content={_textComponent}
+      overlayClassName='model-digest-popover'
       onVisibleChange={(visible) => {
         if (visible && !record.digest) {
           dispatch({
@@ -74,7 +92,7 @@ const ModelNameColumn = (props) => {
         <a onClick={()=>{detailItem(record);}}>
       {text||''}
       </a>
-    </Tooltip>
+    </Popover>
   );
 }
 

src/view/Manage/Model/Component/ModelTable.less

@@ -30,13 +30,19 @@
   }
 }
 
-.model-table-descritpion {
+.model-digest-descritpion {
   .yy-descriptions-row > td {
     padding-bottom: 0px !important;
   }
+}
+
+.model-digest-popover {
+  .yy-popover-inner-content {
+    padding: 8px !important;
+  }
 
-  .yy-descriptions-item-label, .yy-descriptions-item-content {
-    color: #fff !important;
+  .yy-table-thead > tr > th, .yy-table-tbody > tr > td {
+    font-size: 13px !important;
   } 
 }