feat: 仪表板允许对原有图片组件直接更换

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

 <template>
   <div class="bar-main">
+    <input id="input" ref="files" type="file" accept="image/*" hidden @click="e => {e.target.value = '';}" @change="handleFileChange">
     <div v-if="linkageAreaShow" style="margin-right: -1px;width: 18px">
       <el-checkbox v-model="linkageInfo.linkageActive" />
       <linkage-field v-if="linkageInfo.linkageActive" :element="element" />
@@ -25,6 +26,9 @@
       <span :title="$t('panel.cancel_linkage')">
         <i v-if="curComponent.type==='view'&&existLinkage" class="icon iconfont icon-quxiaoliandong" @click.stop="clearLinkage" />
       </span>
+      <span :title="$t('panel.switch_picture')">
+        <i v-if="activeModel==='edit'&&curComponent&&curComponent.type==='picture-add'" class="icon iconfont icon-genghuan" @click.stop="goFile" />
+      </span>
     </div>
   </div>
 </template>
@@ -34,6 +38,7 @@ import { mapState } from 'vuex'
 import bus from '@/utils/bus'
 import SettingMenu from '@/components/canvas/components/Editor/SettingMenu'
 import LinkageField from '@/components/canvas/components/Editor/LinkageField'
+import toast from '@/components/canvas/utils/toast'
 
 export default {
   components: { SettingMenu, LinkageField },
@@ -210,6 +215,21 @@ export default {
     },
     goFile() {
       this.$refs.files.click()
+    },
+    handleFileChange(e) {
+      const file = e.target.files[0]
+      if (!file.type.includes('image')) {
+        toast('只能插入图片')
+        return
+      }
+      const reader = new FileReader()
+      reader.onload = (res) => {
+        const fileResult = res.target.result
+        this.curComponent.propValue = fileResult
+        this.$store.commit('recordSnapshot', 'handleFileChange')
+      }
+
+      reader.readAsDataURL(file)
     }
   }
 }

frontend/src/lang/en.js

@@ -1436,6 +1436,7 @@ export default {
     linkage: 'linkage',
     jump: 'Jump',
     cancel_linkage: 'Cancel Linkage',
+    switch_picture: 'Switch Picture',
     remove_all_linkage: 'Remove All Linkage',
     exit_un_march_linkage_field: 'Exit Un March Linkage Field',
     details: 'Details',

frontend/src/lang/tw.js

@@ -1438,6 +1438,7 @@ export default {
     linkage: '聯動',
     jump: '跳轉',
     cancel_linkage: '取消聯動',
+    switch_picture: '更换图片',
     remove_all_linkage: '清除所有聯動',
     exit_un_march_linkage_field: '存在未匹配聯動關繫的字段',
     details: '詳情',

frontend/src/lang/zh.js

@@ -1447,6 +1447,7 @@ export default {
     linkage: '联动',
     jump: '跳转',
     cancel_linkage: '取消联动',
+    switch_picture: '更换图片',
     remove_all_linkage: '清除所有联动',
     exit_un_march_linkage_field: '存在未匹配联动关系的字段',
     details: '详情',

frontend/src/styles/deicon/demo_index.html

@@ -54,6 +54,12 @@
       <div class="content unicode" style="display: block;">
           <ul class="icon_lists dib-box">
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe606;</span>
+                <div class="name">更换</div>
+                <div class="code-name">&amp;#xe606;</div>
+              </li>
+          
             <li class="dib">
               <span class="icon iconfont">&#xe605;</span>
                 <div class="name">发送邮件</div>
@@ -498,9 +504,9 @@
 <pre><code class="language-css"
 >@font-face {
   font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1641890849948') format('woff2'),
-       url('iconfont.woff?t=1641890849948') format('woff'),
-       url('iconfont.ttf?t=1641890849948') format('truetype');
+  src: url('iconfont.woff2?t=1642061879222') format('woff2'),
+       url('iconfont.woff?t=1642061879222') format('woff'),
+       url('iconfont.ttf?t=1642061879222') format('truetype');
 }
 </code></pre>
           <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
@@ -526,6 +532,15 @@
       <div class="content font-class">
         <ul class="icon_lists dib-box">
           
+          <li class="dib">
+            <span class="icon iconfont icon-genghuan"></span>
+            <div class="name">
+              更换
+            </div>
+            <div class="code-name">.icon-genghuan
+            </div>
+          </li>
+          
           <li class="dib">
             <span class="icon iconfont icon-fasongyoujian"></span>
             <div class="name">
@@ -1192,6 +1207,14 @@
       <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-genghuan"></use>
+                </svg>
+                <div class="name">更换</div>
+                <div class="code-name">#icon-genghuan</div>
+            </li>
+          
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-fasongyoujian"></use>

frontend/src/styles/deicon/iconfont.css

 @font-face {
   font-family: "iconfont"; /* Project id 2459092 */
-  src: url('iconfont.woff2?t=1641890849948') format('woff2'),
-       url('iconfont.woff?t=1641890849948') format('woff'),
-       url('iconfont.ttf?t=1641890849948') format('truetype');
+  src: url('iconfont.woff2?t=1642061879222') format('woff2'),
+       url('iconfont.woff?t=1642061879222') format('woff'),
+       url('iconfont.ttf?t=1642061879222') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-genghuan:before {
+  content: "\e606";
+}
+
 .icon-fasongyoujian:before {
   content: "\e605";
 }

frontend/src/styles/deicon/iconfont.json

@@ -5,6 +5,13 @@
   "css_prefix_text": "icon-",
   "description": "",
   "glyphs": [
+    {
+      "icon_id": "12851123",
+      "name": "更换",
+      "font_class": "genghuan",
+      "unicode": "e606",
+      "unicode_decimal": 58886
+    },
     {
       "icon_id": "1286",
       "name": "发送邮件",