增加主机信息功能

web-vue/packages/biz/views/biz/myScreen/index.vue

@@ -1,28 +1,34 @@
 <template>
-  <PageWrapper :contentFullHeight="true" :dense="true" title="false" contentClass="my-screen-page-wrapper">
+  <PageWrapper :contentFullHeight="true" :dense="true" title="false" contentClass="analysis-page-wrapper">
-    <div class="my-screen-page">
+    <div class="analysis-page">
-      <header class="my-screen-panel my-screen-panel--header">
+      <div class="mySpring-analysis">
+        <div class="analysis-layout workbench-layout">
+          <header class="analysis-panel my-screen-panel my-screen-panel--header">
             <ChartTop />
           </header>
+
           <section class="my-screen-bottom">
-        <div class="my-screen-left">
+            <div class="analysis-left my-screen-left">
-          <section class="my-screen-panel my-screen-left-top">左上区域</section>
+              <section class="my-screen-left-top">
-          <section class="my-screen-left-middle">
+                <div class="analysis-panel my-screen-panel">左上左区域</div>
-            <div class="my-screen-panel">左中左区域</div>
+                <div class="analysis-panel my-screen-panel">左上右区域</div>
-            <div class="my-screen-panel">左中右区域</div>
               </section>
-          <section class="my-screen-left-bottom">
+
-            <div class="my-screen-panel">左下左区域</div>
+              <section class="my-screen-left-middle">
-            <div class="my-screen-panel">左下右区域</div>
+                <div class="analysis-panel my-screen-panel">左下左区域</div>
+                <div class="analysis-panel my-screen-panel">左下右区域</div>
               </section>
             </div>
-        <aside class="my-screen-right">
+
-          <section class="my-screen-panel my-screen-right-top">右上区域</section>
+            <aside class="analysis-right my-screen-right">
-          <section class="my-screen-panel my-screen-right-middle">右中区域</section>
+              <section class="analysis-panel my-screen-panel my-screen-right-top">右上区域</section>
-          <section class="my-screen-panel my-screen-right-bottom">右下区域</section>
+              <section class="analysis-panel my-screen-panel my-screen-right-middle">右中区域</section>
+              <section class="analysis-panel my-screen-panel my-screen-right-bottom">右下区域</section>
             </aside>
           </section>
         </div>
+      </div>
+    </div>
   </PageWrapper>
 </template>
 
@@ -32,7 +38,7 @@
 </script>
 
 <style lang="less" scoped>
-  @dark-bg: #141414;
+  @dark-bg: rgb(0, 0, 0);
   @desktop-page-gap: 12px;
   @desktop-page-padding: 0;
   @desktop-card-radius: 10px;
@@ -40,7 +46,7 @@
   @desktop-card-shadow: 0 1px 3px rgb(15 23 42 / 0.06);
   @desktop-dark-border: rgb(51 65 85);
 
