From 2b99fa0f31675063257b99b8d3545f82f5152ba8 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 13 Mar 2024 18:20:59 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=AE=BE=E7=BD=AE=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E4=B8=8B=E7=9A=84=E5=BC=B9=E7=AA=97=E4=B8=8D=E5=8F=AF?=
 =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=8F=8A=E6=98=BE=E7=A4=BA=E5=BC=82=E5=B8=B8?=
 =?UTF-8?q?=E7=9A=84BUG?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ConfigurationMenu.vue | 832 ++++++++++++++++-----------
 src/pages/ConfigurationPage.vue      | 221 +++++--
 2 files changed, 651 insertions(+), 402 deletions(-)

diff --git a/src/components/ConfigurationMenu.vue b/src/components/ConfigurationMenu.vue
index 16e5846..306d2a0 100644
--- a/src/components/ConfigurationMenu.vue
+++ b/src/components/ConfigurationMenu.vue
@@ -1,304 +1,443 @@
 <template>
-  <q-menu max-height="480px" max-width="300px" transition-show="jump-up" transition-hide="jump-down">
-    <!-- 用户信息 -->
-    <UserInfo ref="user" :allQuickCommandsLength="allQuickCommandsLength" :allFeaturesLength="allFeaturesLength" />
-    <!-- 菜单 -->
-    <q-list>
-      <!-- 命令管理 -->
-      <q-item clickable>
-        <q-item-section side>
-          <q-icon name="keyboard_arrow_left" />
-        </q-item-section>
-        <q-item-section>命令管理</q-item-section>
-        <q-menu anchor="top end" self="top start">
-          <q-list>
-            <!-- 导入 -->
-            <q-item clickable v-close-popup @click="importCommand">
+  <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"
+      />
+      <!-- 菜单 -->
+      <q-list>
+        <!-- 命令管理 -->
+        <q-item clickable>
+          <q-item-section side>
+            <q-icon name="keyboard_arrow_left" />
+          </q-item-section>
+          <q-item-section>命令管理</q-item-section>
+          <q-menu anchor="top end" self="top start">
+            <q-list>
+              <!-- 导入 -->
+              <q-item clickable v-close-popup @click="importCommand">
+                <q-item-section side>
+                  <q-icon name="text_snippet" />
+                </q-item-section>
+                <q-item-section>从文件导入命令</q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="importCommand(false)">
+                <q-item-section side>
+                  <q-icon name="content_paste" />
+                </q-item-section>
+                <q-item-section>从剪贴板导入命令</q-item-section>
+              </q-item>
+              <!-- 导出 -->
+              <q-item clickable v-close-popup @click="exportAllCommands">
+                <q-item-section side>
+                  <q-icon name="file_upload" />
+                </q-item-section>
+                <q-item-section>导出所有命令</q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="enableAllCommands">
+                <q-item-section side>
+                  <q-icon name="checklist_rtl" />
+                </q-item-section>
+                <q-item-section>启用本页所有命令</q-item-section>
+              </q-item>
+              <q-item clickable v-close-popup @click="disableAllCommands">
+                <q-item-section side>
+                  <q-icon name="remove_done" />
+                </q-item-section>
+                <q-item-section>禁用本页所有命令</q-item-section>
+              </q-item>
+              <!-- 清空 -->
+              <q-item
+                style="color: red"
+                clickable
+                v-close-popup
+                @click="clearAllCommands"
+              >
+                <q-item-section side>
+                  <q-icon name="delete" />
+                </q-item-section>
+                <q-item-section>清空数据</q-item-section>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-item>
+        <!-- 实用功能 -->
+        <q-item clickable>
+          <q-item-section side>
+            <q-icon name="keyboard_arrow_left" />
+          </q-item-section>
+          <q-item-section>实用功能</q-item-section>
+          <q-menu anchor="top end" self="top start">
+            <q-list>
+              <q-item>
+                <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"
+                  autofocus
+                  v-model="$root.profile.quickFileTag"
+                  @blur="
+                    $root.profile.quickFileTag ||
+                      ($root.profile.quickFileTag = '文件')
+                  "
+                  type="text"
+                >
+                  <template v-slot:append>
+                    <q-toggle
+                      @update:model-value="
+                        (val, e) => toggleFeature('favFile', val)
+                      "
+                      v-model="$root.profile.quickFileEnable"
+                      checked-icon="check"
+                      color="primary"
+                    />
+                  </template>
+                  <q-tooltip
+                    >启用后，选中文件可以通过超级面板快速将文件收藏到「{{
+                      $root.profile.quickFileTag
+                    }}」标签
+                  </q-tooltip>
+                </q-input>
+              </q-item>
+              <q-item>
+                <q-item-section side>
+                  <q-icon name="bookmarks" />
+                </q-item-section>
+                <q-input
+                  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"
+                >
+                  <template v-slot:append>
+                    <q-toggle
+                      @update:model-value="
+                        (val, e) => toggleFeature('favUrl', val)
+                      "
+                      v-model="$root.profile.quickUrlEnable"
+                      checked-icon="check"
+                      color="primary"
+                    />
+                  </template>
+                  <q-tooltip
+                    >启用后，在浏览器界面可以通过超级面板快速将网址收藏到「{{
+                      $root.profile.quickUrlTag
+                    }}」标签
+                  </q-tooltip>
+                </q-input>
+              </q-item>
+              <q-item>
+                <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"
+                  autofocus
+                  v-model="$root.profile.pluNickNameTag"
+                  type="text"
+                >
+                  <template v-slot:append>
+                    <q-toggle
+                      @update:model-value="
+                        (val, e) => toggleFeature('pluNickName', val)
+                      "
+                      v-model="$root.profile.pluNickNameEnable"
+                      checked-icon="check"
+                      color="primary"
+                    />
+                  </template>
+                  <q-tooltip
+                    >启用后，在主输入框输入「插件别名」可以快速设置插件别名<br />
+                    并将所有设置的别名保存至「{{
+                      $root.profile.pluNickNameTag
+                    }}」标签
+                  </q-tooltip>
+                </q-input>
+              </q-item>
+              <q-item>
+                <q-item-section side>
+                  <q-icon name="api" />
+                </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>
+                  </template>
+                  <template v-slot:append>
+                    <q-btn
+                      flat
+                      @click="$router.push('server')"
+                      icon="open_in_new"
+                    />
+                  </template>
+                  <q-tooltip
+                    >通过本地监听
+                    {{ $root.nativeProfile.serverPort }}
+                    端口的形式，接收用户传送过来的参数，然后根据参数执行不同的操作
+                    <br />
+                    需要配置插件跟随 utools 启动和保留后台<br />
+                    也可在主输入框通过关键字「快捷命令服务配置」进入
+                  </q-tooltip>
+                </q-field>
+              </q-item>
+              <q-item>
+                <q-item-section side>
+                  <q-icon name="code" />
+                </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>
+                  </template>
+                  <template v-slot:append>
+                    <q-btn
+                      flat
+                      @click="$router.push('code')"
+                      icon="open_in_new"
+                    />
+                  </template>
+                  <q-tooltip
+                    >一个可以直接运行代码的代码编辑器<br />
+                    也可在主输入框输入关键字「RunCode」进入
+                  </q-tooltip>
+                </q-field>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-item>
+        <!-- 环境配置 -->
+        <q-item clickable>
+          <q-item-section side>
+            <q-icon name="keyboard_arrow_left" />
+          </q-item-section>
+          <q-item-section>环境配置</q-item-section>
+          <q-menu anchor="bottom end" self="bottom start">
+            <q-list>
+              <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 />
+                  配置好后可选择特殊变量中的「usr:」插入<br />
+                  也可直接在特殊变量中配置</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"
+                  type="text"
+                  label="环境变量 PATH"
+                >
+                  <q-tooltip
+                    >修改本插件环境变量中的 PATH，直接覆盖而非追加
+                    <br />将会影响到除 quickcommand、html
+                    以外的所有环境</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"
+                  label="Alias"
+                >
+                  <q-tooltip
+                    >一行一条，配置方法和 shell 的语法一样<br />如 alias
+                    python="/home/user/.bin/python"<br />将会影响到除
+                    quickcommand、html 以外的所有环境</q-tooltip
+                  >
+                </q-input>
+              </q-item>
+            </q-list>
+          </q-menu>
+        </q-item>
+        <!-- 个性化设置 -->
+        <q-item clickable>
+          <q-item-section side>
+            <q-icon name="keyboard_arrow_left" />
+          </q-item-section>
+          <q-item-section>个性化设置</q-item-section>
+          <q-menu anchor="top end" self="top start">
+            <q-list>
+              <q-item clickable :disable="!$refs.user.isVIP">
+                <q-item-section side>
+                  <q-icon name="color_lens" />
+                </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-card>
+                    <q-color
+                      @change="setPrimaryColor"
+                      v-model="$root.profile.primaryColor"
+                    />
+                    <q-btn
+                      color="primary"
+                      label="重置为默认"
+                      class="full-width"
+                      @click="resetPrimary"
+                    />
+                  </q-card>
+                </q-menu>
+              </q-item>
+              <q-item clickable :disable="!$refs.user.isVIP">
+                <q-item-section side>
+                  <q-icon name="image" />
+                </q-item-section>
+                <q-item-section>面板视图背景图片</q-item-section>
+                <q-tooltip
+                  >为面板视图设置一张背景图片，会员限定<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
+                      @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-card>
+                </q-menu>
+              </q-item>
+              <q-item clickable :disable="!$refs.user.isVIP">
+                <q-item-section side>
+                  <q-icon name="label" />
+                </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"
+                    color="primary"
+                /></q-item-section>
+              </q-item>
+              <q-item clickable>
+                <q-item-section side>
+                  <q-icon name="search" />
+                </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>
+              <!-- 自动分离 -->
+              <!-- <q-item clickable v-close-popup @click="getActivatedFutures(); showAutoDetachFeatures = true">
+                <q-item-section side>
+                  <q-icon name="web_stories" />
+                </q-item-section>
+                <q-item-section class="flex">自动分离 </q-item-section>
+                <q-tooltip>utools的自动分离对整个插件生效，配置此选项可以实现只对某些特定的功能进行自动分离</q-tooltip>
+              </q-item> -->
+            </q-list>
+          </q-menu>
+        </q-item>
+        <!-- <q-item clickable to="/share">
               <q-item-section side>
