diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts index aa0d557b..fde94eef 100644 --- a/src/hooks/useLifeHandler.hook.ts +++ b/src/hooks/useLifeHandler.hook.ts @@ -1,4 +1,4 @@ -import { CreateComponentType, EventLife } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType, EventLife, BaseEvent } from '@/packages/index.d' import * as echarts from 'echarts' // 所有图表组件集合对象 @@ -7,26 +7,55 @@ const components: { [K in string]?: any } = {} // 项目提供的npm 包变量 export const npmPkgs = { echarts } -export const useLifeHandler = (chartConfig: CreateComponentType) => { - const events = chartConfig.events || {} +// 组件事件处理 hook +export const useLifeHandler = (chartConfig: CreateComponentType | CreateComponentGroupType) => { + // 处理基础事件 + const baseEvent: { [key: string]: any } = {} + for (const key in chartConfig.events.baseEvent) { + const fnStr: string | undefined = (chartConfig.events.baseEvent as any)[key] + // 动态绑定基础事件 + if (fnStr) { + baseEvent[key] = generateBaseFunc(fnStr) + } + } + // 生成生命周期事件 + const events = chartConfig.events.advancedEvents || {} const lifeEvents = { - [EventLife.BEFORE_MOUNT](e: any) { + [EventLife.VNODE_BEFORE_MOUNT](e: any) { // 存储组件 components[chartConfig.id] = e.component - const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim() + const fnStr = (events[EventLife.VNODE_BEFORE_MOUNT] || '').trim() generateFunc(fnStr, e) }, - [EventLife.MOUNTED](e: any) { - const fnStr = (events[EventLife.MOUNTED] || '').trim() + [EventLife.VNODE_MOUNTED](e: any) { + const fnStr = (events[EventLife.VNODE_MOUNTED] || '').trim() generateFunc(fnStr, e) } } - return lifeEvents + return { ...baseEvent, ...lifeEvents } } /** - * + * 生成基础函数 + * @param fnStr 用户方法体代码 + * @param event 鼠标事件 + */ + export function generateBaseFunc(fnStr: string) { + try { + return new Function(` + return ( + async function(mouseEvent){ + ${fnStr} + } + )`)() + } catch (error) { + console.error(error) + } +} + +/** + * 生成高级函数 * @param fnStr 用户方法体代码 * @param e 执行生命周期的动态组件实例 */ diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 94e90c91..fbdfa2f5 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -90,12 +90,24 @@ export const BlendModeEnumList = [ { label: '亮度', value: 'luminosity' } ] +// 基础事件类型(vue不加 on) +export enum BaseEvent { + // 点击 + ON_CLICK = 'click', + // 双击 + ON_DBL_CLICK = 'dblclick', + // 移入 + ON_MOUSE_ENTER = 'mouseenter', + // 移出 + ON_MOUSE_LEAVE = 'mouseleave', +} + // vue3 生命周期事件 -export enum EventLife { +export enum EventLife { // 渲染之后 - MOUNTED = 'vnodeMounted', + VNODE_MOUNTED = 'vnodeMounted', // 渲染之前 - BEFORE_MOUNT = 'vnodeBeforeMount', + VNODE_BEFORE_MOUNT = 'vnodeBeforeMount', } // 组件实例类 @@ -123,8 +135,13 @@ export interface PublicConfigType { } filter?: string status: StatusType - events?: { - [K in EventLife]?: string + events: { + baseEvent: { + [K in BaseEvent]?: string + }, + advancedEvents: { + [K in EventLife]?: string + } } } diff --git a/src/packages/public/publicConfig.ts b/src/packages/public/publicConfig.ts index ca20e464..ab85be64 100644 --- a/src/packages/public/publicConfig.ts +++ b/src/packages/public/publicConfig.ts @@ -1,5 +1,4 @@ import { getUUID } from '@/utils' -import { ChartFrameEnum, PublicConfigType, CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { RequestConfigType } from '@/store/modules/chartEditStore/chartEditStore.d' import { groupTitle } from '@/settings/designSetting' import { @@ -9,6 +8,14 @@ import { RequestContentTypeEnum, RequestBodyEnum } from '@/enums/httpEnum' +import { + BaseEvent, + EventLife, + ChartFrameEnum, + PublicConfigType, + CreateComponentType, + CreateComponentGroupType +} from '@/packages/index.d' import { chartInitConfig } from '@/settings/designSetting' import cloneDeep from 'lodash/cloneDeep' @@ -82,7 +89,18 @@ export class PublicConfigClass implements PublicConfigType { // 数据过滤 public filter = undefined // 事件 - public events = undefined + public events = { + baseEvent: { + [BaseEvent.ON_CLICK]: undefined, + [BaseEvent.ON_DBL_CLICK]: undefined, + [BaseEvent.ON_MOUSE_ENTER]: undefined, + [BaseEvent.ON_MOUSE_LEAVE]: undefined + }, + advancedEvents: { + [EventLife.VNODE_MOUNTED]: undefined, + [EventLife.VNODE_BEFORE_MOUNT]: undefined + } + } } // 多选成组类 diff --git a/src/store/modules/chartEditStore/chartEditStore.ts b/src/store/modules/chartEditStore/chartEditStore.ts index dbe12556..47d04044 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -126,7 +126,7 @@ export const useChartEditStore = defineStore({ chartThemeColor: defaultTheme || 'dark', // 全局配置 chartThemeSetting: globalThemeJson, - // 预览方式 + // 适配方式 previewScaleType: previewScaleType }, // 数据请求处理（需存储给后端） diff --git a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue index 470ce0b6..908cc6b0 100644 --- a/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue +++ b/src/views/chart/ContentConfigurations/components/CanvasPage/index.vue @@ -75,7 +75,7 @@ - 预览方式 + 适配方式 { }) } -// 选择预览方式 +// 选择适配方式 const selectPreviewType = (key: PreviewScaleEnum) => { chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key) } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/importTemplate.ts similarity index 100% rename from src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/importTemplate.ts rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/importTemplate.ts diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts new file mode 100644 index 00000000..32daaf60 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts @@ -0,0 +1,3 @@ +import ChartEventAdvancedHandle from './index.vue' + +export { ChartEventAdvancedHandle } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue similarity index 82% rename from src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue rename to src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue index 1865164d..fe89c656 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue @@ -10,13 +10,15 @@ 编辑 - +

