feat: juno核心功能页面应用服务优化 (#138)

* add toml formatter and update umi * 保留语法检测 * 调整UI * 调整底部边距
douyu · Sep 3, 2021 · 576c2ba · 576c2ba
1 parent f70a344
commit 576c2ba
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 25 deletions.
diff --git a/assets/package-lock.json b/assets/package-lock.json
diff --git a/assets/package.json b/assets/package.json
@@ -66,7 +66,7 @@
     "md5": "^2.2.1",
     "moment": "^2.25.3",
     "monaco-editor": "^0.20.0",
-    "monaco-editor-webpack-plugin": "^1.9.0",
+    "monaco-editor-webpack-plugin": "^4.1.2",
     "numeral": "^2.0.6",
     "omit.js": "^1.0.2",
     "pretty-json-view": "^0.1.11",

diff --git a/assets/src/global.less b/assets/src/global.less
@@ -53,6 +53,18 @@ ol {
   }
 }
 
+.ant-design-pro{
+  .ant-pro-basicLayout-content {
+    margin-bottom: 0;
+  }
+}
+
 .ant-pro-basicLayout-content .ant-pro-page-header-wrap {
   margin: 0 0 0 0;
 }
+
+.ant-layout-footer {
+  .ant-pro-global-footer {
+    margin: 10px 0 14px 0;
+  }
+}
diff --git a/assets/src/layouts/BasicLayout.tsx b/assets/src/layouts/BasicLayout.tsx
@@ -64,12 +64,12 @@ const defaultFooterDom = (
         href: 'https://github.com/douyu/juno',
         blankTarget: true,
       },
-      {
-        key: 'Ant Design',
-        title: 'Ant Design',
-        href: 'https://ant.design',
-        blankTarget: true,
-      },
+      // {
+      //   key: 'Ant Design',
+      //   title: 'Ant Design',
+      //   href: 'https://ant.design',
+      //   blankTarget: true,
+      // },
     ]}
   />
 );

diff --git a/assets/src/pages/app/components/Config/components/Editor/index.less b/assets/src/pages/app/components/Config/components/Editor/index.less
@@ -25,7 +25,7 @@
   .editor {
     width: @editorW;
     height: 0;
-    flex: 1;
+    flex: auto;
   }
 
   .diffEditor {

diff --git a/assets/src/pages/app/index.tsx b/assets/src/pages/app/index.tsx
@@ -27,6 +27,7 @@ import {getFrameVersion} from '@/pages/monitor/services';
 import Event from '@/pages/app/components/Event';
 import Test from '@/pages/app/components/Test';
 import {Dispatch} from '@@/plugin-dva/connect';
+import styles from "./style.less";
 
 const {TabPane} = Tabs;
 
@@ -419,7 +420,7 @@ export default class App extends React.Component<ConfgoBase & AppProps, any> {
           onChange={this.onChangeTab}
           style={{width: '100%', marginTop: '-10px'}}
           tabBarStyle={{paddingLeft: '10px', marginBottom: 0}}
-          destroyInactiveTabPane
+          destroyInactiveTabPane 
         >
           <TabPane tab="详情" key="detail">
             <Detail
@@ -534,8 +535,14 @@ export default class App extends React.Component<ConfgoBase & AppProps, any> {
       );
     }
     return (
-      <PageHeaderWrapper>
-        <div style={{backgroundColor: '#fff', borderRadius: '8px', overflow: 'hidden'}}>
+      <>
+        <div style={{backgroundColor: '#fff', borderRadius: 
+        '8px', overflow: 'hidden',
+        position:"absolute",
+        "top":0,bottom:0,width:'100%',
+        display:"flex",
+        flexDirection:"column",
+        }}>
           <div style={{padding: 10}}>
             <Row>
               <AppHeader
@@ -568,9 +575,9 @@ export default class App extends React.Component<ConfgoBase & AppProps, any> {
               </Col>
             </Row>
           </div>
-          <Row>{view}</Row>
+          <Row style={{flex:'auto'}} className={styles.viewContent}>{view}</Row>
         </div>
-      </PageHeaderWrapper>
+      </>
     );
   }
 }
diff --git a/assets/src/pages/app/style.less b/assets/src/pages/app/style.less
@@ -107,3 +107,18 @@
     }
   }
 }
+.viewContent{
+  :global {
+    .ant-tabs-content{
+      height: 100%;
+    }
+    .ant-tabs-tabpane{
+      height: 100%;
+    } 
+    .ant-tabs-tabpane > div{
+      height: 100%;
+      // position: absolute;
+      // position: relative;
+    }
+  }
+}
diff --git a/assets/src/pages/monitor/monitor.jsx b/assets/src/pages/monitor/monitor.jsx
@@ -117,14 +117,21 @@ export default class Monitor extends React.PureComponent {
     const url = `${dashboardPath}&var-appname=${appName}&var-env=${env}&var-datasource=${datasource}&var-aid=${aid}&from=now-30m&to=now`;
 
     return (
-      <div style={{ display: 'block', overflow: 'hidden', marginLeft: '10px' }}>
+      <div style={{ display: 'block', overflow: 'hidden', marginLeft: '10px',
+      position:"relative",
+      display:"flex",flex:'auto'
+      }}>
         <iframe
           src={url}
           scrolling="no"
           width="104%"
-          height={2000}
+
+          // height={2000}
           frameBorder={0}
-          style={{ marginLeft: '-72px', overflow: 'hidden' }}
+          style={{ marginLeft: '-72px', overflow: 'hidden',
+          flex:'auto',
+          // ,position:'absolute',top:195,bottom:0,
+        }}
         />
       </div>
     );
@@ -158,12 +165,16 @@ export default class Monitor extends React.PureComponent {
       <div style={{ backgroundColor: '#f7f8fa' }}>
         <div
           style={{
-            marginLeft: 10,
-            marginTop: 10,
-            marginRight: 10,
-            marginBottom: 10,
-            paddingTop: 10,
-            paddingBottom: 10,
+            // marginLeft: 10,
+            // marginTop: 10,
+            // marginRight: 10,
+            // marginBottom: 10,
+            paddingTop: 5,
+            paddingBottom: 5,
+            flexDirection: 'column',
+            display: 'flex',
+            flex:'auto',
+            height: '100%',
           }}
         >
           <Row gutter={24} className="top">