修复设置菜单下的弹窗不可点击及显示异常的BUG

src/components/ConfigurationMenu.vue

@@ -1,7 +1,18 @@
 <template>
-  <q-menu max-height="480px" max-width="300px" transition-show="jump-up" transition-hide="jump-down">
+  <div>
+    <q-menu
+      target="#menuBtn"
+      max-height="480px"
+      max-width="300px"
+      transition-show="jump-up"
+      transition-hide="jump-down"
+    >
       <!-- 用户信息 -->
-    <UserInfo ref="user" :allQuickCommandsLength="allQuickCommandsLength" :allFeaturesLength="allFeaturesLength" />
+      <UserInfo
+        ref="user"
+        :allQuickCommandsLength="allQuickCommandsLength"
+        :allFeaturesLength="allFeaturesLength"
+      />
       <!-- 菜单 -->
       <q-list>
         <!-- 命令管理 -->
@@ -45,7 +56,12 @@
                 <q-item-section>禁用本页所有命令</q-item-section>
               </q-item>
               <!-- 清空 -->
-            <q-item style="color: red" clickable v-close-popup @click="clearAllCommands">
+              <q-item
+                style="color: red"
+                clickable
+                v-close-popup
+                @click="clearAllCommands"
+              >
                 <q-item-section side>
                   <q-icon name="delete" />
                 </q-item-section>
@@ -66,16 +82,33 @@
                 <q-item-section side>
                   <q-icon name="folder_special" />
                 </q-item-section>
-              <q-input dense prefix="快速收藏文件至" suffix="标签" outlined input-class="text-center" style="width: 280px"
+                <q-input
-                autofocus v-model="$root.profile.quickFileTag" @blur="
+                  dense
+                  prefix="快速收藏文件至"
+                  suffix="标签"
+                  outlined
+                  input-class="text-center"
+                  style="width: 280px"
+                  autofocus
+                  v-model="$root.profile.quickFileTag"
+                  @blur="
                     $root.profile.quickFileTag ||
                       ($root.profile.quickFileTag = '文件')
-                  " type="text">
+                  "
+                  type="text"
+                >
                   <template v-slot:append>
-                  <q-toggle @update:model-value="(val, e) => toggleFeature('favFile', val)
+                    <q-toggle
-                    " v-model="$root.profile.quickFileEnable" checked-icon="check" color="primary" />
+                      @update:model-value="
+                        (val, e) => toggleFeature('favFile', val)
+                      "
+                      v-model="$root.profile.quickFileEnable"
+                      checked-icon="check"
+                      color="primary"
+                    />
                   </template>
