test/go-view
1
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2024-12-02 19:59:04 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: 组件生命周期事件

Browse Source
This commit is contained in:
潘潘 2022-10-11 18:31:29 +08:00
parent c84f6d9c33
commit 92339dae28
12 changed files with 348 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/Pages/ChartItemSetting/EventSetting.vue Normal file
View File

@ -0,0 +1,26 @@
<template>
<!-- 事件配置 -->
<n-collapse class="go-mt-3" arrow-placement="right" default-expanded-names="1" accordion>
<n-text depth="3">组件 id： <n-text>{{targetData.id}}</n-text></n-text>
<n-collapse-item title="事件配置" name="1">
<n-space class="go-event go-mt-3" :size="18" vertical>
<chart-event-monaco-editor></chart-event-monaco-editor>
</n-space>
</n-collapse-item>
</n-collapse>
</template>
<script setup lang="ts">
import { ChartEventMonacoEditor } from '@/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor'
import { useTargetData } from '@/views/chart/ContentConfigurations/components/hooks/useTargetData.hook'
const { targetData } = useTargetData()
</script>
<style lang="scss" scoped>
@include deep() {
.go-event .n-card__content{
max-height:60vh;
overflow-y:auto;
}
}
</style>

4
src/components/Pages/ChartItemSetting/index.ts
View File

@ -16,5 +16,7 @@ import PositionSetting from './PositionSetting.vue'
import SizeSetting from './SizeSetting.vue'
// 样式
import StylesSetting from './StylesSetting.vue'
// 事件配置
import EventSetting from './EventSetting.vue'
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting }
export { CollapseItem, SettingItemBox, SettingItem, GlobalSetting, GlobalSettingPosition, NameSetting, PositionSetting, SizeSetting, StylesSetting, EventSetting }

3
src/hooks/index.ts
View File

@ -1,4 +1,5 @@
export * from '@/hooks/useTheme.hook'
export * from '@/hooks/usePreviewScale.hook'
export * from '@/hooks/useCode.hook'
export * from '@/hooks/useChartDataFetch.hook'
export * from '@/hooks/useChartDataFetch.hook'
export * from '@/hooks/useLifeHandler.hook'

48
src/hooks/useLifeHandler.hook.ts Normal file
View File

@ -0,0 +1,48 @@
import { CreateComponentType, EventLife } from '@/packages/index.d'
import * as echarts from 'echarts'
// 所有图表组件集合对象
const components: {[K in string]?: any} = {};
// 项目提供的npm 包变量
export const npmPkgs = { echarts }
export const useLifeHandler = (chartConfig: CreateComponentType) => {
const events = chartConfig.events || {}
// 生成生命周期事件
const lifeEvents = {
[EventLife.BEFORE_MOUNT] (e:any) {
// 存储组件
components[chartConfig.id] = e.component
const fnStr = (events[EventLife.BEFORE_MOUNT] || '').trim()
generateFunc(fnStr, e)
},
[EventLife.MOUNTED] (e:any){
const fnStr = (events[EventLife.MOUNTED] || '').trim()
generateFunc(fnStr, e)
},
}
return lifeEvents
}
/**
*
* @param fnStr 用户方法体代码
* @param e 执行生命周期的动态组件实例
*/
function generateFunc(fnStr: string, e: any){
try {
Function(`
"use strict";
return (
async function(e, components, node_modules){
const {${Object.keys(npmPkgs).join()}} = node_modules;
${fnStr}
}
)`)().bind(e?.component)
// 便于拷贝echarts示例时设置option 的formatter等相关内容
(e, components, npmPkgs);
} catch (error) {
console.error(error)
}
}

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

@ -116,12 +116,21 @@ export interface PublicConfigType {
filter?: string
status: StatusType
setPosition: Function
events?: {
[K in EventLife]?: string
}
}
// vue3 生命周期事件
export enum EventLife {
BEFORE_MOUNT = 'vnodeBeforeMount',
MOUNTED = 'vnodeMounted'
}
export interface CreateComponentType extends PublicConfigType, requestConfig {
key: string
chartConfig: ConfigType
option: GlobalThemeJsonType
option: GlobalThemeJsonType,
}
// 组件成组实例类

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

