配置菜单组件化

src/components/CommandCard.vue

@@ -22,6 +22,7 @@
           <q-btn
             flat
             round
+            dense
             color="green"
             icon="play_arrow"
             v-show="canCommandRun"
@@ -30,7 +31,7 @@
               运行
             </q-tooltip></q-btn
           >
-          <q-btn v-if="canCommandEdit" flat round color="primary" icon="share">
+          <q-btn v-if="canCommandEdit" dense flat round color="primary" icon="share">
             <q-tooltip anchor="top middle" self="center middle">
               导出
             </q-tooltip>
@@ -55,6 +56,7 @@
             v-if="canCommandEdit"
             flat
             round
+            dense
             color="red"
             icon="close"
             @click="removeCommand"

src/components/ConfigurationMenu.vue

@@ -0,0 +1,215 @@
+<template>
+  <q-menu
+    max-height="450px"
+    max-width="290px"
+    transition-show="jump-up"
+    transition-hide="jump-down"
+  >
+    <!-- 用户信息 -->
+    <div class="row no-wrap q-pa-md">
+      <div class="column items-center">
+        <q-avatar size="48px">
+          <img :src="userInfo.avatar" />
+          <q-badge
+            v-if="userInfo.type === 'member'"
+            floating
+            color="deep-orange"
+            label="v"
+            rounded
+          />
+        </q-avatar>
+        <div
+          class="text-subtitle1 q-mt-md q-mb-xs"
+          v-html="userInfo.nickname"
+        ></div>
+      </div>
+      <q-separator vertical inset class="q-mx-lg" />
+      <div class="column items-start q-gutter-xs">
+        <q-chip dense square>
+          <q-avatar color="indigo" text-color="white">{{
+            allQuickcommandsLength
+          }}</q-avatar>
+          Quickcommands
+          <q-tooltip>当前拥有的「快捷命令」数</q-tooltip>
+        </q-chip>
+        <q-chip dense square>
+          <q-avatar color="green-8" text-color="white">{{
+            allFeaturesLength
+          }}</q-avatar>
+          Features
+          <q-tooltip>当前启用的「快捷命令』数</q-tooltip>
+        </q-chip>
+        <q-chip dense square>
+          <q-avatar color="teal" text-color="white">
+            {{ userLevel.number }}</q-avatar
+          >Level
+          <q-tooltip
+            >使用本插件次数越多，等级越高，uTools VIP 有额外加成哟
+            <br />不要问我为什么 VIP 有加成，因为我白嫖了一个永久 VIP <br />
+            所以怎么也加点「会员特权」吧<br />
+            至于这个等级有啥用，我也不知道╮(╯▽╰)╭
+          </q-tooltip>
+        </q-chip>
+        <q-linear-progress
+          color="cyan-6"
+          stripe
+          rounded
+          style="width: 130px"
+          size="10px"
+          :value="userLevel.process"
+          ><q-tooltip
+            >距离下一级还剩{{ (1 - userLevel.process) * 100 }}%</q-tooltip
+          ></q-linear-progress
+        >
+      </div>
+    </div>
+    <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="importCommandAndLocate">
+              <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="importCommandAndLocate(false)"
+            >
+              <q-item-section side>
+                <q-icon name="content_paste" />
+              </q-item-section>
+              <q-item-section>从剪贴板导入</q-item-section>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </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>
+        <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="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-list>
+        </q-menu>
+      </q-item>
+      <!-- 收藏 -->
+      <q-item v-if="isTagStared" clickable v-close-popup>
+        <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>
+        <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>
+        <q-item-section side>
+          <q-icon name="help" />
+        </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
+  >
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userInfo: utools.getUser(),
+      userLevel: {
+        number: 1,
+        process: 0.4,
+      },
+      configurationPage: this.$parent.$parent.$parent,
+    };
+  },
+  mounted() {
+    window.configurationMenu = this;
+  },
+  props: {
+    allQuickcommandsLength: Number,
+    allFeaturesLength: Number,
+    isTagStared: Boolean,
+  },
+  methods: {
+    // 导入命令且定位
+    importCommandAndLocate(fromFile = true) {
+      this.configurationPage.importCommandAndLocate(fromFile);
+    },
+    // 全部导出
+    exportAllCommands() {
+      this.configurationPage.exportAllCommands();
+    },
+    // 清空
+    clearAllCommands() {
+      this.configurationPage.clearAllCommands();
+    },
+    // 启用全部
+    enableAllCommands() {
+      // dom 操作
+      document
+        .querySelectorAll(".q-toggle[aria-checked='false']")
+        .forEach((x) => x.click());
+    },
+    // 禁用全部
+    disableAllCommands() {
+      // dom 操作
+      document
+        .querySelectorAll(".q-toggle[aria-checked='true']")
+        .forEach((x) => x.click());
+    },
+  },
+};
+</script>

src/pages/ConfigurationPage.vue

@@ -145,129 +145,20 @@
             <q-btn
               split
               flat
-              label="新建"
               @click="addNewCommand"
               color="teal"
+              label="新建"
               icon="add"
-            ></q-btn>
+            />
             <q-separator vertical />
             <!-- 下拉菜单 -->
