From 572ab73c9266bd542bb815fc2de5c58b5e326284 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 1/4] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BA=8B?= =?UTF-8?q?=E4=BB=B6=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 { From 1ddf056ca692930593a273103d9c84cdd7ecb04f 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 22:03:51 +0800 Subject: [PATCH 2/4] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E4=BA=8B=E4=BB=B6?= =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChartEvent/components/ChartEventMonacoEditor/index.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) 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 8b14ce1c..ab8f97b8 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue @@ -223,7 +223,10 @@ const saveEvents = () => { } if (Object.values(advancedEvents.value).join('').trim() === '') { // 清空事件 - targetData.value.events.advancedEvents = undefined + targetData.value.events.advancedEvents = { + vnodeBeforeMount: undefined, + vnodeMounted: undefined, + } } else { targetData.value.events.advancedEvents = { ...advancedEvents.value } } From 9a9b752a96a45e0a242afe0431b90a4d3db61386 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 23:03:13 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../importTemplate.ts | 0 .../ChartEventAdvancedHandle/index.ts | 3 + .../index.vue | 50 +--- .../components/ChartEventBaseHandle/index.ts | 3 + .../components/ChartEventBaseHandle/index.vue | 214 ++++++++++++++++++ .../ChartEventMonacoEditor/index.ts | 3 - .../ChartEvent/components/index.scss | 51 +++++ .../components/ChartEvent/index.vue | 13 +- 8 files changed, 281 insertions(+), 56 deletions(-) rename src/views/chart/ContentConfigurations/components/ChartEvent/components/{ChartEventMonacoEditor => ChartEventAdvancedHandle}/importTemplate.ts (100%) create mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.ts rename src/views/chart/ContentConfigurations/components/ChartEvent/components/{ChartEventMonacoEditor => ChartEventAdvancedHandle}/index.vue (92%) create mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue delete mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.ts create mode 100644 src/views/chart/ContentConfigurations/components/ChartEvent/components/index.scss 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 92% 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 ab8f97b8..d91e67e4 100644 --- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue @@ -10,10 +10,12 @@ 编辑 - +

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

@@ -30,7 +32,9 @@ 高级事件编辑器（配合源码使用） + + @@ -158,9 +162,7 @@ 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 @@ -244,45 +246,5 @@ watch( 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..bfe0157f --- /dev/null +++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue @@ -0,0 +1,214 @@ + + + + + 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 }} - -
- 【单击、双击、移入、移出】在开发中，即将上线！ -
- （备注：高级事件模块可自行实现上述功能） -
- - + +