-                <q-tooltip>启用后，选中文件可以通过超级面板快速将文件收藏到「{{
+                  <q-tooltip
+                    >启用后，选中文件可以通过超级面板快速将文件收藏到「{{
                       $root.profile.quickFileTag
                     }}」标签
                   </q-tooltip>
@@ -85,16 +118,32 @@
                 <q-item-section side>
                   <q-icon name="bookmarks" />
                 </q-item-section>
-              <q-input dense prefix="快速收藏网址至" suffix="标签" outlined input-class="text-center" style="width: 280px"
+                <q-input
-                v-model="$root.profile.quickUrlTag" @blur="
+                  dense
+                  prefix="快速收藏网址至"
+                  suffix="标签"
+                  outlined
+                  input-class="text-center"
+                  style="width: 280px"
+                  v-model="$root.profile.quickUrlTag"
+                  @blur="
                     $root.profile.quickUrlTag ||
                       ($root.profile.quickUrlTag = '网址')
-                  " type="text">
+                  "
+                  type="text"
+                >
                   <template v-slot:append>
-                  <q-toggle @update:model-value="(val, e) => toggleFeature('favUrl', val)
+                    <q-toggle
-                    " v-model="$root.profile.quickUrlEnable" checked-icon="check" color="primary" />
+                      @update:model-value="
+                        (val, e) => toggleFeature('favUrl', val)
+                      "
+                      v-model="$root.profile.quickUrlEnable"
+                      checked-icon="check"
+                      color="primary"
+                    />
                   </template>
-                <q-tooltip>启用后，在浏览器界面可以通过超级面板快速将网址收藏到「{{
+                  <q-tooltip
+                    >启用后，在浏览器界面可以通过超级面板快速将网址收藏到「{{
                       $root.profile.quickUrlTag
                     }}」标签
                   </q-tooltip>
@@ -104,13 +153,29 @@
                 <q-item-section side>
                   <q-icon name="drive_file_rename_outline" />
                 </q-item-section>
-              <q-input dense prefix="新建插件别名至" suffix="标签" outlined input-class="text-center" style="width: 280px"
+                <q-input
-                autofocus v-model="$root.profile.pluNickNameTag" type="text">
+                  dense
+                  prefix="新建插件别名至"
+                  suffix="标签"
+                  outlined
+                  input-class="text-center"
+                  style="width: 280px"
+                  autofocus
+                  v-model="$root.profile.pluNickNameTag"
+                  type="text"
+                >
                   <template v-slot:append>
-                  <q-toggle @update:model-value="(val, e) => toggleFeature('pluNickName', val)
+                    <q-toggle
-                    " v-model="$root.profile.pluNickNameEnable" checked-icon="check" color="primary" />
+                      @update:model-value="
+                        (val, e) => toggleFeature('pluNickName', val)
+                      "
+                      v-model="$root.profile.pluNickNameEnable"
+                      checked-icon="check"
+                      color="primary"
+                    />
                   </template>
-                <q-tooltip>启用后，在主输入框输入「插件别名」可以快速设置插件别名<br />
+                  <q-tooltip
+                    >启用后，在主输入框输入「插件别名」可以快速设置插件别名<br />
                     并将所有设置的别名保存至「{{
                       $root.profile.pluNickNameTag
                     }}」标签
@@ -128,9 +193,14 @@
                     </div>
                   </template>
                   <template v-slot:append>
-                  <q-btn flat @click="$router.push('server')" icon="open_in_new" />
+                    <q-btn
+                      flat
+                      @click="$router.push('server')"
+                      icon="open_in_new"
+                    />
                   </template>
-                <q-tooltip>通过本地监听
+                  <q-tooltip
+                    >通过本地监听
                     {{ $root.nativeProfile.serverPort }}
                     端口的形式，接收用户传送过来的参数，然后根据参数执行不同的操作
                     <br />
@@ -150,9 +220,14 @@
                     </div>
                   </template>
                   <template v-slot:append>
-                  <q-btn flat @click="$router.push('code')" icon="open_in_new" />
+                    <q-btn
+                      flat
+                      @click="$router.push('code')"
+                      icon="open_in_new"
+                    />
                   </template>
-                <q-tooltip>一个可以直接运行代码的代码编辑器<br />
+                  <q-tooltip
+                    >一个可以直接运行代码的代码编辑器<br />
                     也可在主输入框输入关键字「RunCode」进入
                   </q-tooltip>
                 </q-field>
@@ -168,35 +243,56 @@
           <q-item-section>环境配置</q-item-section>
           <q-menu anchor="bottom end" self="bottom start">
             <q-list>
-            <q-item clickable @click="showUserDara = true">
+              <q-item clickable v-close-popup @click="showUserDara = true">
                 <q-item-section side>
                   <q-icon name="manage_accounts" />
                 </q-item-section>
                 <q-item-section>用户特殊变量</q-item-section>
-              <q-tooltip>用户设置的变量，类似一个全局配置项<br />
+                <q-tooltip
+                  >用户设置的变量，类似一个全局配置项<br />
                   配置好后可选择特殊变量中的「usr:」插入<br />
-                也可直接在特殊变量中配置</q-tooltip>
+                  也可直接在特殊变量中配置</q-tooltip
+                >
               </q-item>
               <q-item>
                 <q-item-section side>
                   <q-icon name="dvr" />
                 </q-item-section>
-              <q-input dense outlined autogrow style="width: 280px" autofocus v-model="$root.nativeProfile.envPath"
+                <q-input
-                type="text" label="环境变量 PATH">
+                  dense
-                <q-tooltip>修改本插件环境变量中的 PATH，直接覆盖而非追加
+                  outlined
+                  autogrow
+                  style="width: 280px"
+                  autofocus
+                  v-model="$root.nativeProfile.envPath"
+                  type="text"
+                  label="环境变量 PATH"
+                >
+                  <q-tooltip
+                    >修改本插件环境变量中的 PATH，直接覆盖而非追加
                     <br />将会影响到除 quickcommand、html
-                  以外的所有环境</q-tooltip>
+                    以外的所有环境</q-tooltip
+                  >
                 </q-input>
               </q-item>
               <q-item v-if="showAlias">
                 <q-item-section side>
                   <q-icon name="code" />
                 </q-item-section>
-              <q-input dense outlined autogrow style="width: 280px" v-model="$root.nativeProfile.alias" type="text"
+                <q-input
-                label="Alias">
+                  dense
-                <q-tooltip>一行一条，配置方法和 shell 的语法一样<br />如 alias
+                  outlined
+                  autogrow
+                  style="width: 280px"
+                  v-model="$root.nativeProfile.alias"
+                  type="text"
+                  label="Alias"
+                >
+                  <q-tooltip
+                    >一行一条，配置方法和 shell 的语法一样<br />如 alias
                     python="/home/user/.bin/python"<br />将会影响到除
-                  quickcommand、html 以外的所有环境</q-tooltip>
+                    quickcommand、html 以外的所有环境</q-tooltip
+                  >
                 </q-input>
               </q-item>
             </q-list>
@@ -216,10 +312,22 @@
                 </q-item-section>
                 <q-item-section>主颜色</q-item-section>
                 <q-tooltip>你可以更改界面的主题色，会员限定</q-tooltip>
-              <q-menu v-if="$refs.user.isVIP" nchor="top left" self="bottom end">
+                <q-menu
+                  v-if="$refs.user.isVIP"
+                  nchor="top left"
+                  self="bottom end"
+                >
                   <q-card>
-                  <q-color @change="setPrimaryColor" v-model="$root.profile.primaryColor" />
+                    <q-color
-                  <q-btn color="primary" label="重置为默认" class="full-width" @click="resetPrimary" />
+                      @change="setPrimaryColor"
+                      v-model="$root.profile.primaryColor"
+                    />
+                    <q-btn
+                      color="primary"
+                      label="重置为默认"
+                      class="full-width"
+                      @click="resetPrimary"
+                    />
                   </q-card>
                 </q-menu>
               </q-item>
@@ -228,16 +336,34 @@
                   <q-icon name="image" />
                 </q-item-section>
                 <q-item-section>面板视图背景图片</q-item-section>
-              <q-tooltip>为面板视图设置一张背景图片，会员限定<br />请不要选择尺寸太大的图片，将影响插件载入速度</q-tooltip>
+                <q-tooltip
-              <q-menu v-if="$refs.user.isVIP" nchor="top left" self="bottom end">
+                  >为面板视图设置一张背景图片，会员限定<br />请不要选择尺寸太大的图片，将影响插件载入速度</q-tooltip
+                >
+                <q-menu
+                  v-if="$refs.user.isVIP"
+                  nchor="top left"
+                  self="bottom end"
+                >
                   <q-card>
-                  <q-file dense standout="bg-primary text-white" v-model="selectFile" autofocus
+                    <q-file
-                    @update:model-value="changeBackground()" accept="image/*" label="请选择一张图片">
+                      dense
+                      standout="bg-primary text-white"
+                      v-model="selectFile"
+                      autofocus
+                      @update:model-value="changeBackground()"
+                      accept="image/*"
+                      label="请选择一张图片"
+                    >
                       <template v-slot:prepend>
                         <q-icon name="attach_file" />
                       </template>
                     </q-file>
-                  <q-btn color="negative" label="取消背景" class="full-width" @click="changeBackground(1)" />
+                    <q-btn
+                      color="negative"
+                      label="取消背景"
+                      class="full-width"
+                      @click="changeBackground(1)"
+                    />
                   </q-card>
                 </q-menu>
               </q-item>
@@ -247,8 +373,12 @@
                 </q-item-section>
                 <q-item-section class="flex">紧凑标签栏 </q-item-section>
                 <q-tooltip>更为紧凑的标签栏，适用于标签非常多的情形</q-tooltip>
-              <q-item-section side><q-toggle v-model="$root.profile.denseTagBar" :disable="!$refs.user.isVIP"
+                <q-item-section side
-                  color="primary" /></q-item-section>
+                  ><q-toggle
+                    v-model="$root.profile.denseTagBar"
+                    :disable="!$refs.user.isVIP"
+                    color="primary"
+                /></q-item-section>
               </q-item>
               <q-item clickable>
                 <q-item-section side>
@@ -256,10 +386,14 @@
                 </q-item-section>
                 <q-item-section class="flex">自动聚焦搜索 </q-item-section>
                 <q-tooltip>进入插件时自动聚焦搜索</q-tooltip>
-              <q-item-section side><q-toggle v-model="$root.profile.autofocusSearch" color="primary" /></q-item-section>
+                <q-item-section side
+                  ><q-toggle
+                    v-model="$root.profile.autofocusSearch"
+                    color="primary"
+                /></q-item-section>
               </q-item>
               <!-- 自动分离 -->
-            <!-- <q-item clickable @click="getActivatedFutures(); showAutoDetachFeatures = true">
+              <!-- <q-item clickable v-close-popup @click="getActivatedFutures(); showAutoDetachFeatures = true">
                 <q-item-section side>
                   <q-icon name="web_stories" />
                 </q-item-section>
@@ -276,29 +410,34 @@
               <q-item-section>分享中心</q-item-section>
             </q-item> -->
         <!-- 收藏 -->
-      <q-item v-if="isTagStared" clickable @click="unMarkTag">
+        <q-item v-if="isTagStared" clickable v-close-popup @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">
+        <q-item v-else clickable v-close-popup @click="showPanelConf = true">
           <q-item-section side>
             <q-icon name="star" />
           </q-item-section>
           <q-item-section>收藏标签</q-item-section>
-        <q-tooltip>收藏后，会将当前标签名作为全局关键字，可在 uTools 的主输入框进行搜索
+          <q-tooltip
+            >收藏后，会将当前标签名作为全局关键字，可在 uTools
+            的主输入框进行搜索
             <br />
             搜索进入后，默认进入当前标签的面板视图 <br />
-          类似于旧版本的「快捷面板」</q-tooltip>
+            类似于旧版本的「快捷面板」</q-tooltip
+          >
         </q-item>
         <!-- 关于 -->
-      <q-item clickable @click="showAbout = true">
+        <q-item clickable v-close-popup @click="showAbout = true">
           <q-item-section side>
             <q-icon name="info" />
           </q-item-section>
-        <q-item-section>关于和帮助</q-item-section></q-item>
+          <q-item-section>关于和帮助</q-item-section></q-item
+        >
       </q-list>
+    </q-menu>
     <!-- 关于弹窗 -->
     <q-dialog v-model="showAbout">
       <AboutThis />
@@ -332,7 +471,7 @@
           </q-card-actions>
         </q-card>
       </q-dialog> -->
-  </q-menu>
+  </div>
 </template>
 
 <script>
@@ -438,34 +577,41 @@ export default {
     },
     // 获取所有启用的功能
     getActivatedFutures() {
-      let activateFeatures = this.$root.utools.whole.getFeatures().map(fts => {
+      let activateFeatures = this.$root.utools.whole
+        .getFeatures()
+        .map((fts) => {
           return {
             value: fts.code,
             icon: fts.icon,
             label: fts.explain,
-        }
+          };
         });
-      let defaultFeatures = [{
+      let defaultFeatures = [
+        {
           value: "configuration",
           label: "快捷命令配置",
-        icon: "logo.png"
+          icon: "logo.png",
         },
         {
           value: "code",
           label: "运行代码",
-        icon: "features/code.png"
+          icon: "features/code.png",
         },
         {
           value: "server",
           label: "快捷命令服务",
-        icon: "features/server.png"
+          icon: "features/server.png",
-      }]
+        },
-      this.activateFeatures = _.concat(defaultFeatures, _.cloneDeep(activateFeatures));
+      ];
+      this.activateFeatures = _.concat(
+        defaultFeatures,
+        _.cloneDeep(activateFeatures)
+      );
     },
     changeAutoDetachFeatures() {
       this.showAutoDetachFeatures = false;
       quickcommand.showMessageBox("设置成功");
     },
-  }
+  },
 };
 </script>

src/pages/ConfigurationPage.vue

@@ -2,19 +2,37 @@
   <div class="relative">
     <!-- 标签栏 -->
     <!-- 面板视图不显示标签栏 -->
-    <q-scroll-area v-show="commandCardStyle !== 'mini'" class="absolute-left" :thumb-style="{
+    <q-scroll-area
+      v-show="commandCardStyle !== 'mini'"
+      class="absolute-left"
+      :thumb-style="{
         width: '2px',
-    }" :style="{
+      }"
+      :style="{
         width: tabBarWidth,
         zIndex: 1,
-}">
+      }"
-      <q-tabs v-model="currentTag" vertical switch-indicator active-class="text-primary text-weight-bolder"
+    >
-        content-class="text-blue-grey" :key="$root.profile.denseTagBar" :dense="$root.profile.denseTagBar">
+      <q-tabs
+        v-model="currentTag"
+        vertical
+        switch-indicator
+        active-class="text-primary text-weight-bolder"
+        content-class="text-blue-grey"
+        :key="$root.profile.denseTagBar"
+        :dense="$root.profile.denseTagBar"
+      >
         <!-- 所有标签 -->
