动态修改主题色功能

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>