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

CN-1594 feat: 统一按钮

Browse Source
This commit is contained in:
chenjinsong
2024-04-10 18:23:41 +08:00
parent b953804403
commit d3e5b8aa2a
24 changed files with 102 additions and 324 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/assets/echarts.min.js vendored
View File

File diff suppressed because one or more lines are too long

36
src/assets/css/common/button.scss Normal file
View File

@@ -0,0 +1,36 @@
// 通用的 business 色的 button 和白色 button 样式的颜色，包括 top-tool、right-box 的 footer、各页面保存按钮 等.
// business 色的 class 为 'business-button'，白色的 class 为 'business-button business-button--light'
.business-button {
color: var(--el-color-white);
background-color: var(--el-color-business);
border: 1px solid var(--el-color-business-dark-2);
border-radius: var(--el-border-radius-small);
transition: all linear .1s;
cursor: pointer;
outline: none;
&:hover:not(:disabled) {
background-color: var(--el-color-business-light-2);
}
&:focus:not(:disabled) {
background-color: var(--el-color-business-dark-1);
}
&.business-button--light {
color: var(--el-text-color-primary);
background-color: var(--el-fill-color-blank);
border: 1px solid var(--el-color-info-light-7);
&:hover:not(:disabled) {
background-color: var(--el-fill-color);
}
&:focus:not(:disabled) {
background-color: var(--el-fill-color-darker);
}
}
&:disabled {
cursor: not-allowed;
opacity: 0.66;
}
}

5
src/assets/css/common/index.scss
View File

@@ -1,5 +1,6 @@
@import 'right-box-common';
@import 'table-common';
@use 'right-box-common';
@use 'table-common';
@use 'button';
/* 通用css */
.panel-chart__no-data {

34
src/assets/css/common/right-box-common.scss
View File

@@ -154,44 +154,12 @@ $border-radius-small: 2px;
height: 70px;
box-shadow: -3px 0 8px -3px rgba(205, 205, 205, 0.77);
.footer__btn {
.business-button {
margin: 0 15px;
height: 30px;
min-width: 74px;
padding: 0 15px;
color: var(--el-color-white);
background-color: var(--el-color-business);
border: 1px solid var(--el-color-business-dark-2);
border-radius: var(--el-border-radius-base);
outline: none;
font-size: 14px;
cursor: pointer;
transition: all linear .1s;
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: var(--el-color-business-light-2);
}
.footer__btn:focus:not(.footer__btn--disabled) {
background-color: var(--el-color-business-dark-1);
}
.footer__btn.footer__btn--light {
background-color: var(--el-fill-color-blank);
border: 1px solid var(--el-color-info-light-7);
color: var(--el-text-color-primary);
}
.footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
background-color: var(--el-fill-color);
}
.footer__btn.footer__btn--light:focus:not(.footer__btn--disabled) {
background-color: var(--el-fill-color-darker);
}
.footer__btn.footer__btn--disabled {
opacity: .6;
cursor: default;
}
}

100
src/assets/css/common/table-common.scss
View File

