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;
padding-left: 19px;
}
.tabs-name1 {
padding-left: 0;
}
.total,.inbound,.outbound,.internal,.through,.other,.ingress,.egress {
width: 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 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">
<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>
@@ -37,7 +37,7 @@
:after-close="handleClose">
<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">
@@ -45,7 +45,7 @@
<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"
@@ -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'
@@ -246,7 +245,13 @@
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 {
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'
@@ -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 => {

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

@@ -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>

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

@@ -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>

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

@@ -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>

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-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>
<!-- 内容区 -->

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

@@ -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>
<!-- 内置库列表 -->