-                <q-icon name="text_snippet" />
+                <q-icon name="groups" />
               </q-item-section>
-              <q-item-section>从文件导入命令</q-item-section>
-            </q-item>
-            <q-item clickable v-close-popup @click="importCommand(false)">
-              <q-item-section side>
-                <q-icon name="content_paste" />
-              </q-item-section>
-              <q-item-section>从剪贴板导入命令</q-item-section>
-            </q-item>
-            <!-- 导出 -->
-            <q-item clickable v-close-popup @click="exportAllCommands">
-              <q-item-section side>
-                <q-icon name="file_upload" />
-              </q-item-section>
-              <q-item-section>导出所有命令</q-item-section>
-            </q-item>
-            <q-item clickable v-close-popup @click="enableAllCommands">
-              <q-item-section side>
-                <q-icon name="checklist_rtl" />
-              </q-item-section>
-              <q-item-section>启用本页所有命令</q-item-section>
-            </q-item>
-            <q-item clickable v-close-popup @click="disableAllCommands">
-              <q-item-section side>
-                <q-icon name="remove_done" />
-              </q-item-section>
-              <q-item-section>禁用本页所有命令</q-item-section>
-            </q-item>
-            <!-- 清空 -->
-            <q-item style="color: red" clickable v-close-popup @click="clearAllCommands">
-              <q-item-section side>
-                <q-icon name="delete" />
-              </q-item-section>
-              <q-item-section>清空数据</q-item-section>
-            </q-item>
-          </q-list>
-        </q-menu>
-      </q-item>
-      <!-- 实用功能 -->
-      <q-item clickable>
-        <q-item-section side>
-          <q-icon name="keyboard_arrow_left" />
-        </q-item-section>
-        <q-item-section>实用功能</q-item-section>
-        <q-menu anchor="top end" self="top start">
-          <q-list>
-            <q-item>
-              <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"
-                autofocus v-model="$root.profile.quickFileTag" @blur="
-                  $root.profile.quickFileTag ||
-                  ($root.profile.quickFileTag = '文件')
-                  " type="text">
-                <template v-slot:append>
-                  <q-toggle @update:model-value="(val, e) => toggleFeature('favFile', val)
-                    " v-model="$root.profile.quickFileEnable" checked-icon="check" color="primary" />
-                </template>
-                <q-tooltip>启用后，选中文件可以通过超级面板快速将文件收藏到「{{
-                  $root.profile.quickFileTag
-                }}」标签
-                </q-tooltip>
-              </q-input>
-            </q-item>
-            <q-item>
-              <q-item-section side>
-                <q-icon name="bookmarks" />
-              </q-item-section>
-              <q-input 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">
-                <template v-slot:append>
-                  <q-toggle @update:model-value="(val, e) => toggleFeature('favUrl', val)
-                    " v-model="$root.profile.quickUrlEnable" checked-icon="check" color="primary" />
-                </template>
-                <q-tooltip>启用后，在浏览器界面可以通过超级面板快速将网址收藏到「{{
-                  $root.profile.quickUrlTag
-                }}」标签
-                </q-tooltip>
-              </q-input>
-            </q-item>
-            <q-item>
-              <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"
-                autofocus v-model="$root.profile.pluNickNameTag" type="text">
-                <template v-slot:append>
-                  <q-toggle @update:model-value="(val, e) => toggleFeature('pluNickName', val)
-                    " v-model="$root.profile.pluNickNameEnable" checked-icon="check" color="primary" />
-                </template>
-                <q-tooltip>启用后，在主输入框输入「插件别名」可以快速设置插件别名<br />
-                  并将所有设置的别名保存至「{{
-                    $root.profile.pluNickNameTag
-                  }}」标签
-                </q-tooltip>
-              </q-input>
-            </q-item>
-            <q-item>
-              <q-item-section side>
-                <q-icon name="api" />
-              </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>
-                </template>
-                <template v-slot:append>
-                  <q-btn flat @click="$router.push('server')" icon="open_in_new" />
-                </template>
-                <q-tooltip>通过本地监听
-                  {{ $root.nativeProfile.serverPort }}
-                  端口的形式，接收用户传送过来的参数，然后根据参数执行不同的操作
-                  <br />
-                  需要配置插件跟随 utools 启动和保留后台<br />
-                  也可在主输入框通过关键字「快捷命令服务配置」进入
-                </q-tooltip>
-              </q-field>
-            </q-item>
-            <q-item>
-              <q-item-section side>
-                <q-icon name="code" />
-              </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>
-                </template>
-                <template v-slot:append>
-                  <q-btn flat @click="$router.push('code')" icon="open_in_new" />
-                </template>
-                <q-tooltip>一个可以直接运行代码的代码编辑器<br />
-                  也可在主输入框输入关键字「RunCode」进入
-                </q-tooltip>
-              </q-field>
-            </q-item>
-          </q-list>
-        </q-menu>
-      </q-item>
-      <!-- 环境配置 -->
-      <q-item clickable>
-        <q-item-section side>
-          <q-icon name="keyboard_arrow_left" />
-        </q-item-section>
-        <q-item-section>环境配置</q-item-section>
-        <q-menu anchor="bottom end" self="bottom start">
-          <q-list>
-            <q-item clickable @click="showUserDara = true">
-              <q-item-section side>
-                <q-icon name="manage_accounts" />
-              </q-item-section>
-              <q-item-section>用户特殊变量</q-item-section>
-              <q-tooltip>用户设置的变量，类似一个全局配置项<br />
-                配置好后可选择特殊变量中的「usr:」插入<br />
-                也可直接在特殊变量中配置</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"
-                type="text" label="环境变量 PATH">
-                <q-tooltip>修改本插件环境变量中的 PATH，直接覆盖而非追加
-                  <br />将会影响到除 quickcommand、html
-                  以外的所有环境</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"
-                label="Alias">
-                <q-tooltip>一行一条，配置方法和 shell 的语法一样<br />如 alias
-                  python="/home/user/.bin/python"<br />将会影响到除
-                  quickcommand、html 以外的所有环境</q-tooltip>
-              </q-input>
-            </q-item>
-          </q-list>
-        </q-menu>
-      </q-item>
-      <!-- 个性化设置 -->
-      <q-item clickable>
-        <q-item-section side>
-          <q-icon name="keyboard_arrow_left" />
-        </q-item-section>
-        <q-item-section>个性化设置</q-item-section>
-        <q-menu anchor="top end" self="top start">
-          <q-list>
-            <q-item clickable :disable="!$refs.user.isVIP">
-              <q-item-section side>
-                <q-icon name="color_lens" />
-              </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-card>
-                  <q-color @change="setPrimaryColor" v-model="$root.profile.primaryColor" />
-                  <q-btn color="primary" label="重置为默认" class="full-width" @click="resetPrimary" />
-                </q-card>
-              </q-menu>
-            </q-item>
-            <q-item clickable :disable="!$refs.user.isVIP">
-              <q-item-section side>
-                <q-icon name="image" />
-              </q-item-section>
-              <q-item-section>面板视图背景图片</q-item-section>
-              <q-tooltip>为面板视图设置一张背景图片，会员限定<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
-                    @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-card>
-              </q-menu>
-            </q-item>
-            <q-item clickable :disable="!$refs.user.isVIP">
-              <q-item-section side>
-                <q-icon name="label" />
-              </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"
-                  color="primary" /></q-item-section>
-            </q-item>
-            <q-item clickable>
-              <q-item-section side>
-                <q-icon name="search" />
-              </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>
-            <!-- 自动分离 -->
-            <!-- <q-item clickable @click="getActivatedFutures(); showAutoDetachFeatures = true">
-              <q-item-section side>
-                <q-icon name="web_stories" />
-              </q-item-section>
-              <q-item-section class="flex">自动分离 </q-item-section>
-              <q-tooltip>utools的自动分离对整个插件生效，配置此选项可以实现只对某些特定的功能进行自动分离</q-tooltip>
+              <q-item-section>分享中心</q-item-section>
             </q-item> -->
