perf: 修改事件文件位置，修改图标

src/components/Pages/ChartItemSetting/index.ts

@@ -16,7 +16,5 @@ import PositionSetting from './PositionSetting.vue'
 import SizeSetting from './SizeSetting.vue'
 // 样式
 import StylesSetting from './StylesSetting.vue'
-// 事件配置
-import EventSetting from './EventSetting.vue'
 
-export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting, EventSetting }
+export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting }

src/hooks/useLifeHandler.hook.ts

@@ -2,47 +2,47 @@ import { CreateComponentType, EventLife } from '@/packages/index.d'
 import * as echarts from 'echarts'
 
 // 所有图表组件集合对象
-const components: {[K in string]?: any} = {};
+const components: { [K in string]?: any } = {}
 
 // 项目提供的npm 包变量
 export const npmPkgs = { echarts }
 
 export const useLifeHandler = (chartConfig: CreateComponentType) => {
-    const events = chartConfig.events || {}
-    // 生成生命周期事件
-    const lifeEvents = {
-        [EventLife.BEFORE_MOUNT] (e:any) {
-            // 存储组件
-            components[chartConfig.id] = e.component
-            const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim()
-            generateFunc(fnStr, e)
-        },
-        [EventLife.MOUNTED] (e:any){
-            const fnStr = (events[EventLife.MOUNTED] || '').trim()
-            generateFunc(fnStr, e)
-        },
+  const events = chartConfig.events || {}
+  // 生成生命周期事件
+  const lifeEvents = {
+    [EventLife.BEFORE_MOUNT](e: any) {
+      // 存储组件
+      components[chartConfig.id] = e.component
+      const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim()
+      generateFunc(fnStr, e)
+    },
+    [EventLife.MOUNTED](e: any) {
+      const fnStr = (events[EventLife.MOUNTED] || '').trim()
+      generateFunc(fnStr, e)
     }
-    return lifeEvents
+  }
+  return lifeEvents
 }
 
 /**
- * 
+ *
  * @param fnStr 用户方法体代码
  * @param e 执行生命周期的动态组件实例
  */
- function generateFunc(fnStr: string, e: any){
-    try {
-        Function(`
-            "use strict";
-            return (
-                async function(e, components, node_modules){
-                    const {${Object.keys(npmPkgs).join()}} = node_modules;
-                    ${fnStr}
-                }
-            )`)().bind(e?.component)
-            // 便于拷贝echarts示例时设置option 的formatter等相关内容
-            (e, components, npmPkgs);
-    } catch (error) {
-        console.error(error)
-    }
-}
+function generateFunc(fnStr: string, e: any) {
+  try {
+    Function(`
+      "use strict";
+      return (
+        async function(e, components, node_modules){
+          const {${Object.keys(npmPkgs).join()}} = node_modules;
+          ${fnStr}
+        }
+      )`)().bind(e?.component)
+    // 便于拷贝echarts示例时设置option 的formatter等相关内容
+    e, components, npmPkgs
+  } catch (error) {
+    console.error(error)
+  }
+}

src/packages/index.d.ts

@@ -90,6 +90,12 @@ export const BlendModeEnumList = [
   { label: '亮度', value: 'luminosity' }
 ]
 
+// vue3 生命周期事件
+export enum EventLife {
+  BEFORE_MOUNT = 'vnodeBeforeMount',
+  MOUNTED = 'vnodeMounted'
+}
+
 // 组件实例类
 export interface PublicConfigType {
   id: string
@@ -120,12 +126,6 @@ export interface PublicConfigType {
   }
 }
 
-// vue3 生命周期事件
-export enum EventLife {
-  BEFORE_MOUNT = 'vnodeBeforeMount',
-  MOUNTED = 'vnodeMounted'
-}
-
 export interface CreateComponentType extends PublicConfigType, requestConfig {
   key: string
   chartConfig: ConfigType

src/settings/animations/index.ts

@@ -11,7 +11,6 @@ export const animations = [
       { label: '放大晃动缩小', value: 'tada' },
       { label: '扇形摇摆', value: 'wobble' },
       { label: '左右上下晃动', value: 'jello' },
-      { label: 'Y轴旋转', value: 'flip' }
     ]
   },
   {

src/components/Pages/ChartItemSetting/EventSetting.vue → src/views/chart/ContentConfigurations/components/ChartEvent/index.vue

@@ -1,26 +1,29 @@
 <template>
   <!-- 事件配置 -->
   <n-collapse class="go-mt-3" arrow-placement="right" default-expanded-names="1" accordion>
-    <n-text depth="3">组件 id： <n-text>{{targetData.id}}</n-text></n-text>
+    <n-text depth="3">
+      组件 id：
+      <n-text>{{ targetData.id }}</n-text>
+    </n-text>
     <n-collapse-item title="事件配置" name="1">
       <n-space class="go-event go-mt-3" :size="18" vertical>
         <chart-event-monaco-editor></chart-event-monaco-editor>
       </n-space>
     </n-collapse-item>
   </n-collapse>
-
 </template>
 
 <script setup lang="ts">
-import { ChartEventMonacoEditor } from '@/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor'
-import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
+import { ChartEventMonacoEditor } from './components/ChartEventMonacoEditor'
+import { useTargetData } from '../hooks/useTargetData.hook'
 const { targetData } = useTargetData()
 </script>
+
 <style lang="scss" scoped>
 @include deep() {
-  .go-event .n-card__content{
-    max-height:60vh;
-    overflow-y:auto;
+  .go-event .n-card__content {
+    max-height: 60vh;
+    overflow-y: auto;
   }
 }
-</style>
+</style>

src/views/chart/ContentConfigurations/index.vue

@@ -75,13 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore())
 const { setItem } = useChartLayoutStore()
 const chartEditStore = useChartEditStore()
 
-const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, CodeSlashIcon } = icon.ionicons5
+const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, RocketIcon } = 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 ChartEvent = loadAsyncComponent(() => import('@/components/Pages/ChartItemSetting/EventSetting.vue'))
+const ChartEvent = loadAsyncComponent(() => import('./components/ChartEvent/index.vue'))
 const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
 
 const collapsed = ref<boolean>(getDetails.value)
@@ -153,7 +153,7 @@ const chartsTabList = [
   {
     key: TabsEnum.CHART_EVENT,
     title: '事件',
-    icon: CodeSlashIcon,
+    icon: RocketIcon,
     render: ChartEvent
   }
 ]