diff --git a/README.md b/README.md
index 3fd24cbe..593ebaef 100644
--- a/README.md
+++ b/README.md
@@ -93,13 +93,11 @@ const mindMap = new MindMap({
 });
 ```
 
-即可得到一个思维导图。
-
-想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map-docs/)。
+即可得到一个思维导图。想要实现更多功能？可以查看[开发文档](https://wanglin2.github.io/mind-map-docs/)。
 
 # License
 
-[MIT](./LICENSE)。保留`mind-map`版权声明的情况下可随意商用。如不想保留可联系作者。
+[MIT](./LICENSE)。保留`mind-map`版权声明的情况下可随意商用，如不想保留可联系作者。
 
 # 微信交流群
 
@@ -117,19 +115,119 @@ const mindMap = new MindMap({
 
 # 请作者喝杯咖啡
 
-开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~
+开源不易，如果本项目有帮助到你的话，可以考虑请作者喝杯咖啡~你的赞助对项目的可持续发展非常重要，是作者持续维护的最大动力。
 
 > 推荐使用支付宝，微信获取不到头像。转账请备注【思维导图】。
 >
 > 也可以通过购买付费插件来支持我们：[付费插件](https://wanglin2.github.io/mind-map-docs/plugins/about.html)。
 >
-> 为什么需要你的赞助：simple-mind-map 的目标是成为开源中最好的思维导图，为开发者提供一个快速实现思维导图产品的js库，为用户提供一个免费好用的思维导图软件，为了这个目标，作者已经持续开发维护了3年多，耗费了非常多的精力，随着时间的推移，simple-mind-map 已经取得了一定的成绩，相比最初，无论是功能，还是体验都已经有了翻天覆地的改变，但是收益方面却可以忽略不计，因为 simple-mind-map 是采用 MIT 许可的开源项目，永久免费，保留版权下可随意商用，这也意味着很难直接通过项目获取收益，为爱发电的激情总会慢慢消退，所以你的赞助对项目的可持续发展非常重要，是作者持续维护的最大动力。
+> 赞助等级：最强王者（￥500+）、星耀赞助（￥300+）、钻石赞助（￥150+）、黄金赞助（￥50+）、青铜赞助
 
 <p>
   <img src="./web/src/assets/img/alipay.jpg" style="width: 300px" />
   <img src="./web/src/assets/img/wechat.jpg" style="width: 300px" />
 </p>
 
+## 钻石赞助
+
+<p>
+    <span>
+        <img src="./web/src/assets/avatar/黄智彪@一米一栗科技.png" style="width: 50px;height: 50px;" />
+        <span>黄智彪@一米一栗科技</span>
+    </span>
+</p>
+
+## 黄金赞助
+
+<p>
+    <span>
+        <img src="./web/src/assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;" />
+        <span>小土渣的宇宙</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/Chris.jpg" style="width: 50px;height: 50px;" />
+        <span>Chris</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;" />
+        <span>仓鼠</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/风格.jpg" style="width: 50px;height: 50px;" />
+        <span>风格</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>LiuJL</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;" />
+        <span>Kyle</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/秀树因馨雨.jpg" style="width: 50px;height: 50px;" />
+        <span>秀树因馨雨</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>黄泳</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/ccccs.jpg" style="width: 50px;height: 50px;" />
+        <span>ccccs</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/炫.jpg" style="width: 50px;height: 50px;" />
+        <span>炫</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>晏江</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/梁辉.jpg" style="width: 50px;height: 50px;" />
+        <span>梁辉</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/千帆.jpg" style="width: 50px;height: 50px;" />
+        <span>千帆</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/布林.jpg" style="width: 50px;height: 50px;" />
+        <span>布林</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/达仁科技.jpg" style="width: 50px;height: 50px;" />
+        <span>达仁科技</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;" />
+        <span>沐风牧草</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/俊奇.jpg" style="width: 50px;height: 50px;" />
+        <span>俊奇</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/庆国.jpg" style="width: 50px;height: 50px;" />
+        <span>庆国</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
+        <span>Matt</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;" />
+        <span>雨馨</span>
+    </span>
+    <span>
+        <img src="./web/src/assets/avatar/峰.jpg" style="width: 50px;height: 50px;" />
+        <span>峰</span>
+    </span>
+</p>
+
+## 青铜赞助
+
 <p>
     <span>
         <img src="./web/src/assets/avatar/Think.jpg" style="width: 50px;height: 50px;" />
@@ -139,10 +237,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/志斌.jpg" style="width: 50px;height: 50px;" />
         <span>志斌</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/小土渣的宇宙.jpeg" style="width: 50px;height: 50px;" />
-        <span>小土渣的宇宙</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/qp.jpg" style="width: 50px;height: 50px;" />
         <span>qp</span>
@@ -159,22 +253,10 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/suka.jpg" style="width: 50px;height: 50px;" />
         <span>suka</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/Chris.jpg" style="width: 50px;height: 50px;" />
-        <span>Chris</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/水车.jpg" style="width: 50px;height: 50px;" />
         <span>水车</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/仓鼠.jpg" style="width: 50px;height: 50px;" />
-        <span>仓鼠</span>
-    </span>
-    <span>
-        <img src="./web/src/assets/avatar/千帆.jpg" style="width: 50px;height: 50px;" />
-        <span>千帆</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/才镇.jpg" style="width: 50px;height: 50px;" />
         <span>才镇</span>
@@ -191,10 +273,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
         <span>Luke</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/布林.jpg" style="width: 50px;height: 50px;" />
-        <span>布林</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/南风.jpg" style="width: 50px;height: 50px;" />
         <span>南风</span>
@@ -211,10 +289,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/敏.jpg" style="width: 50px;height: 50px;" />
         <span>敏</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/沐风牧草.jpg" style="width: 50px;height: 50px;" />
-        <span>沐风牧草</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/有希.jpg" style="width: 50px;height: 50px;" />
         <span>有希</span>
@@ -223,10 +297,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/樊笼.jpg" style="width: 50px;height: 50px;" />
         <span>樊笼</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/达仁科技.jpg" style="width: 50px;height: 50px;" />
-        <span>达仁科技</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/小逗比.png" style="width: 50px;height: 50px;" />
         <span>小逗比</span>
@@ -303,10 +373,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/旭东.png" style="width: 50px;height: 50px;" />
         <span>旭东</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/俊奇.jpg" style="width: 50px;height: 50px;" />
-        <span>俊奇</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/橘半.jpg" style="width: 50px;height: 50px;" />
         <span>橘半</span>
@@ -319,10 +385,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/皇登攀.jpg" style="width: 50px;height: 50px;" />
         <span>皇登攀</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/风格.jpg" style="width: 50px;height: 50px;" />
-        <span>风格</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
         <span>SR</span>
@@ -331,10 +393,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/逆水行舟.jpg" style="width: 50px;height: 50px;" />
         <span>逆水行舟</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
-        <span>LiuJL</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/L.jpg" style="width: 50px;height: 50px;" />
         <span>L</span>
@@ -359,10 +417,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
         <span>铁</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/庆国.jpg" style="width: 50px;height: 50px;" />
-        <span>庆国</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/Alex.jpg" style="width: 50px;height: 50px;" />
         <span>Alex</span>
@@ -379,18 +433,10 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/最多5个字.jpg" style="width: 50px;height: 50px;" />
         <span>最多5个字</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/雨馨.jpg" style="width: 50px;height: 50px;" />
-        <span>雨馨</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/ZX.jpg" style="width: 50px;height: 50px;" />
         <span>ZX</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/峰.jpg" style="width: 50px;height: 50px;" />
-        <span>峰</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
         <span>协成</span>
@@ -403,18 +449,10 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/好名字.jpg" style="width: 50px;height: 50px;" />
         <span>好名字</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/Kyle.jpg" style="width: 50px;height: 50px;" />
-        <span>Kyle</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/lsytyrt.jpg" style="width: 50px;height: 50px;" />
         <span>lsytyrt</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/秀树因馨雨.jpg" style="width: 50px;height: 50px;" />
-        <span>秀树因馨雨</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/buddy.jpg" style="width: 50px;height: 50px;" />
         <span>buddy</span>
@@ -435,14 +473,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/晴空.jpg" style="width: 50px;height: 50px;" />
         <span>晴空</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
-        <span>黄泳</span>
-    </span>
-    <span>
-        <img src="./web/src/assets/avatar/ccccs.jpg" style="width: 50px;height: 50px;" />
-        <span>ccccs</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/。.png" style="width: 50px;height: 50px;" />
         <span>。</span>
@@ -455,10 +485,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/张文建.jpg" style="width: 50px;height: 50px;" />
         <span>张文建</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/炫.jpg" style="width: 50px;height: 50px;" />
-        <span>炫</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/Lawliet.jpg" style="width: 50px;height: 50px;" />
         <span>Lawliet</span>
@@ -467,10 +493,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/一叶孤舟.jpg" style="width: 50px;height: 50px;" />
         <span>一叶孤舟</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
-        <span>晏江</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
         <span>Eric</span>
@@ -483,10 +505,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
         <span>中文网字计划-江夏尧</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/梁辉.jpg" style="width: 50px;height: 50px;" />
-        <span>梁辉</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/海云.jpg" style="width: 50px;height: 50px;" />
         <span>海云</span>
@@ -499,10 +517,6 @@ const mindMap = new MindMap({
         <img src="./web/src/assets/avatar/h.r.w.jpg" style="width: 50px;height: 50px;" />
         <span>h.r.w</span>
     </span>
-    <span>
-        <img src="./web/src/assets/avatar/default.png" style="width: 50px;height: 50px;" />
-        <span>Matt</span>
-    </span>
     <span>
         <img src="./web/src/assets/avatar/时光匆匆.png" style="width: 50px;height: 50px;" />
         <span>时光匆匆</span>
diff --git a/web/src/assets/avatar/黄智彪@一米一栗科技.png b/web/src/assets/avatar/黄智彪@一米一栗科技.png
new file mode 100644
index 00000000..c8925d2d
Binary files /dev/null and b/web/src/assets/avatar/黄智彪@一米一栗科技.png differ
diff --git a/web/src/pages/Edit/components/AssociativeLineStyle.vue b/web/src/pages/Edit/components/AssociativeLineStyle.vue
new file mode 100644
index 00000000..badd37d5
--- /dev/null
+++ b/web/src/pages/Edit/components/AssociativeLineStyle.vue
@@ -0,0 +1,420 @@
+<template>
+  <Sidebar ref="sidebar" :title="'关联线样式'">
+    <div class="sidebarContent" :class="{ isDark: isDark }">
+      <div class="title noTop">{{ $t('baseStyle.associativeLine') }}</div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.associativeLineColor') }}</span>
+          <span
+            class="block"
+            v-popover:popover4
+            :style="{ backgroundColor: style.associativeLineColor }"
+          ></span>
+          <el-popover ref="popover4" placement="bottom" trigger="click">
+            <Color
+              :color="style.associativeLineColor"
+              @change="
+                color => {
+                  update('associativeLineColor', color)
+                }
+              "
+            ></Color>
+          </el-popover>
+        </div>
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.associativeLineWidth') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.associativeLineWidth"
+            placeholder=""
+            @change="
+              value => {
+                update('associativeLineWidth', value)
+              }
+            "
+          >
+            <el-option
+              v-for="item in lineWidthList"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+              <span
+                v-if="item > 0"
+                class="borderLine"
+                :class="{ isDark: isDark }"
+                :style="{ height: item + 'px' }"
+              ></span>
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{
+            $t('baseStyle.associativeLineActiveColor')
+          }}</span>
+          <span
+            class="block"
+            v-popover:popover5
+            :style="{ backgroundColor: style.associativeLineActiveColor }"
+          ></span>
+          <el-popover ref="popover5" placement="bottom" trigger="click">
+            <Color
+              :color="style.associativeLineActiveColor"
+              @change="
+                color => {
+                  update('associativeLineActiveColor', color)
+                }
+              "
+            ></Color>
+          </el-popover>
+        </div>
+        <div class="rowItem">
+          <span class="name">{{
+            $t('baseStyle.associativeLineActiveWidth')
+          }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.associativeLineActiveWidth"
+            placeholder=""
+            @change="
+              value => {
+                update('associativeLineActiveWidth', value)
+              }
+            "
+          >
+            <el-option
+              v-for="item in lineWidthList"
+              :key="item"
+              :label="item"
+              :value="item"
+            >
+              <span
+                v-if="item > 0"
+                class="borderLine"
+                :class="{ isDark: isDark }"
+                :style="{ height: item + 'px' }"
+              ></span>
+            </el-option>
+          </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">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.fontFamily') }}</span>
+          <el-select
+            size="mini"
+            v-model="style.associativeLineTextFontFamily"
+            placeholder=""
+            @change="update('associativeLineTextFontFamily', $event)"
+          >
+            <el-option
+              v-for="item in fontFamilyList"
+              :key="item.value"
+              :label="item.name"
+              :value="item.value"
+              :style="{ fontFamily: item.value }"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+      <div class="row">
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.color') }}</span>
+          <span
+            class="block"
+            v-popover:popover6
+            :style="{ backgroundColor: style.associativeLineTextColor }"
+          ></span>
+          <el-popover ref="popover6" placement="bottom" trigger="click">
+            <Color
+              :color="style.associativeLineTextColor"
+              @change="
+                color => {
+                  update('associativeLineTextColor', color)
+                }
+              "
+            ></Color>
+          </el-popover>
+        </div>
+        <div class="rowItem">
+          <span class="name">{{ $t('baseStyle.fontSize') }}</span>
+          <el-select
+            size="mini"
+            style="width: 80px"
+            v-model="style.associativeLineTextFontSize"
+            placeholder=""
+            @change="update('associativeLineTextFontSize', $event)"
+          >
+            <el-option
+              v-for="item in fontSizeList"
+              :key="item"
+              :label="item"
+              :value="item"
+              :style="{ fontSize: item + 'px' }"
+            >
+            </el-option>
+          </el-select>
+        </div>
+      </div>
+    </div>
+  </Sidebar>
+</template>
+
+<script>
+import Sidebar from './Sidebar'
+import Color from './Color'
+import {
+  lineWidthList,
+  lineStyleList,
+  backgroundRepeatList,
+  backgroundPositionList,
+  backgroundSizeList,
+  fontFamilyList,
+  fontSizeList,
+  rootLineKeepSameInCurveList,
+  lineStyleMap,
+  borderDasharrayList
+} from '@/config'
+import { mapState, mapMutations } from 'vuex'
+import {
+  supportLineStyleLayoutsMap,
+  supportLineRadiusLayouts,
+  supportNodeUseLineStyleLayouts,
+  supportRootLineKeepSameInCurveLayouts,
+  rainbowLinesOptions
+} from '@/config/constant'
+
+const defaultStyle = {
+  associativeLineColor: '',
+  associativeLineWidth: 0,
+  associativeLineActiveWidth: 0,
+  associativeLineDasharray: '',
+  associativeLineActiveColor: '',
+  associativeLineTextFontSize: 0,
+  associativeLineTextColor: '',
+  associativeLineTextFontFamily: ''
+}
+
+export default {
+  name: 'BaseStyle',
+  components: {
+    Sidebar,
+    Color
+  },
+  props: {
+    mindMap: {
+      type: Object
+    }
+  },
+  data() {
+    return {
+      lineWidthList,
+      fontSizeList,
+      activeLineNode: null,
+      activeLineToNode: null,
+      style: {
+        ...defaultStyle
+      }
+    }
+  },
+  computed: {
+    ...mapState({
+      activeSidebar: state => state.activeSidebar,
+      isDark: state => state.localConfig.isDark
+    }),
+
+    fontFamilyList() {
+      return fontFamilyList[this.$i18n.locale] || fontFamilyList.zh
+    },
+
+    borderDasharrayList() {
+      return borderDasharrayList[this.$i18n.locale] || borderDasharrayList.zh
+    }
+  },
+  watch: {
+    activeSidebar(val) {
+      if (val === 'associativeLineStyle') {
+        this.$refs.sidebar.show = true
+      } else {
+        this.$refs.sidebar.show = false
+      }
+    }
+  },
+  created() {
+    this.mindMap.on('associative_line_click', this.onAssociativeLineClick)
+    this.mindMap.on(
+      'associative_line_deactivate',
+      this.associativeLineDeactivate
+    )
+  },
+  methods: {
+    ...mapMutations(['setActiveSidebar']),
+
+    onAssociativeLineClick(a, b, node, toNode) {
+      this.activeLineNode = node
+      this.activeLineToNode = toNode
+      const styleConfig = this.mindMap.associativeLine.getStyleConfig(
+        node,
+        toNode
+      )
+      Object.keys(this.style).forEach(item => {
+        this.style[item] = styleConfig[item]
+      })
+      this.setActiveSidebar('associativeLineStyle')
+    },
+
+    associativeLineDeactivate() {
+      this.setActiveSidebar('')
+      this.activeLineNode = null
+      this.activeLineToNode = null
+      this.style = {
+        ...defaultStyle
+      }
+    },
+
+    update(prop, value) {
+      this.style[prop] = value
+      const associativeLineStyle =
+        this.activeLineNode.getData('associativeLineStyle') || {}
+      const toNodeUid = this.activeLineToNode.getData('uid')
+      const lineStyle = associativeLineStyle[toNodeUid] || {}
+      this.activeLineNode.setData({
+        associativeLineStyle: {
+          ...associativeLineStyle,
+          [toNodeUid]: {
+            ...lineStyle,
+            ...this.style
+          }
+        }
+      })
+      this.mindMap.associativeLine.updateActiveLineStyle()
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.sidebarContent {
+  padding: 20px;
+  padding-top: 10px;
+
+  &.isDark {
+    .title {
+      color: #fff;
+    }
+
+    .row {
+      .rowItem {
+        .name {
+          color: hsla(0, 0%, 100%, 0.6);
+        }
+      }
+    }
+  }
+
+  .title {
+    font-size: 16px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: rgba(26, 26, 26, 0.9);
+    margin-bottom: 10px;
+    margin-top: 20px;
+
+    &.noTop {
+      margin-top: 0;
+    }
+  }
+
+  .row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+
+    .rowItem {
+      display: flex;
+      align-items: center;
+      margin-bottom: 5px;
+
+      .name {
+        font-size: 12px;
+        margin-right: 10px;
+        white-space: nowrap;
+      }
+
+      .block {
+        display: inline-block;
+        width: 30px;
+        height: 30px;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.borderLine {
+  display: inline-block;
+  width: 100%;
+  background-color: #000;
+
+  &.isDark {
+    background-color: #fff;
+  }
+}
+</style>
+<style lang="less">
+.el-select-dropdown__item.selected {
+  .borderLine {
+    background-color: #409eff;
+  }
+}
+</style>
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue
index f2ccc959..7545a0c6 100644
--- a/web/src/pages/Edit/components/Edit.vue
+++ b/web/src/pages/Edit/components/Edit.vue
@@ -17,6 +17,7 @@
     <OutlineSidebar :mindMap="mindMap"></OutlineSidebar>
     <Style v-if="!isZenMode"></Style>
     <BaseStyle :data="mindMapData" :mindMap="mindMap"></BaseStyle>
+    <AssociativeLineStyle v-if="mindMap" :mindMap="mindMap"></AssociativeLineStyle>
     <Theme v-if="mindMap" :data="mindMapData" :mindMap="mindMap"></Theme>
     <Structure :mindMap="mindMap"></Structure>
     <ShortcutKey></ShortcutKey>
@@ -122,6 +123,7 @@ import NodeAttachment from './NodeAttachment.vue'
 import NodeOuterFrame from './NodeOuterFrame.vue'
 import NodeTagStyle from './NodeTagStyle.vue'
 import Setting from './Setting.vue'
+import AssociativeLineStyle from './AssociativeLineStyle.vue';
 
 // 注册插件
 MindMap.usePlugin(MiniMap)
@@ -174,7 +176,8 @@ export default {
     NodeAttachment,
     NodeOuterFrame,
     NodeTagStyle,
-    Setting
+    Setting,
+    AssociativeLineStyle
   },
   data() {
     return {