From 60a4f443a7741039a7d8557f646662fcd4c9c63f Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sun, 30 Jul 2023 09:41:58 +0800
Subject: [PATCH] =?UTF-8?q?Demo:=E8=8A=82=E7=82=B9=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E6=94=AF=E6=8C=81=E8=BE=93=E5=85=A5=E7=BD=91?=
 =?UTF-8?q?=E7=BB=9C=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Edit/components/NodeImage.vue | 83 ++++++++++++++-------
 1 file changed, 54 insertions(+), 29 deletions(-)

diff --git a/web/src/pages/Edit/components/NodeImage.vue b/web/src/pages/Edit/components/NodeImage.vue
index 2f105e31..b1fc91d1 100644
--- a/web/src/pages/Edit/components/NodeImage.vue
+++ b/web/src/pages/Edit/components/NodeImage.vue
@@ -5,9 +5,16 @@
     :visible.sync="dialogVisible"
     width="500"
   >
-    <ImgUpload ref="ImgUpload" v-model="img"></ImgUpload>
-    <div class="imgTitleBox">
-      <span class="title">{{ $t('nodeImage.imgTitle') }}</span>
+    <div class="title">方式一</div>
+    <ImgUpload ref="ImgUpload" v-model="img" style="margin-bottom: 12px;"></ImgUpload>
+    <div class="title">方式二</div>
+    <div class="inputBox">
+      <span class="label">请输入图片地址</span>
+      <el-input v-model="imgUrl" size="mini" placeholder="http://xxx.com/xx.jpg"></el-input>
+    </div>
+    <div class="title">可选</div>
+    <div class="inputBox">
+      <span class="label">{{ $t('nodeImage.imgTitle') }}</span>
       <el-input v-model="imgTitle" size="mini"></el-input>
     </div>
     <span slot="footer" class="dialog-footer">
@@ -21,6 +28,7 @@
 
 <script>
 import ImgUpload from '@/components/ImgUpload'
+import { getImageSize } from 'simple-mind-map/src/utils/index'
 
 /**
  * @Author: 王林
@@ -36,6 +44,7 @@ export default {
     return {
       dialogVisible: false,
       img: '',
+      imgUrl: '',
       imgTitle: '',
       activeNodes: null
     }
@@ -43,43 +52,54 @@ export default {
   created() {
     this.$bus.$on('node_active', (...args) => {
       this.activeNodes = args[1]
-      if (this.activeNodes.length > 0) {
-        let firstNode = this.activeNodes[0]
-        this.img = firstNode.getData('image')
-        this.imgTitle = firstNode.getData('imageTitle')
-      } else {
-        this.img = ''
-        this.imgTitle = ''
-      }
     })
     this.$bus.$on('showNodeImage', () => {
+      this.reset()
+      if (this.activeNodes.length > 0) {
+        let firstNode = this.activeNodes[0]
+        let img = firstNode.getData('image')
+        if (img) {
+          if (/^https?:\/\//.test(img)) {
+            this.imgUrl = img
+          } else {
+            this.img = img
+          }
+        }
+        this.imgTitle = firstNode.getData('imageTitle')
+      }
       this.dialogVisible = true
     })
   },
   methods: {
-    /**
-     * @Author: 王林
-     * @Date: 2021-06-22 22:08:11
-     * @Desc: 取消
-     */
     cancel() {
       this.dialogVisible = false
+      this.reset()
+    },
+
+    reset() {
+      this.img = ''
+      this.imgTitle = ''
+      this.imgUrl = ''
     },
 
-    /**
-     * @Author: 王林
-     * @Date: 2021-06-06 22:28:20
-     * @Desc:  确定
-     */
     async confirm() {
       try {
-        let { width, height } = await this.$refs.ImgUpload.getSize()
+        if (!this.img && !this.imgUrl) return
+        let res = null
+        let img = ''
+        if (this.img) {
+          img = this.img
+          res = await this.$refs.ImgUpload.getSize()
+        } else if (this.imgUrl) {
+          img = this.imgUrl
+          res = await getImageSize(img)
+        }
         this.activeNodes.forEach(node => {
           node.setImage({
-            url: this.img || 'none',
+            url: img || 'none',
             title: this.imgTitle,
-            width,
-            height
+            width: res.width,
+            height: res.height
           })
         })
         this.cancel()
@@ -93,13 +113,18 @@ export default {
 
 <style lang="less" scoped>
 .nodeDialog {
-  .imgTitleBox {
+  .title {
+    font-size: 18px;
+    margin-bottom: 12px;
+  }
+
+  .inputBox {
     display: flex;
     align-items: center;
-    margin-top: 10px;
+    margin-bottom: 10px;
 
-    .title {
-      width: 100px;
+    .label {
+      width: 150px;
     }
   }
 }