menu模块化

src/components/ConfigurationMenu.vue

@@ -6,63 +6,8 @@
     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="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>
+    <UserInfo />
+    <!-- 菜单 -->
     <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>
-        <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>
+      <AboutThis />
+    </q-dialog>
+    <!-- 面板视图弹窗 -->
+    <q-dialog v-model="showPanelConf">
+      <PanelSetting />
     </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(),
-      userLevel: {
-        number: 1,
-        process: 0.4,
-      },
-      configurationPage: this.$parent.$parent.$parent,
+      configurationPage: this.$root.$refs.configuration,
       setCssVar: setCssVar,
       selectFile: ref(null),
       showAbout: false,
-      pluginInfo: window.pluginInfo(),
-      links: links,
+      showPanelConf: false,
+      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>