study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-09 06:54:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

调整禁用且暗色模式下命令标签的视觉效果

Browse Source
This commit is contained in:
fofolee 2024-12-18 13:31:47 +08:00
parent 8d9841d268
commit fc71af3150
1 changed files with 51 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/components/CommandCard.vue
View File

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