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

2024-04-10 19:14:23 +08:00
parent 50c422d497
commit c2ee3d1f40
9 changed files with 1574 additions and 1255 deletions
--- a/src/assets/css/components/views/charts2/entityDetailLine.scss
+++ b/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;
+}
--- a/src/assets/css/components/views/charts2/networkOverviewLine.scss
+++ b/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;
--- a/src/assets/css/components/views/setting/knowledgeBase.scss
+++ b/src/assets/css/components/views/setting/knowledgeBase.scss
--- a/src/components/table/setting/knowledgeBaseTableForCard.vue
+++ b/src/components/table/setting/knowledgeBaseTableForCard.vue
@@ -1,23 +1,23 @@
 <template>
  <template v-if="!isNoData">
-    <div class="card-type-title" style="margin-top:4px;"  v-if="websketchList.length > 0">{{$t('knowledgeBase.websketchIntegration')}}</div>
-    <el-checkbox-group v-model="checkList" >
+    <div class="card-type-title" v-if="websketchList.length > 0">{{ $t('knowledgeBase.websketchIntegration') }}</div>
+    <el-checkbox-group v-model="checkList">
      <div class="card-box" v-for="data in websketchList" :key="data.knowledgeId">
        <div @click="isSelectedStatus && data.isBuiltIn !== 1 && clickCard(data,$event)" @mouseenter="mouseenter(data)" @mouseleave="mouseleave(data)" class="card-item" :class="data.isSelected ? 'card-selected' : ''">
          <div class="card-content">
            <div class="card-icon">
-              <img :src="data.iconUrl"/>
+              <img :src="data.iconUrl" alt=""/>
            </div>
            <div class="card-title">
-              <div class="card-title-name" :title="$t(data.label)">{{$t(data.label)}}</div>
+              <div class="card-title-name" :title="$t(data.label)">{{ $t(data.label) }}</div>
            </div>
-            <div class="card-desc" :title="data.desc ? $t(data.desc) : '—'">{{data.desc ? $t(data.desc) : '—'}}</div>
+            <div class="card-desc" :title="data.desc ? $t(data.desc) : '—'">{{ data.desc ? $t(data.desc) : '—' }}</div>
          </div>
          <div class="card-operate__footer">
            <button v-if="data.showUpdate && hasPermission('editBuiltInKnowledgeBase')" :title="$t('overall.update')" class="top-tool-btn--update"
                    @click="jumpToUpdatePage(data,false)">
              <i class="cn-icon-update-knowledge-base cn-icon"></i>
-              <span>{{$t('overall.update')}}</span>
+              <span>{{ $t('overall.update') }}</span>
            </button>
          </div>
        </div>
@@ -35,17 +35,17 @@
               :class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
               :before-close="beforeClose"
               :after-close="handleClose">
-      <div class="knowledge-update__top" >
+      <div class="knowledge-update__top">
        <div class="update-left__icon">
-          <img width="60" height="60" :src="updateKnowledge.iconUrl"/>
+          <img width="60" height="60" :src="updateKnowledge.iconUrl" alt=""/>
        </div>
        <div class="update-right">
          <div class="knowledge-enable">
            <div class="update-title">
-              <div class="card-title-name" :title="$t(updateKnowledge.label)">{{$t(updateKnowledge.label)}}</div>
+              <div class="card-title-name" :title="$t(updateKnowledge.label)">{{ $t(updateKnowledge.label) }}</div>
            </div>
            <el-switch v-model="updateKnowledge.status"
-                       active-color="#38ACD2"
+                       active-color="var(--el-color-business)"
                       inactive-color="#C0CEDB"
                       :active-value="1"
                       :inactive-value="0"
@@ -54,7 +54,7 @@
            >
            </el-switch>
          </div>
-          <div class="knowledge-desc" :title="updateKnowledge.desc ? $t(updateKnowledge.desc) : '-'">{{updateKnowledge.desc ? $t(updateKnowledge.desc) : '-'}}</div>
+          <div class="knowledge-desc" :title="updateKnowledge.desc ? $t(updateKnowledge.desc) : '-'">{{ updateKnowledge.desc ? $t(updateKnowledge.desc) : '-' }}</div>
        </div>
      </div>
      <template v-if="!showAddUpdateDialog">
