From 7399b5eb2c364b896af1c755422e829b8b886898 Mon Sep 17 00:00:00 2001 From: junjie Date: Thu, 24 Jun 2021 14:30:02 +0800 Subject: [PATCH 1/8] =?UTF-8?q?fix:frontend=20css=E7=BC=A9=E8=BF=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/styles/common/mixins.scss | 25 ++-- frontend/src/styles/index.scss | 141 +++++++++--------- frontend/src/styles/mixin.scss | 10 +- frontend/src/styles/sidebar.scss | 2 +- frontend/src/styles/topbar.scss | 198 ++++++++++++------------- 5 files changed, 182 insertions(+), 194 deletions(-) diff --git a/frontend/src/styles/common/mixins.scss b/frontend/src/styles/common/mixins.scss index 91ed5a95f8..8cb316fb91 100644 --- a/frontend/src/styles/common/mixins.scss +++ b/frontend/src/styles/common/mixins.scss @@ -1,16 +1,15 @@ @mixin flex-row($justify: flex-start, $align: stretch) { - display: flex; - @if $justify != flex-start { - justify-content: $justify; - } - @if $align != stretch { - align-items: $align; - } + display: flex; + @if $justify != flex-start { + justify-content: $justify; } - - @mixin variant($color, $background-color, $border-color) { - color: $color; - background-color: $background-color; - border-color: $border-color; + @if $align != stretch { + align-items: $align; } - \ No newline at end of file +} + +@mixin variant($color, $background-color, $border-color) { + color: $color; + background-color: $background-color; + border-color: $border-color; +} diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss index 36c8250e6d..0301675a23 100644 --- a/frontend/src/styles/index.scss +++ b/frontend/src/styles/index.scss @@ -73,34 +73,32 @@ div:focus { } .de-dialog { - width: 30% !important; + width: 30% !important; - .el-dialog__header{ - background-color: #f4f4f5; - padding: 10px 20px !important; - } - .el-dialog__body{ - padding: 1px 20px !important; - - } + .el-dialog__header{ + background-color: #f4f4f5; + padding: 10px 20px !important; + } + .el-dialog__body{ + padding: 1px 20px !important; + } } .de-filter-dialog { - min-width: 500px !important; - width: 50% !important; + min-width: 500px !important; + width: 50% !important; - .el-dialog__header{ - // background-color: #f4f4f5; - padding: 10px 20px !important; - - .el-dialog__headerbtn { - top: 15px !important; - } - } - .el-dialog__body{ - padding: 1px 15px !important; + .el-dialog__header{ + // background-color: #f4f4f5; + padding: 10px 20px !important; + .el-dialog__headerbtn { + top: 15px !important; } + } + .el-dialog__body{ + padding: 1px 15px !important; + } } .de-style-dialog { @@ -117,7 +115,6 @@ div:focus { } .el-dialog__body{ padding: 1px 15px !important; - } } @@ -129,7 +126,6 @@ div:focus { .el-dialog__header{ display:none!important; - } .el-dialog__body{ padding: 0px!important; @@ -138,79 +134,74 @@ div:focus { } .de-search-header { - .el-tabs__header{ - display: none !important;; - } + .el-tabs__header{ + display: none !important;; + } } .de-input{ - margin-bottom: 14px; - margin-top: 10px; - .el-input{ - .el-input__inner { - line-height: 30px !important; - height: 30px !important; - border-right: none; - - } + margin-bottom: 14px; + margin-top: 10px; + .el-input{ + .el-input__inner { + line-height: 30px !important; + height: 30px !important; + border-right: none; } - .el-input__inner:focus{ - border-color: #E6E6E6 !important; - } - .el-input-group__append { - background-color: #ffffff; - } - + } + .el-input__inner:focus{ + border-color: #E6E6E6 !important; + } + .el-input-group__append { + background-color: #ffffff; + } } .filter-card-class { - width: 100%; - .el-card__header { - padding: 5px 0 !important; - border-bottom: none !important; - } + width: 100%; + .el-card__header { + padding: 5px 0 !important; + border-bottom: none !important; + } - .el-card__body { - padding: 10px; - } + .el-card__body { + padding: 10px; + } } .real-input { - - .el-input__inner { - height: 25px !important; - border: none !important; - } + .el-input__inner { + height: 25px !important; + border: none !important; + } } .de-filter-data-table { - .el-table__body-wrapper >table>{ - tbody { - .el-table__row { - :hover { - cursor: pointer; - } - td { - border: none !important; - } - } - + .el-table__body-wrapper >table>{ + tbody { + .el-table__row { + :hover { + cursor: pointer; } - + td { + border: none !important; + } + } } + } } .de-filter-data-table::before { - height: 0px !important; + height: 0px !important; } .custom-component-class { - width: 100%; - div.el-input-group__append { - width: 10% !important; - } - div { - width: 100% !important; - } + width: 100%; + div.el-input-group__append { + width: 10% !important; + } + div { + width: 100% !important; + } } %field-icon{ diff --git a/frontend/src/styles/mixin.scss b/frontend/src/styles/mixin.scss index a02e67210f..8c6cd60a6c 100644 --- a/frontend/src/styles/mixin.scss +++ b/frontend/src/styles/mixin.scss @@ -38,8 +38,8 @@ } @mixin variant($color, $background-color, $border-color) { - color: $color; - background-color: $background-color; - border-color: $border-color; - } - + color: $color; + background-color: $background-color; + border-color: $border-color; +} + diff --git a/frontend/src/styles/sidebar.scss b/frontend/src/styles/sidebar.scss index b8762fc8ed..6f5fdcafab 100644 --- a/frontend/src/styles/sidebar.scss +++ b/frontend/src/styles/sidebar.scss @@ -15,7 +15,7 @@ transition: width 0.28s; // width: $sideBarWidth !important; background-color: $menuBg; - // width: 260px; + // width: 260px; height: $contentHeight; position: fixed; font-size: 0px; diff --git a/frontend/src/styles/topbar.scss b/frontend/src/styles/topbar.scss index fbe970c7bf..da842372c0 100644 --- a/frontend/src/styles/topbar.scss +++ b/frontend/src/styles/topbar.scss @@ -1,118 +1,116 @@ .top-nav { - // margin-left: $sideBarWidth; - width: 100%; - // background-color: #304156; - // background-color: $--color-primary; - position: fixed; - top: 0; - left: 0; - z-index: 1001; - overflow: hidden; - border-bottom: 1px solid #DCDFE6; + // margin-left: $sideBarWidth; + width: 100%; + // background-color: #304156; + // background-color: $--color-primary; + position: fixed; + top: 0; + left: 0; + z-index: 1001; + overflow: hidden; + border-bottom: 1px solid #DCDFE6; - .log { - padding: 0 16px; - line-height: 56px; - height: 56px; - font-size: 24px; - font-weight: bold; - // color: rgb(191, 203, 217); - color: rgba(255,255,255,0.87); - float: left; - img{ - width: auto; - max-height: 45px; - } + .log { + padding: 0 16px; + line-height: 56px; + height: 56px; + font-size: 24px; + font-weight: bold; + // color: rgb(191, 203, 217); + color: rgba(255,255,255,0.87); + float: left; + img{ + width: auto; + max-height: 45px; } - .el-menu { - float: left; - border: none!important; - // background-color: #304156; + } + .el-menu { + float: left; + border: none!important; + // background-color: #304156; // background-color: $--color-primary; - .nav-item { - display: inline-block; - .el-menu-item:not(.is-active) { - // color: rgb(191, 203, 217); - color: $menuText; - &:hover { - background-color: $menuHover !important; - // color: $subMenuActiveText !important; - } - &:focus { - background-color: $subMenuHover !important; - color: $subMenuActiveText !important; - } - + .nav-item { + display: inline-block; + .el-menu-item:not(.is-active) { + // color: rgb(191, 203, 217); + color: $menuText; + &:hover { + background-color: $menuHover !important; + // color: $subMenuActiveText !important; } - .is-active { - background-color: $subMenuHover !important; - color: $subMenuActiveText !important; + &:focus { + background-color: $subMenuHover !important; + color: $subMenuActiveText !important; + } + + } + .is-active { + background-color: $subMenuHover !important; + color: $subMenuActiveText !important; + } + } + } + + .right-menu { + float: right; + height: 56px; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + + &:focus { + outline: none; + } + + .right-menu-item { + display: inline-block; + padding: 10px 8px; + height: 100%; + font-size: 18px; + // color: #5a5e66; + color: #606266; + vertical-align: text-bottom; + + &.hover-effect { + cursor: pointer; + transition: background .3s; + + &:hover { + background-color: rgba(0, 0, 0, .025) } } } - .right-menu { - float: right; - height: 56px; - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - - &:focus { - outline: none; - } - - .right-menu-item { - display: inline-block; - padding: 10px 8px; - height: 100%; - font-size: 18px; - // color: #5a5e66; - color: #606266; - vertical-align: text-bottom; - - &.hover-effect { + .avatar-container { + margin-right: 30px; + .avatar-wrapper { + margin-top: 5px; + position: relative; + .user-avatar { cursor: pointer; - transition: background .3s; - - &:hover { - background-color: rgba(0, 0, 0, .025) + width: 40px; + height: 40px; + border-radius: 10px; + } + .de-user-avatar { + cursor: pointer; + height: 40px; + border-radius: 10px; + span { + color: #ffffff; } } - } - .avatar-container { - margin-right: 30px; - - .avatar-wrapper { - margin-top: 5px; - position: relative; - - .user-avatar { - cursor: pointer; - width: 40px; - height: 40px; - border-radius: 10px; - } - .de-user-avatar { - cursor: pointer; - height: 40px; - border-radius: 10px; - span { - color: #ffffff; - } - } - - .el-icon-caret-bottom { - cursor: pointer; - position: absolute; - right: -20px; - top: 25px; - font-size: 12px; - } + .el-icon-caret-bottom { + cursor: pointer; + position: absolute; + right: -20px; + top: 25px; + font-size: 12px; } } } } +} From 74006adc20f3bbc94b0f7cd7e873bb501545efb8 Mon Sep 17 00:00:00 2001 From: fit2cloud-chenyw Date: Thu, 24 Jun 2021 14:31:01 +0800 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=BF=BD?= =?UTF-8?q?=E7=95=A5eslient=E6=89=AB=E6=8F=8F=E6=B3=A8=E9=87=8A?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/DeDrag/index.vue | 6 ++++++ .../business/condition-table/DeComplexInput.vue | 2 ++ .../business/condition-table/DeComplexOperator.vue | 3 +++ .../src/components/canvas/components/Editor/Area.vue | 9 ++++++--- .../src/components/canvas/components/Editor/Grid.vue | 1 + .../src/components/canvas/custom-component/Group.vue | 1 + .../src/components/canvas/custom-component/Picture.vue | 1 + .../src/components/canvas/custom-component/RectShape.vue | 1 + .../src/components/canvas/custom-component/VText.vue | 8 +++++--- frontend/src/components/canvas/index.vue | 6 ++++-- frontend/src/components/canvas/store/compose.js | 2 +- frontend/src/components/canvas/utils/shortcutKey.js | 8 ++++---- frontend/src/components/canvas/utils/style.js | 2 +- frontend/src/directive/DataPermission/index.js | 2 ++ frontend/src/link/link-router.js | 3 +-- frontend/src/utils/index.js | 1 + frontend/src/views/chart/chart/util.js | 1 + 17 files changed, 41 insertions(+), 16 deletions(-) diff --git a/frontend/src/components/DeDrag/index.vue b/frontend/src/components/DeDrag/index.vue index a1721d5884..51c9a25cd5 100644 --- a/frontend/src/components/DeDrag/index.vue +++ b/frontend/src/components/DeDrag/index.vue @@ -911,6 +911,7 @@ export default { }, // 外部传参改动x moveHorizontally(val) { + // eslint-disable-next-line no-unused-vars const [deltaX, _] = snapToGrid(this.grid, val, this.top, this.scale) const left = restrictToBounds(deltaX, this.bounds.minLeft, this.bounds.maxLeft) this.left = left @@ -918,6 +919,7 @@ export default { }, // 外部传参改动y moveVertically(val) { + // eslint-disable-next-line no-unused-vars const [_, deltaY] = snapToGrid(this.grid, this.left, val, this.scale) const top = restrictToBounds(deltaY, this.bounds.minTop, this.bounds.maxTop) this.top = top @@ -926,6 +928,7 @@ export default { // 控制柄移动 handleResize(e) { const handle = this.handle + // eslint-disable-next-line no-unused-vars const scaleRatio = this.scaleRatio const { TL, TR, BL, BR } = this let { x: mouseX, y: mouseY } = this.getMouseCoordinate(e) @@ -1085,6 +1088,7 @@ export default { changeWidth(val) { // console.log('parentWidth', this.parentWidth) // console.log('parentHeight', this.parentHeight) + // eslint-disable-next-line no-unused-vars const [newWidth, _] = snapToGrid(this.grid, val, 0, this.scale) // const right = restrictToBounds(this.parentWidth - newWidth - this.left, this.bounds.minRight, this.bounds.maxRight) // private 将 this.bounds.minRight 设置为0 @@ -1102,6 +1106,7 @@ export default { this.height = height }, changeHeight(val) { + // eslint-disable-next-line no-unused-vars const [_, newHeight] = snapToGrid(this.grid, 0, val, this.scale) // const bottom = restrictToBounds(this.parentHeight - newHeight - this.top, this.bounds.minBottom, this.bounds.maxBottom) // private 将 this.bounds.minBottom 设置为0 @@ -1418,6 +1423,7 @@ export default { }, // 修复 正则获取left与top formatTransformVal(string) { + // eslint-disable-next-line prefer-const let [left, top, rotate = 0] = string.match(/[\d|\.]+/g) if (top === undefined) top = 0 return [Number(left), Number(top), rotate] diff --git a/frontend/src/components/business/condition-table/DeComplexInput.vue b/frontend/src/components/business/condition-table/DeComplexInput.vue index 9ff39ac3bf..8108de7c9f 100644 --- a/frontend/src/components/business/condition-table/DeComplexInput.vue +++ b/frontend/src/components/business/condition-table/DeComplexInput.vue @@ -14,7 +14,9 @@ export default { components: { DeComplexOperator }, // mixins: [mixins], props: { + // eslint-disable-next-line vue/require-default-prop field: String, + // eslint-disable-next-line vue/require-default-prop label: String, defaultOperator: { type: String, diff --git a/frontend/src/components/business/condition-table/DeComplexOperator.vue b/frontend/src/components/business/condition-table/DeComplexOperator.vue index 1feec41b1d..e0b57b5f22 100644 --- a/frontend/src/components/business/condition-table/DeComplexOperator.vue +++ b/frontend/src/components/business/condition-table/DeComplexOperator.vue @@ -30,8 +30,11 @@ export default { event: 'change' }, props: { + // eslint-disable-next-line vue/require-default-prop label: String, + // eslint-disable-next-line vue/require-default-prop operator: String, + // eslint-disable-next-line vue/require-default-prop operators: Array }, data() { diff --git a/frontend/src/components/canvas/components/Editor/Area.vue b/frontend/src/components/canvas/components/Editor/Area.vue index c9d5efb1a7..53757c6a88 100644 --- a/frontend/src/components/canvas/components/Editor/Area.vue +++ b/frontend/src/components/canvas/components/Editor/Area.vue @@ -14,13 +14,16 @@ export default { props: { start: { - type: Object + type: Object, + default: null }, width: { - type: Number + type: Number, + default: null }, height: { - type: Number + type: Number, + default: null } } } diff --git a/frontend/src/components/canvas/components/Editor/Grid.vue b/frontend/src/components/canvas/components/Editor/Grid.vue index a12b6d9313..b36818f34d 100644 --- a/frontend/src/components/canvas/components/Editor/Grid.vue +++ b/frontend/src/components/canvas/components/Editor/Grid.vue @@ -27,6 +27,7 @@ export default { props: { + // eslint-disable-next-line vue/require-default-prop matrixStyle: { type: Object } diff --git a/frontend/src/components/canvas/custom-component/Group.vue b/frontend/src/components/canvas/custom-component/Group.vue index 96fc1d7688..ada3e0b8d9 100644 --- a/frontend/src/components/canvas/custom-component/Group.vue +++ b/frontend/src/components/canvas/custom-component/Group.vue @@ -25,6 +25,7 @@ export default { type: Array, default: () => [] }, + // eslint-disable-next-line vue/require-default-prop element: { type: Object } diff --git a/frontend/src/components/canvas/custom-component/Picture.vue b/frontend/src/components/canvas/custom-component/Picture.vue index a30b20d78c..4a05a88fe6 100644 --- a/frontend/src/components/canvas/custom-component/Picture.vue +++ b/frontend/src/components/canvas/custom-component/Picture.vue @@ -7,6 +7,7 @@