menu模块化

src/App.vue

@@ -1,5 +1,7 @@
 <template>
-  <router-view />
+  <router-view v-slot="{ Component }">
+    <component :ref="$route.name" :is="Component" />
+  </router-view>
 </template>
 
 <script>

src/components/AboutThis.vue

@@ -0,0 +1,88 @@
+<template>
+  <q-card>
+    <q-card-section class="q-gutter-md flex items-center">
+      <q-avatar square size="48px">
+        <img src="/logo.png" />
+      </q-avatar>
+      <span class="text-h5"
+        >{{ pluginInfo.pluginName }} v{{ pluginInfo.version }}</span
+      >
+    </q-card-section>
+    <q-card-section> {{ pluginInfo.description }} </q-card-section>
+    <q-card-section>
+      <div v-for="group in Object.keys(links)" :key="group" class="q-gutter-sm">
+        <q-btn
+          flat
+          color="primary"
+          v-for="item in links[group]"
+          :key="item"
+          @click="visit(item.url)"
+          :label="item.name"
+          ><q-tooltip>{{ item.desc }} </q-tooltip></q-btn
+        >
+        <br />
+      </div>
+    </q-card-section>
+    <q-card-actions align="right">
+      <q-btn flat label="确定" color="primary" v-close-popup />
+    </q-card-actions>
+  </q-card>
+</template>
+
+<script>
+const links = {
+  plugin: [
+    {
+      name: "帮助",
+      url: "",
+      desc: "查看插件使用帮助",
+    },
+    {
+      name: "源码",
+      url: "https://github.com/fofolee/uTools-quickcommand",
+      desc: "本插件完全开源，记得 Star 哟",
+    },
+    {
+      name: "论坛",
+      url: "https://yuanliao.info/d/424-242-242",
+      desc: "到猿料论坛参与讨论吧",
+    },
+  ],
+  tech: [
+    {
+      name: "Vue.js",
+      url: "https://v3.cn.vuejs.org/",
+      desc: "基于 Vue.js 开发",
+    },
+    {
+      name: "Quasar Framework",
+      url: "https://quasar.dev/",
+      desc: "基于 Quasar Framework 开发",
+    },
+    {
+      name: "Google Fonts",
+      url: "https://fonts.google.com/",
+      desc: "文字图标来自 Google Fonts",
+    },
+    {
+      name: "Icon8s",
+      url: "https://icons8.com/",
+      desc: "彩色图标来自 Icon8s",
+    },
+  ],
+};
+
+export default {
+  data() {
+    return {
+      pluginInfo: window.pluginInfo(),
+      links: links,
+    };
+  },
+  methods: {
+    visit(url) {
+      utools.shellOpenExternal(url);
+    },
+  },
+};
+</script>

src/components/CommandEditor.vue

@@ -186,7 +186,7 @@ export default {
       resultMaxLength: 10000,
       showSidebar: this.action.type !== "run",
       isRunCodePage: this.action.type === "run",
-      parent: this.$parent.$parent.$parent.$parent,
+      configurationPage: this.$root.$refs.configuration,
       commandString: this.$q.platform.is.mac ? "⌘" : "ctrl",
     };
   },
