Demo：删除侧边栏节点样式配置部分的激活节点配置

web/src/pages/Edit/components/Style.vue

@@ -5,10 +5,6 @@
       :class="{ isDark: isDark }"
       v-if="activeNodes.length > 0"
     >
-      <el-tabs class="tab" v-model="activeTab" @tab-click="handleTabClick">
-        <el-tab-pane :label="$t('style.normal')" name="normal"></el-tab-pane>
-        <el-tab-pane :label="$t('style.active')" name="active"></el-tab-pane>
-      </el-tabs>
       <div class="sidebarContent" v-if="activeNodes.length > 0">
         <!-- 文字 -->
         <div class="title noTop">{{ $t('style.text') }}</div>
@@ -19,7 +15,6 @@
               size="mini"
               v-model="style.fontFamily"
               placeholder=""
-              :disabled="checkDisabled('fontFamily')"
               @change="update('fontFamily')"
             >
               <el-option
@@ -41,7 +36,6 @@
               style="width: 80px"
               v-model="style.fontSize"
               placeholder=""
-              :disabled="checkDisabled('fontSize')"
               @change="update('fontSize')"
             >
               <el-option
@@ -61,7 +55,6 @@
               style="width: 80px"
               v-model="style.lineHeight"
               placeholder=""
-              :disabled="checkDisabled('lineHeight')"
               @change="update('lineHeight')"
             >
               <el-option
@@ -77,11 +70,7 @@
         <div class="row">
           <div class="btnGroup">
             <el-tooltip :content="$t('style.color')" placement="bottom">
-              <div
+              <div class="styleBtn" v-popover:popover>
-                class="styleBtn"
-                v-popover:popover
-                :class="{ disabled: checkDisabled('color') }"
-              >
                 A
                 <span
                   class="colorShow"
@@ -93,8 +82,7 @@
               <div
                 class="styleBtn"
                 :class="{
-                  actived: style.fontWeight === 'bold',
+                  actived: style.fontWeight === 'bold'
-                  disabled: checkDisabled('fontWeight')
                 }"
                 @click="toggleFontWeight"
               >
@@ -105,8 +93,7 @@
               <div
                 class="styleBtn i"
                 :class="{
-                  actived: style.fontStyle === 'italic',
+                  actived: style.fontStyle === 'italic'
-                  disabled: checkDisabled('fontStyle')
                 }"
                 @click="toggleFontStyle"
               >
@@ -120,27 +107,16 @@
               <div
                 class="styleBtn u"
                 :style="{ textDecoration: style.textDecoration || 'none' }"
-                :class="{ disabled: checkDisabled('textDecoration') }"
                 v-popover:popover2
               >
                 U
               </div>
             </el-tooltip>
           </div>
-          <el-popover
+          <el-popover ref="popover" placement="bottom" trigger="hover">
-            ref="popover"
-            placement="bottom"
-            trigger="hover"
-            :disabled="checkDisabled('color')"
-          >
             <Color :color="style.color" @change="changeFontColor"></Color>
           </el-popover>
-          <el-popover
+          <el-popover ref="popover2" placement="bottom" trigger="hover">
-            ref="popover2"
-            placement="bottom"
-            trigger="hover"
-            :disabled="checkDisabled('textDecoration')"
-          >
             <el-radio-group
               size="mini"
               v-model="style.textDecoration"
@@ -170,14 +146,8 @@
               class="block"
               v-popover:popover3
               :style="{ width: '80px', backgroundColor: style.borderColor }"
-              :class="{ disabled: checkDisabled('borderColor') }"
             ></span>
-            <el-popover
+            <el-popover ref="popover3" placement="bottom" trigger="hover">
-              ref="popover3"
-              placement="bottom"
-              trigger="hover"
-              :disabled="checkDisabled('borderColor')"
-            >
               <Color
                 :color="style.borderColor"
                 @change="changeBorderColor"
@@ -191,7 +161,6 @@
               style="width: 80px"
               v-model="style.borderDasharray"
               placeholder=""
-              :disabled="checkDisabled('borderDasharray')"
               @change="update('borderDasharray')"
             >
               <el-option
@@ -207,7 +176,13 @@
                     x2="110"
                     y2="17"
                     stroke-width="2"
-                    :stroke="style.borderDasharray === item.value ? '#409eff' : isDark ? '#fff' : '#000'"
+                    :stroke="
+                      style.borderDasharray === item.value
+                        ? '#409eff'
+                        : isDark
+                        ? '#fff'
+                        : '#000'
+                    "
                     :stroke-dasharray="item.value"
                   ></line>
                 </svg>
@@ -223,7 +198,6 @@
               style="width: 80px"
               v-model="style.borderWidth"
               placeholder=""
-              :disabled="checkDisabled('borderWidth')"
               @change="update('borderWidth')"
             >
               <el-option
@@ -241,14 +215,13 @@
               </el-option>
             </el-select>
           </div>
-          <div class="rowItem">
+          <div class="rowItem" v-show="style.shape === 'rectangle'">
             <span class="name">{{ $t('style.borderRadius') }}</span>
             <el-select
               size="mini"
               style="width: 80px"
               v-model="style.borderRadius"
               placeholder=""
-              :disabled="checkDisabled('borderRadius')"
               @change="update('borderRadius')"
             >
               <el-option
@@ -270,14 +243,8 @@
               class="block"
               v-popover:popover4
               :style="{ backgroundColor: style.fillColor }"
-              :class="{ disabled: checkDisabled('fillColor') }"
             ></span>
