fix: 修改右键

src/views/chart/ContentDetails/components/ChartSetting/index.ts

@@ -0,0 +1,3 @@
+import ChartSetting from './index.vue'
+
+export { ChartSetting }

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

@@ -8,6 +8,5 @@
 
 <style lang="scss" scoped>
 @include go('chart-content-details') {
-  position: relative;
 }
-</style>
+</style>

src/views/chart/ContentDetails/components/Setting/index.ts

@@ -1,3 +0,0 @@
-import Setting from './index.vue'
-
-export { Setting }

src/views/chart/ContentDetails/index.vue

@@ -26,16 +26,22 @@
           size="small"
           type="segment"
         >
-          <n-tab-pane size="small" display-directive="show:lazy">
+          <n-tab-pane
+            v-for="item in globalTabList"
+            :key="item.key"
+            :name="item.key"
+            size="small"
+            display-directive="show:lazy"
+          >
             <template #tab>
               <n-space>
-                <span> 页面设置 </span>
+                <span>{{ item.title }}</span>
                 <n-icon size="16" class="icon-position">
-                  <DesktopOutlineIcon />
+                  <component :is="item.icon"></component>
                 </n-icon>
               </n-space>
             </template>
-            <CanvasPage name="canvas" />
+            <component :is="item.render"></component>
           </n-tab-pane>
         </n-tabs>
 
@@ -47,7 +53,7 @@
           type="segment"
         >
           <n-tab-pane
-            v-for="item in tabList"
+            v-for="item in canvasTabList"
             :key="item.key"
             :name="item.key"
             size="small"
@@ -86,8 +92,8 @@ const { ConstructIcon, FlashIcon, DesktopOutlineIcon } = icon.ionicons5
 
 const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
 const CanvasPage = loadSkeletonAsyncComponent(() =>import('./components/CanvasPage/index.vue'))
-const Setting = loadSkeletonAsyncComponent(() =>import('./components/Setting/index.vue'))
-const Behind = loadSkeletonAsyncComponent(() => import('./components/Behind/index.vue'))
+const ChartSetting = loadSkeletonAsyncComponent(() =>import('./components/ChartSetting/index.vue'))
+const ChartBehind = loadSkeletonAsyncComponent(() => import('./components/ChartBehind/index.vue'))
 
 const collapsed = ref<boolean>(getDetails.value)
 
@@ -118,24 +124,27 @@ watch(getDetails, newData => {
 })
 
 // 页面设置