-          </q-list>
-        </q-menu>
-      </q-item>
-      <!-- <q-item clickable to="/share">
-            <q-item-section side>
-              <q-icon name="groups" />
-            </q-item-section>
-            <q-item-section>分享中心</q-item-section>
-          </q-item> -->
-      <!-- 收藏 -->
-      <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">
-        <q-item-section side>
-          <q-icon name="star" />
-        </q-item-section>
-        <q-item-section>收藏标签</q-item-section>
-        <q-tooltip>收藏后，会将当前标签名作为全局关键字，可在 uTools 的主输入框进行搜索
-          <br />
-          搜索进入后，默认进入当前标签的面板视图 <br />
-          类似于旧版本的「快捷面板」</q-tooltip>
-      </q-item>
-      <!-- 关于 -->
-      <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-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 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
+            的主输入框进行搜索
+            <br />
+            搜索进入后，默认进入当前标签的面板视图 <br />
+            类似于旧版本的「快捷面板」</q-tooltip
+          >
+        </q-item>
+        <!-- 关于 -->
+        <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-list>
+    </q-menu>
     <!-- 关于弹窗 -->
     <q-dialog v-model="showAbout">
       <AboutThis />
@@ -311,28 +450,28 @@
       <UserData :showInsertBtn="false" />
     </q-dialog>
     <!-- <q-dialog v-model="showAutoDetachFeatures">
