refactor: 优化图标和仪表板镜像记录

frontend/src/components/canvas/components/Editor/EditBar.vue

@@ -24,7 +24,7 @@
         <i v-if="activeModel==='edit'&&!curComponent.auxiliaryMatrix" class="icon iconfont icon-xuanfuanniu" @click.stop="auxiliaryMatrixChange" />
       </span>
       <span :title="$t('panel.details')">
-        <i v-if="curComponent.type==='view'" class="icon iconfont icon-fuwenbenkuang" @click.stop="showViewDetails('details')" />
+        <i v-if="curComponent.type==='view'" class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
       </span>
       <span :title="$t('panel.enlarge')">
         <i v-if="curComponent.type==='view'" class="icon iconfont icon-fangda" @click.stop="showViewDetails('enlarge')" />

frontend/src/components/canvas/components/Editor/EditBarView.vue

@@ -5,7 +5,7 @@
         <i class="icon iconfont icon-edit" @click.stop="edit" />
       </span>
       <span :title="$t('panel.details')">
-        <i class="icon iconfont icon-fuwenbenkuang" @click.stop="showViewDetails('details')" />
+        <i class="icon iconfont icon-chakan" @click.stop="showViewDetails('details')" />
       </span>
     </div>
     <div v-if="positionCheck('multiplexing')" style="margin-right: -1px;width: 18px;z-index: 5">

frontend/src/components/canvas/components/Toolbar.vue

@@ -36,10 +36,10 @@
         </span>
       </div>
       <el-tooltip :content="$t('panel.undo') ">
-        <i class="el-icon-refresh-right insert" @click="undo" />
+        <span class="icon iconfont icon-outline-undo insert" @click="undo" />
       </el-tooltip>
       <el-tooltip :content="$t('panel.redo') ">
-        <i class="el-icon-refresh-left insert" @click="redo" />
+        <span class="icon iconfont icon-outline-redo insert" @click="redo" />
       </el-tooltip>
       <el-tooltip :content="$t('panel.fullscreen_preview')">
         <span class="icon iconfont icon-fangda insert" @click="clickPreview" />
@@ -49,19 +49,24 @@
       <span class="button_self">
         <el-dropdown trigger="click" placement="bottom-start" size="mini">
           <el-button size="mini">
-            <i class="el-icon-arrow-down" />
+            <span class="icon iconfont icon-gengduo" />
           </el-button>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>
               <el-dropdown placement="right-start" size="mini" style="width: 100%">
                 <span>
-                  <span class="icon iconfont" :class="[canvasStyleData.auxiliaryMatrix?'icon-shujujuzhen':'icon-xuanfuanniu']" />
+                  <span
+                    class="icon iconfont"
+                    :class="[canvasStyleData.auxiliaryMatrix?'icon-shujujuzhen':'icon-xuanfuanniu']"
+                  />
                   <span style="font-size: 12px">{{ $t('panel.new_element_distribution') }}</span>
                   <i class="el-icon-arrow-right el-icon--right" />
                 </span>
                 <el-dropdown-menu slot="dropdown">
                   <el-dropdown-item @click.native="auxiliaryMatrixChange">
-                    <span :class="[!canvasStyleData.auxiliaryMatrix?'font-active':'']"> {{ $t('panel.suspension') }} </span>
+                    <span
+                      :class="[!canvasStyleData.auxiliaryMatrix?'font-active':'']"
+                    > {{ $t('panel.suspension') }} </span>
                     <i v-if="!canvasStyleData.auxiliaryMatrix" class=" font-active el-icon-check" />
                   </el-dropdown-item>
                   <el-dropdown-item @click.native="auxiliaryMatrixChange">
@@ -72,20 +77,27 @@
               </el-dropdown>
             </el-dropdown-item>
             <el-dropdown-item @click.native="showGridChange">
-              <span class="icon iconfont-tb" :class="[canvasStyleData.aidedDesign.showGrid?'icon-wangge-open':'icon-wangge-close']" />
+              <span
+                class="icon iconfont-tb"
+                :class="[canvasStyleData.aidedDesign.showGrid?'icon-wangge-open':'icon-wangge-close']"
+              />
               {{ $t('panel.aided_grid') }}:{{ canvasStyleData.aidedDesign.showGrid?$t('panel.aided_grid_open'):$t('panel.aided_grid_close') }}
             </el-dropdown-item>
             <el-dropdown-item @click.native="openOuterParamsSet">
               <span class="icon iconfont-tb icon-canshu" />{{ $t('panel.params_setting') }}
             </el-dropdown-item>
             <el-dropdown-item @click.native="clearCanvas">