@@ -78,19 +78,19 @@
            <button :title="$t('overall.update')" class="top-tool-btn--update"
                    @click="uploadRecord"><!--:disabled="hasUpdatingRecord"-->
              <i class="cn-icon-update-knowledge-base cn-icon"></i>
-              <span>{{$t('overall.update')}}</span>
+              <span>{{ $t('overall.update') }}</span>
            </button>
          </div>
        </div>
        <div class="knowledge-update" v-else>
-          <div class="update-title" >
-            <div class="card-title-name">{{$t('knowledgeBase.updateRecord')}}</div>
+          <div class="update-title">
+            <div class="card-title-name">{{ $t('knowledgeBase.updateRecord') }}</div>
          </div>
          <div class="update-operate">
            <button :title="$t('overall.update')" class="top-tool-btn--update"
                    @click="uploadRecord"><!--   :disabled="hasUpdatingRecord" -->
              <i class="cn-icon-update-knowledge-base cn-icon"></i>
-              <span>{{$t('overall.update')}}</span>
+              <span>{{ $t('overall.update') }}</span>
            </button>
          </div>
        </div>
@@ -109,19 +109,19 @@
                  }"
                  :cell-style="myCellStyle"
                  :header-cell-style="myHeaderCellStyle">
-          <el-table-column prop="opTime" :label="$t('entities.tab.informationAggregation.updateTime')" width="150" >
+          <el-table-column prop="opTime" :label="$t('entities.tab.informationAggregation.updateTime')" width="150">
            <template #default="scope" :column="item">
