CN-1551 feat: 升级element-ui版本的样式修改

This commit is contained in:
刘洪洪
2024-02-18 09:58:45 +08:00
parent b02d8ecb8b
commit 22c164d2f5
27 changed files with 303 additions and 54 deletions

View File

@@ -8,10 +8,10 @@
}
.el-table--border::before, .el-table__border-left-patch {
//width: 0 !important;
width: 0 !important;
}
.el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
//height: 0 !important;
height: 0 !important;
}
.el-popper.is-pure {
@@ -66,3 +66,25 @@
.el-popover.el-popper {
padding: 0 !important;
}
.my-header-cell-class .el-checkbox__input{
display: none;
}
.el-dialog {
padding: 0 !important;
}
.el-switch.is-checked .el-switch__core {
background-color: $--color-primary !important;
}
.el-date-table td.end-date .el-date-table-cell__text, .el-date-table td.start-date .el-date-table-cell__text {
background-color: $--color-primary !important;
}
.el-date-table td.available:hover {
color: $--color-primary !important;
}
.el-picker__popper.el-popper {
margin-top: 8px;
}
//.el-button:hover {
// color: $--color-primary !important;
// border-color: $--color-primary !important;
//}

View File

@@ -64,6 +64,9 @@
}
}
}
}
.container__form {
}
.el-form-item__content {
.input-box {
@@ -136,6 +139,9 @@
.el-input__inner:focus {
border-color: darken($--right-box-border-color, 20%);
}
.el-form-item__label {
padding-bottom: 2px;
}
}
.el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus {
border-color: #F56C6C
@@ -301,4 +307,24 @@
.el-form-item__content .el-autocomplete .el-input-group {
vertical-align: unset;
}
.el-input__wrapper {
border-radius: 2px;
height: 32px !important;
line-height: 32px !important;
//box-shadow: 0 0 0 1px var(--el-input-border-color,var(--el-border-color)) inset;
box-shadow: 0 0 0 1px #e7eaed inset;
}
.el-input__inner, .el-textarea__inner {
border: none !important;
}
.el-select__wrapper {
height: 32px;
line-height: 32px;
}
.el-switch.is-checked .el-switch__core {
background-color: $--color-primary;
}
.el-textarea__inner {
font-size: 12px;
}
}

View File

@@ -55,6 +55,10 @@
.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;
}
}
.top-tool-right {

View File

@@ -144,6 +144,9 @@
background: $--select-bg-color-hover-1;
}
}
.el-range-editor.el-input__wrapper{
opacity: 0;
}
}
.date-range-panel-content-right {

View File

@@ -4,6 +4,7 @@
.el-checkbox {
margin-right: 24px;
line-height: 28px;
margin-top: -2px;
}
.el-checkbox-group {
line-height: 28px;
@@ -108,10 +109,40 @@
height: 32px;
margin: 10px 0 0 10px;
}
.el-input__wrapper {
height: 32px !important;
padding: 1px 11px !important;
border-radius: 2px;
}
.el-input__inner {
padding: 0;
}
.el-form-item__content {
line-height: 40px !important;
}
}
.el-input__inner {
border: none;
}
.el-select--small .el-select__wrapper {
padding: 0 10px;
min-height: 32px !important;
line-height: 32px !important;
margin-top: -2px;
border-radius: 2px;
}
}
.right-box__select--param {
.el-input__prefix {
//.el-select--small .el-select__prefix {
// left: 0;
// background-color: #f5f7fa;
// color: #999;
// padding: 0 1.07143rem;
// border: 1px solid #dcdfe6;
// border-radius: 2px 0 0 2px;
//}
.el-select__prefix, .el-input__prefix {
left: 0;
background-color: #f5f7fa;
color: #999;
@@ -119,6 +150,9 @@
border: 1px solid #dcdfe6;
border-radius: 2px 0 0 2px;
}
.el-select__wrapper {
padding-left: 0 !important;
}
}
}
.my-form-item .el-form-item__content {

View File

@@ -10,6 +10,21 @@
display: flex;
flex-direction: column;
height: 100%;
.el-form-item {
margin-bottom: 27px;
}
.el-form-item__content {
width: 600px;
.el-select__wrapper {
min-height: 32px !important;
line-height: 32px;
padding: 0 10px 0 16px;
font-size: 13px;
}
}
.el-form--default.el-form--label-top .el-form-item .el-form-item__label {
margin-bottom: 4px;
}
.el-input {
width:600px;
}
@@ -60,3 +75,6 @@
}
}
}
.el-popper.is-pure {
margin-top: 0;
}