-      <q-card>
-        <q-card-section style="height: 400px; overflow: auto;">
-          <q-option-group v-model="$root.profile.autoDetachFeatures" type="checkbox" :options="activateFeatures">
-            <template v-slot:label="opt">
-              <q-item clickable v-ripple style="width: 300px;">
-                <q-item-section avatar>
-                  <q-img :src="opt.icon" width="30px" />
-                </q-item-section>
-                <q-item-section>
-                  {{ opt.label }}
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-option-group>
-        </q-card-section>
-        <q-card-actions align="right">
-          <q-btn flat label="取消" @click="showAutoDetachFeatures = false" />
-          <q-btn color="primary" label="确定" @click="changeAutoDetachFeatures" />
-        </q-card-actions>
-      </q-card>
-    </q-dialog> -->
-  </q-menu>
+        <q-card>
+          <q-card-section style="height: 400px; overflow: auto;">
+            <q-option-group v-model="$root.profile.autoDetachFeatures" type="checkbox" :options="activateFeatures">
+              <template v-slot:label="opt">
+                <q-item clickable v-ripple style="width: 300px;">
+                  <q-item-section avatar>
+                    <q-img :src="opt.icon" width="30px" />
+                  </q-item-section>
+                  <q-item-section>
+                    {{ opt.label }}
+                  </q-item-section>
+                </q-item>
+              </template>
+            </q-option-group>
+          </q-card-section>
+          <q-card-actions align="right">
+            <q-btn flat label="取消" @click="showAutoDetachFeatures = false" />
+            <q-btn color="primary" label="确定" @click="changeAutoDetachFeatures" />
+          </q-card-actions>
+        </q-card>
+      </q-dialog> -->
+  </div>
 </template>
 
 <script>