-        <q-tab v-for="tag in allQuickCommandTags" :key="tag" :name="tag" :content-class="tag === '搜索结果' || activatedQuickPanels.includes(tag)
+        <q-tab
+          v-for="tag in allQuickCommandTags"
+          :key="tag"
+          :name="tag"
+          :content-class="
+            tag === '搜索结果' || activatedQuickPanels.includes(tag)
               ? 'text-blue-7 text-weight-bolder'
               : ''
-          ">
+          "
+        >
           {{ tag }}
           <q-tooltip v-if="tag === '未分类'">
             所有没有添加标签的命令都会归在未分类 <br />
@@ -24,7 +42,10 @@
       </q-tabs>
     </q-scroll-area>
     <!-- 面板栏 -->
-    <q-tab-panels animated class="absolute-right" :style="{
+    <q-tab-panels
+      animated
+      class="absolute-right"
+      :style="{
         bottom: footerBarHeight,
         left: tabBarWidth,
         background:
@@ -32,35 +53,67 @@
             ? `url('${$root.profile.backgroundImg}')`
             : 'none',
         backgroundSize: 'cover',
-    }" v-model="currentTag" transition-prev="fade" transition-next="fade" swipeable>
+      }"
-      <q-tab-panel style="padding: 0" v-for="tag in allQuickCommandTags" :key="tag" :name="tag">
+      v-model="currentTag"
-        <q-scroll-area style="height: 100%" :thumb-style="{
+      transition-prev="fade"
+      transition-next="fade"
+      swipeable
+    >
+      <q-tab-panel
+        style="padding: 0"
+        v-for="tag in allQuickCommandTags"
+        :key="tag"
+        :name="tag"
+      >
+        <q-scroll-area
+          style="height: 100%"
+          :thumb-style="{
             background: 'grey',
             width: '6px',
             opacity: 0.5,