-            <el-popover
+            <el-popover ref="popover4" placement="bottom" trigger="hover">
-              ref="popover4"
-              placement="bottom"
-              trigger="hover"
-              :disabled="checkDisabled('fillColor')"
-            >
               <Color :color="style.fillColor" @change="changeFillColor"></Color>
             </el-popover>
           </div>
@@ -292,7 +259,6 @@
               style="width: 120px"
               v-model="style.shape"
               placeholder=""
-              :disabled="checkDisabled('shape')"
               @change="update('shape')"
             >
               <el-option
@@ -305,7 +271,13 @@
                   <path
                     :d="shapeListMap[item.value]"
                     fill="none"
-                    :stroke="style.shape === item.value ? '#409eff' : isDark ? '#fff' : '#000'"
+                    :stroke="
+                      style.shape === item.value
+                        ? '#409eff'
+                        : isDark
+                        ? '#fff'
+                        : '#000'
+                    "
                     stroke-width="2"
                   ></path>
                 </svg>
@@ -322,14 +294,8 @@
               class="block"
               v-popover:popover5
               :style="{ width: '80px', backgroundColor: style.lineColor }"
-              :class="{ disabled: checkDisabled('lineColor') }"
             ></span>
-            <el-popover
+            <el-popover ref="popover5" placement="bottom" trigger="hover">
-              ref="popover5"
-              placement="bottom"
-              trigger="hover"
-              :disabled="checkDisabled('lineColor')"
-            >
               <Color :color="style.lineColor" @change="changeLineColor"></Color>
             </el-popover>
           </div>
@@ -340,7 +306,6 @@
               style="width: 80px"
               v-model="style.lineDasharray"
               placeholder=""
-              :disabled="checkDisabled('lineDasharray')"
               @change="update('lineDasharray')"
             >
               <el-option
@@ -356,7 +321,13 @@
                     x2="110"
                     y2="17"
                     stroke-width="2"
-                    :stroke="style.lineDasharray === item.value ? '#409eff' : isDark ? '#fff' : '#000'"
+                    :stroke="
+                      style.lineDasharray === item.value
+                        ? '#409eff'
+                        : isDark
+                        ? '#fff'
+                        : '#000'
+                    "
                     :stroke-dasharray="item.value"
                   ></line>
                 </svg>
@@ -372,7 +343,6 @@
               style="width: 80px"
               v-model="style.lineWidth"
               placeholder=""
-              :disabled="checkDisabled('lineWidth')"
               @change="update('lineWidth')"
             >
               <el-option
@@ -399,7 +369,6 @@
             <el-slider
               style="width: 200px"
               v-model="style.paddingX"
-              :disabled="checkDisabled('paddingX')"
               @change="update('paddingX')"
             ></el-slider>
           </div>
@@ -410,7 +379,6 @@
             <el-slider
               style="width: 200px"
               v-model="style.paddingY"
-              :disabled="checkDisabled('paddingY')"
               @change="update('paddingY')"
             ></el-slider>
           </div>
@@ -437,7 +405,6 @@ import {
   shapeList,
   shapeListMap
 } from '@/config'
-import { supportActiveStyle } from 'simple-mind-map/src/themes/default'
 import { mapState } from 'vuex'
 
 /**
@@ -453,13 +420,11 @@ export default {
   },
   data() {
     return {
-      supportActiveStyle,
       fontSizeList,
       borderWidthList,
       borderRadiusList,
       lineHeightList,
       activeNodes: [],
-      activeTab: 'normal',
       style: {
         shape: '',
         paddingX: 0,
@@ -496,7 +461,7 @@ export default {
     },
     shapeListMap() {
       return shapeListMap[this.$i18n.locale] || shapeListMap.zh
-    },
+    }
   },
   watch: {
     activeSidebar(val) {
@@ -521,32 +486,11 @@ export default {
      */
     onNodeActive(...args) {
       this.$nextTick(() => {
-        this.activeTab = 'normal'
         this.activeNodes = args[1]
         this.initNodeStyle()
       })
     },
-
+    
-    /**
-     * @Author: 王林
-     * @Date: 2021-05-05 11:42:32
-     * @Desc: tab切换
-     */
-    handleTabClick() {
-      this.initNodeStyle()
-    },
-
-    /**
-     * @Author: 王林
-     * @Date: 2022-09-12 22:16:56
-     * @Desc: 检查是否禁用
-     */
-    checkDisabled(prop) {
-      return (
-        this.activeTab === 'active' && !this.supportActiveStyle.includes(prop)
-      )
-    },
-
     /**
      * @Author: 王林
      * @Date: 2021-05-05 09:48:52
@@ -554,7 +498,6 @@ export default {
      */
     initNodeStyle() {
       if (this.activeNodes.length <= 0) {
-        this.activeTab = 'normal'
         return
       }
       ;[
@@ -577,11 +520,7 @@ export default {
         'lineDasharray',
         'lineWidth'
       ].forEach(item => {
-        this.style[item] = this.activeNodes[0].getStyle(
+        this.style[item] = this.activeNodes[0].getStyle(item, false)
-          item,
-          false,
-          this.activeTab === 'active'
-        )
       })
     },
 
@@ -592,7 +531,7 @@ export default {
      */
     update(prop) {
       this.activeNodes.forEach(node => {
-        node.setStyle(prop, this.style[prop], this.activeTab === 'active')
+        node.setStyle(prop, this.style[prop])
       })
     },
 
@@ -829,4 +768,4 @@ export default {
     background-color: #409eff;
   }
 }
-</style>
+</style>