perf: 优化事件编辑页面

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

src/packages/index.d.ts

@@ -92,8 +92,10 @@ export const BlendModeEnumList = [
 
 // vue3 生命周期事件
 export enum EventLife {
+  // 渲染之后
+  MOUNTED = 'vnodeMounted',
+  // 渲染之前
   BEFORE_MOUNT = 'vnodeBeforeMount',
-  MOUNTED = 'vnodeMounted'
 }
 
 // 组件实例类

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-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 &nbsp;&nbsp;</span>
+                <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" />
+              <!-- 函数结束 -->
+              <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="components">
-                      <n-text depth="3">当前大屏内所有组件的集合id 图表组件中的配置id，可以获取其他图表组件进行控制</n-text>
-                      <n-code :code="`{\n  [id]: component\n}`" language="typescript"></n-code>
+                    <n-collapse-item title="错误信息" name="2">
+                      <n-text depth="3">{{ error.name || '暂无' }}</n-text>
                     </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 title="堆栈信息" name="3">
+                      <n-text depth="3">{{ error.message || '暂无' }}</n-text>
                     </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>
+                </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>