Merge branch 'dev' into master-fetch-dev
This commit is contained in:
奔跑的面条
commit
781151319c
@ -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 执行生命周期的动态组件实例
|
||||
*/
|
||||
|
||||
27
src/packages/index.d.ts
vendored
27
src/packages/index.d.ts
vendored
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 多选成组类
|
||||
|
||||
@ -126,7 +126,7 @@ export const useChartEditStore = defineStore({
|
||||
chartThemeColor: defaultTheme || 'dark',
|
||||
// 全局配置
|
||||
chartThemeSetting: globalThemeJson,
|
||||
// 预览方式
|
||||
// 适配方式
|
||||
previewScaleType: previewScaleType
|
||||
},
|
||||
// 数据请求处理（需存储给后端）
|
||||
|
||||
@ -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"
|
||||
@ -302,7 +302,7 @@ const customRequest = (options: UploadCustomRequestOptions) => {
|
||||
})
|
||||
}
|
||||
|
||||
// 选择预览方式
|
||||
// 选择适配方式
|
||||
const selectPreviewType = (key: PreviewScaleEnum) => {
|
||||
chartEditStore.setEditCanvasConfig(EditCanvasConfigEnum.PREVIEW_SCALE_TYPE, key)
|
||||
}
|
||||
|
||||
@ -0,0 +1,3 @@
|
||||
import ChartEventAdvancedHandle from './index.vue'
|
||||
|
||||
export { ChartEventAdvancedHandle }
|
||||
@ -10,13 +10,15 @@
|
||||
编辑
|
||||
</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 || {})[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>
|
||||
@ -30,13 +32,15 @@
|
||||
<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;">
|
||||
<!-- 提示 -->
|
||||
<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"
|
||||
@ -50,7 +54,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>
|
||||
@ -136,7 +140,7 @@
|
||||
<template #icon>
|
||||
<n-icon :component="DocumentTextIcon" />
|
||||
</template>
|
||||
提示
|
||||
说明
|
||||
</n-tag>
|
||||
<n-text class="go-ml-2" depth="2">通过提供的参数可为图表增加定制化的tooltip、交互事件等等</n-text>
|
||||
</div>
|
||||
@ -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 }
|
||||
}
|
||||
}
|
||||
)
|
||||
</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>
|
||||
@ -0,0 +1,3 @@
|
||||
import ChartEventBaseHandle from './index.vue'
|
||||
|
||||
export { ChartEventBaseHandle }
|
||||
@ -0,0 +1,215 @@
|
||||
<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;">
|
||||
<!-- 提示 -->
|
||||
<template #suffix>
|
||||
<n-text class="tab-tip" type="warning">提示: ECharts 组件会拦截鼠标事件</n-text>
|
||||
</template>
|
||||
<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) {</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>
|
||||
</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 = {
|
||||
[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 }
|
||||
}
|
||||
closeEvents()
|
||||
}
|
||||
|
||||
watch(
|
||||
() => showModal.value,
|
||||
(newData: boolean) => {
|
||||
if (newData) {
|
||||
baseEvent.value = { ...targetData.value.events.baseEvent }
|
||||
}
|
||||
}
|
||||
)
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '../index.scss';
|
||||
</style>
|
||||
@ -1,3 +0,0 @@
|
||||
import ChartEventMonacoEditor from './index.vue'
|
||||
|
||||
export { ChartEventMonacoEditor }
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
@ -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()
|
||||
|
||||
@ -37,6 +37,7 @@ export const useFile = () => {
|
||||
await updateComponent(fileData, false, true)
|
||||
window['$message'].success('导入成功！')
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
window['$message'].error('组件导入失败，请检查文件完整性!')
|
||||
}
|
||||
},
|
||||
@ -47,6 +48,7 @@ export const useFile = () => {
|
||||
await updateComponent(fileData, true, true)
|
||||
window['$message'].success('导入成功！')
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
window['$message'].error('组件导入失败，请检查文件完整性!')
|
||||
}
|
||||
}
|
||||
|
||||
@ -187,7 +187,7 @@ const btnList: BtnListType[] = [
|
||||
{
|
||||
key: 'edit',
|
||||
type: TypeEnum.BUTTON,
|
||||
name: '编辑JSON',
|
||||
name: '编辑',
|
||||
icon: CreateIcon,
|
||||
handle: editHandle
|
||||
},
|
||||
|
||||
@ -20,23 +20,63 @@ 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
|
||||
}
|
||||
}
|
||||
@ -62,6 +102,9 @@ export const useSync = () => {
|
||||
chartHistoryStore.clearBackStack()
|
||||
chartHistoryStore.clearForwardStack()
|
||||
}
|
||||
// 画布补丁处理
|
||||
projectData.editCanvasConfig = canvasVersionUpdatePolyfill(projectData.editCanvasConfig)
|
||||
|
||||
// 列表组件注册
|
||||
projectData.componentList.forEach(async (e: CreateComponentType | CreateComponentGroupType) => {
|
||||
const intComponent = (target: CreateComponentType) => {
|
||||
@ -132,7 +175,7 @@ export const useSync = () => {
|
||||
// 分组插入到列表
|
||||
chartEditStore.addComponentList(groupClass, false, true)
|
||||
} else {
|
||||
await create(comItem as CreateComponentType)
|
||||
await create(comItem as CreateComponentType)
|
||||
}
|
||||
}
|
||||
} else {
|
||||
|
||||
@ -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>,
|
||||
|
||||
@ -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>,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user