From 07d8cdc930aa1ca652eda2b194c0053a9c3fbaa3 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, 16 Oct 2022 16:27:15 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96=E4=BA=8B=E4=BB=B6?=
=?UTF-8?q?=E7=BC=96=E8=BE=91=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/hooks/useLifeHandler.hook.ts | 5 +-
src/packages/index.d.ts | 4 +-
.../ChartEventMonacoEditor/index.vue | 216 +++++++++++-------
3 files changed, 137 insertions(+), 88 deletions(-)
diff --git a/src/hooks/useLifeHandler.hook.ts b/src/hooks/useLifeHandler.hook.ts
index cd7ef9a9..aa0d557b 100644
--- a/src/hooks/useLifeHandler.hook.ts
+++ b/src/hooks/useLifeHandler.hook.ts
@@ -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)
}
diff --git a/src/packages/index.d.ts b/src/packages/index.d.ts
index 35fc0cbf..94e90c91 100644
--- a/src/packages/index.d.ts
+++ b/src/packages/index.d.ts
@@ -92,8 +92,10 @@ export const BlendModeEnumList = [
// vue3 生命周期事件
export enum EventLife {
+ // 渲染之后
+ MOUNTED = 'vnodeMounted',
+ // 渲染之前
BEFORE_MOUNT = 'vnodeBeforeMount',
- MOUNTED = 'vnodeMounted'
}
// 组件实例类
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 8d68ccbe..c422fc20 100644
--- a/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
+++ b/src/views/chart/ContentConfigurations/components/ChartEvent/components/ChartEventMonacoEditor/index.vue
@@ -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>