perf: 处理分组属性的展示

src/components/Pages/ChartItemSetting/SizeSetting.vue

@@ -3,6 +3,7 @@
     <n-input-number
       v-model:value="chartAttr.w"
       :min="50"
+      :disabled="isGroup"
       size="small"
       placeholder="px"
     >
@@ -13,6 +14,7 @@
     <n-input-number
       v-model:value="chartAttr.h"
       :min="50"
+      :disabled="isGroup"
       size="small"
       placeholder="px"
     >
@@ -32,6 +34,10 @@ const props = defineProps({
   chartAttr: {
     type: Object as PropType<Omit<PickCreateComponentType<'attr'>, 'node' | 'conNode'>>,
     required: true
+  },
+  isGroup: {
+    type: Boolean,
+    required: false
   }
 })
 </script>

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"
@@ -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

src/views/chart/ContentConfigurations/components/CanvasPage/index.vue

@@ -96,7 +96,7 @@
     </n-space>
 
     <!-- 滤镜 -->
-    <styles-setting :is-canvas="true" :chartStyles="canvasConfig"></styles-setting>
+    <styles-setting :isCanvas="true" :chartStyles="canvasConfig"></styles-setting>
     <n-divider style="margin: 10px 0;"></n-divider>
 
     <!-- 主题选择和全局配置 -->

src/views/chart/ContentConfigurations/components/ChartSetting/index.vue

@@ -3,11 +3,11 @@
     <!-- 名称 -->
     <name-setting :chartConfig="targetData.chartConfig"></name-setting>
     <!-- 尺寸 -->
-    <size-setting :chartAttr="targetData.attr"></size-setting>
+    <size-setting :isGroup="targetData.isGroup" :chartAttr="targetData.attr"></size-setting>
     <!-- 位置 -->
     <position-setting :chartAttr="targetData.attr" :canvasConfig="chartEditStore.getEditCanvasConfig"/>
     <!-- 滤镜 -->
-    <styles-setting :chartStyles="targetData.styles"></styles-setting>
+    <styles-setting :isGroup="targetData.isGroup" :chartStyles="targetData.styles"></styles-setting>
     <!-- 自定义配置项 -->
     <component :is="targetData.chartConfig.conKey" :optionData="targetData.option"></component>
   </div>

src/views/chart/ContentConfigurations/index.vue

@@ -11,21 +11,12 @@
       :collapsed="collapsed"
       :native-scrollbar="false"
       show-trigger="bar"
-      @collapse="collapsedHindle"
-      @expand="expandHindle"
-    >
-      <content-box
-        class="go-content-layers go-boderbox"
-        :show-top="false"
-        :depth="2"
+      @collapse="collapsedHandle"
+      @expand="expandHandle"
     >
+      <content-box class="go-content-layers go-boderbox" :show-top="false" :depth="2">
         <!-- 页面配置 -->
-        <n-tabs
-          v-show="!selectTarget"
-          class="tabs-box"
-          size="small"
-          type="segment"
-        >
+        <n-tabs v-if="!selectTarget" class="tabs-box" size="small" type="segment">
           <n-tab-pane
             v-for="item in globalTabList"
             :key="item.key"
@@ -46,14 +37,9 @@
         </n-tabs>
 
         <!-- 编辑 -->
-        <n-tabs
-          v-show="selectTarget"
-          class="tabs-box"
-          size="small"
-          type="segment"
-        >
+        <n-tabs v-if="selectTarget" class="tabs-box" size="small" type="segment">
           <n-tab-pane
-            v-for="(item) in canvasTabList"
+            v-for="item in selectTarget.isGroup ? chartsDefaultTabList : chartsTabList"
             :key="item.key"
             :name="item.key"
             size="small"
@@ -88,35 +74,22 @@ const { getDetails } = toRefs(useChartLayoutStore())
 const { setItem } = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 
-const {
-  ConstructIcon,
-  FlashIcon,
-  DesktopOutlineIcon,
-  LeafIcon
-} = icon.ionicons5
+const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon } = icon.ionicons5
 
 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
