From f9eff11a279d7b5ddfa7e472eadf9a25b33f642f Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Sun, 6 Apr 2025 14:59:08 +0800
Subject: [PATCH] =?UTF-8?q?Demo:=E6=94=AF=E6=8C=81=E6=89=A9=E5=B1=95?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=BD=A2=E7=8A=B6=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/pages/Edit/components/Edit.vue  |  9 +++++--
 web/src/pages/Edit/components/Style.vue | 33 ++++++++++++++++++++++---
 web/src/store.js                        |  6 +++++
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index ed754303..557eaa24 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -15,7 +15,7 @@
     <Navigator v-if="mindMap" :mindMap="mindMap"></Navigator>
     <NavigatorToolbar :mindMap="mindMap" v-if="!isZenMode"></NavigatorToolbar>
     <OutlineSidebar :mindMap="mindMap"></OutlineSidebar>
-    <Style v-if="!isZenMode"></Style>
+    <Style v-if="mindMap && !isZenMode" :mindMap="mindMap"></Style>
     <BaseStyle
       :data="mindMapData"
       :configData="mindMapConfig"
@@ -102,8 +102,9 @@ import Checkbox from 'simple-mind-map-plugin-checkbox'
 import LineFlow from 'simple-mind-map-plugin-lineflow'
 import Momentum from 'simple-mind-map-plugin-momentum'
 import RightFishbone from 'simple-mind-map-plugin-right-fishbone'
+import MoreShapes from 'simple-mind-map-plugin-more-shapes'
 import MoreThemes from 'simple-mind-map-plugin-more-themes'
-// npm link simple-mind-map-plugin-excel simple-mind-map-plugin-freemind simple-mind-map-plugin-numbers simple-mind-map-plugin-notation simple-mind-map-plugin-handdrawnlikestyle simple-mind-map-plugin-checkbox simple-mind-map simple-mind-map-plugin-themes simple-mind-map-plugin-lineflow simple-mind-map-plugin-momentum simple-mind-map-plugin-right-fishbone simple-mind-map-plugin-more-themes
+// npm link simple-mind-map-plugin-excel simple-mind-map-plugin-freemind simple-mind-map-plugin-numbers simple-mind-map-plugin-notation simple-mind-map-plugin-handdrawnlikestyle simple-mind-map-plugin-checkbox simple-mind-map simple-mind-map-plugin-themes simple-mind-map-plugin-lineflow simple-mind-map-plugin-momentum simple-mind-map-plugin-right-fishbone simple-mind-map-plugin-more-themes simple-mind-map-plugin-more-shapes
 import OutlineSidebar from './OutlineSidebar.vue'
 import Style from './Style.vue'
 import BaseStyle from './BaseStyle.vue'
@@ -702,6 +703,10 @@ export default {
         this.mindMap.addPlugin(LineFlow)
         this.$store.commit('setSupportLineFlow', true)
       }
+      if (typeof MoreShapes !== 'undefined') {
+        this.mindMap.addPlugin(MoreShapes)
+        this.$store.commit('setSupportMoreShapes', true)
+      }
       // 扩展侧边主题列表
       if (typeof MoreThemes !== 'undefined') {
         const extendThemeGroupList = [
diff --git a/web/src/pages/Edit/components/Style.vue b/web/src/pages/Edit/components/Style.vue
index e76adb36..3eddcf15 100644
--- a/web/src/pages/Edit/components/Style.vue
+++ b/web/src/pages/Edit/components/Style.vue
@@ -316,8 +316,13 @@
                 :key="item.value"
                 :label="item.name"
                 :value="item.value"
+                style="display: flex; justify-content: center; align-items: center;"
               >
-                <svg width="60" height="26" style="margin-top: 5px">
+                <svg
+                  :width="item.width || 60"
+                  :height="item.height || 26"
+                  style="margin-top: 5px"
+                >
                   <path
                     :d="shapeListMap[item.value]"
                     fill="none"
@@ -572,6 +577,11 @@ export default {
     Sidebar,
     Color
   },
+  props: {
+    mindMap: {
+      type: Object
+    }
+  },
   data() {
     return {
       fontSizeList,
@@ -623,10 +633,27 @@ export default {
       return borderDasharrayList[this.$i18n.locale] || borderDasharrayList.zh
     },
     shapeList() {
-      return shapeList[this.$i18n.locale] || shapeList.zh
+      return [
+        ...(shapeList[this.$i18n.locale] || shapeList.zh),
+        ...this.mindMap.extendShapeList.map(item => {
+          return {
+            width: '40px',
+            name: item.nameShow,
+            value: item.name
+          }
+        })
+      ]
     },
     shapeListMap() {
-      return shapeListMap[this.$i18n.locale] || shapeListMap.zh
+      const map = shapeListMap[this.$i18n.locale] || shapeListMap.zh
+      const map2 = {}
+      this.mindMap.extendShapeList.forEach(item => {
+        map2[item.name] = item.path
+      })
+      return {
+        ...map,
+        ...map2
+      }
     },
     linearGradientDirList() {
       return (
diff --git a/web/src/store.js b/web/src/store.js
index 647f4733..55dd319b 100644
--- a/web/src/store.js
+++ b/web/src/store.js
@@ -38,6 +38,7 @@ const store = new Vuex.Store({
     supportCheckbox: false, // 是否支持Checkbox插件
     supportLineFlow: false, // 是否支持LineFlow插件
     supportMomentum: false, // 是否支持Momentum插件
+    supportMoreShapes: false,// 是否支持MoreShapes插件
     isDragOutlineTreeNode: false, // 当前是否正在拖拽大纲树的节点
     aiConfig: {
       api: 'http://ark.cn-beijing.volces.com/api/v3/chat/completions',
@@ -138,6 +139,11 @@ const store = new Vuex.Store({
       state.supportMomentum = data
     },
 
+    // 设置是否支持MoreShapes插件
+    setSupportMoreShapes(state, data) {
+      state.supportMoreShapes = data
+    },
+
     // 设置树节点拖拽
     setIsDragOutlineTreeNode(state, data) {
       state.isDragOutlineTreeNode = data