@@ -200,7 +200,7 @@ export default {
   computed: {
     allQuickCommandTags() {
       return _.without(
-        this.parent.allQuickCommandTags,
+        this.configurationPage?.allQuickCommandTags,
         "默认",
         "未分类",
         "搜索结果"

src/components/ConfigurationMenu.vue

@@ -6,63 +6,8 @@
     transition-hide="jump-down"
   >
     <!-- 用户信息 -->
-    <div class="row no-wrap q-pa-md">
+    <UserInfo />
-      <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="primary" 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>
@@ -196,13 +141,13 @@
         </q-menu>
       </q-item>
       <!-- 收藏 -->
-      <q-item v-if="isTagStared" clickable v-close-popup>
+      <q-item v-if="isTagStared" clickable>
         <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 v-else clickable @click="showPanelConf = true">
         <q-item-section side>
           <q-icon name="star" />
         </q-item-section>
@@ -222,40 +167,13 @@
         <q-item-section>关于</q-item-section></q-item
       >
     </q-list>
+    <!-- 关于弹窗 -->
     <q-dialog v-model="showAbout">
-      <q-card>
+      <AboutThis />
-        <q-card-section class="q-gutter-md flex items-center">
+    </q-dialog>
-          <q-avatar square size="48px">
+    <!-- 面板视图弹窗 -->
-            <img src="/logo.png" />
+    <q-dialog v-model="showPanelConf">
-          </q-avatar>
+      <PanelSetting />
-          <span class="text-h5"
-            >{{ pluginInfo.pluginName }} v{{ pluginInfo.version }}</span
-          >
-        </q-card-section>
-        <q-card-section> {{ pluginInfo.description }} </q-card-section>
-        <q-card-section>
-          <div
-            v-for="group in Object.keys(links)"
-            :key="group"
-            class="q-gutter-sm"
-          >
-            <q-btn
-              flat
-              color="primary"
-              v-for="item in links[group]"
-              :key="item"
-              @click="visit(item.url)"
-              :label="item.name"
-              ><q-tooltip>{{ item.desc }} </q-tooltip></q-btn
-            >
-            <br />
-          </div>
-        </q-card-section>
-
-        <q-card-actions align="right">
-          <q-btn flat label="确定" color="primary" v-close-popup />
-        </q-card-actions>
-      </q-card>
     </q-dialog>
   </q-menu>
 </template>
@@ -263,30 +181,33 @@
 <script>
 import { setCssVar } from "quasar";
 import { ref } from "vue";
-import links from "../js/options/aboutLinks.js";
+import AboutThis from "components/AboutThis";
+import PanelSetting from "components/PanelSetting";
+import UserInfo from "components/UserInfo";
 
 export default {
+  components: {
+    AboutThis,
+    PanelSetting,
+    UserInfo,
+  },
   data() {
     return {
-      userInfo: utools.getUser(),
+      configurationPage: this.$root.$refs.configuration,
-      userLevel: {
-        number: 1,
-        process: 0.4,
-      },
-      configurationPage: this.$parent.$parent.$parent,
       setCssVar: setCssVar,
       selectFile: ref(null),
       showAbout: false,
-      pluginInfo: window.pluginInfo(),
+      showPanelConf: false,
-      links: links,
+      panelConf: {
+        name: "",
+        description: "",
+      },
     };
   },
   mounted() {
     window.configurationMenu = this;
   },
   props: {
-    allQuickcommandsLength: Number,
-    allFeaturesLength: Number,
     isTagStared: Boolean,
   },
   methods: {
@@ -327,9 +248,6 @@ export default {
       this.$profile.backgroundImg = reset ? null : this.selectFile.path;
       this.configurationPage.$forceUpdate();
     },
-    visit(url) {
-      utools.shellOpenExternal(url);
-    },
   },
 };
 </script>

src/components/PanelSetting.vue

@@ -0,0 +1,13 @@
+<template>
+  <q-card>
+    <q-card-section>
+      <q-input dense label="名称" v-model="panelConf.name" />
+      <q-input dense label="说明" v-model="panelConf.description" />
+    </q-card-section>
+    <q-card-actions align="right">
+      <q-btn flat label="取消" color="grey" v-close-popup />
+      <q-btn flat label="禁用" color="negative" v-close-popup />
+      <q-btn flat label="启用" color="primary" v-close-popup />
+    </q-card-actions>
+  </q-card>
+</template>

src/components/UserInfo.vue

@@ -0,0 +1,74 @@
+<template>
+  <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">{{
+          Object.keys(configurationPage.allQuickCommands).length
+        }}</q-avatar>
+        Quickcommands
+        <q-tooltip>当前拥有的「快捷命令」数</q-tooltip>
+      </q-chip>
+      <q-chip dense square>
+        <q-avatar color="green-8" text-color="white">{{
+          configurationPage.activatedQuickCommandFeatureCodes.length
+        }}</q-avatar>
+        Features
+        <q-tooltip>当前启用的「快捷命令」数</q-tooltip>
+      </q-chip>
+      <q-chip dense square>
+        <q-avatar color="primary" 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>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      userInfo: utools.getUser(),
+      userLevel: {
+        number: 1,
+        process: 0.4,
+      },
+      configurationPage: this.$root.$refs.configuration,
+    };
+  },
+};
+</script>

src/js/options/aboutLinks.js

@@ -1,36 +0,0 @@
-const links = {
-    plugin: [{
-            name: "帮助",
-            url: "",
-            desc: "查看插件使用帮助"
-        },
-        {
-            name: "源码",
-            url: "https://github.com/fofolee/uTools-quickcommand",
-            desc: "本插件完全开源，记得 Star 哟"
-        }, {
-            name: "论坛",
-            url: "https://yuanliao.info/d/424-242-242",
-            desc: "到猿料论坛参与讨论吧"
-        }
-    ],
-    tech: [{
-        name: "Vue.js",
-        url: "https://v3.cn.vuejs.org/",
-        desc: "基于 Vue.js 开发"
-    }, {
-        name: "Quasar Framework",
-        url: "https://quasar.dev/",
-        desc: "基于 Quasar Framework 开发"
-    }, {
-        name: "Google Fonts",
-        url: "https://fonts.google.com/",
-        desc: "文字图标来自 Google Fonts"
-    }, {
-        name: "Icon8s",
-        url: "https://icons8.com/",
-        desc: "彩色图标来自 Icon8s"
-    }]
-}
-
-export default links

src/pages/ConfigurationPage.vue

@@ -163,8 +163,6 @@
             <q-btn color="primary" flat size="xs"
               ><q-spinner-bars color="primary" size="1.5em" />
               <ConfigurationMenu
-                :allQuickcommandsLength="Object.keys(allQuickCommands).length"
-                :allFeaturesLength="activatedQuickCommandFeatureCodes.length"
                 :isTagStared="activatedQuickPanels.includes(currentTag)"
               ></ConfigurationMenu>
             </q-btn>