-const CanvasPage = loadAsyncComponent(() =>
-  import('./components/CanvasPage/index.vue')
-)
-const ChartSetting = loadAsyncComponent(() =>
-  import('./components/ChartSetting/index.vue')
-)
-const ChartData = loadAsyncComponent(() =>
-  import('./components/ChartData/index.vue')
-)
-const ChartAnimation = loadAsyncComponent(() =>
-  import('./components/ChartAnimation/index.vue')
-)
+const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue'))
+const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
+const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
+const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
 
 const collapsed = ref<boolean>(getDetails.value)
 
-const collapsedHindle = () => {
+const collapsedHandle = () => {
   collapsed.value = true
   setItem(ChartLayoutStoreEnum.DETAILS, true)
 }
 
-const expandHindle = () => {
+const expandHandle = () => {
   collapsed.value = false
   setItem(ChartLayoutStoreEnum.DETAILS, false)
 }
@@ -125,14 +98,15 @@ const selectTarget = computed(() => {
   const selectId = chartEditStore.getTargetChart.selectId
   // 排除多个
   if (selectId.length !== 1) return undefined
-  return chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  const target = chartEditStore.componentList[chartEditStore.fetchTargetIndex()]
+  return target
 })
 
 watch(getDetails, newData => {
   if (newData) {
-    collapsedHindle()
+    collapsedHandle()
   } else {
-    expandHindle()
+    expandHandle()
   }
 })
 
@@ -146,7 +120,7 @@ const globalTabList = [
   }
 ]
 
-const canvasTabList = [
+const chartsDefaultTabList = [
   {
     key: 'ChartSetting',
     title: '定制',
@@ -158,7 +132,11 @@ const canvasTabList = [
     title: '动画',
     icon: LeafIcon,
     render: ChartAnimation
-  },
+  }
+]
+
+const chartsTabList = [
+  ...chartsDefaultTabList,
   {
     key: 'ChartData',
     title: '数据',

src/views/chart/ContentEdit/components/EditGroup/index.vue

@@ -16,7 +16,7 @@
       @mousedown="mousedownHandle($event, groupData)"
       @mouseenter="mouseenterHandle($event, groupData)"
       @mouseleave="mouseleaveHandle($event, groupData)"
-      @contextmenu="handleContextMenu($event, groupData, undefined, undefined)"
+      @contextmenu="handleContextMenu($event, groupData, undefined, hideOptionsList)"
     >
       <!-- 组合组件 -->
       <edit-shape-box
@@ -74,6 +74,9 @@ const props = defineProps({
 const chartEditStore = useChartEditStore()
 const { handleContextMenu } = useContextMenu()
 
+// 去除创建分组按钮
+const hideOptionsList = [MenuEnum.GROUP]
+
 // 点击事件
 const { mouseenterHandle, mouseleaveHandle, mousedownHandle, mouseClickHandle } = useMouseHandle()
 

src/views/chart/hooks/useContextMenu.hook.ts

@@ -12,6 +12,14 @@ const { UpToTopIcon, DownToBottomIcon, PaintBrushIcon, Carbon3DSoftwareIcon, Car
 
 const chartEditStore = useChartEditStore()
 
+// * 分割线
+const divider = [
+  {
+    type: 'divider',
+    key: 'd3'
+  }
+]
+
 // * 默认单组件选项
 export const defaultOptions: MenuOptionsItemType[] = [
   {
@@ -163,10 +171,10 @@ const handleContextMenu = (
     menuOptions.value = pickOption(toRaw(menuOptions.value), defaultNoItemKeys)
   }
   if (hideOptionsList) {
-    menuOptions.value = hideOption([...defaultMultiSelectOptions, ...defaultOptions], hideOptionsList)
+    menuOptions.value = hideOption([...defaultMultiSelectOptions, ...divider, ...defaultOptions], hideOptionsList)
   }
   if (pickOptionsList) {
-    menuOptions.value = pickOption([...defaultMultiSelectOptions, ...defaultOptions], pickOptionsList)
+    menuOptions.value = pickOption([...defaultMultiSelectOptions, ...divider, ...defaultOptions], pickOptionsList)
   }
   if (optionsHandle) {
     // 自定义函数能够拿到当前选项和所有选项