github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-24 08:12:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

perf: 优化事件代码结构

Browse Source
This commit is contained in:
奔跑的面条 2022-11-12 21:49:04 +08:00
parent 38fb7b381a
commit ae75d9b5e6
9 changed files with 118 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/hooks/useLifeHandler.hook.ts
View File

@ -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)
}
}

27
src/packages/index.d.ts vendored
View File

@ -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
}
}
}

22
src/packages/public/publicConfig.ts
View File

@ -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
}
}
}
// 多选成组类

2
src/store/modules/chartEditStore/chartEditStore.ts
View File

@ -108,7 +108,7 @@ export const useChartEditStore = defineStore({
chartThemeColor: defaultTheme || 'dark',
// 全局配置
chartThemeSetting: globalThemeJson,
// 预览方式
// 适配方式
previewScaleType: previewScaleType
},
// 数据请求处理（需存储给后端）

4
src/views/chart/ContentConfigurations/components/CanvasPage/index.vue
View File

@ -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)
}

26
src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
View File

@ -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)&nbsp;&nbsp;{</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 }
}
}
)

2
src/views/chart/ContentEdit/components/EditTools/hooks/useFile.hooks.ts
View File

@ -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('组件导入失败，请检查文件完整性!')
}
}

2
src/views/chart/ContentEdit/components/EditTools/index.vue
View File

@ -187,7 +187,7 @@ const btnList: BtnListType[] = [
{
key: 'edit',
type: TypeEnum.BUTTON,
name: '编辑JSON',
name: '编辑',
icon: CreateIcon,
handle: editHandle
},

61
src/views/chart/hooks/useSync.hook.ts
View File

@ -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 {