From ae75d9b5e61d1f5543d6932ef7b7dd0a35499316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?= <1262327911@qq.com> Date: Sat, 12 Nov 2022 21:49:04 +0800 Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E4=BB=A3=E7=A0=81=E7=BB=93=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useLifeHandler.hook.ts | 10 +-- src/packages/index.d.ts | 27 ++++++-- src/packages/public/publicConfig.ts | 22 ++++++- .../modules/chartEditStore/chartEditStore.ts | 2 +- .../components/CanvasPage/index.vue | 4 +- .../ChartEventMonacoEditor/index.vue | 26 ++++---- .../EditTools/hooks/useFile.hooks.ts | 2 + .../components/EditTools/index.vue | 2 +- src/views/chart/hooks/useSync.hook.ts | 61 ++++++++++++++++--- 9 files changed, 118 insertions(+), 38 deletions(-) diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts index aa0d557b..1c805806 100644 --- a/src/hooks/useLifeHandler.hook.ts +++ b/src/hooks/useLifeHandler.hook.ts @@ -8,17 +8,17 @@ const components: { [K in string]?: any } = {} export const npmPkgs = { echarts } export const useLifeHandler = (chartConfig: CreateComponentType) => { - const events = chartConfig.events || {} + 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) } } diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts index 94e90c91..283d9dd8 100644 --- a/src/packages/index.d.ts +++ b/src/packages/index.d.ts @@ -90,12 +90,24 @@ export const BlendModeEnumList = [ { label: '亮度', value: 'luminosity' } ] +// 基础事件类型 +export enum BaseEvent { + // 点击 + ON_CLICK = 'onClick', + // 双击 + ON_DBL_CLICK = 'onDblClick', + // 移入 + ON_MOUSE_ENTER = 'onMouseenter', + // 移出 + ON_MOUSE_LEAVE = 'onMouseleave', +} + // 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 ea1759a7..d6f8ddf3 100644 --- a/src/store/modules/chartEditStore/chartEditStore.ts +++ b/src/store/modules/chartEditStore/chartEditStore.ts @@ -108,7 +108,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 5d4bcc23..f024a4c2 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/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue index 1865164d..8b14ce1c 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue @@ -16,7 +16,7 @@

async {{ eventName }} (e, components, echarts, node_modules) {

-

+

},

@@ -50,7 +50,7 @@ {{ eventName }}(e, components, echarts, node_modules)  {

- +

}

@@ -166,21 +166,21 @@ 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 +190,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 +221,11 @@ 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 = undefined } else { - targetData.value.events = { ...events.value } + targetData.value.events.advancedEvents = { ...advancedEvents.value } } closeEvents() } @@ -234,7 +234,7 @@ watch( () => showModal.value, (newData: boolean) => { if (newData) { - events.value = { ...targetData.value.events } + advancedEvents.value = { ...targetData.value.events.advancedEvents } } } ) diff --git a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts index 1d814987..587b9fe4 100644 --- a/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts +++ b/src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts @@ -38,6 +38,7 @@ export const useFile = () => { await updateComponent(fileData, false, true) window['$message'].success('导入成功！') } catch (error) { + console.log(error) window['$message'].error('组件导入失败，请检查文件完整性!') } }, @@ -48,6 +49,7 @@ export const useFile = () => { await updateComponent(fileData, true, true) window['$message'].success('导入成功！') } catch (error) { + console.log(error) window['$message'].error('组件导入失败，请检查文件完整性!') } } diff --git a/src/views/chart/ContentEdit/components/EditTools/index.vue b/src/views/chart/ContentEdit/components/EditTools/index.vue index f2d2d97d..ce4eb16b 100644 --- a/src/views/chart/ContentEdit/components/EditTools/index.vue +++ b/src/views/chart/ContentEdit/components/EditTools/index.vue @@ -187,7 +187,7 @@ const btnList: BtnListType[] = [ { key: 'edit', type: TypeEnum.BUTTON, - name: '编辑JSON', + name: '编辑', icon: CreateIcon, handle: editHandle }, diff --git a/src/views/chart/hooks/useSync.hook.ts b/src/views/chart/hooks/useSync.hook.ts index 9dd410a9..3d5f1d71 100644 --- a/src/views/chart/hooks/useSync.hook.ts +++ b/src/views/chart/hooks/useSync.hook.ts @@ -3,28 +3,68 @@ import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore import { ChartEditStoreEnum, ChartEditStorage } from '@/store/modules/chartEditStore/chartEditStore.d' import { useChartHistoryStore } from '@/store/modules/chartHistoryStore/chartHistoryStore' import { fetchChartComponent, fetchConfigComponent, createComponent } from '@/packages/index' -import { CreateComponentType, CreateComponentGroupType, ConfigType } from '@/packages/index.d' +import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d' import { PublicGroupConfigClass } from '@/packages/public/publicConfig' import merge from 'lodash/merge' /** - * 合并处理 - * @param object 模板数据 + * * 画布-版本升级对旧数据无法兼容的补丁 + * @param object + */ +const canvasVersionUpdatePolyfill = (object: any) => { + return object +} + +/** + * * 组件-版本升级对旧数据无法兼容的补丁 + * @param newObject + * @param sources + */ +const componentVersionUpdatePolyfill = (newObject: any, sources: any) => { + try { + // 判断是否是组件 + if (sources.id) { + // 处理事件补丁 + const hasVnodeBeforeMount = 'vnodeBeforeMount' in sources.events + const hasVnodeMounted = 'vnodeMounted' in sources.events + + if (hasVnodeBeforeMount) { + newObject.events.advancedEvents.vnodeBeforeMount = sources?.events.vnodeBeforeMount + } + if (hasVnodeMounted) { + newObject.events.advancedEvents.vnodeMounted = sources?.events.vnodeMounted + } + if (hasVnodeBeforeMount || hasVnodeMounted) { + sources.events = undefined + } + return newObject + } + } catch (error) { + return newObject + } +} + +/** + * * 合并处理 + * @param newObject 新的模板数据 * @param sources 新拿到的数据 * @returns object */ -const componentMerge = (object: any, sources: any, notComponent = false) => { +const componentMerge = (newObject: any, sources: any, notComponent = false) => { + // 处理组件补丁 + componentVersionUpdatePolyfill(newObject, sources) + // 非组件不处理 - if (notComponent) return merge(object, sources) - // 组件排除 options + if (notComponent) return merge(newObject, sources) + // 组件排除 newObject const option = sources.option - if (!option) return merge(object, sources) + if (!option) return merge(newObject, sources) // 为 undefined 的 sources 来源对象属性将被跳过详见 https://www.lodashjs.com/docs/lodash.merge sources.option = undefined if (option) { return { - ...merge(object, sources), + ...merge(newObject, sources), option: option } } @@ -49,6 +89,9 @@ export const useSync = () => { chartHistoryStore.clearBackStack() chartHistoryStore.clearForwardStack() } + // 画布补丁处理 + projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig) + // 列表组件注册 projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => { const intComponent = (target: CreateComponentType) => { @@ -119,7 +162,7 @@ export const useSync = () => { // 分组插入到列表 chartEditStore.addComponentList(groupClass, false, true) } else { - await create(comItem as CreateComponentType) + await create(comItem as CreateComponentType) } } } else {