-  .my-screen-page-wrapper {
+  .analysis-page-wrapper {
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -54,35 +60,66 @@
     background: transparent !important;
   }
 
-  .my-screen-page {
+  .analysis-page {
     display: flex;
-    flex: 1;
     flex-direction: column;
     width: 100%;
     height: 100%;
     min-height: 0;
-    gap: @desktop-page-gap;
+    padding: 0 !important;
+    padding-bottom: 2px !important;
+    overflow: hidden;
+    background: rgb(240, 242, 245);
+  }
+
+  .mySpring-analysis {
+    flex: 1;
+    min-height: 0;
+    padding: 0 !important;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    border-radius: 12px;
+  }
+
+  .mySpring-analysis .analysis-layout {
+    --analysis-gap: @desktop-page-gap;
+    --analysis-card-radius: @desktop-card-radius;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    min-height: 0;
+    gap: var(--analysis-gap);
     padding: @desktop-page-padding;
     box-sizing: border-box;
     overflow: hidden;
-    background: transparent;
+    background: rgb(240, 242, 245);
     border-radius: @desktop-card-radius;
   }
 
-  .my-screen-panel {
+  .mySpring-analysis .workbench-layout {
+    flex-direction: column;
+  }
+
+  .mySpring-analysis .analysis-panel {
+    display: flex;
+    flex-direction: column;
     min-height: 0;
+    height: 100%;
+    min-width: 0;
     padding: 8px 12px 12px;
-    box-sizing: border-box;
+    border-radius: var(--analysis-card-radius);
-    border-radius: @desktop-card-radius;
     border: @desktop-card-border;
     background: rgb(255, 255, 255);
     box-shadow: @desktop-card-shadow;
-    display: flex;
+    overflow: hidden;
-    align-items: center;
-    justify-content: center;
     color: rgb(71 85 105);
     font-size: 14px;
     line-height: 20px;
+    align-items: center;
+    justify-content: center;
   }
 
   .my-screen-panel--header {
@@ -95,102 +132,93 @@
   .my-screen-bottom {
     flex: 1 1 90%;
     min-height: 0;
-    display: flex;
+    display: grid;
-    gap: @desktop-page-gap;
+    grid-template-columns: 60% calc(40% - 12px);
-    background: transparent;
+    gap: var(--analysis-gap);
-    border-radius: @desktop-card-radius;
+    background: rgb(240, 242, 245);
+    border-radius: var(--analysis-card-radius);
+  }
+
+  .mySpring-analysis .analysis-left,
+  .mySpring-analysis .analysis-right {
+    min-width: 0;
+    min-height: 0;
+    gap: var(--analysis-gap);
+    box-sizing: border-box;
   }
 
   .my-screen-left {
-    flex: 0 0 70%;
+    display: grid;
     min-width: 0;
     min-height: 0;
-    display: flex;
+    grid-template-rows: repeat(2, minmax(0, 1fr));
-    flex-direction: column;
+    gap: var(--analysis-gap);
-    gap: @desktop-page-gap;
   }
 
   .my-screen-right {
-    flex: 0 0 calc(30% - 12px);
+    display: grid;
     min-width: 0;
     min-height: 0;
-    display: flex;
+    grid-template-rows: repeat(3, minmax(0, 1fr));
-    flex-direction: column;
+    gap: var(--analysis-gap);
-    gap: @desktop-page-gap;
   }
 
-  .my-screen-left-top {
+  .my-screen-left-top,
-    flex: 0 0 10%;
+  .my-screen-left-middle {
-  }
+    display: grid;
-
+    min-width: 0;
-  .my-screen-left-middle,
-  .my-screen-left-bottom {
-    flex: 1 1 0;
     min-height: 0;
-    display: flex;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: @desktop-page-gap;
+    gap: var(--analysis-gap);
   }
 
-  .my-screen-left-middle .my-screen-panel,
+  html[data-theme='dark'] .mySpring-analysis .analysis-panel {
-  .my-screen-left-bottom .my-screen-panel {
-    flex: 1 1 0;
-  }
-
-  .my-screen-right .my-screen-panel {
-    flex: 1 1 0;
-  }
-
-  .my-screen-right-top,
-  .my-screen-right-middle,
-  .my-screen-right-bottom {
-    flex: 1 1 0;
-  }
-
-  html[data-theme='dark'] .my-screen-page,
-  html[data-theme='dark'] .my-screen-bottom,
-  html[data-theme='dark'] .my-screen-left,
-  html[data-theme='dark'] .my-screen-right,
-  html[data-theme='dark'] .my-screen-left-middle,
-  html[data-theme='dark'] .my-screen-left-bottom {
-    background: @dark-bg !important;
-  }
-
-  html[data-theme='dark'] .my-screen-panel {
     border-color: @desktop-dark-border;
     background: @dark-bg !important;
     color: rgb(203 213 225);
     box-shadow: none;
   }
 
+  html[data-theme='dark'] .mySpring-analysis,
+  html[data-theme='dark'] .analysis-page,
+  html[data-theme='dark'] .analysis-page-wrapper,
+  html[data-theme='dark'] .mySpring-analysis .analysis-layout,
+  html[data-theme='dark'] .mySpring-analysis .analysis-left,
+  html[data-theme='dark'] .mySpring-analysis .analysis-right,
+  html[data-theme='dark'] .my-screen-bottom,
+  html[data-theme='dark'] .my-screen-left,
+  html[data-theme='dark'] .my-screen-right,
+  html[data-theme='dark'] .my-screen-left-top,
+  html[data-theme='dark'] .my-screen-left-middle {
+    background: @dark-bg !important;
+  }
+
+  html[data-theme='dark'] .mySpring-analysis {
+    border-radius: @desktop-card-radius;
+  }
+
   html[data-theme='dark'] .my-screen-panel--header {
     color: rgb(203 213 225);
   }
 
   @media (max-width: 768px) {
-    .my-screen-page {
-      flex: 1 1 auto;
-      height: 100%;
-      min-height: 0;
-    }
-
     .my-screen-panel--header {
       flex-basis: 72px;
     }
 
     .my-screen-bottom {
-      flex-direction: column;
+      grid-template-columns: 1fr;
     }
 
     .my-screen-left,
     .my-screen-right {
-      flex: 1 1 auto;
+      grid-template-rows: auto;
-      width: 100%;
       min-height: 360px;
     }
 
-    .my-screen-left-middle,
+    .my-screen-left-top,
-    .my-screen-left-bottom {
+    .my-screen-left-middle {
-      flex-direction: column;
+      grid-template-columns: 1fr;
     }
   }
 </style>

web-vue/packages/core/layouts/views/desktop/analysis/index.vue

@@ -42,7 +42,7 @@
   import ProjectInfo from './components/ProjectInfo.vue';
 </script>
 <style lang="less">
-  @dark-bg: #141414;
+  @dark-bg: rgb(0, 0, 0);
   @desktop-page-gap: 12px;
   @desktop-page-padding: 0;
   @desktop-card-radius: 10px;

web-vue/packages/core/layouts/views/desktop/workbench/index.vue

@@ -41,7 +41,7 @@
 </script>
 
 <style lang="less">
-  @dark-bg: #141414;
+  @dark-bg: rgb(0, 0, 0);
   @desktop-page-gap: 12px;
   @desktop-page-padding: 0;
   @desktop-card-radius: 10px;