动态修改主题色功能

src/App.vue

@@ -4,11 +4,14 @@
 
 <script>
 import { defineComponent } from "vue";
+import { setCssVar } from 'quasar'
 
 export default defineComponent({
   name: "App",
   data() {
-    return {};
+    return {
+        setCssVar: setCssVar
+    };
   },
   computed: {},
   created: function () {
@@ -26,6 +29,8 @@ export default defineComponent({
         });
         return;
       }
+      // 默认主题色
+      this.setCssVar("primary", this.$profile.primaryColor)
       utools.onPluginEnter((enter) => {
         // 暗黑模式
         this.$q.dark.set(utools.isDarkColors());

src/boot/global.js

@@ -1,10 +1,31 @@
-import { boot } from 'quasar/wrappers'
+import {
+    boot
+} from 'quasar/wrappers'
 import UTOOLS from "../js/utools.js";
 import programmings from '../js/programs.js';
 
+// 配置数据存取
+let defaultProfile = {
+    commandCardStyle: "normal",
+    primaryColor: "#419488"
+}
+let userProfile = UTOOLS.getDB(
+    UTOOLS.DBPRE.CFG + "preferences"
+);
+Object.assign(defaultProfile, userProfile)
+utools.onPluginOut(() => {
+    UTOOLS.putDB(
+        defaultProfile,
+        UTOOLS.DBPRE.CFG + "preferences"
+    );
+});
+
 // "async" is optional;
 // more info on params: https://v2.quasar.dev/quasar-cli/boot-files
-export default boot(async ({ app }) => {
+export default boot(async({
+    app
+}) => {
     app.config.globalProperties.$utools = UTOOLS
     app.config.globalProperties.$programmings = programmings
-})
+    app.config.globalProperties.$profile = defaultProfile
+})

src/components/CommandCard.vue

@@ -31,7 +31,7 @@
               运行
             </q-tooltip></q-btn
           >
-          <q-btn v-if="canCommandEdit" dense flat round color="primary" 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>

src/components/CommandEditor.vue

@@ -6,39 +6,74 @@
       :style="{
         top: languageBarHeight,
         width: sideBarWidth,
-        background: $q.dark.isActive? '#2d2d2d' : '#f2f2f2',
+        background: $q.dark.isActive ? '#2d2d2d' : '#f2f2f2',
       }"
       v-if="notRunCodePage"
     >
       <div class="row q-pa-md q-gutter-md">
         <q-img width="48px" :src="commandIcon" />
         <div>
-        <q-input standout="bg-teal text-white" dense square
-          v-model="quickcommandInfo.features.explain"
-          type="text"
-          label="说明"
-        />
-        <q-input standout="bg-teal text-white" dense square v-model="commandType" type="text" label="匹配类型" />
-        <q-input standout="bg-teal text-white" dense square
-          v-model="quickcommandInfo.features.cmds[0]"
-          type="text"
-          label="关键字"
-        />
-        <q-input standout="bg-teal text-white" dense square v-model="quickcommandInfo.tags" type="text" label="标签" />
-        <q-input standout="bg-teal text-white" dense square type="text" label="变量" />
-        <q-input standout="bg-teal text-white" dense square type="text" label="输出" />
-        <q-input standout="bg-teal text-white" dense square
-          v-model="quickcommandInfo.features.platform"
-          type="text"
-          label="平台"
-        />
+          <q-input
+            standout="bg-primary text-white"
+            dense
+            square
+            v-model="quickcommandInfo.features.explain"
+            type="text"
+            label="说明"
+          />
+          <q-input
+            standout="bg-primary text-white"
+            dense
+            square
+            v-model="commandType"
+            type="text"
+            label="匹配类型"
+          />
+          <q-input
+            standout="bg-primary text-white"
+            dense
+            square
+            v-model="quickcommandInfo.features.cmds[0]"
+            type="text"
+            label="关键字"
+          />
+          <q-input
+            standout="bg-primary text-white"
+            dense
+            square
+            v-model="quickcommandInfo.tags"
+            type="text"
+            label="标签"
+          />
+          <q-input
+            standout="bg-primary text-white"
+            dense
+            square
+            type="text"
+            label="变量"
+          />
+          <q-input
+            standout="bg-primary text-white"
+            dense
+            square
+            type="text"
+            label="输出"
+          />
+          <q-input
+            standout="bg-primary text-white"
+            dense
+            square
+            v-model="quickcommandInfo.features.platform"
+            type="text"
+            label="平台"
+          />
         </div>
       </div>
       <div>
         <q-btn-group spread class="absolute-bottom">
           <q-btn color="red" icon="close" label="退出" @click="closeEditor" />
           <q-btn
-            color="primary"
+            color="blue-9"
             icon="save"
             label="保存"
             @click="clickHandler2"
@@ -53,13 +88,12 @@
         <div>
           <q-select
             dense
-            filled
+            standout="bg-primary text-white"
             square
             hide-bottom-space
-            color="teal"
+            color="primary"
             transition-show="jump-down"
             transition-hide="jump-up"
-            label-color="teal"
             @update:model-value="programChanged"
             v-model="quickcommandInfo.program"
             :options="programLanguages"
@@ -87,10 +121,10 @@
       <div class="col-auto">
         <q-input
           dense
-          filled
+          standout="bg-primary text-white"
           square
           hide-bottom-space
-          color="teal"
+          color="primary"
           input-style="width: 120px;"
           v-model="quickcommandInfo.scptarg"
           label="脚本参数"
@@ -101,7 +135,7 @@
         <q-btn-group>
           <q-btn
             flat
-            color="teal"
+            color="primary"
             icon="help"
             @click="showHelp"
             v-show="quickcommandInfo.program === 'quickcommand'"
@@ -109,7 +143,7 @@
           >
           <q-btn
             flat
-            color="teal"
+            color="primary"
             icon="code"
             @click="showCustomOptions"
             v-show="quickcommandInfo.program !== 'quickcommand'"
@@ -117,13 +151,13 @@
           >
           <q-btn
             flat
-            color="teal"
+            color="primary"
             icon="format_size"
             @click="showCodingPage()"
             v-show="quickcommandInfo.program !== 'quickcommand'"
             ><q-tooltip>脚本及输出编码设置</q-tooltip></q-btn
           >
-          <q-btn flat color="teal" icon="send" @click="runCurrentCommand()"
+          <q-btn flat color="primary" icon="send" @click="runCurrentCommand()"
             ><q-tooltip>运行命令</q-tooltip></q-btn
           >
         </q-btn-group>
@@ -158,7 +192,7 @@
           ></pre>
         </q-card-section>
         <q-card-actions align="right">
-          <q-btn flat label="关闭" color="teal" v-close-popup />
+          <q-btn flat label="关闭" color="primary" v-close-popup />
         </q-card-actions>
       </q-card>
     </q-dialog>

src/components/ConfigurationMenu.vue

@@ -40,7 +40,7 @@
           <q-tooltip>当前启用的「快捷命令』数</q-tooltip>
         </q-chip>
         <q-chip dense square>
-          <q-avatar color="teal" text-color="white">
+          <q-avatar color="primary" text-color="white">
             {{ userLevel.number }}</q-avatar
           >Level
           <q-tooltip
@@ -148,6 +148,40 @@
           类似于旧版本的「快捷面板」</q-tooltip
         >
       </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>
+              <q-item-section side>
+                <q-icon name="color_lens" />
+              </q-item-section>
+              <q-item-section>主颜色</q-item-section>
+              <q-tooltip>你可以更改界面的主题色，Level 2 以上限定</q-tooltip>
+              <q-menu nchor="top left" self="bottom end">
+                <q-card>
+                  <q-color
+                    no-header
+                    no-footer
+                    @change="setPrimaryColor"
+                    v-model="$profile.primaryColor"
+                  />
+                  <q-btn
+                    color="primary"
+                    label="重置为默认"
+                    class="full-width"
+                    @click="resetPrimary"
+                  />
+                </q-card>
+              </q-menu>
+            </q-item>
+          </q-list>
+        </q-menu>
+      </q-item>
       <!-- 帮助 -->
       <q-item clickable v-close-popup>
         <q-item-section side>
@@ -160,6 +194,8 @@
 </template>
 
 <script>
+import { setCssVar } from "quasar";
+
 export default {
   data() {
     return {
@@ -169,6 +205,7 @@ export default {
         process: 0.4,
       },
       configurationPage: this.$parent.$parent.$parent,
+      setCssVar: setCssVar,
     };
   },
   mounted() {
@@ -206,6 +243,13 @@ export default {
         .querySelectorAll(".q-toggle[aria-checked='true']")
         .forEach((x) => x.click());
     },
+    setPrimaryColor() {
+      this.setCssVar("primary", this.$profile.primaryColor);
+    },
+    resetPrimary() {
+      this.$profile.primaryColor = "#419488";
+      this.setPrimaryColor();
+    },
   },
 };
 </script>

src/components/InputBox.vue

@@ -18,7 +18,7 @@
         </div>
       </q-card-section>
       <q-card-actions align="right">
-        <q-btn color="primary" label="确定" @click="onOKClick" />
+        <q-btn color="blue-9" label="确定" @click="onOKClick" />
         <q-btn color="negative" label="取消" @click="onCancelClick" />
       </q-card-actions>
     </q-card>

src/pages/ConfigurationPage.vue

@@ -10,7 +10,12 @@
         zIndex: 1,
       }"
     >
-      <q-tabs v-model="currentTag" vertical outside-arrows class="text-teal">
+      <q-tabs
+        v-model="currentTag"
+        vertical
+        outside-arrows
+        class="text-primary"
+      >
         <!-- 所有标签 -->
         <q-tab
           :alert="activatedQuickPanels.includes(tag)"
@@ -19,7 +24,7 @@
           :key="tag"
           :name="tag"
           :content-class="
-            tag === '搜索结果' ? 'text-primary text-weight-bold' : ''
+            tag === '搜索结果' ? 'text-blue-9 text-weight-bold' : ''
           "
           v-show="!(tag === '搜索结果' && !commandSearchKeyword)"
         >
@@ -112,8 +117,8 @@
             <!-- 切换视图 -->
             <q-btn-toggle
               v-model="commandCardStyle"
-              @click="$userProfile.commandCardStyle = commandCardStyle"
-              toggle-color="teal"
+              @click="$profile.commandCardStyle = commandCardStyle"
+              toggle-color="primary"
               flat
               :options="[
                 { slot: 'normal', value: 'normal' },
@@ -147,18 +152,18 @@
               split
               flat
               @click="addNewCommand"
-              color="teal"
+              color="primary"
               label="新建"
               icon="add"
             />
             <q-separator vertical />
             <!-- 下拉菜单 -->
-            <q-btn color="teal" flat size="xs"
-              ><q-spinner-bars color="teal" size="1.5em" />
+            <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="allQuickCommandTags.includes(currentTag)"
+                :isTagStared="activatedQuickPanels.includes(currentTag)"
               ></ConfigurationMenu>
             </q-btn>
           </q-btn-group>
@@ -207,7 +212,7 @@ export default {
       maximizedToggle: true,
       commandEditorAction: {},
       footerBarHeight: "40px",
-      commandCardStyle: this.$userProfile.commandCardStyle,
+      commandCardStyle: this.$profile.commandCardStyle,
       commandCardStyleSheet: {
         mini: {
           width: "20%",
@@ -454,7 +459,7 @@ export default {
             if (!featureCode.includes("default_"))
               delete this.allQuickCommands[featureCode];
           });
-          this.currentTag = "默认"
+          this.currentTag = "默认";
           quickcommand.showMessageBox(
             "清空完毕，为防止误操作，已将所有命令复制到剪贴板，可通过导入命令恢复"
           );