From f15bf8a8dce068b3b1de873c752d76f388a0a330 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Mon, 12 Aug 2024 13:36:42 +0800
Subject: [PATCH] =?UTF-8?q?Demo=EF=BC=9A=E6=94=AF=E6=8C=81=E8=AE=BE?=
 =?UTF-8?q?=E7=BD=AE=E5=85=B3=E8=81=94=E7=BA=BF=E7=9A=84=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E5=8D=B3=E5=AE=9E=E7=BA=BF=E6=88=96=E8=99=9A=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/config/en.js                        |  4 ++
 web/src/config/zh.js                        |  4 ++
 web/src/pages/Edit/components/BaseStyle.vue | 49 ++++++++++++++++++++-
 3 files changed, 56 insertions(+), 1 deletion(-)

diff --git a/web/src/config/en.js b/web/src/config/en.js
index 8ab259f5..28f32f16 100644
--- a/web/src/config/en.js
+++ b/web/src/config/en.js
@@ -83,6 +83,10 @@ export const borderDasharrayList = [
   {
     name: 'Dotted6',
     value: '1, 5'
+  },
+  {
+    name: 'Dotted7',
+    value: '6, 4'
   }
 ]
 
diff --git a/web/src/config/zh.js b/web/src/config/zh.js
index 756bfe6d..ea976986 100644
--- a/web/src/config/zh.js
+++ b/web/src/config/zh.js
@@ -133,6 +133,10 @@ export const borderDasharrayList = [
   {
     name: '虚线6',
     value: '1, 5'
+  },
+  {
+    name: '虚线7',
+    value: '6, 4'
   }
 ]
 
diff --git a/web/src/pages/Edit/components/BaseStyle.vue b/web/src/pages/Edit/components/BaseStyle.vue
index d198a378..750ef714 100644
--- a/web/src/pages/Edit/components/BaseStyle.vue
+++ b/web/src/pages/Edit/components/BaseStyle.vue
@@ -469,6 +469,47 @@
           </el-select>
         </div>
       </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('style.style') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.associativeLineDasharray"
+            placeholder=""
+            @change="
+              value => {
+                update('associativeLineDasharray', value)
+              }
+            "
+          >
+            <el-option
+              v-for="item in borderDasharrayList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+            >
+              <svg width="120" height="34">
+                <line
+                  x1="10"
+                  y1="17"
+                  x2="110"
+                  y2="17"
+                  stroke-width="2"
+                  :stroke="
+                    style.associativeLineDasharray === item.value
+                      ? '#409eff'
+                      : isDark
+                      ? '#fff'
+                      : '#000'
+                  "
+                  :stroke-dasharray="item.value"
+                ></line>
+              </svg>
+            </el-option>
+          </el-select>
+        </div>
+      </div>
       <!-- 关联线文字 -->
       <div class="title noTop">{{ $t('baseStyle.associativeLineText') }}</div>
       <div class="row">
@@ -1003,7 +1044,8 @@ import {
   fontFamilyList,
   fontSizeList,
   rootLineKeepSameInCurveList,
-  lineStyleMap
+  lineStyleMap,
+  borderDasharrayList
 } from '@/config'
 import ImgUpload from '@/components/ImgUpload'
 import { storeConfig } from '@/api'
@@ -1058,6 +1100,7 @@ export default {
         associativeLineColor: '',
         associativeLineWidth: 0,
         associativeLineActiveWidth: 0,
+        associativeLineDasharray: '',
         associativeLineActiveColor: '',
         associativeLineTextFontSize: 0,
         associativeLineTextColor: '',
@@ -1168,6 +1211,9 @@ export default {
     },
     showRootLineKeepSameInCurveLayouts() {
       return supportRootLineKeepSameInCurveLayouts.includes(this.currentLayout)
+    },
+    borderDasharrayList() {
+      return borderDasharrayList[this.$i18n.locale] || borderDasharrayList.zh
     }
   },
   watch: {
@@ -1233,6 +1279,7 @@ export default {
         'associativeLineColor',
         'associativeLineWidth',
         'associativeLineActiveWidth',
+        'associativeLineDasharray',
         'associativeLineActiveColor',
         'associativeLineTextFontSize',
         'associativeLineTextColor',