perf: 优化事件编辑页面
This commit is contained in:
奔跑的面条
parent
f8674167ab
commit
07d8cdc930
@ -32,6 +32,7 @@ export const useLifeHandler = (chartConfig: CreateComponentType) => {
|
||||
*/
|
||||
function generateFunc(fnStr: string, e: any) {
|
||||
try {
|
||||
// npmPkgs 便于拷贝 echarts 示例时设置option 的formatter等相关内容
|
||||
Function(`
|
||||
"use strict";
|
||||
return (
|
||||
@ -39,9 +40,7 @@ function generateFunc(fnStr: string, e: any) {
|
||||
const {${Object.keys(npmPkgs).join()}} = node_modules;
|
||||
${fnStr}
|
||||
}
|
||||
)`)().bind(e?.component)
|
||||
// 便于拷贝echarts示例时设置option 的formatter等相关内容
|
||||
e, components, npmPkgs
|
||||
)`)().bind(e?.component)(e, components, npmPkgs)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
|
||||
4
src/packages/index.d.ts
vendored
4
src/packages/index.d.ts
vendored
@ -92,8 +92,10 @@ export const BlendModeEnumList = [
|
||||
|
||||
// vue3 生命周期事件
|
||||
export enum EventLife {
|
||||
// 渲染之后
|
||||
MOUNTED = 'vnodeMounted',
|
||||
// 渲染之前
|
||||
BEFORE_MOUNT = 'vnodeBeforeMount',
|
||||
MOUNTED = 'vnodeMounted'
|
||||
}
|
||||
|
||||
// 组件实例类
|
||||
|
||||
@ -2,7 +2,9 @@
|
||||
<n-card>
|
||||
<!-- 函数体 -->
|
||||
<div v-for="eventName in EventLife" :key="eventName">
|
||||
<p><span class="func-keyword">async {{eventName}}</span> (e) {</p>
|
||||
<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>}<span>,</span></p>
|
||||
</div>
|
||||
@ -25,84 +27,109 @@
|
||||
<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-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 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">{{ EventLifeTip[editTab] }}</n-text>
|
||||
</template>
|
||||
<n-tab-pane
|
||||
v-for="(eventName, index) in EventLife"
|
||||
:key="index"
|
||||
:tab="`${EventLifeName[eventName]}-${eventName}`"
|
||||
:name="eventName"
|
||||
>
|
||||
<!-- 函数名称 -->
|
||||
<p class="go-pl-3">
|
||||
<span class="func-keyword">async function </span>
|
||||
<span class="func-keyNameWord">{{ eventName }}(e, components, echarts, node_modules) {</span>
|
||||
</p>
|
||||
<!-- 编辑主体 -->
|
||||
<monaco-editor v-model:modelValue="events[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', '3', '4']">
|
||||
<n-collapse-item title="e" name="1">
|
||||
<n-text depth="3">触发对应生命周期事件时接收的参数</n-text>
|
||||
</n-collapse-item>
|
||||
<n-collapse-item title="this" name="2">
|
||||
<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" name="3">
|
||||
<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" name="4">
|
||||
<n-text depth="3">以下是内置在代码环境中可用的包变量</n-text>
|
||||
<br />
|
||||
<n-tag class="go-m-1" v-for="pkg in Object.keys(npmPkgs || {})" :key="pkg">{{ pkg }}</n-tag>
|
||||
</n-collapse-item>
|
||||
</n-collapse>
|
||||
</n-scrollbar>
|
||||
</n-tab-pane>
|
||||
<!-- 远程加载 -->
|
||||
<n-tab-pane tab="远程加载" name="3">
|
||||
<n-scrollbar trigger="none" style="max-height: 505px">
|
||||
<div class="go-px-3">
|
||||
浏览器是否兼容 「importmap」:
|
||||
<n-tag :bordered="false" :type="hTMLScriptElement.supports('importmap') ? 'primary' : 'error'">
|
||||
{{ hTMLScriptElement.supports('importmap') ? '√' : '×' }}
|
||||
</n-tag>
|
||||
<n-code
|
||||
:code="`
|
||||
//HTMLScriptElement.supports('importmap')
|
||||
const react = await import('https://cdn.skypack.dev/react@17.0.1')`"
|
||||
language="typescript"
|
||||
></n-code>
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</n-tab-pane>
|
||||
</n-tabs>
|
||||
</n-layout-sider>
|
||||
</n-layout>
|
||||
|
||||
<template #action>
|
||||
<n-space justify="space-between">
|
||||
@ -136,13 +163,25 @@ import { goDialog, toString } from '@/utils'
|
||||
import { CreateComponentType, EventLife } from '@/packages/index.d'
|
||||
import { Script } from 'vm'
|
||||
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
const { DocumentTextIcon, ChevronDownIcon } = icon.ionicons5
|
||||
const { FilterEditIcon } = icon.carbon
|
||||
const { targetData, chartEditStore } = useTargetData()
|
||||
const hTMLScriptElement = HTMLScriptElement as any
|
||||
|
||||
const EventLifeName = {
|
||||
[EventLife.BEFORE_MOUNT]: '渲染之前',
|
||||
[EventLife.MOUNTED]: '渲染之后'
|
||||
}
|
||||
|
||||
const EventLifeTip = {
|
||||
[EventLife.BEFORE_MOUNT]: '此时组件 DOM 还未存在',
|
||||
[EventLife.MOUNTED]: '此时组件 DOM 已经存在'
|
||||
}
|
||||
|
||||
// 受控弹窗
|
||||
const showModal = ref(false)
|
||||
// 编辑区域控制
|
||||
const editTab = ref(EventLife.MOUNTED)
|
||||
// events 函数模板
|
||||
let events = ref({ ...targetData.value.events })
|
||||
// 事件错误标识
|
||||
@ -150,7 +189,6 @@ const errorFlag = ref(false)
|
||||
|
||||
// 验证语法
|
||||
const validEvents = () => {
|
||||
|
||||
let errorFn = ''
|
||||
let message = ''
|
||||
let name = ''
|
||||
@ -158,14 +196,13 @@ const validEvents = () => {
|
||||
errorFlag.value = Object.entries(events.value).every(([eventName, str]) => {
|
||||
try {
|
||||
// 支持await，验证语法
|
||||
const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
|
||||
const AsyncFunction = Object.getPrototypeOf(async function () {}).constructor
|
||||
new AsyncFunction(str)
|
||||
return true
|
||||
} catch (error : any) {
|
||||
} catch (error: any) {
|
||||
message = error.message
|
||||
name = error.name
|
||||
errorFn = eventName
|
||||
console.log(error)
|
||||
return false
|
||||
}
|
||||
})
|
||||
@ -207,34 +244,45 @@ 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 {
|
||||
& + label {
|
||||
.n-icon {
|
||||
transition: all 0.3s;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
&~.go-editor-area {
|
||||
& ~ .go-editor-area {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
// 优化代码换行
|
||||
.n-code>pre {
|
||||
.n-code > pre {
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user