菜单组件和命令结果组件异步加载

src/components/CommandEditor.vue

@@ -231,7 +231,7 @@ import CommandSideBar from "components/CommandSideBar";
 import CommandRunResult from "components/CommandRunResult";
 import QuickAction from "components/popup/QuickAction";
 import KeyRecorder from "components/popup/KeyRecorder";
-// Monaco改用异步加载
+// Performance Scripting > 500ms
 const MonacoEditor = defineAsyncComponent(() =>
   import("components/MonacoEditor")
 );

src/components/ConfigurationMenu.vue

@@ -1,7 +1,4 @@
 <template>
-  <div class="flex">
-    <q-btn stretch color="primary" flat size="xs"
-      ><q-spinner-bars color="primary" size="1.5em" />
   <q-menu
     max-height="480px"
     max-width="300px"
@@ -37,7 +34,10 @@
                 style="width: 280px"
                 autofocus
                 v-model="$root.profile.quickFileTag"
-                    @blur="$root.profile.quickFileTag || ($root.profile.quickFileTag = '文件')"
+                @blur="
+                  $root.profile.quickFileTag ||
+                    ($root.profile.quickFileTag = '文件')
+                "
                 type="text"
               >
                 <template v-slot:append>
@@ -69,8 +69,10 @@
                 input-class="text-center"
                 style="width: 280px"
                 v-model="$root.profile.quickUrlTag"
-                    @blur="$root.profile.quickUrlTag || ($root.profile.quickUrlTag = '网址')"
-
+                @blur="
+                  $root.profile.quickUrlTag ||
+                    ($root.profile.quickUrlTag = '网址')
+                "
                 type="text"
               >
                 <template v-slot:append>
@@ -129,10 +131,7 @@
               </q-item-section>
               <q-field dense outlined style="width: 280px">
                 <template v-slot:control>
-                      <div
-                        class="self-center full-width no-outline"
-                        tabindex="0"
-                      >
+                  <div class="self-center full-width no-outline" tabindex="0">
                     快捷命令服务
                   </div>
                 </template>
@@ -159,10 +158,7 @@
               </q-item-section>
               <q-field dense outlined style="width: 280px">
                 <template v-slot:control>
-                      <div
-                        class="self-center full-width no-outline"
-                        tabindex="0"
-                      >
+                  <div class="self-center full-width no-outline" tabindex="0">
                     运行代码
                   </div>
                 </template>
@@ -371,9 +367,7 @@
                 <q-icon name="label" />
               </q-item-section>
               <q-item-section class="flex">紧凑标签栏 </q-item-section>
-                  <q-tooltip
-                    >更为紧凑的标签栏，适用于标签非常多的情形</q-tooltip
-                  >
+              <q-tooltip>更为紧凑的标签栏，适用于标签非常多的情形</q-tooltip>
               <q-item-section side
                 ><q-toggle
                   v-model="$root.profile.denseTagBar"
@@ -403,35 +397,32 @@
             <q-item-section>分享中心</q-item-section>
           </q-item> -->
       <!-- 收藏 -->
-          <q-item v-if="isTagStared" clickable @click="unMarkTag" v-close-popup>
+      <q-item v-if="isTagStared" clickable @click="unMarkTag">
         <q-item-section side>
           <q-icon name="star_border" />
         </q-item-section>
         <q-item-section>取消收藏</q-item-section>
       </q-item>
-          <q-item v-else clickable @click="showPanelConf = true" v-close-popup>
+      <q-item v-else clickable @click="showPanelConf = true">
         <q-item-section side>
           <q-icon name="star" />
         </q-item-section>
         <q-item-section>收藏标签</q-item-section>
         <q-tooltip
-              >收藏后，会将当前标签名作为全局关键字，可在 uTools
-              的主输入框进行搜索
+          >收藏后，会将当前标签名作为全局关键字，可在 uTools 的主输入框进行搜索
           <br />
           搜索进入后，默认进入当前标签的面板视图 <br />
           类似于旧版本的「快捷面板」</q-tooltip
         >
       </q-item>
       <!-- 关于 -->
-          <q-item clickable @click="showAbout = true" v-close-popup>
+      <q-item clickable @click="showAbout = true">
         <q-item-section side>
           <q-icon name="info" />
         </q-item-section>
         <q-item-section>关于和帮助</q-item-section></q-item
       >
     </q-list>
-      </q-menu>
-    </q-btn>
     <!-- 关于弹窗 -->
     <q-dialog v-model="showAbout">
       <AboutThis />
@@ -443,7 +434,7 @@
     <q-dialog v-model="showUserDara">
       <UserData :showInsertBtn="false" />
     </q-dialog>
-  </div>
+  </q-menu>
 </template>
 
 <script>

src/pages/ConfigurationPage.vue

@@ -167,14 +167,21 @@
               icon="add"
             />
             <q-separator vertical />
-            <!-- 下拉菜单 -->
-            <ConfigurationMenu
+            <q-btn
+              stretch
+              color="primary"
+              flat
+              size="xs"
               :style="{
                 height: footerBarHeight,
               }"
+              ><q-spinner-bars color="primary" size="1.5em" />
+              <!-- 菜单 -->
+              <ConfigurationMenu
                 :isTagStared="activatedQuickPanels.includes(currentTag)"
                 :currentTag="currentTag"
               ></ConfigurationMenu>
+            </q-btn>
           </q-btn-group>
         </div>
       </div>
@@ -202,13 +209,19 @@
 </template>
 
 <script>
+import { defineAsyncComponent } from "vue";
 import quickcommandParser from "../js/common/quickcommandParser.js";
-import CommandCard from "components/CommandCard";
-import ConfigurationMenu from "components/ConfigurationMenu.vue";
-import CommandRunResult from "components/CommandRunResult.vue";
 import importAll from "../js/common/importAll.js";
 import pinyinMatch from "pinyin-match";
+import CommandCard from "components/CommandCard";
 import CommandEditor from "components/CommandEditor";
+const CommandRunResult = defineAsyncComponent(() =>
+  import("components/CommandRunResult.vue")
+);
+// Performance Rendering > 300ms
+const ConfigurationMenu = defineAsyncComponent(() =>
+  import("components/ConfigurationMenu.vue")
+);
 
 // 默认命令
 let defaultCommands = importAll(require.context("../json/", false, /\.json$/));
@@ -216,8 +229,8 @@ let defaultCommands = importAll(require.context("../json/", false, /\.json$/));
 export default {
   components: {
     CommandCard,
-    ConfigurationMenu,
     CommandEditor,
+    ConfigurationMenu,
     CommandRunResult,
   },
   data() {