@@ -58,10 +58,6 @@
display: flex;
}
.top-tool-btn {
border-left: none;
}
.top-tool-btn--search {
width: 28px !important;
height: 28px !important;
@@ -69,39 +65,21 @@
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 var(--el-border-radius-small) var(--el-border-radius-small) 0 !important;
border-left: none;
i {
font-size: 14px;
color: var(--el-text-color-regular);
margin-right: unset !important;
}
}
.top-tool-btn__border {
border-radius: 0 2px 2px 0 !important;
.el-input__wrapper, .el-input__inner {
border-radius: var(--el-border-radius-small) 0 0 var(--el-border-radius-small) !important;
}
.top-tool-btn--search:hover {
border-left: none !important;
}
.top-tool-btn--search:focus {
border-left: none !important;
}
.el-input--small .el-input__wrapper {
height: 28px !important;
border-radius: 2px 0 0 2px !important;
}
.el-input--small {
.el-input {
width: 214px !important;
line-height: 27px;
}
.el-input--small .el-input__inner {
height: 28px;
border-radius: 2px 0 0 2px;
}
}
@@ -132,81 +110,15 @@
}
}
.top-tool-btn {
cursor: pointer;
.business-button {
height: 28px;
width: 72px;
border: 1px solid $border-color;
outline: none;
border-radius: 2px;
background-color: var(--el-fill-color-lighter);
transition: background-color linear .1s;
font-size: 12px;
font-weight: 500;
i {
font-size: 14px;
color: var(--el-text-color-regular);
margin-right: 4px;
}
&:disabled {
cursor: not-allowed;
opacity: 0.66;
}
&.top-tool-btn--text {
padding: 0 8px;
width: unset;
color: var(--el-text-color-regular);
}
&:hover:not(.cn-btn-disabled) {
border: 1px solid $border-color;
background-color: var(--el-fill-color);
}
&:focus:not(.cn-btn-disabled), &.is-focus {
background-color: var(--el-fill-color-darker);
border: 1px solid $border-color;
i {
color: var(--el-text-color-regular);
}
}
&.top-tool-btn--create {
background-color: var(--el-color-business);
border-color: var(--el-color-business-dark-2); // 涉及到表格样式，后续修改
color: $color-white;
i {
color: $color-white;
}
&:hover {
background-color: var(--el-color-business-light-2);
border-color: var(--el-color-business-dark-2);
color: $color-white;
i {
color: $color-white;
}
}
&:focus {
background-color: var(--el-color-business-dark-1);
border-color: var(--el-color-business-dark-2);
color: $color-white;
i {
color: $color-white;
}
}
&:disabled {
opacity: 0.66;
background-color: var(--el-color-business);
border-color: var(--el-color-business-dark-2);
color: $color-white;
i {
color: $color-white;
}
}
}
}
.btn-customize {

4
src/assets/css/components/components/advancedSearch/advanced-search2.scss
View File

@@ -94,9 +94,7 @@ $color-primary: var(--el-color-primary);
line-height: 24px !important;
&:hover {
//background-color: #f0f5fa;
background-color: var(--el-color-primary-light-9);
color: var(--el-color-primary);
background-color: var(--el-fill-color-light);
}
}
.hint-clear {

16
src/assets/css/components/views/administration/Appearance.scss
View File

@@ -53,26 +53,12 @@
margin-top: 3px;
padding-left: 200px;
.footer__btn {
.business-button {
margin: 0 15px;
height: 30px;
min-width: 74px;
padding: 0 15px;
color: var(--el-color-white);
background-color: var(--el-color-business);
border: 1px solid var(--el-color-business-dark-2);
border-radius: var(--el-border-radius-base);
outline: none;
font-size: 14px;
cursor: pointer;
transition: all linear .1s;
}
.footer__btn:hover:not(.footer__btn--disabled) {
background-color: var(--el-color-business-light-2);
}
.footer__btn:focus:not(.footer__btn--disabled) {
background-color: var(--el-color-business-dark-1);
}
}
}

21
src/assets/css/components/views/administration/License.scss
View File

@@ -16,29 +16,10 @@
height: 100%;
margin-top: 3px;
.license__btn {
.business-button {
height: 30px;
min-width: 74px;
color: var(--el-color-white);
background-color: var(--el-color-business);
border: 1px solid var(--el-color-business-dark-2);
border-radius: var(--el-border-radius-base);
outline: none;
font-size: 14px;
cursor: pointer;
transition: all linear .1s;
}
.license__btn:hover:not(.license__btn--disabled) {
background-color: var(--el-color-business-light-2);
}
.license__btn:focus:not(.license__btn--disabled) {
background-color: var(--el-color-business-dark-1);
}
.license__btn--disabled {
opacity: .6;
cursor: default;
}
}

27
src/assets/css/components/views/detections/detection-create/detection-form-setting.scss
View File

@@ -171,27 +171,12 @@ $color-info-light: var(--el-color-info-light-7);
display: flex;
justify-content: flex-end;
.el-button {
width: 80px !important;
height: 30px !important;
min-height: 30px !important;
line-height: 30px !important;
background: var(--el-color-business);
border: 1px solid var(--el-color-business-dark-1);
border-radius: 2px;
font-size: 12px;
color: $fill-color-blank;
padding: 0 14px;
}
.btn1 {
margin-right: 10px;
.el-button {
background: $fill-color-light;
border: 1px solid var(--el-border-color-dark);
color: $color-primary;
}
.business-button {
min-width: 74px;
height: 30px;
font-size: 14px;
padding: 0 15px;
margin: 0 15px;
}
}

114
src/assets/css/components/views/detections/detection-tools.scss
View File

@@ -6,101 +6,21 @@ $color-create: var(el-color-business-dark-2);
align-items: center;
flex-direction: row;
.btn__width {
width: 72px !important;
}
.top-tool-btn {
cursor: pointer;
.business-button {
height: 28px;
width: 28px;
border: 1px solid var(--el-color-info-light-7);
outline: none;
border-radius: 2px;
background-color: var(--el-fill-color-lighter);
transition: background-color linear .1s;
width: 72px;
font-size: 12px;
font-weight: 500;
//font-family: $fontFamily !important;
i {
font-size: 14px;
color: var(--el-text-color-regular);
margin-right: 4px;
}
}
.top-tool-btn:disabled {
cursor: not-allowed;
opacity: 0.66;
}
.top-tool-btn:hover:not(.cn-btn-disabled) {
border: 1px solid var(--el-color-info-light-7);
background-color: var(--cn-bg-color-light);
}
.top-tool-btn:focus:not(.cn-btn-disabled), .top-tool-btn.is-focus {
background-color: var(--el-color-primary-light-9);
border: 1px solid var(--el-color-info-light-7);
i {
color: var(--el-text-color-regular);
}
}
.top-tool-btn--delete.top-tool-btn:focus:not(.cn-btn-disabled) {
background-color: var(--cn-bg-color-light);
border-color: var(--el-color-danger-light-5);
i {
color: var(--el-color-danger);
}
}
.top-tool-btn--create {
background-color: var(--el-color-business) !important;
border-color: $color-create !important;
color: $color-white;
i {
color: $color-white;
}
}
.top-tool-btn--create:hover {
background-color: var(--el-color-business-light-2) !important;
border-color: $color-create !important;
color: $color-white;
i {
color: $color-white;
}
}
.top-tool-btn--create:focus {
background-color: var(--el-color-business) !important;
border-color: $color-create !important;
color: $color-white !important;
i {
color: $color-white !important;
}
}
.top-tool-btn--create:disabled {
opacity: 0.66;
background-color: var(--el-color-business) !important;
border-color: $color-create !important;
color: $color-white;
i {
color: $color-white;
}
}
.top-tool-search {
display: flex;
width: 242px; //calc(100% - 256px);
.el-input--small {
line-height: 27px;
@@ -109,20 +29,20 @@ $color-create: var(el-color-business-dark-2);
border-radius: 2px 0 0 2px;
}
}
.top-tool-btn {
.top-tool-btn--search {
width: 28px !important;
height: 28px !important;
padding: unset !important;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0 var(--el-border-radius-small) var(--el-border-radius-small) 0 !important;
border-left: none;
border-radius: 0 2px 2px 0 !important;
}
.top-tool-btn--search:hover {
border-left: none !important;
border-radius: 0 2px 2px 0 !important;
i {
font-size: 14px;
margin-right: unset !important;
}
.top-tool-btn--search:focus {
border-left: none !important;
border-radius: 0 2px 2px 0 !important;
}
}
@@ -134,10 +54,6 @@ $color-create: var(el-color-business-dark-2);
height: 28px !important;
}
.search__btn {
border-radius: 0 2px 2px 0 !important;
}
.el-input--small {
line-height: 27px;

4
src/components/rightBox/report/ReportBox.vue
View File

@@ -243,10 +243,10 @@
</div>
</div>
<div class="right-box__footer">
<button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
<button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="business-button business-button--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
<button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
<span>{{$t('overall.save')}}</span>
</button>
</div>

4
src/components/rightBox/settings/RoleBox.vue
View File

@@ -38,10 +38,10 @@
</div>
</div>
<div class="right-box__footer">
<button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="footer__btn footer__btn--light">
<button id="asset-edit-cancel" v-cancel="{object: editRole, func: esc}" class="business-button business-button--light">
<span>{{$t('overall.cancel')}}</span>
</button>
<button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
<button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
<span>{{$t('overall.save')}}</span>
</button>
</div>

4
src/components/rightBox/settings/UserBox.vue
View File

@@ -88,10 +88,10 @@
</div>
</div>
<div class="right-box__footer">
<button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="footer__btn footer__btn--light">
<button id="asset-edit-cancel" v-cancel="{object: editObject, func: esc}" class="business-button business-button--light">
<span>{{ $t('overall.cancel') }}</span>
</button>
<button id="asset-edit-save" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
<button id="asset-edit-save" :disabled="blockOperation.save" class="business-button" @click="save">
<span>{{ $t('overall.save') }}</span>
</button>
</div>

4
src/components/table/CnDataList.vue
View File

@@ -9,8 +9,8 @@
<slot name="top-tool-left"></slot>
<div v-if="showLayout.indexOf('search') > -1" class="top-tool-search margin-r-20">
<div class="top-tool-search__display">
<el-input v-model="keyWord" size="small" @keyup.enter="onSearch"></el-input>
<button class="top-tool-btn top-tool-btn--search top-tool-btn__border" @click="onSearch">
<el-input v-model="keyWord" @keyup.enter="onSearch"></el-input>
<button class="business-button business-button--light top-tool-btn--search" @click="onSearch">
<el-icon><Search /></el-icon>
</button>
</div>

2
src/components/table/detection/GeneralSettings.vue
View File

@@ -101,7 +101,7 @@
</div>
<div class="form-setting__btn">
<el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
<button @click="onContinue" class="business-button">{{ $t('detection.create.continue') }}</button>
</div>
</div>
</template>

2
src/components/table/detection/RuleDefinition.vue
View File

@@ -208,7 +208,7 @@
</div>
<div class="form-setting__btn">
<el-button @click="onContinue">{{ $t('detection.create.continue') }}</el-button>
<button @click="onContinue" class="business-button">{{ $t('detection.create.continue') }}</button>
</div>
</div>
</template>

3
src/views/administration/Appearance.vue
View File

@@ -46,9 +46,8 @@
</el-form>
<div class="edit-appearance-base__footer">
<button
:class="{'footer__btn--disabled': blockOperation.save}"
:disabled="blockOperation.save"
class="footer__btn footer__btn-position"
class="business-button"
@click="save"
v-if="hasPermission('editAppearence')"
>

4
src/views/administration/License.vue
View File

@@ -19,7 +19,7 @@
</el-form-item>
<el-form-item :label="`${$t('license.licenseFile')}：`">
<div class="license-file">
<button class="license__btn margin-r-20" @click.prevent="downloadFile">
<button class="business-button margin-r-20" @click.prevent="downloadFile">
<i class="cn-icon-download1 cn-icon margin-r-6"></i><span>{{ $t('license.download') }}</span>
</button>
<el-upload :action="`${baseUrl}sys/license/upload`"
@@ -34,7 +34,7 @@
:on-change="fileChange"
:on-success="uploadSuccess"
:on-error="uploadError">
<button class="license__btn" @click.prevent="">
<button class="business-button" @click.prevent="">
<i class="cn-icon-upload1 cn-icon margin-r-6"></i><span>{{ $t('license.upload') }}</span>
</button>
</el-upload>

8
src/views/administration/Roles.vue
View File

@@ -10,24 +10,22 @@
@search="search"
>
<template v-slot:top-tool-left>
<button id="roles-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
<button id="roles-add" class="business-button margin-r-10"
v-if="hasPermission('createRole')"
@click="add">
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{ $t('overall.create') }}</span>
</button>
<button id="roles-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
<button id="roles-edit" class="business-button business-button--light margin-r-10" :disabled="disableEdit"
v-if="hasPermission('editRole')"
@click="edit">
<i class="cn-icon-edit cn-icon"></i>
<span>{{ $t('overall.edit') }}</span>
</button>
<button id="roles-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete" v-if="hasPermission('deleteRole')" @click="delBatch">
<button id="roles-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete" v-if="hasPermission('deleteRole')" @click="delBatch">
<i class="cn-icon-delete cn-icon"></i>
<span>{{ $t('overall.delete') }}</span>
</button>
<delete-button id="role-list-batch-delete" :api="url" :delete-objs="batchDeleteObjs" @after="getTableData" @before="delFlag=true"></delete-button>
</template>
<template v-slot:default>
<loading :loading="loading"></loading>

6
src/views/administration/User.vue
View File

@@ -10,19 +10,19 @@
@search="search"
>
<template #top-tool-left>
<button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
<button id="account-add" class="business-button margin-r-10"
v-if="hasPermission('createUser')"
@click="add">
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{ $t('overall.create') }}</span>
</button>
<button id="account-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
<button id="account-edit" class="business-button business-button--light margin-r-10" :disabled="disableEdit"
v-if="hasPermission('editUser')"
@click="editSelectRecord">
<i class="cn-icon-edit cn-icon"></i>
<span>{{ $t('overall.edit') }}</span>
</button>
<button id="account-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
<button id="account-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete"
v-if="hasPermission('deleteUser')"
@click="delBatch">
<i class="cn-icon-delete cn-icon"></i>

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

@@ -144,10 +144,8 @@
<div class="policy-form__footer">
<div class="policy-form__footer__btn">
<div class="btn1">
<el-button @click="cancel">{{ $t('overall.cancel') }}</el-button>
</div>
<el-button @click="createPolicy">{{ $t('overall.save') }}</el-button>
<button class="business-button business-button--light" @click="cancel">{{ $t('overall.cancel') }}</button>
<button class="business-button" @click="createPolicy">{{ $t('overall.save') }}</button>
</div>
</div>
</div>

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

@@ -2,10 +2,10 @@
<div>
<div class="top-tools__left">
<button
id="knowledge-base-add"
id="policy-base-add"
v-if="hasPermission('createDetectionPolicy')"
:title="$t('knowledgeBase.createKnowledgeBase')"
class="top-tool-btn margin-r-10 top-tool-btn--create btn__width"
class="business-button margin-r-10"
@click="onCreate">
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{ $t('overall.create') }}</span>
@@ -16,7 +16,7 @@
v-if="hasPermission('editDetectionPolicy')"
id="knowledge-base-edit"
:title="$t('knowledgeBase.editKnowledgeBase')"
class="top-tool-btn margin-r-10 btn__width"
class="business-button business-button--light margin-r-10"
@click="onEdit">
<i class="cn-icon-edit cn-icon" ></i>
<span>{{$t('overall.edit')}}</span>
@@ -27,7 +27,7 @@
v-if="hasPermission('deleteDetectionPolicy')"
id="knowledge-base-delete"
:title="$t('knowledgeBase.deleteKnowledgeBase')"
class="top-tool-btn margin-r-10 btn__width"
class="business-button business-button--light margin-r-10"
@click="onDelete">
<i class="cn-icon-delete cn-icon"></i>
<span>{{ $t('overall.delete') }}</span>
@@ -36,7 +36,7 @@
<div class="top-tool-search margin-l-10">
<el-input v-model="keyWord" size="small" class="search__input" @keyup.enter="onSearch"></el-input>
<button
class="top-tool-btn top-tool-btn--search search__btn"
class="business-button business-button--light top-tool-btn--search"
@click="onSearch">
<el-icon><Search /></el-icon>
</button>