-        }">
+          }"
+        >
           <div class="row center q-pa-xs">
-            <CommandCard v-for="commandInfo in currentTagQuickCommands" :key="commandInfo.features.code"
+            <CommandCard
-              :commandInfo="commandInfo" :isCommandActivated="activatedQuickCommandFeatureCodes.includes(
+              v-for="commandInfo in currentTagQuickCommands"
+              :key="commandInfo.features.code"
+              :commandInfo="commandInfo"
+              :isCommandActivated="
+                activatedQuickCommandFeatureCodes.includes(
                   commandInfo.features.code
                 )
-                " :cardStyle="commandCardStyleSheet[commandCardStyle]" @commandChanged="commandChanged" :style="{
+              "
+              :cardStyle="commandCardStyleSheet[commandCardStyle]"
+              @commandChanged="commandChanged"
+              :style="{
                 width: commandCardStyleSheet[commandCardStyle].width,
-  }" class="relative-position q-pa-sm"></CommandCard>
+              }"
+              class="relative-position q-pa-sm"
+            ></CommandCard>
           </div>
         </q-scroll-area>
       </q-tab-panel>
     </q-tab-panels>
     <!-- 底栏 -->
-    <div class="absolute-bottom" :style="{
+    <div
+      class="absolute-bottom"
+      :style="{
         height: footerBarHeight,
         left: tabBarWidth,