@ -87,6 +87,9 @@ export class PublicConfigClass implements PublicConfigType {
this.attr.x = x
this.attr.y = y
}
// 事件
public events = undefined
}
// 多选成组类

3
src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.ts Normal file
View File

@ -0,0 +1,3 @@
import ChartEventMonacoEditor from './index.vue'
export { ChartEventMonacoEditor }

240
src/views/chart/ContentConfigurations/components/ChartData/components/ChartEventMonacoEditor/index.vue Normal file
View File

@ -0,0 +1,240 @@
<template>
<n-card>
<!-- 函数体 -->
<div v-for="eventName in EventLife" :key="eventName">
<p><span class="func-keyword">async {{eventName}}</span> (e) {</p>
<p class="go-ml-4"><n-code :code="(targetData.events || {})[eventName]" language="typescript"></n-code></p>
<p>}<span>,</span></p>
</div>
<template #footer>
<n-space justify="end">
<n-button type="primary" tertiary size="small" @click="showModal = true">
<template #icon>
<n-icon>
<filter-edit-icon />
</n-icon>
</template>
编辑
</n-button>
</n-space>
</template>
</n-card>
<!-- 弹窗 -->
<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-content style="height: 580px">
<div class="go-p-4">
<div >
<div class="go-ml-2" v-for="(eventName) in EventLife" :key="eventName">
<input class="checkbox--hidden" type="checkbox" v-show="false" :id="eventName">
<label :for="eventName">
<span class="func-keyword">async {{eventName}} (e) </span>{
<n-icon :component="ChevronDownIcon"/>
<br/>
</label>
<monaco-editor v-model:modelValue="events[eventName]" language="javascript" />
<p>},</p>
</div>
</div>
</div>
</n-layout-content>
<n-layout-sider
collapse-mode="transform"
:collapsed-width="14"
:width="340"
show-trigger="arrow-circle"
content-style="padding: 24px;"
bordered
>
<n-tabs default-value="1" justify-content="space-evenly" type="segment">
<!-- 验证结果 -->
<n-tab-pane tab="验证结果" name="1">
<n-collapse class="go-mt-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-tab-pane>
<!-- 辅助说明 -->
<n-tab-pane tab="变量说明" name="2">
<n-text depth="3">以下变量均可在代码块中使用</n-text>
<n-collapse class="go-mt-3" arrow-placement="right">
<n-collapse-item title="e">
<n-text depth="3">触发对应生命周期事件时接收的参数</n-text>
</n-collapse-item>
<n-collapse-item title="this">
<n-text depth="3">图表组件实例</n-text><br/>
<n-tag class="go-m-1" v-for="prop in ['refs', 'setupState', 'ctx', 'props']" :key="prop">{{ prop }}</n-tag>...
</n-collapse-item>
<n-collapse-item title="components">
<n-text depth="3">当前大屏内所有组件的集合id 图表组件中的配置id，可以获取其他图表组件进行控制</n-text>
<n-code :code="`{\n [id]: component\n}`" language="typescript"></n-code>
</n-collapse-item>
<n-collapse-item title="node_modules">
<n-text depth="3">以下是内置在代码环境中可用的包变量</n-text>
<n-tag class="go-m-1" v-for="pkg in Object.keys(npmPkgs || {})" :key="pkg">{{ pkg }}</n-tag>
</n-collapse-item>
</n-collapse>
</n-tab-pane>
<!-- 远程加载 -->
<n-tab-pane tab="远程加载" name="3">
<n-card size="small">
<n-code :code="`//查看当前浏览器是否兼容 ${hTMLScriptElement.supports('importmap') ? '√' : '×'}
//HTMLScriptElement.supports('importmap')
const react = await import('https://cdn.skypack.dev/react@17.0.1')`" language="typescript"></n-code>
</n-card>
</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">通过提供的参数可为图表增加定制化的tooltip、交互事件等等</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 lang="ts" setup>
import { ref, computed, watch, toRefs, toRaw } from 'vue'
import { MonacoEditor } from '@/components/Pages/MonacoEditor'
import { useTargetData } from '../../../hooks/useTargetData.hook'
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 { DocumentTextIcon, ChevronDownIcon } = icon.ionicons5
const { FilterEditIcon } = icon.carbon
const { targetData, chartEditStore } = useTargetData()
const hTMLScriptElement = HTMLScriptElement as any
// 受控弹窗
const showModal = ref(false)
// events 函数模板
let events = ref({ ...targetData.value.events })
// 事件错误标识
const errorFlag = ref(false)
// 验证语法
const validEvents = () => {
let errorFn = ''
let message = ''
let name = ''
errorFlag.value = Object.entries(events.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
console.log(error)
return false
}
})
return {
errorFn,
message,
name
}
}
// 关闭事件
const closeEvents = () => {
showModal.value = false
}
// 新增事件
const saveEvents = () => {
if (validEvents().errorFn) {
window['$message'].error('事件函数错误，无法进行保存')
return
}
if (Object.values(events.value).join('').trim() === '') {
// 清空事件
targetData.value.events = undefined
} else {
targetData.value.events = { ...events.value }
}
closeEvents()
}
watch(
() => showModal.value,
(newData: boolean) => {
if (newData) {
events.value = { ...targetData.value.events }
}
}
)
</script>
<style lang="scss" scoped>
.func-keyword {
color: #b478cf;
}
@include go('chart-data-monaco-editor') {
&.n-card.n-modal,
.n-card {
@extend .go-background-filter;
}
}
@include deep() {
.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;
}
}
</style>

1
src/views/chart/ContentConfigurations/index.d.ts vendored
View File

@ -3,4 +3,5 @@ export enum TabsEnum {
CHART_SETTING = 'chartSetting',
CHART_ANIMATION = 'chartAnimation',
CHART_DATA = 'chartData',
CHART_EVENT = 'chartEvent'
}

9
src/views/chart/ContentConfigurations/index.vue
View File

@ -75,12 +75,13 @@ const { getDetails } = toRefs(useChartLayoutStore())
const { setItem } = useChartLayoutStore()
const chartEditStore = useChartEditStore()
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon } = icon.ionicons5
const { ConstructIcon, FlashIcon, DesktopOutlineIcon, LeafIcon, CodeSlashIcon } = icon.ionicons5
const ContentEdit = loadAsyncComponent(() => import('../ContentEdit/index.vue'))
const CanvasPage = loadAsyncComponent(() => import('./components/CanvasPage/index.vue'))
const ChartSetting = loadAsyncComponent(() => import('./components/ChartSetting/index.vue'))
const ChartData = loadAsyncComponent(() => import('./components/ChartData/index.vue'))
const ChartEvent = loadAsyncComponent(() => import('@/components/Pages/ChartItemSetting/EventSetting.vue'))
const ChartAnimation = loadAsyncComponent(() => import('./components/ChartAnimation/index.vue'))
const collapsed = ref<boolean>(getDetails.value)
@ -148,6 +149,12 @@ const chartsTabList = [
title: '数据',
icon: FlashIcon,
render: ChartData
},
{
key: TabsEnum.CHART_EVENT,
title: '事件',
icon: CodeSlashIcon,
render: ChartEvent
}
]
</script>

3
src/views/preview/components/PreviewRenderGroup/index.vue
View File

@ -18,6 +18,7 @@
:themeSetting="themeSetting"
:themeColor="themeColor"
:style="{ ...getSizeStyle(item.attr) }"
v-on="useLifeHandler(item)"
></component>
</div>
</template>
@ -27,7 +28,7 @@ import { PropType } from 'vue'
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>,

3
src/views/preview/components/PreviewRenderList/index.vue
View File

@ -29,6 +29,7 @@
:themeSetting="themeSetting"
:themeColor="themeColor"
:style="{ ...getSizeStyle(item.attr) }"
v-on="useLifeHandler(item)"
></component>
</div>
</template>
@ -41,7 +42,7 @@ import { CreateComponentGroupType } from '@/packages/index.d'
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>,