模型详情修改样式

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

@@ -115,6 +115,7 @@ const FC = (props) => {
         onCancel?.(); 
       }}
       width='95%'
+      bodyStyle={{ padding: 0, background: '#F2F2F2' }}
       footer={
         <Space>
           <Button onClick={ () => { 
@@ -134,6 +135,7 @@ const FC = (props) => {
           tabBarExtraContent={{
             left: <span className='mr-5' style={{ fontSize: 16, fontWeight: 500 }}>编辑历史存储形式</span>
           }}
+          tabBarStyle={{ backgroundColor: '#FFF', padding: '5px 20px', margin: 0 }}
         >
         <Tabs.TabPane 
           tab={

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

@@ -13,15 +13,15 @@
   }
 
   .edit-container {
-    background: #EDF0F5;
+    background: #F2F2F2;
     height: calc(100vh - 44px - 64px);
     overflow: hidden;
   }
 
   .edit-container-card {
-    margin: 10px 20px;
+    margin: 10px;
     height: calc(100vh - 44px - 64px - 20px);
-    background: #fff;
+    // background: #fff;
   }
 
   .edit-footer {

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

@@ -606,7 +606,7 @@ const ImportAction = React.forwardRef((props, ref) => {
               modelerData?.id && <Tabs.TabPane tab='模型评论' key="model-import-action-comment" />
             }
           </Tabs>
-          <div ref={setContainer} style={{ height: action==='edit-inherite-modal'?'60vh':'calc(100vh - 44px - 64px - 66px)', overflow: 'auto', padding: '20px 20px 0' }}>
+          <div ref={setContainer} style={{ height: action==='edit-inherite-modal'?'60vh':'calc(100vh - 44px - 64px - 66px)', overflow: 'auto' }}>
             <ImportActionHeader 
               form={form}
               editable={action!=='detail'&&action!=='flow'&&action!=='detail-version'&&action!=='edit-inherited'} 

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

 .import-action {  
   .yy-tabs-nav {
+    background-color: #EBEBEB;
     margin: 0;
   }
+
+  .yy-tabs-nav-list {
+    width: 80%;
+    justify-content: space-between;
+  }
 }
\ No newline at end of file

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

 import React from "react"
 import { Button, Space, Input, Divider, Upload, Row, Col, Tooltip, List, Typography, Modal } from "antd"
 import { DownOutlined, UpOutlined, PlusOutlined } from '@ant-design/icons'
+
 import { showMessage } from "../../../../util"
 import { dispatch } from '../../../../model'
+import { importActionSubject } from "./ImportAction"
 
+import './ImportActionHeader.less'
 import './ImportActionComment.less'
-import { importActionSubject } from "./ImportAction"
 
 const FC = (props) => {
   const { modelerData, action } = props
@@ -123,9 +125,8 @@ const FC = (props) => {
 
   return (
     <div className='model-import-action-comment'>
-      <div className='mb-3'>
       <Space>
-          <h3 style={{ marginBottom: 0 }}>评论{` (${(comments??[]).length})`}</h3>
+        <h3 style={{ width: 120, marginBottom: 0 }}>评论{` (${(comments??[]).length})`}</h3>
         {
           isCollapse ? <Button type='primary' size='small' onClick={() => {
             setCollapse(!isCollapse)
@@ -134,9 +135,8 @@ const FC = (props) => {
           }}>收起<UpOutlined /></Button>
         }
       </Space>
-      </div>
       {
-        !isCollapse && <React.Fragment>
+        !isCollapse && <div className='mt-3'>
           <div style={{ border: '1px solid #d9d9d9', borderRadius: 4 }}>
             <Input.TextArea value={comment} bordered={false} rows={3} placeholder='请输入您的评论' onChange={(e) => { setComment(e.target.value) }}  />
             <Divider style={{ margin: 0 }}/>
@@ -152,7 +152,7 @@ const FC = (props) => {
               </Tooltip>
             </div>
           </div>
-          <div className='my-3'>
+          <div className='mt-3'>
             <List
               itemLayout="horizontal"
               dataSource={comments??[]}
@@ -187,7 +187,7 @@ const FC = (props) => {
               )}
             />
           </div>
-        </React.Fragment>
+        </div>
       }
       {contextHolder}
     </div>

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

@@ -277,10 +277,11 @@ const ImportActionHeader = (props) => {
 
   return (
     <div className={classnames('model-import-action-header', editable?'':'model-import-action-header-readolny')}>
-      <div className='model-import-action-basic mb-3'>
-        <h3 className='mr-3' style={{ marginBottom: 0 }}>基本信息</h3>
+      <div className='model-import-action-basic'>
+        <div>
+          <h3 style={{ marginBottom: 0 }}>基本信息</h3>
         </div>
-      <Form form={form} {...formItemLayout}
+        <Form className='mt-3' form={form} {...formItemLayout}
           onValuesChange={onValuesChange}
         >
           <Row gutter={10}>
@@ -405,12 +406,10 @@ const ImportActionHeader = (props) => {
             } 
           </Row> 
         </Form> 
-      <div className='model-import-action-technical mb-3' style={{ 
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <h3 className='mr-3' style={{ marginBottom: 0 }}>技术信息</h3>
+      </div> 
+      <div className='model-import-action-technical'>
+        <Space>
+          <h3 style={{ width: 120, marginBottom: 0 }}>技术信息</h3>
           {
             isCollapse ? <Button type='primary' size='small' onClick={() => {
               setCollapse(!isCollapse)
@@ -418,9 +417,10 @@ const ImportActionHeader = (props) => {
               setCollapse(!isCollapse)
             }}>收起<UpOutlined /></Button>
           }
-      </div>
+        </Space>
         {
           !isCollapse && <Form
+            className='mt-3'
             form={form}
             {...formItemLayout}
             onValuesChange={onValuesChange}
@@ -520,6 +520,7 @@ const ImportActionHeader = (props) => {
             </Row> 
           </Form>
         }
+      </div>
       <Rule
         {...ruleParams}
         onCancel={() => {

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

@@ -7,3 +7,23 @@
     min-height: 0;
   }
 }
+
+.model-import-action-basic,
+.model-import-action-technical,
+.model-import-action-table,
+.model-import-action-index,
+.model-import-action-manage,
+.model-import-action-relation,
+.model-import-action-comment {
+  background-color: #FFF;
+  padding: 20px;
+}
+
+.model-import-action-technical,
+.model-import-action-table,
+.model-import-action-index,
+.model-import-action-manage,
+.model-import-action-relation,
+.model-import-action-comment {
+  margin-top: 7px;
+}
\ No newline at end of file

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

@@ -14,6 +14,8 @@ import { EditModelContext } from './ContextManage';
 import { ValidateTip } from './ImportActionHeader';
 import { importActionSubject } from './ImportAction';
 
+import './ImportActionHeader.less';
+
 const { Option } = Select;
 
 const type = 'DragableIndexBodyRow';
@@ -824,14 +826,16 @@ const ImportActionIndex = (props) => {
 
   return (
     <div className='model-import-action-index' id='model-import-action-index'>
-      <div className='d-flex mb-3' style={{ justifyContent: 'space-between' }}>
+      <div className='flex' style={{ justifyContent: 'space-between' }}>
         <Space>
+          <Space style={{ width: 120 }}>
             <h3 style={{ marginBottom: 0 }}>数据表索引</h3>
             { 
               editable && <Popover content='点击行进行编辑,表格可以通过拖拽来排序'>
                 <QuestionCircleOutlined className='pointer' /> 
               </Popover> 
             }
+          </Space>
           {
             isCollapse ? <Button type='primary' size='small' onClick={() => {
               setCollapse(!isCollapse)
@@ -858,7 +862,7 @@ const ImportActionIndex = (props) => {
         </Space>
       </div>
       {
-        !isCollapse && <div className='mb-3' id="containerId" ref={tableRef}>
+        !isCollapse && <div className='mt-3' id="containerId" ref={tableRef}>
           <DndProvider backend={HTML5Backend} >
             <Form form={form} component={false} onValuesChange={onValuesChange}>
               <Table

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

 import React from 'react'
-import { Button, Form, Descriptions, Input, Row, Col } from 'antd'
+import { Button, Form, Descriptions, Input, Row, Col, Space } from 'antd'
 import { DownOutlined, UpOutlined } from '@ant-design/icons'
 import { Subject } from 'rxjs';
 
 import { dispatch } from '../../../../model'
 import { importActionSubject } from './ImportAction';
 
+import './ImportActionHeader.less';
+
 export const ImportActionHeaderSubject = new Subject();
 
 const FC = (props) => {
@@ -81,13 +83,9 @@ const FC = (props) => {
   };
 
   return (
-    <div>
-      <div className='model-import-action-manage mb-3' style={{ 
-          display: 'flex',
-          alignItems: 'center',
-        }}
-      >
-        <h3 className='mr-3' style={{ marginBottom: 0 }}>管理信息</h3>
+    <div className='model-import-action-manage'>
+      <Space>
+        <h3 style={{ width: 120, marginBottom: 0 }}>管理信息</h3>
         {
           isCollapse ? <Button type='primary' size='small' onClick={() => {
             setCollapse(!isCollapse)
@@ -95,9 +93,9 @@ const FC = (props) => {
             setCollapse(!isCollapse)
           }}>收起<UpOutlined /></Button>
         }
-      </div>
+      </Space>
       {
-        !isCollapse && <React.Fragment>
+        !isCollapse && <div className='mt-3'>
           {
             editable ? (
               <Form form={form} {...formItemLayout}>
@@ -125,7 +123,7 @@ const FC = (props) => {
               </Descriptions>          
             ) 
           }
-        </React.Fragment>
+        </div>
       }
     </div>
   )

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

@@ -5,6 +5,8 @@ import { DownOutlined, UpOutlined, QuestionCircleOutlined } from '@ant-design/ic
 import { Action, ModelerId, PermitCheckOut, Editable, StateId, Holder, ReadOnly } from '../../../../util/constant'
 import { importActionSubject } from "./ImportAction"
 
+import './ImportActionHeader.less'
+
 export const inheritanceHistoricalType = 'historical'
 export const inheritanceZipperType = 'zipper'
 
@@ -53,10 +55,9 @@ const FC = (props) => {
   }, [modelerData])
 
   return (
-    <div>
-      <div className='model-import-action-relation mb-3'>
+    <div className='model-import-action-relation'>
       <Space>
-          <h3 style={{ marginBottom: 0 }}>关联对象</h3>
+        <h3 style={{ width: 120, marginBottom: 0 }}>关联对象</h3>
         { 
           action==='add' && <Popover content='保存当前模型后方可选择历史存储形式'>
             <QuestionCircleOutlined className='pointer' /> 
@@ -70,9 +71,8 @@ const FC = (props) => {
           }}>收起<UpOutlined /></Button>
         }
       </Space>
-      </div>
       {
-        !isCollapse && <Descriptions column={3}>
+        !isCollapse && <Descriptions className='mt-3' column={3}>
           <Descriptions.Item 
             label={
             <div style={{ textAlign: 'right', width: 100 }}>

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

@@ -19,6 +19,7 @@ import { AttentionSvg, UnAttentionSvg } from './ModelSvg';
 import { EditModelContext } from './ContextManage';
 import { ValidateTip } from './ImportActionHeader';
 
+import './ImportActionHeader.less';
 import './ImportActionTable.less';
 import 'react-contexify/dist/ReactContexify.css';
 
@@ -1100,7 +1101,7 @@ export const ImportActionTable = (props) => {
         </div>
         </Space>
       </div>
-      <div className='mb-3' id="containerId" ref={tableRef}>
+      <div id="containerId" ref={tableRef}>
         <ResizeObserver
           onResize={({ width }) => {
             setTableWidth(width);

src/view/Manage/ModelCompare/update-task.jsx

@@ -408,7 +408,7 @@ const Strategy = React.forwardRef(function ({ type, task }, ref) {
       dataIndex: 'index',
       width:60,
       editable: false,
-      render:(_, __, index)=> ((args.page-1)*args.size+index+1)
+      // render:(_, __, index)=> ((args.page-1)*args.size+index+1)
     },
     {
       title: '模型属性',