-    }">
+      }"
+    >
       <div class="row">
         <!-- 搜索栏 -->
         <div class="col">
-          <q-input v-model="commandSearchKeyword" debounce="200" filled dense :autofocus="$root.profile.autofocusSearch"
+          <q-input
-            @update:model-value="updateSearch" placeholder="搜索，支持拼音首字母">
+            v-model="commandSearchKeyword"
+            debounce="200"
+            filled
+            dense
+            :autofocus="$root.profile.autofocusSearch"
+            @update:model-value="updateSearch"
+            placeholder="搜索，支持拼音首字母"
+          >
             <template v-slot:prepend>
               <q-icon name="search" />
             </template>
@@ -70,39 +123,65 @@
         <div class="col-auto justify-end flex">
           <q-btn-group>
             <!-- 切换视图 -->
-            <q-btn-toggle v-model="commandCardStyle" @click="$root.profile.commandCardStyle = commandCardStyle"
+            <q-btn-toggle
-              toggle-color="primary" flat :options="[
+              v-model="commandCardStyle"
+              @click="$root.profile.commandCardStyle = commandCardStyle"
+              toggle-color="primary"
+              flat
+              :options="[
                 { slot: 'normal', value: 'normal' },
                 { slot: 'dense', value: 'dense' },
                 { slot: 'mini', value: 'mini' },