@@ -438,34 +577,41 @@ export default {
     },
     // 获取所有启用的功能
     getActivatedFutures() {
-      let activateFeatures = this.$root.utools.whole.getFeatures().map(fts => {
-        return {
-          value: fts.code,
-          icon: fts.icon,
-          label: fts.explain,
-        }
-      });
-      let defaultFeatures = [{
-        value: "configuration",
-        label: "快捷命令配置",
-        icon: "logo.png"
-      },
-      {
-        value: "code",
-        label: "运行代码",
-        icon: "features/code.png"
-      },
-      {
-        value: "server",
-        label: "快捷命令服务",
-        icon: "features/server.png"
-      }]
-      this.activateFeatures = _.concat(defaultFeatures, _.cloneDeep(activateFeatures));
+      let activateFeatures = this.$root.utools.whole
+        .getFeatures()
+        .map((fts) => {
+          return {
+            value: fts.code,
+            icon: fts.icon,
+            label: fts.explain,
+          };
+        });
+      let defaultFeatures = [
+        {
+          value: "configuration",
+          label: "快捷命令配置",
+          icon: "logo.png",
+        },
+        {
+          value: "code",
+          label: "运行代码",
+          icon: "features/code.png",
+        },
+        {
+          value: "server",
+          label: "快捷命令服务",
+          icon: "features/server.png",
+        },
+      ];
+      this.activateFeatures = _.concat(
+        defaultFeatures,
+        _.cloneDeep(activateFeatures)
+      );
     },
     changeAutoDetachFeatures() {
       this.showAutoDetachFeatures = false;
       quickcommand.showMessageBox("设置成功");
     },
