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

5 files changed, 46 insertions, 44 deletions

diff --git a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
index a3ae0af4..ad7387d7 100644
--- a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
+++ b/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
-                  size="small"
-                  v-model="metric"
-                  placeholder=" "
-                  popper-class="common-select"
-                  :teleported="false"
-                  @change="metricChange"
-              >
-                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-              </el-select>
+              <div class="line-metric__select">
+                <el-select
+                    v-model="metric"
+                    placeholder=" "
+                    popper-class="common-select"
+                    :teleported="false"
+                    @change="metricChange"
+                >
+                  <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+                </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>
diff --git a/src/views/charts2/charts/entityDetail/lines/App.vue b/src/views/charts2/charts/entityDetail/lines/App.vue
index 702b5277..02657d36 100644
--- a/src/views/charts2/charts/entityDetail/lines/App.vue
+++ b/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
-                size="small"
-                v-model="metric"
-                placeholder=" "
-                popper-class="common-select"
-                :teleported="false"
-                @change="metricChange"
-            >
-              <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-            </el-select>
+            <div class="line-metric__select">
+              <el-select
+                  v-model="metric"
+                  placeholder=" "
+                  popper-class="common-select"
+                  :teleported="false"
+                  @change="metricChange"
+              >
+                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+              </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>
diff --git a/src/views/charts2/charts/entityDetail/lines/ServiceName.vue b/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
index b3e884d0..84f180f3 100644
--- a/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
+++ b/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
-                size="small"
-                v-model="metric"
-                placeholder=" "
-                popper-class="common-select"
-                :teleported="false"
-                @change="metricChange"
-            >
-              <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
-            </el-select>
+            <div class="line-metric__select">
+              <el-select
+                  v-model="metric"
+                  placeholder=" "
+                  popper-class="common-select"
+                  :teleported="false"
+                  @change="metricChange"
+              >
+                <el-option v-for="item in metricOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
+              </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>
diff --git a/src/views/setting/Index.vue b/src/views/setting/Index.vue
index 080e8966..b63511a8 100644
--- a/src/views/setting/Index.vue
+++ b/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>
     <!-- 内容区 -->
diff --git a/src/views/setting/KnowledgeBase.vue b/src/views/setting/KnowledgeBase.vue
index 7d16c8ae..c5a61c97 100644
--- a/src/views/setting/KnowledgeBase.vue
+++ b/src/views/setting/KnowledgeBase.vue
@@ -4,14 +4,14 @@
       <div class="top-title">
         {{$t('overall.knowledgeBase')}}
       </div>
-      <div class="builtIn-to-user-defined" >
-        <button :title="$t('knowledgeBase.userDefinedLibrary')" class="top-tool-btn--user_defined_library"
-                v-if="hasPermission('userDefinedLibrary')"
-                @click="changeToUserDefinedList">
-          <i class="cn-icon-add-knowledge-base cn-icon" ></i>
-          <span>{{$t('knowledgeBase.userDefinedLibrary')}}</span>
-        </button>
-      </div>
+<!--      <div class="builtIn-to-user-defined" >-->
+<!--        <button :title="$t('knowledgeBase.userDefinedLibrary')" class="top-tool-btn&#45;&#45;user_defined_library"-->
+<!--                v-if="hasPermission('userDefinedLibrary')"-->
+<!--                @click="changeToUserDefinedList">-->
+<!--          <i class="cn-icon-add-knowledge-base cn-icon" ></i>-->
+<!--          <span>{{$t('knowledgeBase.userDefinedLibrary')}}</span>-->
+<!--        </button>-->
+<!--      </div>-->
     </div>
 
     <!-- 内置库列表 -->