+ // {{ EventLifeName[eventName] }} +
async {{ eventName }} (e, components, echarts, node_modules) {

-

+

},

 @@ -30,13 +32,15 @@ 高级事件编辑器（配合源码使用） + + {{ eventName }}(e, components, echarts, node_modules)  {

- +

}

 @@ -136,7 +140,7 @@ - 提示 + 说明 通过提供的参数可为图表增加定制化的tooltip、交互事件等等 @@ -158,29 +162,27 @@ import { useTargetData } from '../../../hooks/useTargetData.hook' import { templateList } from './importTemplate' import { npmPkgs } from '@/hooks' import { icon } from '@/plugins' -import { goDialog, toString } from '@/utils' import { CreateComponentType, EventLife } from '@/packages/index.d' -import { Script } from 'vm' const { targetData, chartEditStore } = useTargetData() const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5 const EventLifeName = { - [EventLife.BEFORE_MOUNT]: '渲染之前', - [EventLife.MOUNTED]: '渲染之后' + [EventLife.VNODE_BEFORE_MOUNT]: '渲染之前', + [EventLife.VNODE_MOUNTED]: '渲染之后' } const EventLifeTip = { - [EventLife.BEFORE_MOUNT]: '此时组件 DOM 还未存在', - [EventLife.MOUNTED]: '此时组件 DOM 已经存在' + [EventLife.VNODE_BEFORE_MOUNT]: '此时组件 DOM 还未存在', + [EventLife.VNODE_MOUNTED]: '此时组件 DOM 已经存在' } // 受控弹窗 const showModal = ref(false) // 编辑区域控制 -const editTab = ref(EventLife.MOUNTED) +const editTab = ref(EventLife.VNODE_MOUNTED) // events 函数模板 -let events = ref({ ...targetData.value.events }) +let advancedEvents = ref({ ...targetData.value.events.advancedEvents }) // 事件错误标识 const errorFlag = ref(false) @@ -190,7 +192,7 @@ const validEvents = () => { let message = '' let name = '' - errorFlag.value = Object.entries(events.value).every(([eventName, str]) => { + errorFlag.value = Object.entries(advancedEvents.value).every(([eventName, str]) => { try { // 支持await，验证语法 const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor @@ -221,11 +223,14 @@ const saveEvents = () => { window['$message'].error('事件函数错误，无法进行保存') return } - if (Object.values(events.value).join('').trim() === '') { + if (Object.values(advancedEvents.value).join('').trim() === '') { // 清空事件 - targetData.value.events = undefined + targetData.value.events.advancedEvents = { + vnodeBeforeMount: undefined, + vnodeMounted: undefined, + } } else { - targetData.value.events = { ...events.value } + targetData.value.events.advancedEvents = { ...advancedEvents.value } } closeEvents() } @@ -234,52 +239,12 @@ watch( () => showModal.value, (newData: boolean) => { if (newData) { - events.value = { ...targetData.value.events } + advancedEvents.value = { ...targetData.value.events.advancedEvents } } } ) diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts new file mode 100644 index 00000000..d45f2f12 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts @@ -0,0 +1,3 @@ +import ChartEventBaseHandle from './index.vue' + +export { ChartEventBaseHandle } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue new file mode 100644 index 00000000..90151736 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue @@ -0,0 +1,215 @@ + + + + + diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts deleted file mode 100644 index b6d23e30..00000000 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -import ChartEventMonacoEditor from './index.vue' - -export { ChartEventMonacoEditor } diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss b/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss new file mode 100644 index 00000000..8cd67cf8 --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss @@ -0,0 +1,51 @@ +/* 外层也要使用 */ +.func-keyword { + color: #b478cf; +} + +.func-annotate { + color: #70c0e8; +} + +@include go('chart-data-monaco-editor') { + .func-keyNameWord { + color: #70c0e8; + } + .tab-tip { + font-size: 12px; + } + &.n-card.n-modal, + .n-card { + @extend .go-background-filter; + } +} +@include deep() { + .n-layout, + .n-layout-sider { + background-color: transparent; + } + .collapse-show-box { + .n-card__content { + padding-left: 20px; + padding-right: 10px; + } + } + .go-editor-area { + max-height: 530px; + } + .checkbox--hidden:checked { + & + label { + .n-icon { + transition: all 0.3s; + transform: rotate(180deg); + } + } + & ~ .go-editor-area { + display: none; + } + } + // 优化代码换行 + .n-code > pre { + white-space: break-spaces; + } +} diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue index a5335f5e..05e5ce4d 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/index.vue @@ -5,20 +5,15 @@ 组件 id： {{ targetData.id }} - -
- 【单击、双击、移入、移出】在开发中，即将上线！ -
- （备注：高级事件模块可自行实现上述功能） -
- - + +