自定义背景

src/App.vue

@@ -4,13 +4,13 @@
 
 <script>
 import { defineComponent } from "vue";
-import { setCssVar } from 'quasar'
+import { setCssVar } from "quasar";
 
 export default defineComponent({
   name: "App",
   data() {
     return {
-        setCssVar: setCssVar
+      setCssVar: setCssVar,
     };
   },
   computed: {},
@@ -30,12 +30,12 @@ export default defineComponent({
         return;
       }
       // 默认主题色
-      this.setCssVar("primary", this.$profile.primaryColor)
+      this.setCssVar("primary", this.$profile.primaryColor);
       utools.onPluginEnter((enter) => {
         // 暗黑模式
         this.$q.dark.set(utools.isDarkColors());
         // 路由跳转
-        quickcommand.enterData = enter
+        quickcommand.enterData = enter;
         this.$router.push(enter.code);
       });
     },

src/boot/global.js

@@ -9,6 +9,7 @@ let defaultProfile = {
     commandCardStyle: "normal",
     primaryColor: "#009688",
     defaultPrimaryColor: "#009688",
+    backgroundImg: null,
 }
 let userProfile = UTOOLS.getDB(
     UTOOLS.DBPRE.CFG + "preferences"

src/components/CommandCard.vue

@@ -31,7 +31,14 @@
               运行
             </q-tooltip></q-btn
           >
-          <q-btn v-if="canCommandEdit" dense flat round color="blue-9" icon="share">
+          <q-btn
+            v-if="canCommandEdit"
+            dense
+            flat
+            round
+            color="blue-9"
+            icon="share"
+          >
             <q-tooltip anchor="top middle" self="center middle">
               导出
             </q-tooltip>
@@ -70,7 +77,10 @@
       <q-card
         @click="handleCardClick"
         v-ripple
-        :style="isCommandActivated ? '' : 'color:grey'"
+        :style="{
+          color: isCommandActivated ? 'unset' : 'grey',
+          background: $q.dark.isActive ? '#ffffff08' : '#00000008'
+        }"
       >
         <q-card-section>
           <!-- logo -->
@@ -199,7 +209,7 @@ export default {
       isCommandActivated: this.activated,
       maxCmdStingLen: 8,
       cmdBadgeSheet: {
-        keyword: "teal",
+        keyword: "primary",
         files: "light-blue",
         window: "indigo",
         regex: "cyan",

src/components/ConfigurationMenu.vue

@@ -161,7 +161,7 @@
                 <q-icon name="color_lens" />
               </q-item-section>
               <q-item-section>主颜色</q-item-section>
-              <q-tooltip>你可以更改界面的主题色，Level 2 以上限定</q-tooltip>
+              <q-tooltip>你可以更改界面的主题色，Level 3 以上限定</q-tooltip>
               <q-menu nchor="top left" self="bottom end">
                 <q-card>
                   <q-color
@@ -179,6 +179,38 @@
                 </q-card>
               </q-menu>
             </q-item>
+            <q-item clickable>
+              <q-item-section side>
+                <q-icon name="image" />
+              </q-item-section>
+              <q-item-section>面板视图背景图片</q-item-section>
+              <q-tooltip
+                >为面板视图设置一张背景图片，Level 2 以上限定<br />请不要选择尺寸太大的图片，将影响插件载入速度</q-tooltip
+              >
+              <q-menu 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-list>
         </q-menu>
       </q-item>
@@ -195,6 +227,7 @@
 
 <script>
 import { setCssVar } from "quasar";
+import { ref } from "vue";
 
 export default {
   data() {
@@ -206,6 +239,7 @@ export default {
       },
       configurationPage: this.$parent.$parent.$parent,
       setCssVar: setCssVar,
+      selectFile: ref(null),
     };
   },
   mounted() {
@@ -250,6 +284,10 @@ export default {
       this.$profile.primaryColor = this.$profile.defaultPrimaryColor;
       this.setPrimaryColor();
     },
+    changeBackground(reset = false) {
+      this.$profile.backgroundImg = reset ? null : this.selectFile.path;
+      this.configurationPage.$forceUpdate();
+    },
   },
 };
 </script>

src/pages/ConfigurationPage.vue

@@ -10,12 +10,7 @@
         zIndex: 1,
       }"
     >
-      <q-tabs
-        v-model="currentTag"
-        vertical
-        outside-arrows
-        class="text-primary"
-      >
+      <q-tabs v-model="currentTag" vertical outside-arrows class="text-primary">
         <!-- 所有标签 -->
         <q-tab
           :alert="activatedQuickPanels.includes(tag)"
@@ -43,6 +38,11 @@
       :style="{
         bottom: footerBarHeight,
         left: tabBarWidth,
+        background:
+          commandCardStyle === 'mini' && $profile.backgroundImg
+            ? 'url(file:///' + $profile.backgroundImg + ')'
+            : 'none',
+        backgroundSize: 'cover',
       }"
       v-model="currentTag"
       transition-prev="slide-down"