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 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 @@
</n-button>
</n-space>
<n-space>
- <n-text>预览方式</n-text>
+ <n-text>适配方式</n-text>
<n-button-group>
<n-button
v-for="item in previewTypeList"
@@ -279,7 +279,7 @@ const customRequest = (options: UploadCustomRequestOptions) => {
})
}
-// 选择预览方式
+// 选择适配方式
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 @@
<p>
<span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
</p>
- <p class="go-ml-4"><n-code :code="(targetData.events || {})[eventName]" language="typescript"></n-code></p>
+ <p class="go-ml-4"><n-code :code="(targetData.events.advancedEvents || {})[eventName]" language="typescript"></n-code></p>
<p>}<span>,</span></p>
</div>
</n-card>
@@ -50,7 +50,7 @@
<span class="func-keyNameWord">{{ eventName }}(e, components, echarts, node_modules) {</span>
</p>
<!-- 编辑主体 -->
- <monaco-editor v-model:modelValue="events[eventName]" height="480px" language="javascript" />
+ <monaco-editor v-model:modelValue="advancedEvents[eventName]" height="480px" language="javascript" />
<!-- 函数结束 -->
<p class="go-pl-3 func-keyNameWord">}</p>
</n-tab-pane>
@@ -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 be50eb99bf6cb502ae181fb4cc7faf9574c24636 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 d16bc0f1577200d0eefccdfce06e2ccb44afb91a 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 @@
编辑
</n-button>
</template>
- <n-card>
+ <n-card class="collapse-show-box">
<!-- 函数体 -->
<div v-for="eventName in EventLife" :key="eventName">
<p>
+ <span class="func-annotate">// {{ EventLifeName[eventName] }}</span>
+ <br />
<span class="func-keyword">async {{ eventName }}</span> (e, components, echarts, node_modules) {
</p>
<p class="go-ml-4"><n-code :code="(targetData.events.advancedEvents || {})[eventName]" language="typescript"></n-code></p>
@@ -30,7 +32,9 @@
<n-text>高级事件编辑器（配合源码使用）</n-text>
</n-space>
</template>
+
<template #header-extra> </template>
+
<n-layout has-sider sider-placement="right">
<n-layout style="height: 580px; padding-right: 20px">
<n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
@@ -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(
</script>
<style lang="scss" scoped>
-/* 外层也要使用 */
-.func-keyword {
- color: #b478cf;
-}
-
-@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;
- }
- .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;
- }
-}
+@import '../index.scss';
</style>
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 @@
+<template>
+ <n-collapse-item title="基础事件配置" name="1">
+ <template #header-extra>
+ <n-button type="primary" tertiary size="small" @click.stop="showModal = true">
+ <template #icon>
+ <n-icon>
+ <pencil-icon />
+ </n-icon>
+ </template>
+ 编辑
+ </n-button>
+ </template>
+ <n-card class="collapse-show-box">
+ <!-- 函数体 -->
+ <div v-for="eventName in BaseEvent" :key="eventName">
+ <p>
+ <span class="func-annotate">// {{ EventTypeName[eventName] }}</span>
+ <br />
+ <span class="func-keyword">async {{ eventName }}</span> (mouseEvent, components) {
+ </p>
+ <p class="go-ml-4">
+ <n-code :code="(targetData.events.baseEvent || {})[eventName]" language="typescript"></n-code>
+ </p>
+ <p>}<span>,</span></p>
+ </div>
+ </n-card>
+ </n-collapse-item>
+
+ <!-- 弹窗 -->
+ <n-modal class="go-chart-data-monaco-editor" v-model:show="showModal" :mask-closable="false">
+ <n-card :bordered="false" role="dialog" size="small" aria-modal="true" style="width: 1200px; height: 700px">
+ <template #header>
+ <n-space>
+ <n-text>基础事件编辑器</n-text>
+ </n-space>
+ </template>
+
+ <template #header-extra> </template>
+ <n-layout has-sider sider-placement="right">
+ <n-layout style="height: 580px; padding-right: 20px">
+ <n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
+ <n-tab-pane
+ v-for="(eventName, index) in BaseEvent"
+ :key="index"
+ :tab="`${EventTypeName[eventName]}-${eventName}`"
+ :name="eventName"
+ >
+ <!-- 函数名称 -->
+ <p class="go-pl-3">
+ <span class="func-keyword">async function </span>
+ <span class="func-keyNameWord">{{ eventName }}(mouseEvent, components) {</span>
+ </p>
+ <!-- 编辑主体 -->
+ <monaco-editor v-model:modelValue="baseEvent[eventName]" height="480px" language="javascript" />
+ <!-- 函数结束 -->
+ <p class="go-pl-3 func-keyNameWord">}</p>
+ </n-tab-pane>
+ </n-tabs>
+ </n-layout>
+ <n-layout-sider
+ :collapsed-width="14"
+ :width="340"
+ show-trigger="bar"
+ collapse-mode="transform"
+ content-style="padding: 12px 12px 0px 12px;margin-left: 3px;"
+ >
+ <n-tabs default-value="1" justify-content="space-evenly" type="segment">
+ <!-- 验证结果 -->
+ <n-tab-pane tab="验证结果" name="1" size="small">
+ <n-scrollbar trigger="none" style="max-height: 505px">
+ <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2, 3]">
+ <template v-for="error in [validEvents()]" :key="error">
+ <n-collapse-item title="错误函数" :name="1">
+ <n-text depth="3">{{ error.errorFn || '暂无' }}</n-text>
+ </n-collapse-item>
+ <n-collapse-item title="错误信息" :name="2">
+ <n-text depth="3">{{ error.name || '暂无' }}</n-text>
+ </n-collapse-item>
+ <n-collapse-item title="堆栈信息" :name="3">
+ <n-text depth="3">{{ error.message || '暂无' }}</n-text>
+ </n-collapse-item>
+ </template>
+ </n-collapse>
+ </n-scrollbar>
+ </n-tab-pane>
+ <!-- 辅助说明 -->
+ <n-tab-pane tab="变量说明" name="2">
+ <n-scrollbar trigger="none" style="max-height: 505px">
+ <n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2]">
+ <n-collapse-item title="mouseEvent" :name="1">
+ <n-text depth="3">事件对象</n-text>
+ </n-collapse-item>
+ <n-collapse-item title="components" :name="2">
+ <n-text depth="3">当前图表组件实例</n-text>
+ </n-collapse-item>
+ </n-collapse>
+ </n-scrollbar>
+ </n-tab-pane>
+ </n-tabs>
+ </n-layout-sider>
+ </n-layout>
+
+ <template #action>
+ <n-space justify="space-between">
+ <div class="go-flex-items-center">
+ <n-tag :bordered="false" type="primary">
+ <template #icon>
+ <n-icon :component="DocumentTextIcon" />
+ </template>
+ 提示
+ </n-tag>
+ <n-text class="go-ml-2" depth="2">编写方式同正常 JavaScript 写法</n-text>
+ </div>
+
+ <n-space>
+ <n-button size="medium" @click="closeEvents">取消</n-button>
+ <n-button size="medium" type="primary" @click="saveEvents">保存</n-button>
+ </n-space>
+ </n-space>
+ </template>
+ </n-card>
+ </n-modal>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, toRefs, toRaw } from 'vue'
+import { MonacoEditor } from '@/components/Pages/MonacoEditor'
+import { useTargetData } from '../../../hooks/useTargetData.hook'
+import { CreateComponentType, BaseEvent } from '@/packages/index.d'
+import { icon } from '@/plugins'
+
+const { targetData, chartEditStore } = useTargetData()
+const { DocumentTextIcon, ChevronDownIcon, PencilIcon } = icon.ionicons5
+
+const EventTypeName = {
+ [BaseEvent.ON_CLICK]: '单击',
+ [BaseEvent.ON_DBL_CLICK]: '双击',
+ [BaseEvent.ON_MOUSE_ENTER]: '鼠标进入',
+ [BaseEvent.ON_MOUSE_LEAVE]: '鼠标移出'
+}
+
+// 受控弹窗
+const showModal = ref(false)
+// 编辑区域控制
+const editTab = ref(BaseEvent.ON_CLICK)
+// events 函数模板
+let baseEvent = ref({ ...targetData.value.events.baseEvent })
+// 事件错误标识
+const errorFlag = ref(false)
+
+// 验证语法
+const validEvents = () => {
+ let errorFn = ''
+ let message = ''
+ let name = ''
+
+ errorFlag.value = Object.entries(baseEvent.value).every(([eventName, str]) => {
+ try {
+ // 支持await，验证语法
+ const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
+ new AsyncFunction(str)
+ return true
+ } catch (error: any) {
+ message = error.message
+ name = error.name
+ errorFn = eventName
+ return false
+ }
+ })
+ return {
+ errorFn,
+ message,
+ name
+ }
+}
+
+// 关闭事件
+const closeEvents = () => {
+ showModal.value = false
+}
+
+// 新增事件
+const saveEvents = () => {
+ if (validEvents().errorFn) {
+ window['$message'].error('事件函数错误，无法进行保存')
+ return
+ }
+ if (Object.values(baseEvent.value).join('').trim() === '') {
+ // 清空事件
+ targetData.value.events.baseEvent = {
+ onClick: undefined,
+ onDblClick: undefined,
+ onMouseenter: undefined,
+ onMouseleave: undefined,
+ }
+ } else {
+ targetData.value.events.baseEvent = { ...baseEvent.value }
+ }
+ closeEvents()
+}
+
+watch(
+ () => showModal.value,
+ (newData: boolean) => {
+ if (newData) {
+ baseEvent.value = { ...targetData.value.events.baseEvent }
+ }
+ }
+)
+</script>
+
+<style lang="scss" scoped>
+@import '../index.scss';
+</style>
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：
<n-text>{{ targetData.id }}</n-text>
</n-text>
- <n-collapse-item title="基础事件配置" name="1">
- <div class="go-event">
- <n-text depth="3">【单击、双击、移入、移出】在开发中，即将上线！</n-text>
- <br/>
- <n-text depth="3">（备注：高级事件模块可自行实现上述功能）</n-text>
- </div>
- </n-collapse-item>
- <chart-event-monaco-editor></chart-event-monaco-editor>
+ <chart-event-base-handle></chart-event-base-handle>
+ <chart-event-advanced-handle></chart-event-advanced-handle>
</n-collapse>
</template>
<script setup lang="ts">
import { ref } from 'vue'
-import { ChartEventMonacoEditor } from './components/ChartEventMonacoEditor'
+import { ChartEventAdvancedHandle } from './components/ChartEventAdvancedHandle'
+import { ChartEventBaseHandle } from './components/ChartEventBaseHandle'
import { useTargetData } from '../hooks/useTargetData.hook'
const { targetData } = useTargetData()
From 3308a7abbbae84eeb52b11930a1c0abc5b299790 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: Sun, 13 Nov 2022 02:36:04 +0800
Subject: [PATCH 4/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=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/hooks/useLifeHandler.hook.ts | 39 ++++++++++++++++---
src/packages/index.d.ts | 10 ++---
.../ChartEventAdvancedHandle/index.vue | 4 +-
.../components/ChartEventBaseHandle/index.vue | 21 +++++-----
.../components/PreviewRenderGroup/index.vue | 2 +
.../components/PreviewRenderList/index.vue | 2 +
6 files changed, 56 insertions(+), 22 deletions(-)
diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts
index 1c805806..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,9 +7,20 @@ const components: { [K in string]?: any } = {}
// 项目提供的npm 包变量
export const npmPkgs = { echarts }
-export const useLifeHandler = (chartConfig: CreateComponentType) => {
- const events = chartConfig.events.advancedEvents || {}
+// 组件事件处理 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.VNODE_BEFORE_MOUNT](e: any) {
// 存储组件
@@ -22,11 +33,29 @@ export const useLifeHandler = (chartConfig: CreateComponentType) => {
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 283d9dd8..fbdfa2f5 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -90,16 +90,16 @@ export const BlendModeEnumList = [
{ label: '亮度', value: 'luminosity' }
]
-// 基础事件类型
+// 基础事件类型(vue不加 on)
export enum BaseEvent {
// 点击
- ON_CLICK = 'onClick',
+ ON_CLICK = 'click',
// 双击
- ON_DBL_CLICK = 'onDblClick',
+ ON_DBL_CLICK = 'dblclick',
// 移入
- ON_MOUSE_ENTER = 'onMouseenter',
+ ON_MOUSE_ENTER = 'mouseenter',
// 移出
- ON_MOUSE_LEAVE = 'onMouseleave',
+ ON_MOUSE_LEAVE = 'mouseleave',
}
// vue3 生命周期事件
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
index d91e67e4..fe89c656 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventAdvancedHandle/index.vue
@@ -40,7 +40,7 @@
<n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
<!-- 提示 -->
<template #suffix>
- <n-text class="tab-tip" type="warning">tips: {{ EventLifeTip[editTab] }}</n-text>
+ <n-text class="tab-tip" type="warning">提示: {{ EventLifeTip[editTab] }}</n-text>
</template>
<n-tab-pane
v-for="(eventName, index) in EventLife"
@@ -140,7 +140,7 @@
<template #icon>
<n-icon :component="DocumentTextIcon" />
</template>
- 提示
+ 说明
</n-tag>
<n-text class="go-ml-2" depth="2">通过提供的参数可为图表增加定制化的tooltip、交互事件等等</n-text>
</div>
diff --git a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
index bfe0157f..90151736 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventBaseHandle/index.vue
@@ -39,6 +39,10 @@
<n-layout has-sider sider-placement="right">
<n-layout style="height: 580px; padding-right: 20px">
<n-tabs v-model:value="editTab" type="card" tab-style="min-width: 100px;">
+ <!-- 提示 -->
+ <template #suffix>
+ <n-text class="tab-tip" type="warning">提示: ECharts 组件会拦截鼠标事件</n-text>
+ </template>
<n-tab-pane
v-for="(eventName, index) in BaseEvent"
:key="index"
@@ -48,7 +52,7 @@
<!-- 函数名称 -->
<p class="go-pl-3">
<span class="func-keyword">async function </span>
- <span class="func-keyNameWord">{{ eventName }}(mouseEvent, components) {</span>
+ <span class="func-keyNameWord">{{ eventName }}(mouseEvent) {</span>
</p>
<!-- 编辑主体 -->
<monaco-editor v-model:modelValue="baseEvent[eventName]" height="480px" language="javascript" />
@@ -88,10 +92,7 @@
<n-scrollbar trigger="none" style="max-height: 505px">
<n-collapse class="go-px-3" arrow-placement="right" :default-expanded-names="[1, 2]">
<n-collapse-item title="mouseEvent" :name="1">
- <n-text depth="3">事件对象</n-text>
- </n-collapse-item>
- <n-collapse-item title="components" :name="2">
- <n-text depth="3">当前图表组件实例</n-text>
+ <n-text depth="3">鼠标事件对象</n-text>
</n-collapse-item>
</n-collapse>
</n-scrollbar>
@@ -107,7 +108,7 @@
<template #icon>
<n-icon :component="DocumentTextIcon" />
</template>
- 提示
+ 说明
</n-tag>
<n-text class="go-ml-2" depth="2">编写方式同正常 JavaScript 写法</n-text>
</div>
@@ -188,10 +189,10 @@ const saveEvents = () => {
if (Object.values(baseEvent.value).join('').trim() === '') {
// 清空事件
targetData.value.events.baseEvent = {
- onClick: undefined,
- onDblClick: undefined,
- onMouseenter: undefined,
- onMouseleave: undefined,
+ [BaseEvent.ON_CLICK]: undefined,
+ [BaseEvent.ON_DBL_CLICK]: undefined,
+ [BaseEvent.ON_MOUSE_ENTER]: undefined,
+ [BaseEvent.ON_MOUSE_LEAVE]: undefined
}
} else {
targetData.value.events.baseEvent = { ...baseEvent.value }
diff --git a/src/views/preview/components/PreviewRenderGroup/index.vue b/src/views/preview/components/PreviewRenderGroup/index.vue
index 422fd441..cc149e88 100644
--- a/src/views/preview/components/PreviewRenderGroup/index.vue
+++ b/src/views/preview/components/PreviewRenderGroup/index.vue
@@ -14,6 +14,7 @@
>
<component
:is="item.chartConfig.chartKey"
+ :id="item.id"
:chartConfig="item"
:themeSetting="themeSetting"
:themeColor="themeColor"
@@ -29,6 +30,7 @@ import { CreateComponentGroupType } from '@/packages/index.d'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
import { useLifeHandler } from '@/hooks'
+
const props = defineProps({
groupData: {
type: Object as PropType<CreateComponentGroupType>,
diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue
index af55e9c1..9bb0cbec 100644
--- a/src/views/preview/components/PreviewRenderList/index.vue
+++ b/src/views/preview/components/PreviewRenderList/index.vue
@@ -25,6 +25,7 @@
<component
v-else
:is="item.chartConfig.chartKey"
+ :id="item.id"
:chartConfig="item"
:themeSetting="themeSetting"
:themeColor="themeColor"
@@ -43,6 +44,7 @@ import { chartColors } from '@/settings/chartThemes/index'
import { animationsClass, getFilterStyle, getTransformStyle, getBlendModeStyle } from '@/utils'
import { getSizeStyle, getComponentAttrStyle, getStatusStyle } from '../../utils'
import { useLifeHandler } from '@/hooks'
+
const props = defineProps({
localStorageInfo: {
type: Object as PropType<ChartEditStorageType>,