标签紧凑视图

src/components/ConfigurationMenu.vue

@@ -284,6 +284,19 @@
               </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>

src/js/options/defaultProfile.js

@@ -4,6 +4,7 @@ export default {
     defaultPrimaryColor: "#009688",
     backgroundImg: null,
     autofocusSearch: false,
+    denseTagBar: false,
     crontabs: {},
     quickFeatures: {
         favFile: {
@@ -25,4 +26,4 @@ export default {
             serverStatus: false
         }
     }
-}
+}

src/pages/ConfigurationPage.vue

@@ -11,7 +11,14 @@
         overflow: 'hidden',
       }"
     >
-      <q-tabs v-model="currentTag" vertical outside-arrows class="text-primary">
+      <q-tabs
+        v-model="currentTag"
+        vertical
+        outside-arrows
+        class="text-primary"
+        :key="$root.profile.denseTagBar"
+        :dense="$root.profile.denseTagBar"
+      >
         <!-- 所有标签 -->
         <q-tab
           v-for="tag in allQuickCommandTags"