-  }
+  },
 };
 </script>
diff --git a/src/pages/ConfigurationPage.vue b/src/pages/ConfigurationPage.vue
index fa05d98..1ec3467 100644
--- a/src/pages/ConfigurationPage.vue
+++ b/src/pages/ConfigurationPage.vue
@@ -2,19 +2,37 @@
   <div class="relative">
     <!-- 标签栏 -->
     <!-- 面板视图不显示标签栏 -->
-    <q-scroll-area v-show="commandCardStyle !== 'mini'" class="absolute-left" :thumb-style="{
-      width: '2px',
-    }" :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-scroll-area
+      v-show="commandCardStyle !== 'mini'"
+      class="absolute-left"
+      :thumb-style="{
+        width: '2px',
+      }"
+      :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-tab v-for="tag in allQuickCommandTags" :key="tag" :name="tag" :content-class="tag === '搜索结果' || activatedQuickPanels.includes(tag)
-          ? 'text-blue-7 text-weight-bolder'
-          : ''
-          ">
+        <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,43 +42,78 @@
       </q-tabs>
     </q-scroll-area>
     <!-- 面板栏 -->
-    <q-tab-panels animated class="absolute-right" :style="{
-      bottom: footerBarHeight,
-      left: tabBarWidth,
-      background:
-        commandCardStyle === 'mini' && $root.profile.backgroundImg
-          ? `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">
-        <q-scroll-area style="height: 100%" :thumb-style="{
-          background: 'grey',
-          width: '6px',
-          opacity: 0.5,
-        }">
+    <q-tab-panels
+      animated
+      class="absolute-right"
+      :style="{
+        bottom: footerBarHeight,
+        left: tabBarWidth,
+        background:
+          commandCardStyle === 'mini' && $root.profile.backgroundImg
+            ? `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"
+      >
+        <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"
-              :commandInfo="commandInfo" :isCommandActivated="activatedQuickCommandFeatureCodes.includes(
-                commandInfo.features.code
-              )
-                " :cardStyle="commandCardStyleSheet[commandCardStyle]" @commandChanged="commandChanged" :style="{
-    width: commandCardStyleSheet[commandCardStyle].width,
-  }" class="relative-position q-pa-sm"></CommandCard>
+            <CommandCard
+              v-for="commandInfo in currentTagQuickCommands"
+              :key="commandInfo.features.code"
+              :commandInfo="commandInfo"
+              :isCommandActivated="
+                activatedQuickCommandFeatureCodes.includes(
+                  commandInfo.features.code
+                )
+              "
+              :cardStyle="commandCardStyleSheet[commandCardStyle]"
+              @commandChanged="commandChanged"
+              :style="{
+                width: commandCardStyleSheet[commandCardStyle].width,
+              }"
+              class="relative-position q-pa-sm"
+            ></CommandCard>
           </div>
         </q-scroll-area>
       </q-tab-panel>
     </q-tab-panels>
     <!-- 底栏 -->
-    <div class="absolute-bottom" :style="{
-      height: footerBarHeight,
-      left: tabBarWidth,
-    }">
+    <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"
-            @update:model-value="updateSearch" placeholder="搜索，支持拼音首字母">
+          <q-input
+            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"
-              toggle-color="primary" flat :options="[
+            <q-btn-toggle
+              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="{
-              height: footerBarHeight,
-            }"><q-spinner-bars color="primary" size="1.5em" />
+            <q-btn
+              stretch
+              color="primary"
+              flat
+              size="xs"
+              id="menuBtn"
+              :style="{
+                height: footerBarHeight,
+              }"
+              ><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'"
-      transition-hide="slide-down" style="overflow: hidden">
-      <CommandEditor ref="commandEditor" :action="commandEditorAction" @editorEvent="editorEvent"></CommandEditor>
+    <q-dialog
+      v-model="isCommandEditorShow"
+      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)
-        this.$root.utools.whole.dbStorage.setItem("cfg_loggedVersion", lastNeedLogEvent.version)
+        quickcommand.showConfirmBox(
+          '<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
+        );
       }
     },
   },