-const pageSetting = reactive({
-  key: 'pageSetting',
-  title: '页面设置',
-  render: CanvasPage
-})
-
-const tabList = shallowRef([
+const globalTabList = reactive([
   {
-    key: 'setting',
-    title: '设置',
+    key: 'pageSetting',
+    title: '页面配置',
+    icon: DesktopOutlineIcon,
+    render: CanvasPage
+  }
+])
+
+const canvasTabList = shallowRef([
+  {
+    key: 'ChartSetting',
+    title: '定制',
     icon: ConstructIcon,
-    render: Setting
+    render: ChartSetting
   },
   {
-    key: 'behind',
+    key: 'ChartBehind',
     title: '数据',
     icon: FlashIcon,
-    render: Behind
+    render: ChartBehind
   }
 ])
 </script>

src/views/chart/ContentLayers/index.vue

@@ -14,13 +14,13 @@
 
     <!-- 图层内容 -->
     <ListItem
-      v-for="(item) in chartEditStore.getComponentList"
+      v-for="item in chartEditStore.getComponentList"
       :key="item.id"
       :componentData="item"
       @mousedown="mousedownHandle(item)"
       @mouseenter="mouseenterHandle(item)"
       @mouseleave="mouseleaveHandle(item)"
-      @contextmenu="handleContextMenu($event, item)"
+      @contextmenu="handleContextMenu($event)"
     />
   </ContentBox>
 </template>
@@ -30,11 +30,17 @@ import { ContentBox } from '../ContentBox/index'
 
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
-
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { ChartEditStoreEnum, TargetChartType } from '@/store/modules/chartEditStore/chartEditStore.d'
 import { CreateComponentType } from '@/packages/index.d'
-import { useContextMenu } from '@/views/chart/hooks/useContextMenu.hook'
+import {
+  ChartEditStoreEnum,
+  TargetChartType
+} from '@/store/modules/chartEditStore/chartEditStore.d'
+import {
+  useContextMenu,
+  MenuOptionsItemType,
+  MenuEnum
+} from '@/views/chart/hooks/useContextMenu.hook'
 
 import { ListItem } from './components/ListItem/index'
 import { icon } from '@/plugins'
@@ -42,7 +48,10 @@ import { icon } from '@/plugins'
 const { LayersIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
 const chartEditStore = useChartEditStoreStore()
-const { handleContextMenu } = useContextMenu()
+
+const { handleContextMenu } = useContextMenu({
+  hideOptionsList: [MenuEnum.CLEAR, MenuEnum.PARSE]
+})
 
 const backHandle = () => {
   chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false)

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

@@ -1,4 +1,4 @@
-import { ref, nextTick } from 'vue'
+import { reactive, nextTick } from 'vue'
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
 import { CreateComponentType } from '@/packages/index.d'
 import { renderIcon, loadingError } from '@/utils'
@@ -104,38 +104,49 @@ const defaultOptions: MenuOptionsItemType[] = [
   }
 ]
 
+// * 去除隐藏选项
+const clearHideOption = (options: MenuOptionsItemType[], hideList?: MenuEnum[]) => {
+  if(!hideList) return options
+  const a = options.filter((op: MenuOptionsItemType) => {
+    return hideList.findIndex((e: MenuEnum) => e !== op.key)
+  })
+}
+
+// * 右键处理
+const handleContextMenu = (e: MouseEvent, item: CreateComponentType) => {
+  e.stopPropagation()
+  e.preventDefault()
+  let target = e.target
+  while (target instanceof SVGElement) {
+    target = target.parentNode
+  }
+  chartEditStore.setRightMenuShow(false)
+  nextTick().then(() => {
+    chartEditStore.setMousePosition(e.clientX, e.clientY)
+    chartEditStore.setRightMenuShow(true)
+  })
+}
+
 /**
  * * 右键hook
- * @param menuOption
+ * @param menuConfig
  * @returns
  */
-export const useContextMenu = (menuOption?: {
+export const useContextMenu = (menuConfig: {
   // 自定义右键配置
-  selfOptions: MenuOptionsItemType[]
+  selfOptions?: MenuOptionsItemType[]
   // 前置处理函数
-  optionsHandle: Function
+  optionsHandle?: Function
+  // 隐藏列表
+  hideOptionsList?: MenuEnum[]
 }) => {
-  const selfOptions = menuOption?.selfOptions
-  const optionsHandle = menuOption?.optionsHandle
+  const selfOptions = menuConfig?.selfOptions
+  const optionsHandle = menuConfig?.optionsHandle
+  const hideOptionsList = menuConfig?.hideOptionsList
 
   // * 右键选项
   const menuOptions: MenuOptionsItemType[] = selfOptions || defaultOptions
 
-  // * 右键处理
-  const handleContextMenu = (e: MouseEvent, item: CreateComponentType) => {
-    e.stopPropagation()
-    e.preventDefault()
-    let target = e.target
-    while (target instanceof SVGElement) {
-      target = target.parentNode
-    }
-    chartEditStore.setRightMenuShow(false)
-    nextTick().then(() => {
-      chartEditStore.setMousePosition(e.clientX, e.clientY)
-      chartEditStore.setRightMenuShow(true)
-    })
-  }
-
   // * 失焦
   const onClickoutside = () => {
     chartEditStore.setRightMenuShow(false)
@@ -158,9 +169,10 @@ export const useContextMenu = (menuOption?: {
       }
     })
   }
-
   return {
-    menuOptions: optionsHandle ? optionsHandle(menuOptions) : menuOptions,
+    // todo 每次都重新计算的功能
+    // menuOptions: clearHideOption ? clearHideOption(menuOptions, hideOptionsList) : menuOptions,
+    menuOptions: menuOptions,
     handleContextMenu,
     onClickoutside,
     handleMenuSelect,