perf: 处理分组属性的展示

src/components/Pages/ChartItemSetting/StylesSetting.vue

@@ -1,4 +1,9 @@
 <template>
+  <div v-show="isGroup">
+    <n-divider n-divider style="margin: 10px 0"></n-divider>
+    <n-tag type="warning"> 解散分组「  {{ isCanvas ? '滤镜' : '滤镜 / 变换' }} 」也将消失!</n-tag>
+  </div>
+
   <collapse-item :name="isCanvas ? '滤镜' : '滤镜 / 变换'">
     <setting-item-box name="色相" :alone="true">
       <setting-item :name="`值：${chartStyles.hueRotate}deg`">
@@ -13,9 +18,7 @@
       </setting-item>
     </setting-item-box>
     <setting-item-box name="饱和度" :alone="true">
-      <setting-item
-        :name="`值：${(parseFloat(String(chartStyles.saturate)) * 100).toFixed(0)}%`"
-      >
+      <setting-item :name="`值：${(parseFloat(String(chartStyles.saturate)) * 100).toFixed(0)}%`">
         <!-- 透明度 -->
         <n-slider
           v-model:value="chartStyles.saturate"
@@ -27,9 +30,7 @@
       </setting-item>
     </setting-item-box>
     <setting-item-box name="对比度" :alone="true">
-      <setting-item
-        :name="`值：${(parseFloat(String(chartStyles.contrast)) * 100).toFixed(0)}%`"
-      >
+      <setting-item :name="`值：${(parseFloat(String(chartStyles.contrast)) * 100).toFixed(0)}%`">
         <!-- 透明度 -->
         <n-slider
           v-model:value="chartStyles.contrast"
@@ -41,9 +42,7 @@
       </setting-item>
     </setting-item-box>
     <setting-item-box name="亮度" :alone="true">
-      <setting-item
-        :name="`值：${(parseFloat(String(chartStyles.brightness)) * 100).toFixed(0)}%`"
-      >
+      <setting-item :name="`值：${(parseFloat(String(chartStyles.brightness)) * 100).toFixed(0)}%`">
         <!-- 透明度 -->
         <n-slider
           v-model:value="chartStyles.brightness"
@@ -55,9 +54,7 @@
       </setting-item>
     </setting-item-box>
     <setting-item-box name="透明度" :alone="true">
-      <setting-item
-        :name="`值：${(parseFloat(String(chartStyles.opacity)) * 100).toFixed(0)}%`"
-      >
+      <setting-item :name="`值：${(parseFloat(String(chartStyles.opacity)) * 100).toFixed(0)}%`">
         <!-- 透明度 -->
         <n-slider
           v-model:value="chartStyles.opacity"
@@ -68,7 +65,7 @@
         ></n-slider>
       </setting-item>
     </setting-item-box>
-    
+
     <!-- 变换 -->
     <setting-item-box v-if="!isCanvas" name="旋转°">
       <setting-item name="Z轴(平面) - 旋转">
@@ -130,21 +127,21 @@
 <script setup lang="ts">
 import { PropType } from 'vue'
 import { PickCreateComponentType } from '@/packages/index.d'
-import {
-  SettingItemBox,
-  SettingItem,
-  CollapseItem,
-} from '@/components/Pages/ChartItemSetting'
+import { SettingItemBox, SettingItem, CollapseItem } from '@/components/Pages/ChartItemSetting'
 
 const props = defineProps({
+  isGroup: {
+    type: Boolean,
+    required: false
+  },
   isCanvas: {
     type: Boolean,
     default: false
   },
   chartStyles: {
     type: Object as PropType<Omit<PickCreateComponentType<'styles'>, 'animations'>>,
-    required: true,
-  },
+    required: true
+  }
 })
 
 // 百分比格式化persen