gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
刘洪洪
2024-04-10 19:14:23 +08:00
parent 50c422d497
commit c2ee3d1f40
9 changed files with 1574 additions and 1255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/assets/css/components/views/charts2/entityDetailLine.scss
View File

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

5
src/assets/css/components/views/charts2/networkOverviewLine.scss
View File

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

1013
src/assets/css/components/views/setting/knowledgeBase.scss
View File

File diff suppressed because it is too large Load Diff

74
src/components/table/setting/knowledgeBaseTableForCard.vue
View File

@@ -1,12 +1,12 @@
<template> <template>
<template v-if="!isNoData"> <template v-if="!isNoData">
<div class="card-type-title" style="margin-top:4px;" v-if="websketchList.length > 0">{{$t('knowledgeBase.websketchIntegration')}}</div> <div class="card-type-title" v-if="websketchList.length > 0">{{ $t('knowledgeBase.websketchIntegration') }}</div>
<el-checkbox-group v-model="checkList"> <el-checkbox-group v-model="checkList">
<div class="card-box" v-for="data in websketchList" :key="data.knowledgeId"> <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 @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-content">
<div class="card-icon"> <div class="card-icon">
<img :src="data.iconUrl"/> <img :src="data.iconUrl" alt=""/>
</div> </div>
<div class="card-title"> <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>
@@ -37,7 +37,7 @@
:after-close="handleClose"> :after-close="handleClose">
<div class="knowledge-update__top"> <div class="knowledge-update__top">
<div class="update-left__icon"> <div class="update-left__icon">
<img width="60" height="60" :src="updateKnowledge.iconUrl"/> <img width="60" height="60" :src="updateKnowledge.iconUrl" alt=""/>
</div> </div>
<div class="update-right"> <div class="update-right">
<div class="knowledge-enable"> <div class="knowledge-enable">
@@ -45,7 +45,7 @@
<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> </div>
<el-switch v-model="updateKnowledge.status" <el-switch v-model="updateKnowledge.status"
active-color="#38ACD2" active-color="var(--el-color-business)"
inactive-color="#C0CEDB" inactive-color="#C0CEDB"
:active-value="1" :active-value="1"
:inactive-value="0" :inactive-value="0"
@@ -156,7 +156,6 @@
<div class="bar-select-time"> <div class="bar-select-time">
<div class="bar-select__operation"> <div class="bar-select__operation">
<el-select <el-select
size="small"
v-model="selectTime" v-model="selectTime"
placeholder=" " placeholder=" "
popper-class="common-select" popper-class="common-select"
@@ -172,7 +171,7 @@
</div> </div>
</div> </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> <chart-no-data v-if="isNoDataForPsiphon3 && !showErrorForPsiphon3 && !psiphon3Loading"></chart-no-data>
<loading :loading="psiphon3Loading"></loading> <loading :loading="psiphon3Loading"></loading>
<div class="chart-drawing" v-show="!isNoDataForPsiphon3 && !showErrorForPsiphon3" id="psiphonBarChart"></div> <div class="chart-drawing" v-show="!isNoDataForPsiphon3 && !showErrorForPsiphon3" id="psiphonBarChart"></div>
@@ -187,7 +186,7 @@
<!--name--> <!--name-->
<el-form-item :label="$t('overall.name')" prop="name"> <el-form-item :label="$t('overall.name')" prop="name">
<el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit <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>
<el-form-item :label="$t('knowledge.upload')" prop="file"> <el-form-item :label="$t('knowledge.upload')" prop="file">
<el-upload :action="`${baseUrl}${apiVersion}/knowledgeBase/items/batch`" <el-upload :action="`${baseUrl}${apiVersion}/knowledgeBase/items/batch`"
@@ -201,7 +200,7 @@
:on-error="uploadError" :on-error="uploadError"
:class="uploadErrorTip ? 'el-upload--error' : ''" :class="uploadErrorTip ? 'el-upload--error' : ''"
:accept="fileTypeLimit" :accept="fileTypeLimit"
style="margin-bottom: -10px" class="item__content__margin"
:auto-upload="false" :auto-upload="false"
ref="knowledgeUpload" ref="knowledgeUpload"
id="knowledgeUpload" id="knowledgeUpload"
@@ -212,7 +211,7 @@
<el-form-item :label="$t('knowledge.version')" prop="version"> <el-form-item :label="$t('knowledge.version')" prop="version">
<el-input class="form-input" maxlength="64" placeholder="" disabled show-word-limit <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>
<el-form-item :label="$t('overall.remark')" prop="description" class="knowledge-remark"> <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' <el-input maxlength="255" show-word-limit :rows="4" size='mini' type="textarea" resize='none'
@@ -246,7 +245,13 @@
import table from '@/mixins/table' import table from '@/mixins/table'
import Loading from '@/components/common/Loading' import Loading from '@/components/common/Loading'
import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util' import { getSecond, getMillisecond, xAxisTimeFormatter, xAxisTimeRich } from '@/utils/date-util'
import { knowledgeCategoryValue, unitTypes, storageKey, builtInKnowledgeBaseBasicInfo, knowledgeCardUpdateRecordType } from '@/utils/constants' import {
knowledgeCategoryValue,
unitTypes,
storageKey,
builtInKnowledgeBaseBasicInfo,
knowledgeCardUpdateRecordType
} from '@/utils/constants'
import { ref, shallowRef } from 'vue' import { ref, shallowRef } from 'vue'
import { api } from '@/utils/api' import { api } from '@/utils/api'
import { detectionTooltipFormatter } from '@/views/charts/charts/tools' import { detectionTooltipFormatter } from '@/views/charts/charts/tools'
@@ -310,7 +315,7 @@
{ {
name: 'knowledgeBase.active', name: 'knowledgeBase.active',
class: 'active', class: 'active',
color: '#7FA054', color: 'var(--el-color-success)',
data: [] data: []
}, },
{ {
@@ -321,16 +326,31 @@
} }
], ],
dateRangeArr: [ dateRangeArr: [
{ value: 1440, name: this.$t('dateTime.last1Day') }, {
{ value: 2880, name: this.$t('dateTime.last2Days') }, value: 1440,
{ value: 10080, name: this.$t('dateTime.last7Days') }, name: this.$t('dateTime.last1Day')
{ value: 21600, name: this.$t('dateTime.last15Days') }, },
{ value: 43200, name: this.$t('dateTime.last30Days') } {
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: { myCellStyle: {
padding: '6px 0px', padding: '6px 0px',
'font-size': '12px', 'font-size': '12px',
color: '#353636', color: 'var(--el-text-color-primary)',
'font-weight': 400, 'font-weight': 400,
'line-height': '20px', 'line-height': '20px',
'border-right': 'none' 'border-right': 'none'
@@ -338,10 +358,10 @@
myHeaderCellStyle: { myHeaderCellStyle: {
padding: '8px 0px', padding: '8px 0px',
'font-size': '12px', 'font-size': '12px',
color: '#353636', color: 'var(--el-text-color-primary)',
'font-weight': 500, 'font-weight': 500,
'border-right': 'none', 'border-right': 'none',
background: '#f5f7fa', background: 'var(--el-border-color-extra-light)',
fontWeight: '400', fontWeight: '400',
fontSize: '12px', fontSize: '12px',
borderRight: 'none', borderRight: 'none',
@@ -553,14 +573,14 @@
this.uploadLoading = false this.uploadLoading = false
this.$message.error(this.$t('tip.uploadFailed', { msg: errorMsg })) this.$message.error(this.$t('tip.uploadFailed', { msg: errorMsg }))
}, },
uploadSuccess (response) { uploadSuccess () {
this.uploadLoading = false this.uploadLoading = false
this.uploaded = true this.uploaded = true
this.$message.success(this.$t('tip.success')) this.$message.success(this.$t('tip.success'))
this.showAddUpdateDialog = false this.showAddUpdateDialog = false
this.getCurTabData() this.getCurTabData()
}, },
beforeUpload (file) { beforeUpload () {
this.uploadLoading = true this.uploadLoading = true
this.showConfirmDialog = false this.showConfirmDialog = false
}, },
@@ -573,7 +593,7 @@
cancle () { cancle () {
this.showAddUpdateDialog = false this.showAddUpdateDialog = false
}, },
clickCard (data, event) { clickCard (data) {
if (data.isSelected) { // 原来为选中，当前点击后未选中 if (data.isSelected) { // 原来为选中，当前点击后未选中
const index = this.checkList.indexOf(data) const index = this.checkList.indexOf(data)
if (index > -1) { if (index > -1) {
@@ -608,9 +628,6 @@
handleConfirmClose () { handleConfirmClose () {
this.showConfirmDialog = false this.showConfirmDialog = false
}, },
handleUpdateClose () {
this.showAddUpdateDialog = false
},
showUpdate () { showUpdate () {
this.showUpdateDialog = true this.showUpdateDialog = true
this.showAddUpdateDialog = false this.showAddUpdateDialog = false
@@ -718,9 +735,6 @@
this.switchKnowledgeId = id this.switchKnowledgeId = id
return false return false
}, },
cancleSwitch () {
this.showConfirmSwitch = false
},
switchLearning () { switchLearning () {
const hint = this.aiTaggingList.find(d => d.knowledgeId === this.switchKnowledgeId) const hint = this.aiTaggingList.find(d => d.knowledgeId === this.switchKnowledgeId)
const toStatus = hint.status === 0 ? 1 : 0 const toStatus = hint.status === 0 ? 1 : 0
@@ -742,7 +756,7 @@
} }
}, },
watch: { watch: {
tabType (n) { tabType () {
this.timeChange() this.timeChange()
}, },
/* /*
@@ -757,7 +771,7 @@
}, },
*/ */
tableData: { tableData: {
handler (n) { handler () {
if (this.tableData && this.tableData.length > 0) { if (this.tableData && this.tableData.length > 0) {
this.websketchList = [] this.websketchList = []
this.tableData.forEach(item => { this.tableData.forEach(item => {

6
src/views/charts2/charts/entityDetail/EntityDetailLine.vue
View File

@@ -47,8 +47,8 @@
</div> </div>
<div class="line-select-metric"> <div class="line-select-metric">
<span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span> <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
<div class="line-metric__select">
<el-select <el-select
size="small"
v-model="metric" v-model="metric"
placeholder=" " placeholder=" "
popper-class="common-select" popper-class="common-select"
@@ -59,11 +59,11 @@
</el-select> </el-select>
</div> </div>
</div> </div>
</div>
<div class="line-select-reference-line"> <div class="line-select-reference-line">
<span class="line-margin-right">{{ $t('network.referenceLine') }}:</span> <span class="line-margin-right">{{ $t('network.referenceLine') }}:</span>
<div class="line-select__operation"> <div class="line-select__operation">
<el-select <el-select
size="small"
v-model="lineRefer" v-model="lineRefer"
:disabled="!lineTab" :disabled="!lineTab"
placeholder=" " placeholder=" "
@@ -79,7 +79,7 @@
</div> </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> <chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div> <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div>
</div> </div>

7
src/views/charts2/charts/entityDetail/lines/App.vue
View File

@@ -16,7 +16,7 @@
:test-id="`tab${index}`" :test-id="`tab${index}`"
> >
<div class="line-value-tabs-name"> <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>
<div class="line-value-unit" :test-id="`tabContent${index}`"> <div class="line-value-unit" :test-id="`tabContent${index}`">
<span class="line-value-unit-number"> <span class="line-value-unit-number">
@@ -45,8 +45,8 @@
</div> </div>
<div class="line-select-metric"> <div class="line-select-metric">
<span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span> <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
<div class="line-metric__select">
<el-select <el-select
size="small"
v-model="metric" v-model="metric"
placeholder=" " placeholder=" "
popper-class="common-select" popper-class="common-select"
@@ -59,7 +59,8 @@
</div> </div>
</div> </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> <chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div class="chart-drawing" v-show="!isNoData && !showError" ref="overviewLineChart"></div> <div class="chart-drawing" v-show="!isNoData && !showError" ref="overviewLineChart"></div>
</div> </div>

5
src/views/charts2/charts/entityDetail/lines/ServiceName.vue
View File

@@ -46,8 +46,8 @@
</div> </div>
<div class="line-select-metric"> <div class="line-select-metric">
<span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span> <span class="select-prefix line-margin-right">{{$t('network.metric')}}:</span>
<div class="line-metric__select">
<el-select <el-select
size="small"
v-model="metric" v-model="metric"
placeholder=" " placeholder=" "
popper-class="common-select" popper-class="common-select"
@@ -58,6 +58,7 @@
</el-select> </el-select>
</div> </div>
</div> </div>
</div>
<div class="line-select-reference-line"> <div class="line-select-reference-line">
<span class="line-margin-right">{{ $t('network.referenceLine') }}:</span> <span class="line-margin-right">{{ $t('network.referenceLine') }}:</span>
<div class="line-select__operation"> <div class="line-select__operation">
@@ -78,7 +79,7 @@
</div> </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> <chart-no-data v-if="isNoData && !showError"></chart-no-data>
<div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div> <div class="chart-drawing" v-show="showMarkLine && !isNoData && !showError" ref="overviewLineChart"></div>
</div> </div>

2
src/views/setting/Index.vue
View File

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

16
src/views/setting/KnowledgeBase.vue
View File

@@ -4,14 +4,14 @@
<div class="top-title"> <div class="top-title">
{{$t('overall.knowledgeBase')}} {{$t('overall.knowledgeBase')}}
</div> </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> </div>
<!-- 内置库列表 --> <!-- 内置库列表 -->