fix: legend调整比例 样式调整

nezha-fronted/src/assets/css/components/chart/chart.scss

@@ -383,7 +383,6 @@
 }
 .legend-container {
   display: flex;
-  flex-wrap: wrap;
   overflow: auto;
   font-size: 12px;
   text-align: left;
@@ -391,12 +390,19 @@
   box-sizing: border-box;
 
   .legend-item {
+    box-sizing: border-box;
     padding: 0 8px;
     white-space: nowrap;
     cursor: pointer;
-    display: inline-block;
     line-height: 20px;
     color: $--color-text-primary;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    .legend-name{
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
   }
   .legend-item, .legend--table-row {
     &.legend-item--inactive, &.row--inactive {
@@ -429,12 +435,20 @@
 
   // 表格类型
   .legend--table {
-    display: table;
     width: 100%;
+    display: table;
+    table-layout: fixed;
+
+    .legend--table-body{
+      display: table-row-group;
+    }
 
     .legend--table-row {
       display: table-row;
       width: 100%;
+      .legend--table-cell:not(:first-of-type){
+        width: 48px;
+      }
     }
     .legend--table-row:not(:first-of-type):hover {
       background-color: $--background-color-1;
@@ -443,23 +457,35 @@
         visibility: visible;
       }
     }
-    .legend--table-row:first-of-type {
+    .table-header {
+      position: sticky;
+      top: 0;
+      background-color: $--chart-background-color-base;
       color:#33a2e5;
       font-weight: bold;
       font-size: 12px;
       .legend--table-cell:not(:first-of-type) {
         cursor: pointer;
       }
+      .legend--table-cell{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
     .legend--table-cell {
       display: table-cell;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      word-break: break-all;
       padding: 1px 5px;
       box-sizing: border-box;
-      min-width: 50px;
+      .legend--table-box{
+        display: flex;
+        align-items: center;
+      }
+      .legend-name{
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }
@@ -1136,7 +1162,6 @@
 .legend-wrap{
   padding: 5px 10px 5px 10px;
   box-sizing: border-box;
-  justify-content: space-between;
   .legend-resize{
     flex-shrink: 0;
     background-color: $--border-color-light;
@@ -1180,6 +1205,9 @@
       width: 2px;
       height: 100%;
     }
+    .legend-container{
+      flex: 1;
+    }
   } 
 }
 
@@ -1194,6 +1222,9 @@
       width: 2px;
       height: 100%;
     }
+    .legend-container{
+      flex: 1;
+    }
   }
 }
 

nezha-fronted/src/assets/css/components/charts/chart.scss

@@ -13,6 +13,7 @@
   visibility: visible;
 }
 .legend-shape{
+  flex-shrink: 0;
   display:inline-block;
   margin-right:5px;
   border-radius:10px;

nezha-fronted/src/components/chart/chart/legend.vue

@@ -24,12 +24,18 @@
             @mouseleave="hoverLegend(item.name, index,'downplay')"
           >
             <div :title="item.alias ? item.alias : item.name" class="legend--table-cell">
-              <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
-              <span v-else :style="{background: item.color}" class="legend-shape"></span>
-              <span :title="item.alias ? item.alias : item.name">{{item.alias ? item.alias : item.name}}</span>
-              <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
+              <div class="legend--table-box">
+                <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
+                <span v-else :style="{background: item.color}" class="legend-shape"></span>
+                <span :title="item.alias ? item.alias : item.name" class="legend-name">{{item.alias ? item.alias : item.name}}</span>
+                <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
+              </div>
+            </div>
+            <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">
+              <div class="legend--table-box">
+                <span class="legend-name" :title="keepTwoDecimalFull(statistics.value, 'left')">{{keepTwoDecimalFull(statistics.value, 'left')}}</span>
+              </div>
             </div>
-            <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value))}}</div>
           </div>
           <!-- 右y轴legend -->
           <div
@@ -43,12 +49,18 @@
             @mouseleave="hoverLegend(item.name, index,'downplay')"
           >
             <div :title="item.alias ? item.alias : item.name" class="legend--table-cell">
-              <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
-              <span v-else :style="{background: item.color}" class="legend-shape"></span>
-              <span :title="item.alias ? item.alias : item.name">{{item.alias ? item.alias : item.name}}</span>
-              <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
+              <div class="legend--table-box">
+                <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
+                <span v-else :style="{background: item.color}" class="legend-shape"></span>
+                <span :title="item.alias ? item.alias : item.name" class="legend-name">{{item.alias ? item.alias : item.name}}</span>
+                <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name)" :title="$t('overall.copyText')"></i>
+              </div>
+            </div>
+            <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">
+              <div class="legend--table-box">
+                <span class="legend-name" :title="keepTwoDecimalFull(statistics.value, 'right')">{{keepTwoDecimalFull(statistics.value, 'right')}}</span>
+              </div>
             </div>
-            <div v-for="(statistics, index) in item.statistics" :key="index" :class="{'legend-item--inactive': isGrey[index]}" class="legend--table-cell">{{(keepTwoDecimalFull(statistics.value, 'right'))}}</div>
           </div>
         </div>
       </template>
@@ -68,7 +80,7 @@
         >
           <i v-if="isTimeSeries&&series[index].yAxisIndex==0" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-zuozongzhou"></i>
           <span v-else :style="{background: item.color}" class="legend-shape"></span>
-          <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
+          <span class="legend-name">{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
           <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
         </div>
         <!-- 右y轴legend -->
@@ -85,7 +97,7 @@
         >
           <i v-if="isTimeSeries&&series[index].yAxisIndex==1" :style="{color: item.color}" class="yAxis-icon nz-icon nz-icon-youzongzhou"></i>
           <span v-else :style="{background: item.color}" class="legend-shape"></span>
-          <span>{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
+          <span class="legend-name">{{item.alias ? item.alias : item.name.split('-')[0]}}</span>
           <i class="nz-icon nz-icon-override" @click.stop="onCopy(item.alias ? item.alias : item.name.split('-')[0])" :title="$t('overall.copyText')"></i>
         </div>
       </template>

nezha-fronted/src/components/page/dashboard/explore/logTab.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="log-detail">
     <!-- <div :id="`logChart${tabIndex}`" class="log-chart" v-if="showSwitch"></div> -->
-    <chart ref="logChart" class="log-chart" :unit="unit" :timeRange="timeRange"></chart>
+    <chart ref="logChart" style="margin-bottom: 5px;" class="log-chart" :unit="unit" :timeRange="timeRange"></chart>
     <div class="log-chart chart-no-data" v-if="showSwitch&&noData" style="top: 150px">No data</div>
     <div class="log-operations" v-if="showSwitch">
       <div class="log-operation">