-              ]">
+              ]"
+            >
               <template v-slot:normal>
                 <q-icon name="dashboard" />普通
                 <q-tooltip>按两列排列的基础视图</q-tooltip>
               </template>
               <template v-slot:dense>
                 <q-icon name="apps" />紧凑
-                <q-tooltip>按三列排列的紧凑视图，但不会显示适用的操作系统</q-tooltip>
+                <q-tooltip
+                  >按三列排列的紧凑视图，但不会显示适用的操作系统</q-tooltip
+                >
               </template>
               <template v-slot:mini>
                 <q-icon name="view_comfy" />面板
-                <q-tooltip>按四列排列的面板视图<br />
+                <q-tooltip
+                  >按四列排列的面板视图<br />
                   老版本的「快捷面板」已被弃用，取而代之的是新版的「面板视图」<br />
                   注意：<br />
                   1.未启用、匹配类型为窗口的命令在此视图下不显示<br />
                   2.只显示图标、描述和匹配类型<br />
-                  3.点击卡片时会直接运行命令而不是编辑命令</q-tooltip>
+                  3.点击卡片时会直接运行命令而不是编辑命令</q-tooltip
+                >
               </template>
             </q-btn-toggle>
             <q-separator vertical />
             <!-- 新建按钮 -->
-            <q-btn split flat @click="addNewCommand" color="primary" label="新建" icon="add" />
+            <q-btn
+              split
+              flat
+              @click="addNewCommand"
+              color="primary"
+              label="新建"
+              icon="add"
+            />
             <q-separator vertical />