-            <q-btn color="teal" flat icon="menu" size="xs">
+            <q-btn color="teal" flat size="xs"
-              <q-menu transition-show="jump-up" transition-hide="jump-down">
+              ><q-spinner-bars color="teal" size="1.5em" />
-                <q-list>
+              <ConfigurationMenu
-                  <!-- 导入 -->
+                :allQuickcommandsLength="Object.keys(allQuickCommands).length"
-                  <q-item clickable>
+                :allFeaturesLength="activatedQuickCommandFeatureCodes.length"
-                    <q-item-section side>
+                :isTagStared="allQuickCommandTags.includes(currentTag)"
-                      <q-icon name="keyboard_arrow_left" />
+              ></ConfigurationMenu>
-                    </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="importCommandAndLocate"
-                        >
-                          <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="importCommandAndLocate(false)"
-                        >
-                          <q-item-section side>
-                            <q-icon name="content_paste" />
-                          </q-item-section>
-                          <q-item-section>从剪贴板导入</q-item-section>
-                        </q-item>
-                      </q-list>
-                    </q-menu>
-                  </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>
-                    <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="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-list>
-                    </q-menu>
-                  </q-item>
-                  <!-- 收藏 -->
-                  <q-item
-                    v-if="activatedQuickPanels.includes(currentTag)"
-                    clickable
-                    v-close-popup
-                  >
-                    <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>
-                    <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>
-                    <q-item-section side>
-                      <q-icon name="help" />
-                    </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-btn>
           </q-btn-group>
         </div>
@@ -324,9 +215,10 @@
 import quickcommandParser from "../js/quickcommandParser.js";
 import CommandCard from "components/CommandCard";
 import CommandEditor from "components/CommandEditor.vue";
+import ConfigurationMenu from "components/ConfigurationMenu.vue";
 
 export default {
-  components: { CommandCard, CommandEditor },
+  components: { CommandCard, CommandEditor, ConfigurationMenu },
   data() {
     return {
       currentTag: "默认",
@@ -336,7 +228,7 @@ export default {
       allQuickCommands: [],
       commandSearchKeyword: "",
       isCommandEditorShow: false,
-      maximizedToggle:true,
+      maximizedToggle: true,
       commandEditorAction: {},
       footerBarHeight: "40px",
       commandCardStyle: "normal",
@@ -528,32 +420,27 @@ export default {
           data: "导入未完成！",
           success: false,
         };
-      let dataToPushed = quickcommandParser(quickCommandInfo);
+      let parsedData = quickcommandParser(quickCommandInfo);
-      if (!dataToPushed)
+      if (!parsedData)
         return {
           data: "格式错误",
           success: false,
         };
       // 单个命令导入
-      if (dataToPushed.single) {
+      let dataToPushed = {};
-        this.$utools.putDB(
+      if (parsedData.single) {
-          dataToPushed.qc,
+        dataToPushed[parsedData.qc.features.code] = parsedData.qc;
-          this.$utools.DBPRE.QC + dataToPushed.qc.features.code
+        // 多个
-        );
-        this.allQuickCommands[dataToPushed.qc.features.code] = dataToPushed.qc;
-        // 多个命令导入
       } else {
-        for (var code of Object.keys(dataToPushed.qc)) {
+        dataToPushed = parsedData.qc;
-          this.$utools.putDB(
-            dataToPushed.qc[code],
-            this.$utools.DBPRE.QC + code
-          );
-        }
-        Object.assign(this.allQuickCommands, dataToPushed.qc);
       }
+      for (var code of Object.keys(dataToPushed)) {
+        this.$utools.putDB(dataToPushed[code], this.$utools.DBPRE.QC + code);
+      }
+      Object.assign(this.allQuickCommands, dataToPushed);
       return {
         success: true,
-        data: dataToPushed,
+        data: parsedData,
       };
     },
     // 导入命令且定位
@@ -570,7 +457,15 @@ export default {
       this.currentTag = !tags || !tags.length ? "未分类" : tags[0];
       // 等待 dom 渲染
       this.$nextTick(() => {
-        document.getElementById(code).scrollIntoViewIfNeeded();
+        let el = document.getElementById(code);
+        el.scrollIntoViewIfNeeded();
+        // 闪一下
+        el.style.filter = "invert(1) drop-shadow(1px 1px 5px #0000008e)";
+        el.style.transform = "translateY(-5px)";
+        setTimeout(() => {
+          el.style.filter = "";
+          el.style.transform = "";
+        }, 500);
       });
     },
     // 全部导出
@@ -649,20 +544,6 @@ export default {
         if (this.currentTag !== this.lastTag) this.currentTag = this.lastTag;
       }
     },
-    // 启用全部
-    enableAllCommands() {
-      // dom 操作
-      document
-        .querySelectorAll(".q-toggle[aria-checked='false']")
-        .forEach((x) => x.click());
-    },
-    // 禁用全部
-    disableAllCommands() {
-      // dom 操作
-      document
-        .querySelectorAll(".q-toggle[aria-checked='true']")
-        .forEach((x) => x.click());
-    },
     // 新建命令
     addNewCommand() {
       this.commandEditorAction = {