From fc71af3150f08d0a0ec5fb09f401eacbab3948c2 Mon Sep 17 00:00:00 2001
From: fofolee <fofolee@qq.com>
Date: Wed, 18 Dec 2024 13:31:47 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E7=A6=81=E7=94=A8=E4=B8=94?=
 =?UTF-8?q?=E6=9A=97=E8=89=B2=E6=A8=A1=E5=BC=8F=E4=B8=8B=E5=91=BD=E4=BB=A4?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E7=9A=84=E8=A7=86=E8=A7=89=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CommandCard.vue | 71 ++++++++++++++++++++++++----------
 1 file changed, 51 insertions(+), 20 deletions(-)

diff --git a/src/components/CommandCard.vue b/src/components/CommandCard.vue
index 0501876..8c55388 100644
--- a/src/components/CommandCard.vue
+++ b/src/components/CommandCard.vue
@@ -150,11 +150,14 @@
             >
               <span v-for="cmd in commandInfo.features.cmds" :key="cmd">
                 <span v-if="typeof cmd === 'string'">
-                  <q-badge rounded :color="matchTypeColor()"
-                    ><q-icon class="q-mr-xs" :name="commandTypes.key.icon" />{{
-                      getShortStrByByte(cmd)
-                    }}</q-badge
+                  <q-badge
+                    rounded
+                    :color="matchTypeColor()"
+                    :class="cardBadgeClass"
                   >
+                    <q-icon class="q-mr-xs" :name="commandTypes.key.icon" />
+                    {{ getShortStrByByte(cmd) }}
+                  </q-badge>
                   <q-tooltip>
                     <div class="text-subtitle2">
                       {{ cmd }}
@@ -162,11 +165,16 @@
                   </q-tooltip>
                 </span>
                 <span v-else-if="cmd.type === 'window' && cmd.match">
-                  <q-badge rounded :color="matchTypeColor(cmd.type)"
-                    ><q-icon
+                  <q-badge
+                    rounded
+                    :color="matchTypeColor(cmd.type)"
+                    :class="cardBadgeClass"
+                  >
+                    <q-icon
                       class="q-mr-xs"
                       :name="commandTypes.window.icon"
-                    />{{ getShortStrByByte(cmd.match.app[0]) }}
+                    />
+                    {{ getShortStrByByte(cmd.match.app[0]) }}
                   </q-badge>
                   <q-tooltip>
                     <div
@@ -179,12 +187,16 @@
                   </q-tooltip>
                 </span>
                 <span v-else-if="cmd.type === 'files'">
-                  <q-badge rounded :color="matchTypeColor(cmd.type)"
-                    ><q-icon class="q-mr-xs" :name="commandTypes.files.icon" />
+                  <q-badge
+                    rounded
+                    :color="matchTypeColor(cmd.type)"
+                    :class="cardBadgeClass"
+                  >
+                    <q-icon class="q-mr-xs" :name="commandTypes.files.icon" />
                     {{
                       (cmd.match && getShortStrByByte(cmd.match)) || "所有文件"
-                    }}</q-badge
-                  >
+                    }}
+                  </q-badge>
                   <q-tooltip>
                     <div class="text-subtitle2">
                       {{ cmd.match || "所有文件" }}
@@ -192,11 +204,16 @@
                   </q-tooltip>
                 </span>
                 <span v-else-if="cmd.type === 'regex'">
-                  <q-badge rounded :color="matchTypeColor(cmd.type)"
-                    ><q-icon
+                  <q-badge
+                    rounded
+                    :color="matchTypeColor(cmd.type)"
+                    :class="cardBadgeClass"
+                  >
+                    <q-icon
                       class="q-mr-xs"
                       :name="commandTypes.regex.icon"
-                    />{{ getShortStrByByte(cmd.match) }}
+                    />
+                    {{ getShortStrByByte(cmd.match) }}
                   </q-badge>
                   <q-tooltip>
                     <div class="text-subtitle2">
@@ -205,15 +222,23 @@
                   </q-tooltip>
                 </span>
                 <span v-else-if="cmd.type === 'over'">
-                  <q-badge rounded :color="matchTypeColor(cmd.type)"
-                    ><q-icon
+                  <q-badge
+                    rounded
+                    :color="matchTypeColor(cmd.type)"
+                    :class="cardBadgeClass"
+                  >
+                    <q-icon
                       class="q-mr-xs"
                       :name="commandTypes.over.icon"
                     />所有文本
                   </q-badge>
                 </span>
                 <span v-else-if="cmd.type === 'img'">
-                  <q-badge rounded :color="matchTypeColor(cmd.type)">
+                  <q-badge
+                    rounded
+                    :color="matchTypeColor(cmd.type)"
+                    :class="cardBadgeClass"
+                  >
                     <q-icon class="q-mr-xs" :name="commandTypes.img.icon" />图片
                   </q-badge>
                 </span>
@@ -325,9 +350,10 @@ export default {
     // 匹配类型的颜色
     matchTypeColor() {
       return (cmdType = "key") => {
-        return this.canCommandRunAtCurrentOS && this.isCommandActivated
-          ? this.commandTypes[cmdType].color
-          : this.disabledColor;
+        if (!this.canCommandRunAtCurrentOS || !this.isCommandActivated) {
+          return this.$q.dark.isActive ? 'grey-9' : this.disabledColor;
+        }
+        return this.commandTypes[cmdType].color;
       };
     },
     programColor() {
@@ -344,6 +370,11 @@ export default {
     cronExp() {
       return this.$root.nativeProfile.crontabs[this.featureCode];
     },
+    cardBadgeClass() {
+      return (!this.canCommandRunAtCurrentOS || !this.isCommandActivated) && this.$q.dark.isActive
+        ? 'text-grey-6'
+        : '';
+    },
   },
   props: {
     commandInfo: Object,