View File

@@ -129,6 +129,10 @@
.el-input--small {
line-height: 27px;
.el-input__wrapper {
height: 28px !important;
border-radius: 2px 0 0 2px !important;
}
.el-input__inner {
height: 28px;

View File

@@ -78,11 +78,37 @@
color: #1b2e3b;
background: #ebeef5;
}
.el-range-editor--small.el-input__wrapper {
height: 32px;
line-height: 32px;
}
.cn-detection__footer {
text-align: center;
display: flex;
justify-content: center;
.el-pagination__jump {
margin-left: 3px;
}
.el-pagination__goto {
display: none;
}
.el-input--small {
width: 46px !important;
.el-input__wrapper {
height: 22px;
}
}
.el-pagination--small {
.btn-prev {
margin-right: 10px;
}
.btn-next {
margin-left: 10px;
}
&span {
color: $--color-text-primary;
}
}
}
}
.block.drop-down-time {
@@ -176,6 +202,12 @@
}
}
}
.el-table__border-left-patch, .el-table--border::before {
width: 0;
}
.el-table--border .el-table__inner-wrapper::after, .el-table__inner-wrapper::before {
height: 0;
}
}
}
.table-operation-all {

View File

@@ -169,6 +169,8 @@
align-items: center;
.card-title-name {
width:100%;
height: 19.2px;
line-height: 19.2px;
overflow: hidden; //超出的文本隐藏
text-overflow: ellipsis; //溢出用省略号显示
white-space:nowrap;
@@ -996,6 +998,10 @@
padding-left: 20px;
overflow: auto;
.el-form--label-top .el-form-item .el-form-item__label {
margin-bottom: 3px !important;
}
.enable-form__mt {
.el-form {
margin-top:6px;
@@ -1176,6 +1182,7 @@
}
.el-textarea__inner {
padding-left: 8px;
font-size: 12px;
}
.form-select__disable {
@@ -1188,6 +1195,13 @@
.form-select__enable {
width: 100%;
.el-select__wrapper {
//padding-left: 22px !important;
.el-select__inner {
background-color: #521919 !important;
padding-left: 22px !important;
}
}
.el-input__inner {
background-color: white !important;
padding-left: 22px !important;
@@ -1899,6 +1913,7 @@
padding-top:0px;
padding-right:30px;
padding-left:30px;
padding-bottom:30px;
.dialog-message {
padding-left:0px !important;
padding-right:0px !important;
@@ -1920,12 +1935,21 @@
&.update-dialog__table--system-user {
height: calc(100% - 139px);
}
&.el-table .el-table__cell {
padding: 12px 0 !important;
}
&.el-table .el-table__row .el-table__cell {
padding: 8px 0 !important;
}
}
.update-knowledge-form {
.el-upload {
width:100%;
}
.form-input {
.el-input__wrapper {
padding: 1px 16px !important;
}
.el-input__inner{
padding-right: 50px !important;
font-size: 14px;
@@ -1936,7 +1960,8 @@
border: 1px solid rgba(222,222,222,1);
box-shadow: 0px 2px 4px 0px rgba(51,51,51,0.02);
border-radius: 2px;
width:100%;
//width:100%;
width: 1020px;
height:28px;
min-height:28px !important;
color: #575757;
@@ -1962,6 +1987,16 @@
}
.knowledge-remark {
margin-bottom:0px !important;
.el-textarea__inner {
font-size: 12px;
padding: 5px 15px;
}
}
.el-form--label-top .el-form-item .el-form-item__label {
margin-bottom: 0 !important;
}
.el-form--default.el-form--label-top .el-form-item .el-form-item__label {
line-height: 14px;
}
}
.dialog-footer {

View File

@@ -43,4 +43,7 @@
-webkit-line-clamp: 2; // 超出多少行
-webkit-box-orient: vertical;
}
.cn-table .el-table:not(.chart-table) td {
padding: 8px 0 !important;
}
}

View File

@@ -12,10 +12,10 @@
- // $arrow-selector: #{& + '__arrow'};
改为 $arrow-selector: '.el-popper__arrow';
### 20240118element-plus升级
### 20240118__element-plus升级
#### 变动事项
- elemen-plus由1.0.2-beta.71升级至2.5.1旧版本是将element-plus源文件放到theme/src中进行部分修改使用现在用该方直接使用element-plus组件部分组件有差异改动对比界面进行调整并记录在xxx.scss
- elemen-plus由1.0.2-beta.71升级至2.5.1旧版本是将element-plus源文件放到theme/src中进行部分修改使用现在用该方直接使用element-plus组件部分组件有差异改动对比界面进行调整并记录在cover-element.scss
- 弃用之前的主题写法改为官网的主题切换方法。删除body上的class在html上添加class="dark"。默认明亮主题light暗黑主题dark默认引入theme-light.scss样式文件暗黑主题theme-dark.scss样式文件
- 如需添加暗黑样式先在theme-light.scss添加唯一样式名再到theme-dark中添加同名样式。如在light中添加字体颜色$--text-color-1: #353636;则需要在dark中添加$--text-color-1: #d8d8d8;
- header.vue的第四级面包屑导航栏以及NetworkOverviewTabs.vue第一列搜索的popover。原结构的popover被上一层div包裹但在html中解析成两个div原来的popper-class需要提出来不要在原div的class下否则样式错乱
@@ -28,4 +28,6 @@
- icon图标老版使用<i class="el-icon-search" />。新版则是svg文件需要单独引入封装成component的格式使用时<el-icon><Search /></el-icon>
- select选择器新版被el-select__wrapper的div包裹与旧版顺序不同。
- * input和select的右侧图标和maxlength间距新版比旧版略大
*
- drawer抽屉在header.vue中遇到custom-class="cn-menu"渲染后class中没有cn-menu也许是按需引入导致的额外标注
- message-box弹窗新版在旧版的el-message-box的外层包裹了一层父div el-overlay-message-box导致原样式会错乱
- dialog: custom在2.4版本后被移除使用class替代插槽中的title也在2.4版本后移除使用header替代

View File

@@ -135,6 +135,7 @@
direction="ttb"
custom-class="cn-menu"
modal-class="cn-menu-modal"
class="cn-menu"
:with-header="false"
:show-close="false"
>

View File

@@ -27,8 +27,8 @@
<el-tree :data="menus" :default-expand-all="expandAllFlag" check-strictly="true" :props="{label:labelFormatter}" @check-change="selectChange" class="tree-border" node-key="id" ref="menuTree" show-checkbox id="role-box-input-menus">
<template #default="{ data }">
<span>
<el-icon v-if="data.type === 1"><Menu /></el-icon>
<el-icon v-if="data.type === 2"><Edit /></el-icon>
<el-icon v-if="data.type === '1'"><Menu /></el-icon>
<el-icon v-if="data.type === '2'"><Edit /></el-icon>
</span>
{{$t(data.i18n)}}
</template>

View File

@@ -157,3 +157,9 @@ export default {
}
}
</script>
<style lang="scss">
.list-page .cn-table .el-table:not(.chart-table) td {
padding: 8px 0;
}
</style>

View File

@@ -3,8 +3,9 @@
<el-table
id="reportTable"
ref="dataTable"
:header-cell-class-name="headerCellClass"
:data="tableData"
:height="height"
height="100%"
:expand-row-keys="expandedIds"
border
empty-text=" "
@@ -213,7 +214,7 @@ import Loading from '@/components/common/Loading'
import axios from 'axios'
import { api } from '@/utils/api'
import { storageKey, report } from '@/utils/constants'
import { urlParamsHandler, overwriteUrl } from '@/utils/tools'
import { urlParamsHandler, overwriteUrl, headerCellClass } from '@/utils/tools'
import { ref } from 'vue'
import { dateFormatToUTC, getNowTime } from '@/utils/date-util'
import chartDetectionPagination from '@/views/charts/charts/chartDetectionPagination'
@@ -479,6 +480,7 @@ export default {
})
},
methods: {
headerCellClass,
/**
* 进入页面判断是否需要展开表格
* 即展开表格后刷新界面,保持展开效果
@@ -783,3 +785,9 @@ export default {
}
}
</script>
<style lang="scss">
.list-page .cn-table .el-table:not(.chart-table) td {
padding: 7.5px 0;
}
</style>

View File

@@ -32,7 +32,7 @@
<div class="center-dialog">
<el-dialog v-model="showUpdateDialog"
:destroy-on-close="true"
:custom-class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
:class="showAddUpdateDialog ? 'update-knowledge update-knowledge--upload' : 'update-knowledge'"
:before-close="beforeClose"
:after-close="handleClose">
<div class="knowledge-update__top" >
@@ -107,9 +107,8 @@
'update-dialog__table--psiphon3': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab === 'intelligenceLearning',
'update-dialog__table--system-user': updateKnowledge.source === 'cn_psiphon3_ip' && activeTab !== 'intelligenceLearning'
}"
:header-cell-style="{background:'#f5f7fa',color:'#353636',fontWeight: '400',fontSize: '12px',borderRight: 'none',borderBottom: 'none'}"
cell-style="padding:6px 0px;font-size: 12px;color: #353636;font-weight: 400;line-height: 20px;border-right:none;"
header-cell-style="padding:8px 0px;font-size: 12px;color: #353636;font-weight: 500;border-right:none;">
:cell-style="myCellStyle"
:header-cell-style="myHeaderCellStyle">
<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>
@@ -202,6 +201,7 @@
:on-error="uploadError"
:class="uploadErrorTip ? 'el-upload--error' : ''"
:accept="fileTypeLimit"
style="margin-bottom: -10px"
:auto-upload="false"
ref="knowledgeUpload"
id="knowledgeUpload"
@@ -228,7 +228,7 @@
</el-dialog>
<el-dialog v-model="showConfirmDialog"
:title="$t('overall.tips')"
custom-class="update-knowledge-tip"
class="update-knowledge-tip"
:width="480"
:before-close="handleConfirmClose">
<div class="dialog-message">{{$t('knowledge.updateTips')}}</div>
@@ -326,7 +326,27 @@
{ 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',
'font-weight': 400,
'line-height': '20px',
'border-right': 'none'
},
myHeaderCellStyle: {
padding: '8px 0px',
'font-size': '12px',
color: '#353636',
'font-weight': 500,
'border-right': 'none',
background: '#f5f7fa',
fontWeight: '400',
fontSize: '12px',
borderRight: 'none',
borderBottom: 'none'
}
}
},
setup () {

View File

@@ -1565,3 +1565,7 @@ const tagValueHandler = (value) => {
const find = tagValueLabelMapping.find(t => t.value === value)
return find ? find.name : value
}
export const headerCellClass = (row) => {
return 'my-header-cell-class'
}

View File

@@ -51,7 +51,7 @@
<button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save"
v-if="hasPermission('editAppearence')"
>
<loading size="small" :loading="blockOperation.save"></loading>
<el-loading size="small" :loading="blockOperation.save"></el-loading>
<span>{{$t('overall.save')}}</span>
</button>
</div>

View File

@@ -51,7 +51,7 @@
<el-drawer
v-model="rightBox.show"
direction="rtl"
custom-class="common-right-box"
class="common-right-box"
:size="700"
:with-header="false"
destroy-on-close>

View File

@@ -55,7 +55,7 @@
<el-drawer
v-model="rightBox.show"
direction="rtl"
custom-class="common-right-box"
class="common-right-box"
:with-header="false"
:size="700"
destroy-on-close>

View File

@@ -52,7 +52,7 @@
<el-drawer
v-model="rightBox.show"
direction="rtl"
custom-class="common-right-box"
class="common-right-box"
:size="700"
:with-header="false"
destroy-on-close>

View File

@@ -563,20 +563,6 @@ export default {
query: queryInfo
})
}).catch(() => {})
// this.$confirm(this.$t('tip.leavePage'), {
// confirmButtonText: this.$t('tip.confirm'),
// cancelButtonText: this.$t('overall.cancel'),
// message: this.$t('tip.leavePageTips'),
// title: this.$t('tip.leavePage'),
// type: 'warning',
// iconClass: 'width:0px;height:0px;',
// customClass: 'del-model'
// }).then(() => {
// this.$router.push({
// path: '/detection/policy',
// query: queryInfo
// })
// }).catch(() => {})
},
resetEditFlag () {
this.triggerObj.editFlag = true
@@ -586,7 +572,22 @@ export default {
</script>
<style lang="scss">
.el-overlay-message-box, .el-message-box {
padding: 0 !important;
}
.el-overlay-message-box {
text-align: center !important;
}
.is-message-box .el-overlay-message-box {
display: flex;
justify-content: center;
align-items: center;
}
.del-model {
&.el-message-box {
max-width: 480px !important;
}
display: flex;
flex-direction: column;
padding-bottom: 0 !important;
@@ -600,8 +601,8 @@ export default {
height: 42px;
background: #F7F7F7;
box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
padding-left: 20px;
padding-top: 14px;
padding-left: 21px;
padding-top: 10px;
padding-bottom: 14px;
.el-message-box__headerbtn {
@@ -611,7 +612,7 @@ export default {
align-items: center;
font-size: 10px;
line-height: 10px;
padding-right: 5px !important;
padding-right: 10px !important;
i {
width: 10px;
@@ -634,9 +635,9 @@ export default {
letter-spacing: 0;
line-height: 22px;
font-weight: 400;
padding-top: 8px;
padding-top: 9px;
padding-right: 20px;
padding-left: 20px;
padding-left: 21px;
.el-message-box__message {
padding-left: 0 !important;
@@ -648,8 +649,11 @@ export default {
height: 52px;
border-top: 1px solid #eee;
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
padding: 11px 0 12px !important;
padding: 13px 1px 12px 0 !important;
.el-button {
font-size: 12px;
}
.el-button--small {
padding: 8px 21px !important;
line-height: 12px;

View File

@@ -7,6 +7,7 @@
v-model="rightBox.show"
direction="rtl"
custom-class="entity-graph__detail"
class="entity-graph__detail"
:close-on-click-modal="true"
:modal="false"
:size="400"

View File

@@ -70,6 +70,7 @@
v-model="rightBox.show"
direction="rtl"
custom-class="common-right-box"
class="common-right-box"
:size="700"
:with-header="false"
destroy-on-close>

View File

@@ -244,6 +244,7 @@ import { api } from '@/utils/api'
import { regular } from '@/utils/regular'
import unitConvert from '@/utils/unit-convert'
import Loading from '@/components/common/Loading'
import { ElMessageBox } from 'element-plus'
export default {
name: 'CreateKnowledgeBase',
@@ -653,12 +654,12 @@ export default {
this.isShowUploadTips = true
const self = this
if (this.importedData.length > 0) {
this.$confirm(this.$t('tip.uploadFile'), {
ElMessageBox.confirm(this.$t('tip.uploadFile'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('overall.cancel'),
message: this.$t('tip.uploadFileTips'),
title: this.$t('tip.uploadFile'),
type: 'warning',
// type: 'warning',
iconClass: 'width:0px;height:0px;',
customClass: 'del-model'
}).then(() => {
@@ -670,6 +671,7 @@ export default {
} else {
this.isClick = true
this.isShowUploadTips = false
self.$refs.upload.submit()
self.$refs.upload.$refs.uploadRef.handleClick()
}
}
@@ -693,12 +695,12 @@ export default {
} else {
if (!this.isClick) {
if (this.importedData.length > 0) {
this.$confirm(this.$t('tip.uploadFile'), {
ElMessageBox.confirm(this.$t('tip.uploadFile'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('overall.cancel'),
message: this.$t('tip.uploadFileTips'),
title: this.$t('tip.uploadFile'),
type: 'warning',
// type: 'warning',
iconClass: 'width:0px;height:0px;',
customClass: 'del-model'
}).then(() => {
@@ -797,12 +799,12 @@ export default {
cancel () {
const self = this
if (this.isPreviewChange) {
this.$confirm(this.$t('tip.leavePage'), {
ElMessageBox.confirm(this.$t('tip.leavePage'), {
confirmButtonText: this.$t('tip.confirm'),
cancelButtonText: this.$t('overall.cancel'),
message: this.$t('tip.leavePageTips'),
title: this.$t('tip.leavePage'),
type: 'warning',
// type: 'warning',
iconClass: 'width:0px;height:0px;',
customClass: 'del-model'
}).then(() => {
@@ -1441,7 +1443,22 @@ export default {
</script>
<style lang="scss">
.el-overlay-message-box, .el-message-box {
padding: 0 !important;
}
.el-overlay-message-box {
text-align: center !important;
}
.is-message-box .el-overlay-message-box {
display: flex;
justify-content: center;
align-items: center;
}
.del-model {
&.el-message-box {
max-width: 480px !important;
}
display: flex;
flex-direction: column;
padding-bottom: 0 !important;
@@ -1455,8 +1472,8 @@ export default {
height: 42px;
background: #F7F7F7;
box-shadow: 0 1px 0 0 rgba(53, 54, 54, 0.08);
padding-left: 20px;
padding-top: 14px;
padding-left: 21px;
padding-top: 10px;
padding-bottom: 14px;
.el-message-box__headerbtn {
@@ -1466,7 +1483,7 @@ export default {
align-items: center;
font-size: 10px;
line-height: 10px;
padding-right: 5px !important;
padding-right: 10px !important;
i {
width: 10px;
@@ -1489,9 +1506,9 @@ export default {
letter-spacing: 0;
line-height: 22px;
font-weight: 400;
padding-top: 8px;
padding-top: 9px;
padding-right: 20px;
padding-left: 20px;
padding-left: 21px;
.el-message-box__message {
padding-left: 0 !important;
@@ -1503,8 +1520,11 @@ export default {
height: 52px;
border-top: 1px solid #eee;
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.07);
padding: 11px 0 12px !important;
padding: 13px 1px 12px 0;
.el-button {
font-size: 12px;
}
.el-button--small {
padding: 8px 21px !important;
line-height: 12px;

View File

@@ -68,6 +68,7 @@
:title="$t('overall.hint')"
width="480px"
custom-class="del-model-hint"
class="del-model-hint"
:before-close="handleClose">
<div class="dialog-message">{{$t('knowledge.deleteDataHint')}}</div>
<el-table v-model="delItemList"

View File

@@ -71,7 +71,7 @@ export default {
this.searchLabel = { ...this.searchLabel, ...params }
}
// this.searchLabel = { ...this.searchLabel, ...this.pageObj }
this.searchLabel = { ...this.searchLabel, jobGroup: 3 }
this.searchLabel = { ...this.searchLabel, jobGroup: 3, pageSize: -1 }
this.isNoData = false
this.toggleLoading(true)
delete this.searchLabel.total