-              <i class="el-icon-document-delete" />{{ $t('panel.clean_canvas') }}
+              <span class="icon iconfont-tb icon-qingkong" />{{ $t('panel.clean_canvas') }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </span>
-      <el-button size="mini" class="el-icon-magic-stick el-icon--left" @click="showPanel">{{ $t('panel.panel_style') }}</el-button>
+      <el-button size="mini" class="el-icon-magic-stick el-icon--left" @click="showPanel">{{ $t('panel.panel_style')
-      <el-button size="mini" @click="batchOption"> <span class="icon iconfont-tb icon-piliang-copy el-icon--left" />{{ $t('panel.batch_opt') }}</el-button>
+      }}
+      </el-button>
+      <el-button size="mini" @click="batchOption"><span class="icon iconfont-tb icon-piliang-copy el-icon--left" />{{
+        $t('panel.batch_opt') }}
+      </el-button>
       <span style="float: right;margin-left: 10px">
         <el-button size="mini" type="primary" :disabled="saveButtonDisabled" @click="save(false)">
           {{ $t('commons.save') }}
@@ -94,7 +106,13 @@
     </div>
 
     <!--关闭弹框-->
-    <el-dialog :visible.sync="closePanelVisible" :title="$t('panel.panel_save_tips')" :show-close="false" width="30%" class="dialog-css">
+    <el-dialog
+      :visible.sync="closePanelVisible"
+      :title="$t('panel.panel_save_tips')"
+      :show-close="false"
+      width="30%"
+      class="dialog-css"
+    >
       <el-row style="height: 20px">
         <el-col :span="4">
           <svg-icon icon-class="warn-tre" style="width: 20px;height: 20px;float: right" />
@@ -321,8 +339,12 @@ export default {
       }
       const components = deepCopy(this.componentData)
       components.forEach(view => {
-        if (view.DetailAreaCode) { view.DetailAreaCode = null }
+        if (view.DetailAreaCode) {
-        if (view.filters && view.filters.length > 0) { view.filters = [] }
+          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{
+  .button-show {
-    background-color: #ebf2fe!important;
+    background-color: #ebf2fe !important;
   }
 
-  .button-closed{
+  .button-closed {
-    background-color: #ffffff!important;
+    background-color: #ffffff !important;
+  }
+
+  > > > .el-switch__core {
+    width: 30px !important;
+    height: 15px;
   }
 
-   >>>.el-switch__core{
-     width:30px!important;
-     height:15px;
-   }
   /*设置圆*/
-  >>>.el-switch__core::after{
+  > > > .el-switch__core::after {
-    width:14px;
+    width: 14px;
-    height:14px;
+    height: 14px;
-    margin-top:-1px;
+    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);

frontend/src/components/canvas/store/snapshot.js

@@ -3,8 +3,8 @@ import { deepCopy } from '@/components/canvas/utils/utils'
 
 export default {
   state: {
-    snapshotData: [], // 编辑器快照数据
+    snapshotData: [{}], // 编辑器快照数据
-    snapshotStyleData: [], // 样式改变也记录快照
+    snapshotStyleData: [{}], // 样式改变也记录快照
     snapshotIndex: -1, // 快照索引
     changeTimes: -1, // 修改次数
     lastSaveSnapshotIndex: 0, // 最后保存是snapshotIndex的索引
@@ -47,9 +47,9 @@ export default {
     refreshSnapshot(state) {
       // console.log('refreshSnapshot')
       // 刷新快照
-      state.snapshotData = []
+      state.snapshotData = [deepCopy(state.componentData)]
-      state.snapshotStyleData = []
+      state.snapshotStyleData = [deepCopy(state.canvasStyleData)]
-      state.snapshotIndex = -1
+      state.snapshotIndex = 0
       state.changeTimes = -1
       state.lastSaveSnapshotIndex = 0
     },

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 = []

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,42 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe60c;</span>
+                <div class="name">更多</div>
+                <div class="code-name">&amp;#xe60c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe61c;</span>
+                <div class="name">清空</div>
+                <div class="code-name">&amp;#xe61c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe610;</span>
+                <div class="name">查看</div>
+                <div class="code-name">&amp;#xe610;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68c;</span>
+                <div class="name">outline-redo</div>
+                <div class="code-name">&amp;#xe68c;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe68d;</span>
+                <div class="name">outline-undo</div>
+                <div class="code-name">&amp;#xe68d;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe60a;</span>
+                <div class="name">定位</div>
+                <div class="code-name">&amp;#xe60a;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe670;</span>
                 <div class="name">富文本框</div>
@@ -594,9 +630,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1652937715816') format('woff2'),
+  src: url('iconfont.woff2?t=1655095335340') format('woff2'),
-       url('iconfont.woff?t=1652937715816') format('woff'),
+       url('iconfont.woff?t=1655095335340') format('woff'),
-       url('iconfont.ttf?t=1652937715816') format('truetype');
+       url('iconfont.ttf?t=1655095335340') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -622,6 +658,60 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-gengduo"></span>
+            <div class="name">
+              更多
+            </div>
+            <div class="code-name">.icon-gengduo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-qingkong"></span>
+            <div class="name">
+              清空
+            </div>
+            <div class="code-name">.icon-qingkong
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-chakan"></span>
+            <div class="name">
+              查看
+            </div>
+            <div class="code-name">.icon-chakan
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-outline-redo"></span>
+            <div class="name">
+              outline-redo
+            </div>
+            <div class="code-name">.icon-outline-redo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-outline-undo"></span>
+            <div class="name">
+              outline-undo
+            </div>
+            <div class="code-name">.icon-outline-undo
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-dingwei"></span>
+            <div class="name">
+              定位
+            </div>
+            <div class="code-name">.icon-dingwei
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-fuwenbenkuang"></span>
             <div class="name">
@@ -1432,6 +1522,54 @@
       <div class="content symbol">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-gengduo"></use>
+                </svg>
+                <div class="name">更多</div>
+                <div class="code-name">#icon-gengduo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-qingkong"></use>
+                </svg>
+                <div class="name">清空</div>
+                <div class="code-name">#icon-qingkong</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-chakan"></use>
+                </svg>
+                <div class="name">查看</div>
+                <div class="code-name">#icon-chakan</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-outline-redo"></use>
+                </svg>
+                <div class="name">outline-redo</div>
+                <div class="code-name">#icon-outline-redo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-outline-undo"></use>
+                </svg>
+                <div class="name">outline-undo</div>
+                <div class="code-name">#icon-outline-undo</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-dingwei"></use>
+                </svg>
+                <div class="name">定位</div>
+                <div class="code-name">#icon-dingwei</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-fuwenbenkuang"></use>

frontend/src/styles/deicon/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1652937715816') format('woff2'),
+  src: url('iconfont.woff2?t=1655095335340') format('woff2'),
-       url('iconfont.woff?t=1652937715816') format('woff'),
+       url('iconfont.woff?t=1655095335340') format('woff'),
-       url('iconfont.ttf?t=1652937715816') format('truetype');
+       url('iconfont.ttf?t=1655095335340') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,30 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-gengduo:before {
+  content: "\e60c";
+}
+
+.icon-qingkong:before {
+  content: "\e61c";
+}
+
+.icon-chakan:before {
+  content: "\e610";
+}
+
+.icon-outline-redo:before {
+  content: "\e68c";
+}
+
+.icon-outline-undo:before {
+  content: "\e68d";
+}
+
+.icon-dingwei:before {
+  content: "\e60a";
+}
+
 .icon-fuwenbenkuang:before {
   content: "\e670";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,48 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "77822",
+      "name": "更多",
+      "font_class": "gengduo",
+      "unicode": "e60c",
+      "unicode_decimal": 58892
+    },
+    {
+      "icon_id": "1817728",
+      "name": "清空",
+      "font_class": "qingkong",
+      "unicode": "e61c",
+      "unicode_decimal": 58908
+    },
+    {
+      "icon_id": "2815705",
+      "name": "查看",
+      "font_class": "chakan",
+      "unicode": "e610",
+      "unicode_decimal": 58896
+    },
+    {
+      "icon_id": "27472802",
+      "name": "outline-redo",
+      "font_class": "outline-redo",
+      "unicode": "e68c",
+      "unicode_decimal": 59020
+    },
+    {
+      "icon_id": "27472812",
+      "name": "outline-undo",
+      "font_class": "outline-undo",
+      "unicode": "e68d",
+      "unicode_decimal": 59021
+    },
+    {
+      "icon_id": "1382",
+      "name": "定位",
+      "font_class": "dingwei",
+      "unicode": "e60a",
+      "unicode_decimal": 58890
+    },
     {
       "icon_id": "2471358",
       "name": "富文本框",

frontend/src/views/panel/edit/index.vue

@@ -670,6 +670,8 @@ export default {
       this.$store.commit('initCanvas')
       if (panelId) {
         initPanelData(panelId, function() {
+          // 清空当前缓存,快照
+          _this.$store.commit('refreshSnapshot')
           // 初始化视图缓存
           initViewCache(panelId)
           // 初始化记录的视图信息