-            <q-btn stretch color="primary" flat size="xs" :style="{
+            <q-btn
+              stretch
+              color="primary"
+              flat
+              size="xs"
+              id="menuBtn"
+              :style="{
                 height: footerBarHeight,
-            }"><q-spinner-bars color="primary" size="1.5em" />
+              }"
+              ><q-spinner-bars color="primary" size="1.5em" />
               <!-- 菜单 -->
-              <ConfigurationMenu :isTagStared="activatedQuickPanels.includes(currentTag)" :currentTag="currentTag">
+              <ConfigurationMenu
+                :isTagStared="activatedQuickPanels.includes(currentTag)"
+                :currentTag="currentTag"
+              >
               </ConfigurationMenu>
             </q-btn>
           </q-btn-group>
@@ -110,11 +189,24 @@
       </div>
     </div>
     <!-- 命令编辑界面 -->
-    <q-dialog v-model="isCommandEditorShow" persistent maximized :transition-show="newCommandDirect ? '' : 'slide-up'"
+    <q-dialog
-      transition-hide="slide-down" style="overflow: hidden">
+      v-model="isCommandEditorShow"
-      <CommandEditor ref="commandEditor" :action="commandEditorAction" @editorEvent="editorEvent"></CommandEditor>
+      persistent
+      maximized
+      :transition-show="newCommandDirect ? '' : 'slide-up'"
+      transition-hide="slide-down"
+      style="overflow: hidden"
+    >
+      <CommandEditor
+        ref="commandEditor"
+        :action="commandEditorAction"
+        @editorEvent="editorEvent"
+      ></CommandEditor>
     </q-dialog>
-    <CommandRunResult :action="{ type: 'config' }" ref="result"></CommandRunResult>
+    <CommandRunResult
+      :action="{ type: 'config' }"
+      ref="result"
+    ></CommandRunResult>
   </div>
 </template>
 
@@ -122,7 +214,7 @@
 import { defineAsyncComponent } from "vue";
 import quickcommandParser from "../js/common/quickcommandParser.js";
 import importAll from "../js/common/importAll.js";
-import changeLog from "../js/options/changeLog.js"
+import changeLog from "../js/options/changeLog.js";
 import pinyinMatch from "pinyin-match";
 import CommandCard from "components/CommandCard";
 import CommandEditor from "components/CommandEditor";
@@ -517,10 +609,21 @@ export default {
     showChangeLog() {
       let lastNeedLogEvent = changeLog[changeLog.length - 1];
       let loggedVersion =
-        this.$root.utools.whole.dbStorage.getItem("cfg_loggedVersion") || '0.0.0';
+        this.$root.utools.whole.dbStorage.getItem("cfg_loggedVersion") ||
+        "0.0.0";
       if (loggedVersion < lastNeedLogEvent.version) {
-        quickcommand.showConfirmBox('<pre style="white-space: pre-wrap;word-wrap: break-word;">' + lastNeedLogEvent.log + '</pre>', '更新日志', true, 700)
+        quickcommand.showConfirmBox(
-        this.$root.utools.whole.dbStorage.setItem("cfg_loggedVersion", lastNeedLogEvent.version)
+          '<pre style="white-space: pre-wrap;word-wrap: break-word;">' +
+            lastNeedLogEvent.log +
+            "</pre>",
+          "更新日志",
+          true,
+          700
+        );
+        this.$root.utools.whole.dbStorage.setItem(
+          "cfg_loggedVersion",
+          lastNeedLogEvent.version
+        );
       }
     },
   },