From c91c4031701a5deccedb32818021cd7f8d38ea2d Mon Sep 17 00:00:00 2001
From: wangjiahao <1522128093@qq.com>
Date: Mon, 13 Jun 2022 13:17:52 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=8C=96=E5=9B=BE?=
=?UTF-8?q?=E6=A0=87=E5=92=8C=E4=BB=AA=E8=A1=A8=E6=9D=BF=E9=95=9C=E5=83=8F?=
=?UTF-8?q?=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../canvas/components/Editor/EditBar.vue | 2 +-
.../canvas/components/Editor/EditBarView.vue | 2 +-
.../components/canvas/components/Toolbar.vue | 104 ++++++++-----
.../src/components/canvas/store/snapshot.js | 10 +-
frontend/src/store/index.js | 2 -
frontend/src/styles/deicon/demo_index.html | 144 +++++++++++++++++-
frontend/src/styles/deicon/iconfont.css | 30 +++-
frontend/src/styles/deicon/iconfont.js | 2 +-
frontend/src/styles/deicon/iconfont.json | 42 +++++
frontend/src/styles/deicon/iconfont.ttf | Bin 25516 -> 26788 bytes
frontend/src/styles/deicon/iconfont.woff | Bin 15768 -> 16588 bytes
frontend/src/styles/deicon/iconfont.woff2 | Bin 13332 -> 14040 bytes
frontend/src/views/panel/edit/index.vue | 2 +
13 files changed, 288 insertions(+), 52 deletions(-)
diff --git a/frontend/src/components/canvas/components/Editor/EditBar.vue b/frontend/src/components/canvas/components/Editor/EditBar.vue
index 7241c5b53c..7194ec93af 100644
--- a/frontend/src/components/canvas/components/Editor/EditBar.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBar.vue
@@ -24,7 +24,7 @@
-
+
diff --git a/frontend/src/components/canvas/components/Editor/EditBarView.vue b/frontend/src/components/canvas/components/Editor/EditBarView.vue
index db57a2f0ba..4131ff84cd 100644
--- a/frontend/src/components/canvas/components/Editor/EditBarView.vue
+++ b/frontend/src/components/canvas/components/Editor/EditBarView.vue
@@ -5,7 +5,7 @@
-
+
diff --git a/frontend/src/components/canvas/components/Toolbar.vue b/frontend/src/components/canvas/components/Toolbar.vue
index c748496fa3..e09281d739 100644
--- a/frontend/src/components/canvas/components/Toolbar.vue
+++ b/frontend/src/components/canvas/components/Toolbar.vue
@@ -36,10 +36,10 @@
-
+
-
+
@@ -49,19 +49,24 @@
-
+
-
+
{{ $t('panel.new_element_distribution') }}
- {{ $t('panel.suspension') }}
+ {{ $t('panel.suspension') }}
@@ -72,20 +77,27 @@
-
+
{{ $t('panel.aided_grid') }}:{{ canvasStyleData.aidedDesign.showGrid?$t('panel.aided_grid_open'):$t('panel.aided_grid_close') }}
{{ $t('panel.params_setting') }}
- {{ $t('panel.clean_canvas') }}
+ {{ $t('panel.clean_canvas') }}
- {{ $t('panel.panel_style') }}
- {{ $t('panel.batch_opt') }}
+ {{ $t('panel.panel_style')
+ }}
+
+ {{
+ $t('panel.batch_opt') }}
+
{{ $t('commons.save') }}
@@ -94,7 +106,13 @@
-
+
@@ -321,8 +339,12 @@ export default {
}
const components = deepCopy(this.componentData)
components.forEach(view => {
- if (view.DetailAreaCode) { view.DetailAreaCode = null }
- if (view.filters && view.filters.length > 0) { view.filters = [] }
+ if (view.DetailAreaCode) {
+ view.DetailAreaCode = null
+ }
+ if (view.filters && view.filters.length > 0) {
+ view.filters = []
+ }
if (view.type === 'de-tabs') {
view.options.tabList && view.options.tabList.length > 0 && view.options.tabList.forEach(tab => {
if (tab.content && tab.content.filters && tab.content.filters.length > 0) {
@@ -485,6 +507,7 @@ export default {
height: 35px;
line-height: 32px;
min-width: 400px;
+
.canvas-config {
display: inline-block;
margin-left: 10px;
@@ -519,7 +542,7 @@ export default {
transition: .1s;
font-weight: 500;
padding: 5px 5px;
- font-size: 16px!important;
+ font-size: 16px !important;
border-radius: 3px;
margin-left: 10px;
@@ -537,23 +560,24 @@ export default {
}
}
- .button-show{
- background-color: #ebf2fe!important;
+ .button-show {
+ background-color: #ebf2fe !important;
}
- .button-closed{
- background-color: #ffffff!important;
+ .button-closed {
+ background-color: #ffffff !important;
+ }
+
+ > > > .el-switch__core {
+ width: 30px !important;
+ height: 15px;
}
- >>>.el-switch__core{
- width:30px!important;
- height:15px;
- }
/*设置圆*/
- >>>.el-switch__core::after{
- width:14px;
- height:14px;
- margin-top:-1px;
+ > > > .el-switch__core::after {
+ width: 14px;
+ height: 14px;
+ margin-top: -1px;
margin-bottom: 2px;
}
@@ -565,36 +589,44 @@ export default {
-moz-osx-font-smoothing: grayscale;
}
- .switch-position{
+ .switch-position {
position: absolute;
top: 3px;
right: 50%;
width: 100px;
}
- .button_self{
+
+ .button_self {
margin-right: 5px;
}
- .button_self ::v-deep .el-button--mini{
+ .button_self ::v-deep .el-button--mini {
padding: 7px 7px !important;
}
- .font-active{
- font-color: #3a8ee6!important;
+
+ .font-active {
+ font-color: #3a8ee6 !important;
}
- .icon-active{
+
+ .icon-active {
color: #3a8ee6;
}
- .icon-unactivated{
+
+ .icon-unactivated {
display: none;
}
- .panel-info-area{
+
+ .panel-info-area {
position: absolute;
left: 10px;
- .text{
+
+ .text {
font-size: 16px;
color: var(--TextPrimary, #606266);
- };
- .icon-back{
+ }
+ ;
+
+ .icon-back {
font-size: 18px;
font-weight: bold;
color: var(--TextPrimary, #606266);
diff --git a/frontend/src/components/canvas/store/snapshot.js b/frontend/src/components/canvas/store/snapshot.js
index 4dcb1a7f8b..3c5937278e 100644
--- a/frontend/src/components/canvas/store/snapshot.js
+++ b/frontend/src/components/canvas/store/snapshot.js
@@ -3,8 +3,8 @@ import { deepCopy } from '@/components/canvas/utils/utils'
export default {
state: {
- snapshotData: [], // 编辑器快照数据
- snapshotStyleData: [], // 样式改变也记录快照
+ snapshotData: [{}], // 编辑器快照数据
+ snapshotStyleData: [{}], // 样式改变也记录快照
snapshotIndex: -1, // 快照索引
changeTimes: -1, // 修改次数
lastSaveSnapshotIndex: 0, // 最后保存是snapshotIndex的索引
@@ -47,9 +47,9 @@ export default {
refreshSnapshot(state) {
// console.log('refreshSnapshot')
// 刷新快照
- state.snapshotData = []
- state.snapshotStyleData = []
- state.snapshotIndex = -1
+ state.snapshotData = [deepCopy(state.componentData)]
+ state.snapshotStyleData = [deepCopy(state.canvasStyleData)]
+ state.snapshotIndex = 0
state.changeTimes = -1
state.lastSaveSnapshotIndex = 0
},
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index c6402644d5..29f0ac10fb 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -659,8 +659,6 @@ const data = {
this.commit('clearLinkageSettingInfo', false)
this.commit('resetViewEditInfo')
this.commit('initCurMultiplexingComponents')
- // 清空当前缓存,快照
- this.commit('refreshSnapshot')
state.batchOptStatus = false
// Currently selected components
state.curBatchOptComponents = []
diff --git a/frontend/src/styles/deicon/demo_index.html b/frontend/src/styles/deicon/demo_index.html
index 6c8ed8f898..5766d02025 100644
--- a/frontend/src/styles/deicon/demo_index.html
+++ b/frontend/src/styles/deicon/demo_index.html
@@ -54,6 +54,42 @@
+ -
+
+
更多
+ 
+
+
+ -
+
+
清空
+ 
+
+
+ -
+
+
查看
+ 
+
+
+ -
+
+
outline-redo
+ 
+
+
+ -
+
+
outline-undo
+ 
+
+
+ -
+
+
定位
+ 
+
+
-
富文本框
@@ -594,9 +630,9 @@
@font-face {
font-family: 'iconfont';
- src: url('iconfont.woff2?t=1652937715816') format('woff2'),
- url('iconfont.woff?t=1652937715816') format('woff'),
- url('iconfont.ttf?t=1652937715816') format('truetype');
+ src: url('iconfont.woff2?t=1655095335340') format('woff2'),
+ url('iconfont.woff?t=1655095335340') format('woff'),
+ url('iconfont.ttf?t=1655095335340') format('truetype');
}
第二步：定义使用 iconfont 的样式
@@ -622,6 +658,60 @@
+ -
+
+
+ 更多
+
+ .icon-gengduo
+
+
+
+ -
+
+
+ 清空
+
+ .icon-qingkong
+
+
+
+ -
+
+
+ 查看
+
+ .icon-chakan
+
+
+
+ -
+
+
+ outline-redo
+
+ .icon-outline-redo
+
+
+
+ -
+
+
+ outline-undo
+
+ .icon-outline-undo
+
+
+
+ -
+
+
+ 定位
+
+ .icon-dingwei
+
+
+
-
@@ -1432,6 +1522,54 @@
+ -
+
+
更多
+ #icon-gengduo
+
+
+ -
+
+
清空
+ #icon-qingkong
+
+
+ -
+
+
查看
+ #icon-chakan
+
+
+ -
+
+
outline-redo
+ #icon-outline-redo
+
+
+ -
+
+
outline-undo
+ #icon-outline-undo
+
+
+ -
+
+
定位
+ #icon-dingwei
+
+
-