-              <span>{{scope.row.opTime ? dateFormatByAppearance(scope.row.opTime) : '-'}}</span>
+              <span>{{ scope.row.opTime ? dateFormatByAppearance(scope.row.opTime) : '-' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="user" :label="$t('knowledgeBase.operator')" width="150" v-if="updateKnowledge.source !== 'cn_psiphon3_ip' || activeTab === 'updateRecord'">
            <template #default="scope" :column="item">
-              <span>{{$_.get(scope.row, 'user.name', '-')}}</span>
+              <span>{{ $_.get(scope.row, 'user.name', '-') }}</span>
            </template>
          </el-table-column>
-          <el-table-column prop="commitVersion" :label="$t('overall.version')" width="150"  ></el-table-column>
+          <el-table-column prop="commitVersion" :label="$t('overall.version')" width="150"></el-table-column>
          <el-table-column prop="description" :label="$t('overall.remark')"></el-table-column>
-          <template v-slot:empty >
+          <template v-slot:empty>
            <div class="table-no-data" v-if="updateHistoryList.length === 0 && !updateLogLoading">
              <div class="table-no-data__title">{{ $t('npm.noData') }}</div>
            </div>
@@ -130,12 +130,12 @@
        </el-table>

        <div class="psiphon3" v-if="updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning'">
-          <div class="psiphon3-title">{{$t('knowledgeBase.psiphon3IpCount')}}</div>
+          <div class="psiphon3-title">{{ $t('knowledgeBase.psiphon3IpCount') }}</div>
          <div class="psiphon3-bar">
            <chart-error v-if="showErrorForPsiphon3" :content="errorMsgForPsiphon3"/>
            <div class="bar-header" v-else>
              <div class="bar-header-left">
-                <div class="bar-value-active" ></div>
+                <div class="bar-value-active"></div>
                <div class="bar-value">
                  <template v-for="(item, index) in tabs" :key="index">
                    <div class="bar-value-tabs"
@@ -146,7 +146,7 @@
                    >
                      <div class="bar-value-tabs-name">
                        <div :class="item.class"></div>
-                        <div class="tabs-name" >{{ $t(item.name) }}</div>
+                        <div class="tabs-name">{{ $t(item.name) }}</div>
                      </div>
                    </div>
                  </template>
@@ -156,7 +156,6 @@
                <div class="bar-select-time">
                  <div class="bar-select__operation">
                    <el-select
-                            size="small"
                        v-model="selectTime"
                        placeholder=" "
                        popper-class="common-select"
@@ -172,7 +171,7 @@
                </div>
              </div>
            </div>
-            <div style="height: calc(100% - 24px); position: relative">
+            <div class="bar-chart">
              <chart-no-data v-if="isNoDataForPsiphon3 && !showErrorForPsiphon3 && !psiphon3Loading"></chart-no-data>
              <loading :loading="psiphon3Loading"></loading>
              <div class="chart-drawing" v-show="!isNoDataForPsiphon3 && !showErrorForPsiphon3" id="psiphonBarChart"></div>
@@ -187,7 +186,7 @@
            <!--name-->
            <el-form-item :label="$t('overall.name')" prop="name">
              <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
-                        size="small" type="text" v-model="updateObject.label"></el-input>
+                        type="text" v-model="updateObject.label"></el-input>
            </el-form-item>
            <el-form-item :label="$t('knowledge.upload')" prop="file">
              <el-upload :action="`${baseUrl}${apiVersion}/knowledgeBase/items/batch`"
@@ -201,7 +200,7 @@
                         :on-error="uploadError"
                         :class="uploadErrorTip ? 'el-upload--error' : ''"
                         :accept="fileTypeLimit"
-                         style="margin-bottom: -10px"
+                         class="item__content__margin"
                         :auto-upload="false"
                         ref="knowledgeUpload"
                         id="knowledgeUpload"
@@ -212,7 +211,7 @@

            <el-form-item :label="$t('knowledge.version')" prop="version">
              <el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit
-                        size="small" type="text" v-model="currentVersion"></el-input>
+                        type="text" v-model="currentVersion"></el-input>
            </el-form-item>
            <el-form-item :label="$t('overall.remark')" prop="description" class="knowledge-remark">
              <el-input maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
@@ -231,7 +230,7 @@
               class="update-knowledge-tip"
               :width="480"
               :before-close="handleConfirmClose">
-      <div class="dialog-message">{{$t('knowledge.updateTips')}}</div>
+      <div class="dialog-message">{{ $t('knowledge.updateTips') }}</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showConfirmDialog = false">{{ $t('overall.cancel') }}</el-button>
@@ -243,20 +242,26 @@
 </template>

 <script>
-  import table from '@/mixins/table'
-  import Loading from '@/components/common/Loading'
-  import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
-  import { knowledgeCategoryValue, unitTypes, storageKey, builtInKnowledgeBaseBasicInfo, knowledgeCardUpdateRecordType } from '@/utils/constants'
-  import { ref, shallowRef } from 'vue'
-  import { api } from '@/utils/api'
-  import { detectionTooltipFormatter } from '@/views/charts/charts/tools'
-  import ChartNoData from '@/views/charts/charts/ChartNoData'
-  import axios from 'axios'
-  import _ from 'lodash'
-  import * as echarts from 'echarts'
-  import unitConvert from '@/utils/unit-convert'
+import table from '@/mixins/table'
+import Loading from '@/components/common/Loading'
+import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
+import {
+  knowledgeCategoryValue,
+  unitTypes,
+  storageKey,
+  builtInKnowledgeBaseBasicInfo,
+  knowledgeCardUpdateRecordType
+} from '@/utils/constants'
+import { ref, shallowRef } from 'vue'
+import { api } from '@/utils/api'
+import { detectionTooltipFormatter } from '@/views/charts/charts/tools'
+import ChartNoData from '@/views/charts/charts/ChartNoData'
+import axios from 'axios'
+import _ from 'lodash'
+import * as echarts from 'echarts'
+import unitConvert from '@/utils/unit-convert'

-  export default {
+export default {
  name: 'knowledgeBaseTableForCard',
  mixins: [table],
  props: {
@@ -310,7 +315,7 @@
        {
          name: 'knowledgeBase.active',
          class: 'active',
-            color: '#7FA054',
+          color: 'var(--el-color-success)',
          data: []
        },
        {
@@ -321,16 +326,31 @@
        }
      ],
      dateRangeArr: [
-          { value: 1440, name: this.$t('dateTime.last1Day') },
-          { value: 2880, name: this.$t('dateTime.last2Days') },
-          { value: 10080, name: this.$t('dateTime.last7Days') },
-          { value: 21600, name: this.$t('dateTime.last15Days') },
-          { value: 43200, name: this.$t('dateTime.last30Days') }
+        {
+          value: 1440,
+          name: this.$t('dateTime.last1Day')
+        },
+        {
+          value: 2880,
+          name: this.$t('dateTime.last2Days')
+        },
+        {
+          value: 10080,
+          name: this.$t('dateTime.last7Days')
+        },
+        {
+          value: 21600,
+          name: this.$t('dateTime.last15Days')
+        },
+        {
+          value: 43200,
+          name: this.$t('dateTime.last30Days')
+        }
      ],
      myCellStyle: {
        padding: '6px 0px',
        'font-size': '12px',
-          color: '#353636',
+        color: 'var(--el-text-color-primary)',
        'font-weight': 400,
        'line-height': '20px',
        'border-right': 'none'
@@ -338,10 +358,10 @@
      myHeaderCellStyle: {
        padding: '8px 0px',
        'font-size': '12px',
-          color: '#353636',
+        color: 'var(--el-text-color-primary)',
        'font-weight': 500,
        'border-right': 'none',
-          background: '#f5f7fa',
+        background: 'var(--el-border-color-extra-light)',
        fontWeight: '400',
        fontSize: '12px',
        borderRight: 'none',
@@ -553,14 +573,14 @@
      this.uploadLoading = false
      this.$message.error(this.$t('tip.uploadFailed', { msg: errorMsg }))
    },
-      uploadSuccess (response) {
+    uploadSuccess () {
      this.uploadLoading = false
      this.uploaded = true
      this.$message.success(this.$t('tip.success'))
      this.showAddUpdateDialog = false
      this.getCurTabData()
    },
-      beforeUpload (file) {
+    beforeUpload () {
      this.uploadLoading = true
      this.showConfirmDialog = false
    },
@@ -573,7 +593,7 @@
    cancle () {
      this.showAddUpdateDialog = false
    },
-      clickCard (data, event) {
+    clickCard (data) {
      if (data.isSelected) { // 原来为选中，当前点击后未选中
        const index = this.checkList.indexOf(data)
        if (index > -1) {
@@ -608,9 +628,6 @@
    handleConfirmClose () {
      this.showConfirmDialog = false
    },
-      handleUpdateClose () {
-        this.showAddUpdateDialog = false
-      },
    showUpdate () {
      this.showUpdateDialog = true
      this.showAddUpdateDialog = false
@@ -718,9 +735,6 @@
      this.switchKnowledgeId = id
      return false
    },
-      cancleSwitch () {
-        this.showConfirmSwitch = false
-      },
    switchLearning () {
      const hint = this.aiTaggingList.find(d => d.knowledgeId === this.switchKnowledgeId)
      const toStatus = hint.status === 0 ? 1 : 0
@@ -742,7 +756,7 @@
    }
  },
  watch: {
-      tabType (n) {
+    tabType () {
      this.timeChange()
    },
    /*
@@ -757,7 +771,7 @@
    },
    */
    tableData: {
-        handler (n) {
+      handler () {
        if (this.tableData && this.tableData.length > 0) {
          this.websketchList = []
          this.tableData.forEach(item => {
@@ -836,5 +850,5 @@
      }
    }
  }
-  }
+}
 </script>
--- a/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
+++ b/src/views/charts2/charts/entityDetail/EntityDetailLine.vue
@@ -47,8 +47,8 @@
            </div>
            <div class="line-select-metric">
              <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
+              <div class="line-metric__select">
                <el-select
-                  size="small"
                    v-model="metric"
                    placeholder=" "
                    popper-class="common-select"
@@ -59,11 +59,11 @@
                </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>
--- 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,8 +45,8 @@
          </div>
          <div class="line-select-metric">
            <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
+            <div class="line-metric__select">
              <el-select
-                size="small"
                  v-model="metric"
                  placeholder=" "
                  popper-class="common-select"
@@ -59,7 +59,8 @@
          </div>
        </div>
      </div>
-    <div style="height: calc(100% - 74px); position: relative">
+    </div>
+    <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>
--- a/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
+++ b/src/views/charts2/charts/entityDetail/lines/ServiceName.vue
@@ -46,8 +46,8 @@
          </div>
          <div class="line-select-metric">
            <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
+            <div class="line-metric__select">
              <el-select
-                size="small"
                  v-model="metric"
                  placeholder=" "
                  popper-class="common-select"
@@ -58,6 +58,7 @@
              </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">
@@ -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>
--- 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>
    <!-- 内容区 -->
--- 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>

    <!-- 内置库列表 -->