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

CN-1612 feat: 部分css重构内容：策略policy列表与策略新增

Browse Source
This commit is contained in:
刘洪洪
2024-04-03 17:13:12 +08:00
parent 86b9082f99
commit 9ec793db92
18 changed files with 264 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/views/detections/detectionPolicies/Index.vue
View File

@@ -21,7 +21,7 @@
:disableEdit="disableEdit"
:disableDelete="disableDelete"/>
<div class="detection-table" style="position: relative">
<div class="detection-table">
<loading :loading="loading"></loading>
<detection-table
ref="dataTable"
@@ -126,14 +126,14 @@ export default {
myCellStyle: {
padding: '4px 0px',
'font-size': '12px',
color: '#353636',
color: 'var(--el-text-color-primary)',
'font-weight': 400
},
myHeaderCellStyle: {
padding: '4px 0px',
background: '#F5F8FA',
background: 'var(--el-fill-color-light)',
'font-size': '12px',
color: '#353636',
color: 'var(--el-text-color-primary)',
'font-weight': 500
}
}
@@ -347,58 +347,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
.detection {
padding: 20px;
height: 100%;
overflow: auto;
.detection-title {
font-family: NotoSansHans-Black;
line-height: 24px;
font-size: 24px;
color: #353636;
font-weight: 900;
display: flex;
flex-direction: column;
.detection-title-label {
font-family: NotoSansSChineseRegular;
font-size: 12px;
color: #717171;
letter-spacing: 0;
line-height: 18px;
font-weight: 400;
margin-top: 5px;
}
}
.detection-content {
margin-top: 15px;
width: 100%;
height: calc(100% - 96px);
display: flex;
.detection-filter {
width: 320px;
height: calc(100% + 34px);
background: #FFFFFF;
border: 1px solid rgba(226, 229, 236, 1);
border-radius: 4px;
margin-right: 20px;
}
.detection-block {
width: calc(100% - 340px);
.detection-table {
width: 100%;
height: calc(100% - 44px);
border-radius: 4px;
margin-top: 12px;
}
}
}
}
</style>

17
src/views/detections/detectionPolicies/PolicyDrawer.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="detection-drawer" style="height: 100vh;overflow: scroll;padding-bottom: 90px">
<div class="detection-drawer">
<div class="drawer-basic">
<div class="drawer-basic-header">
<div class="drawer-basic-id">
@@ -91,11 +91,10 @@
<div class="drawer-basic-function">
<div class="detection-drawer-title">{{ $t('detections.filters') }}</div>
<span class="detection-tag-blue">Source Port</span>
<span style="margin: 0 6px;">{{ $t('detections.equal') }}</span><span>19890</span>
<span class="drawer-title__equal">{{ $t('detections.equal') }}</span><span>19890</span>
</div>
<div class="drawer-basic-function" v-for="item in severityList" :key="item.severity"
style="padding-bottom: 0">
<div class="drawer-basic-function padding-b-0" v-for="item in severityList" :key="item.severity">
<div class="detection-drawer-title">
<div class="detection__icon" :style="`background-color: ${eventSeverityColor[item.severity]}`"></div>
<div>{{ toUpperCaseByString(item.severity) }}</div>
@@ -112,16 +111,16 @@
</el-collapse>
</div>
<div class="detection-drawer-collapse" style="margin: 20px 0">
<div class="detection-drawer-collapse detection-drawer-collapse__margin">
<el-collapse v-model="activeTrigger">
<el-collapse-item :title="$t('detection.create.trigger')" name="trigger">
<div class="drawer-collapse-content" v-if="language===EN">
<div class="drawer-collapse-trigger">
Triggered when conditions occur at least
<span style="color: #046ECA">
<span class="trigger__value">
{{ atLeast }} {{ times }}
</span> in
<span style="color: #046ECA">
<span class="trigger__value">
{{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
{{ $_.get(detailData, 'ruleTriggerObj.intervalVal', '-') || '-' }}
</span>
@@ -138,11 +137,11 @@
<div class="drawer-collapse-content" v-if="language===ZH">
<div class="drawer-collapse-trigger">
当条件为
<span style="color: #046ECA">
<span class="trigger__value">
{{ getNumberFromStr($_.get(detailData, 'ruleTriggerObj.interval', '0')) || '-' }}
{{ changeValueToLabel(detailData.ruleTriggerObj) }}
</span>内至少出现
<span style="color: #046ECA">
<span class="trigger__value">
{{ $_.get(detailData, 'ruleTriggerObj.atLeast', '-') || '-' }} 次
</span>时触发
</div>

4
src/views/detections/detectionPolicies/PolicyFilter.vue
View File

@@ -7,7 +7,7 @@
<div>
<div class="new-filter-content-title">{{ $t('overall.status') }}</div>
<div class="new-filter-content-content">
<el-checkbox-group v-model="checkStatus" @change="onChangeCategory" style="display: flex;flex-direction: column">
<el-checkbox-group v-model="checkStatus" @change="onChangeCategory" class="content__display">
<el-checkbox v-for="item in statusList" :key="item.name" class="new-filter-content-checkbox" :label="item.status">
<div>{{ item.name }}</div>
</el-checkbox>
@@ -29,7 +29,7 @@
<div>
<div class="new-filter-content-title">{{ $t('overall.type') }}</div>
<div class="new-filter-content-content">
<el-checkbox-group v-model="checkEventType" @change="onChangeCategory" style="display: flex;flex-direction: column">
<el-checkbox-group v-model="checkEventType" @change="onChangeCategory" class="content__display">
<el-checkbox v-for="item in eventTypeList" :key="item.name" class="new-filter-content-checkbox" :label="item.name">
{{ item.name }}
</el-checkbox>

2
src/views/detections/detectionPolicies/PolicyForm.vue
View File

@@ -26,7 +26,7 @@
<!--第二步：Rule Definition-->
<div class="detection-form-collapse">
<el-collapse v-model="activeNames" style="position: relative;">
<el-collapse v-model="activeNames" class="rule-definition">
<el-collapse-item name="2">
<template #title>
<div class="form-collapse-header">

8
src/views/detections/detectionPolicies/PolicyTable.vue
View File

@@ -59,7 +59,7 @@
{{ changeCategory(scope.row[item.prop]) }}
</template>
<template v-else-if="item.prop === 'description'">
<div style="padding-right: 20px">{{ scope.row[item.prop] }}</div>
<div class="padding-r-20">{{ scope.row[item.prop] }}</div>
</template>
<template v-else-if="item.prop === 'dimensions' && scope.row[item.prop]">
<span class="detection-tag-blue">{{ scope.row[item.prop] }}</span>
@@ -83,7 +83,7 @@
<div
class="tip__tag"
v-if="$_.get(scope.row.ruleConfigObj, 'knowledgeBase.color')"
:style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'white'}"
:style="{backgroundColor: $_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'), color: 'var(--el-color-white)'}"
>{{colorText($_.get(scope.row.ruleConfigObj, 'knowledgeBase.color'))}}</div>
</div>
<div class="tip__description" :class="{ 'tip__description--non': !($_.get(scope.row.ruleConfigObj, 'knowledgeBase.description')) }">
@@ -239,7 +239,3 @@ export default {
}
}
</script>
<style lang="scss">
</style>

