CN-1612 feat: 重构system的知识库css样式，以及修复折线图Metric在中文环境会换行的问题

src/assets/css/components/views/charts2/entityDetailLine.scss

@@ -73,3 +73,12 @@
     }
   }
 }
+
+.line__block {
+  position: relative;
+  height: calc(100% - 74px);
+}
+
+.line-metric__select {
+  width: 127px;
+}

src/assets/css/components/views/charts2/networkOverviewLine.scss

@@ -125,6 +125,11 @@
               flex: 1;
               padding-left: 19px;
             }
+
+            .tabs-name1 {
+              padding-left: 0;
+            }
+
             .total,.inbound,.outbound,.internal,.through,.other,.ingress,.egress {
               width: 14px;
               height: 14px;

src/views/charts2/charts/entityDetail/EntityDetailLine.vue

@@ -47,23 +47,23 @@
             </div>
             <div class="line-select-metric">
               <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
-              <el-select
+              <div class="line-metric__select">
-                  size="small"
+                <el-select
-                  v-model="metric"
+                    v-model="metric"
-                  placeholder=" "
+                    placeholder=" "
-                  popper-class="common-select"
+                    popper-class="common-select"
-                  :teleported="false"
+                    :teleported="false"
-                  @change="metricChange"
+                    @change="metricChange"
-              >
+                >
-                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+                  <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-              </el-select>
+                </el-select>
+              </div>
             </div>
           </div>
           <div class="line-select-reference-line">
             <span class="line-margin-right">{{ $t('network.referenceLine') }}:</span>
             <div class="line-select__operation">
               <el-select
-                  size="small"
                   v-model="lineRefer"
                   :disabled="!lineTab"
                   placeholder=" "
@@ -79,7 +79,7 @@
           </div>
         </div>
       </div>
-      <div style="height: calc(100% - 74px); position: relative">
+      <div class="line__block">
         <chart-no-data v-if="isNoData && !showError"></chart-no-data>
         <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div>
       </div>

src/views/charts2/charts/entityDetail/lines/App.vue

@@ -16,7 +16,7 @@
                  :test-id="`tab${index}`"
             >
               <div class="line-value-tabs-name">
-                <div class="tabs-name" :test-id="`tabTitle${index}`" style="padding-left: 0;">{{ $t(item.name) }}</div>
+                <div class="tabs-name tabs-name1" :test-id="`tabTitle${index}`">{{ $t(item.name) }}</div>
               </div>
               <div class="line-value-unit" :test-id="`tabContent${index}`">
             <span class="line-value-unit-number">
@@ -45,21 +45,22 @@
           </div>
           <div class="line-select-metric">
             <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
-            <el-select
+            <div class="line-metric__select">
-                size="small"
+              <el-select
-                v-model="metric"
+                  v-model="metric"
-                placeholder=" "
+                  placeholder=" "
-                popper-class="common-select"
+                  popper-class="common-select"
-                :teleported="false"
+                  :teleported="false"
-                @change="metricChange"
+                  @change="metricChange"
-            >
+              >
-              <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-            </el-select>
+              </el-select>
+            </div>
           </div>
         </div>
       </div>
     </div>
-    <div style="height: calc(100% - 74px); position: relative">
+    <div class="line__block">
       <chart-no-data v-if="isNoData && !showError"></chart-no-data>
       <div class="chart-drawing" v-show="!isNoData && !showError" ref="overviewLineChart"></div>
     </div>

src/views/charts2/charts/entityDetail/lines/ServiceName.vue

@@ -46,16 +46,17 @@
           </div>
           <div class="line-select-metric">
             <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
-            <el-select
+            <div class="line-metric__select">
-                size="small"
+              <el-select
-                v-model="metric"
+                  v-model="metric"
-                placeholder=" "
+                  placeholder=" "
-                popper-class="common-select"
+                  popper-class="common-select"
-                :teleported="false"
+                  :teleported="false"
-                @change="metricChange"
+                  @change="metricChange"
-            >
+              >
-              <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-            </el-select>
+              </el-select>
+            </div>
           </div>
         </div>
         <div class="line-select-reference-line">
@@ -78,7 +79,7 @@
         </div>
       </div>
     </div>
-    <div style="height: calc(100% - 74px); position: relative">
+    <div class="line__block">
       <chart-no-data v-if="isNoData && !showError"></chart-no-data>
       <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div>
     </div>

src/views/setting/Index.vue

@@ -4,7 +4,7 @@
     <div class="explorer-top-tools explorer-detection-top-tools">
       <div class="explorer-top-tools-title">{{$t('overall.knowledgeBase')}}</div>
     </div>
-    <div style="width: 100%;padding-bottom: 26px;">
+    <div class="administration__tabs">
       <chart-tabs :data="tabsData" router></chart-tabs>
     </div>
     <!-- 内容区 -->

src/views/setting/KnowledgeBase.vue

@@ -4,14 +4,14 @@
       <div class="top-title">
         {{$t('overall.knowledgeBase')}}
       </div>
-      <div class="builtIn-to-user-defined" >
+<!--      <div class="builtIn-to-user-defined" >-->
-        <button :title="$t('knowledgeBase.userDefinedLibrary')" class="top-tool-btn--user_defined_library"
+<!--        <button :title="$t('knowledgeBase.userDefinedLibrary')" class="top-tool-btn&#45;&#45;user_defined_library"-->
-                v-if="hasPermission('userDefinedLibrary')"
+<!--                v-if="hasPermission('userDefinedLibrary')"-->
-                @click="changeToUserDefinedList">
+<!--                @click="changeToUserDefinedList">-->
-          <i class="cn-icon-add-knowledge-base cn-icon" ></i>
+<!--          <i class="cn-icon-add-knowledge-base cn-icon" ></i>-->
-          <span>{{$t('knowledgeBase.userDefinedLibrary')}}</span>
+<!--          <span>{{$t('knowledgeBase.userDefinedLibrary')}}</span>-->
-        </button>
+<!--        </button>-->
-      </div>
+<!--      </div>-->
     </div>
 
     <!-- 内置库列表 -->