6
src/views/report/Report.vue
View File

@@ -23,19 +23,19 @@
@search="search"
>
<template #top-tool-left>
<button id="account-add" class="top-tool-btn margin-r-10 top-tool-btn--create"
<button id="account-add" class="business-button margin-r-10"
v-if="hasPermission('createReport')"
@click="add">
<i class="cn-icon-xinjian cn-icon"></i>
<span>{{$t('overall.create')}}</span>
</button>
<button id="report-edit" class="top-tool-btn margin-r-10" :disabled="disableEdit"
<button id="report-edit" class="business-button business-button--light margin-r-10" :disabled="disableEdit"
v-if="hasPermission('editReport')"
@click="editReport">
<i class="cn-icon-edit cn-icon"></i>
<span>{{$t('overall.edit')}}</span>
</button>
<button id="report-delete" class="top-tool-btn margin-r-10" :disabled="disableDelete"
<button id="report-delete" class="business-button business-button--light margin-r-10" :disabled="disableDelete"
v-if="hasPermission('deleteReport')"
@click="delBatch">
<i class="cn-icon-delete cn-icon"></i>

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

@@ -33,7 +33,7 @@
</button>
<div class="top-tool-search margin-l-10" >
<el-input v-model="keyWord" size="small" @keyup.enter="onSearch"></el-input>
<button class="top-tool-btn top-tool-btn--search" style="border-radius: 0 2px 2px 0 !important;" @click="onSearch">
<button class="top-tool-btn top-tool-btn--search" @click="onSearch">
<el-icon><Search /></el-icon>
<!--<i class="el-icon-search"></i>-->
</button>