25
src/views/detections/detectionPolicies/PolicyTools.vue
View File

@@ -5,9 +5,8 @@
id="knowledge-base-add"
v-if="hasPermission('createDetectionPolicy')"
:title="$t('knowledgeBase.createKnowledgeBase')"
class="top-tool-btn margin-r-10 top-tool-btn--create"
@click="onCreate"
style="width:72px;">
class="top-tool-btn margin-r-10 top-tool-btn--create btn__width"
@click="onCreate">
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{ $t('overall.create') }}</span>
</button>
@@ -17,9 +16,8 @@
v-if="hasPermission('editDetectionPolicy')"
id="knowledge-base-edit"
:title="$t('knowledgeBase.editKnowledgeBase')"
class="top-tool-btn margin-r-10"
@click="onEdit"
style="width:72px;">
class="top-tool-btn margin-r-10 btn__width"
@click="onEdit">
<i class="cn-icon-edit cn-icon" ></i>
<span>{{$t('overall.edit')}}</span>
</button>
@@ -29,21 +27,18 @@
v-if="hasPermission('deleteDetectionPolicy')"
id="knowledge-base-delete"
:title="$t('knowledgeBase.deleteKnowledgeBase')"
class="top-tool-btn margin-r-10"
@click="onDelete"
style="width:72px;">
class="top-tool-btn margin-r-10 btn__width"
@click="onDelete">
<i class="cn-icon-delete cn-icon"></i>
<span>{{ $t('overall.delete') }}</span>
</button>
<div class="top-tool-search margin-l-10">
<el-input v-model="keyWord" size="small" style="height: 28px;" @keyup.enter="onSearch"></el-input>
<el-input v-model="keyWord" size="small" class="search__input" @keyup.enter="onSearch"></el-input>
<button
class="top-tool-btn top-tool-btn--search"
style="border-radius: 0 2px 2px 0 !important;"
class="top-tool-btn top-tool-btn--search search__btn"
@click="onSearch">
<el-icon><Search /></el-icon>
<!-- <i class="el-icon-search"></i>-->
</button>
</div>
</div>
@@ -107,7 +102,3 @@ export default {
}
}
</script>
<style lang="scss" scoped>
</style>