暗黑模式调整

This commit is contained in:
fofolee 2022-04-02 19:34:14 +08:00
parent 3422a23087
commit cee00fd3a7
2 changed files with 177 additions and 97 deletions

View File

@ -1,56 +1,72 @@
<template> <template>
<div class="wrapper" :style="isCommandActivated ? '' : 'color:##9e9e9ea6'"> <!-- mini 模式下如果命令未启用或者不可直接运行则隐藏卡片面板 -->
<div
class="wrapper"
v-show="!(cardStyle.code === 1 && (!isCommandActivated || !canCommandRun))"
>
<div> <div>
<!-- 开关 --> <!-- mini 模式下不显示各类按钮 -->
<div class="absolute" style="z-index: 1; left: 20px; bottom: 16px"> <div v-show="cardStyle.code > 1">
<q-toggle <!-- 开关 -->
v-model="isCommandActivated" <div class="absolute" style="z-index: 1; left: 20px; bottom: 16px">
checked-icon="flash_on" <q-toggle
color="orange-6" v-model="isCommandActivated"
@click="toggleCommandActivated" checked-icon="flash_on"
/> color="orange-6"
@click="toggleCommandActivated"
/>
</div>
<!-- 选项按钮 -->
<div class="absolute" style="z-index: 1; right: 16px; top: 16px">
<q-btn
flat
round
color="green"
icon="play_arrow"
v-show="canCommandRun"
@click="runCommand"
><q-tooltip anchor="top middle" self="center middle">
运行
</q-tooltip></q-btn
>
<q-btn flat round color="primary" icon="share">
<q-tooltip anchor="top middle" self="center middle">
导出
</q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="exportCommandFile">
<q-item-section>导出</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="exportCommandRaw">
<q-item-section>复制到剪贴板</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn flat round color="red" icon="close" @click="removeCommand"
><q-tooltip anchor="top middle" self="center middle">
删除
</q-tooltip></q-btn
>
</div>
</div> </div>
<!-- 选项按钮 --> <!-- 未启用的命令文字为灰色 -->
<div class="absolute" style="z-index: 1; right: 16px; top: 16px"> <q-card v-ripple :style="isCommandActivated ? '' : 'color:grey'">
<q-btn
flat
round
color="green"
icon="play_arrow"
v-show="canCommandRun"
@click="runCommand"
><q-tooltip anchor="top middle" self="center middle">
运行
</q-tooltip></q-btn
>
<q-btn flat round color="primary" icon="share">
<q-tooltip anchor="top middle" self="center middle"> 导出 </q-tooltip>
<q-menu>
<q-list style="min-width: 100px">
<q-item clickable v-close-popup @click="exportCommandFile">
<q-item-section>导出</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="exportCommandRaw">
<q-item-section>复制到剪贴板</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
<q-btn flat round color="red" icon="close" @click="removeCommand"
><q-tooltip anchor="top middle" self="center middle">
删除
</q-tooltip></q-btn
>
</div>
<q-card v-ripple>
<q-card-section> <q-card-section>
<!-- logo --> <!-- logo -->
<div class="row"> <div class="row">
<q-img width="48px" :src="commandInfo.features.icon" /> <q-img width="48px" :src="commandInfo.features.icon" />
</div> </div>
<!-- 名称 --> <!-- 名称 -->
<!-- mini small 模式下命令标题字体变小 -->
<div class="row justify-end"> <div class="row justify-end">
<div class="text-h6 ellipsis"> <div
class="ellipsis"
:style="{
fontSize: cardStyle.code > 2 ? '1.25rem' : '1.1rem',
}"
>
{{ commandInfo.features.explain }} {{ commandInfo.features.explain }}
</div> </div>
</div> </div>
@ -59,9 +75,9 @@
<div class="matchTypesBox"> <div class="matchTypesBox">
<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="teal" <q-badge rounded :color="cmdBadgeColor()"
><q-icon class="q-mr-xs" name="font_download" />{{ ><q-icon class="q-mr-xs" name="font_download" />{{
cmd.length > 10 ? cmd.slice(0, 10) + "..." : cmd getShortStrByByte(cmd)
}}</q-badge }}</q-badge
> >
<q-tooltip> <q-tooltip>
@ -71,11 +87,9 @@
</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="indigo" <q-badge rounded :color="cmdBadgeColor(cmd.type)"
><q-icon class="q-mr-xs" name="widgets" />{{ ><q-icon class="q-mr-xs" name="widgets" />{{
cmd.match.app[0].length > 10 getShortStrByByte(cmd.match.app[0])
? cmd.match.app[0].slice(0, 10) + "..."
: cmd.match.app[0]
}} }}
</q-badge> </q-badge>
<q-tooltip> <q-tooltip>
@ -89,14 +103,10 @@
</q-tooltip> </q-tooltip>
</span> </span>
<span v-else-if="cmd.type === 'files'"> <span v-else-if="cmd.type === 'files'">
<q-badge rounded color="light-blue" <q-badge rounded :color="cmdBadgeColor(cmd.type)"
><q-icon class="q-mr-xs" name="description" /> ><q-icon class="q-mr-xs" name="description" />
{{ {{
(cmd.match && (cmd.match && getShortStrByByte(cmd.match)) || "所有文件"
(cmd.match.length > 10
? cmd.match.slice(0, 10) + "..."
: cmd.match)) ||
"所有文件"
}}</q-badge }}</q-badge
> >
<q-tooltip> <q-tooltip>
@ -106,11 +116,9 @@
</q-tooltip> </q-tooltip>
</span> </span>
<span v-else-if="cmd.type === 'regex'"> <span v-else-if="cmd.type === 'regex'">
<q-badge rounded color="cyan" <q-badge rounded :color="cmdBadgeColor(cmd.type)"
><q-icon class="q-mr-xs" name="playlist_add_check" />{{ ><q-icon class="q-mr-xs" name="playlist_add_check" />{{
cmd.match.length > 10 getShortStrByByte(cmd.match)
? cmd.match.slice(0, 10) + "..."
: cmd.match
}} }}
</q-badge> </q-badge>
<q-tooltip> <q-tooltip>
@ -120,32 +128,39 @@
</q-tooltip> </q-tooltip>
</span> </span>
<span v-else-if="cmd.type === 'over'"> <span v-else-if="cmd.type === 'over'">
<q-badge rounded color="light-green" <q-badge rounded :color="cmdBadgeColor(cmd.type)"
><q-icon class="q-mr-xs" name="clear_all" />所有文本 ><q-icon class="q-mr-xs" name="clear_all" />所有文本
</q-badge> </q-badge>
</span> </span>
<span v-else-if="cmd.type === 'img'"> <span v-else-if="cmd.type === 'img'">
<q-badge rounded color="deep-orange" label=""> <q-badge rounded :color="cmdBadgeColor(cmd.type)" label="">
<q-icon class="q-mr-xs" name="panorama" />图片 <q-icon class="q-mr-xs" name="panorama" />图片
</q-badge> </q-badge>
</span> </span>
</span> </span>
</div> </div>
</div> </div>
<!-- 语言类型及适配系统 --> <!-- mini模式下不显示语言类型和适配系统 -->
<div class="row justify-end items-center q-gutter-xs"> <!-- 语言类型 -->
<span <div
:style="'color:' + allProgrammings[commandInfo.program].color" class="row justify-end items-center q-gutter-xs"
v-show="cardStyle.code > 1"
>
<span :style="'color:' + allProgrammings[commandInfo.program].color"
></span ></span
> >
<span class="text-subtitle2">{{ commandInfo.program }}</span <span class="text-subtitle2">{{ commandInfo.program }}</span>
><span>|</span> <!-- mini small 模式下不显示适配系统 -->
<img <!-- 适配系统 -->
width="16" <div class="flex" v-show="cardStyle.code > 2">
v-for="platform in commandInfo.features.platform" |&nbsp;
:key="platform" <img
:src="'/img/' + platform + '.svg'" width="16"
/> v-for="platform in commandInfo.features.platform"
:key="platform"
:src="'/img/' + platform + '.svg'"
/>
</div>
</div> </div>
</q-card-section> </q-card-section>
</q-card> </q-card>
@ -162,26 +177,61 @@ export default {
return { return {
allProgrammings: allProgrammings, allProgrammings: allProgrammings,
isCommandActivated: this.activated, isCommandActivated: this.activated,
maxCmdStingLen: 8,
cmdBadgeSheet: {
keyword: "teal",
files: "light-blue",
window: "indigo",
regex: "cyan",
over: "light-green",
img: "deep-orange",
},
}; };
}, },
computed: { computed: {
//
canCommandRun() { canCommandRun() {
return ( return (
this.commandInfo.features.cmds.filter((x) => x.length).length && this.commandInfo.features.cmds.filter((x) => x.length).length &&
this.isCommandActivated this.isCommandActivated
); );
}, },
//
cmdBadgeColor() {
return (cmdType = "keyword") => {
if (!this.isCommandActivated)
return this.$q.dark.isActive ? "grey-9" : "grey-5";
return this.cmdBadgeSheet[cmdType];
};
},
}, },
props: { props: {
commandInfo: Object, commandInfo: Object,
activated: Boolean, activated: Boolean,
cardStyle: Object,
},
mounted() {
console.log("CommandCard", this);
}, },
methods: { methods: {
//
getShortStrByByte(str) {
let byteLen = 0;
let shortStr = "";
for (let i = 0; i < str.length; i++) {
byteLen += 129 - str[i].charCodeAt(0) > 0 ? 1 : 2;
if (byteLen > this.maxCmdStingLen) break;
shortStr += str[i];
}
return shortStr === str ? shortStr : shortStr + "...";
},
//
runCommand() { runCommand() {
utools.redirect( utools.redirect(
this.commandInfo.features.cmds.filter((x) => x.length)[0] this.commandInfo.features.cmds.filter((x) => x.length)[0]
); );
}, },
// /
toggleCommandActivated() { toggleCommandActivated() {
let event = { let event = {
type: "disable", type: "disable",
@ -195,6 +245,7 @@ export default {
} }
this.$emit("commandChanged", event); this.$emit("commandChanged", event);
}, },
//
removeCommand() { removeCommand() {
quickcommand.showConfirmBox("删除这个快捷命令").then((x) => { quickcommand.showConfirmBox("删除这个快捷命令").then((x) => {
if (!x) return; if (!x) return;
@ -212,10 +263,12 @@ export default {
); );
}); });
}, },
//
exportCommandRaw() { exportCommandRaw() {
utools.copyText(JSON.stringify(this.commandInfo, null, 4)) && utools.copyText(JSON.stringify(this.commandInfo, null, 4)) &&
quickcommand.showMessageBox("已复制到剪贴板"); quickcommand.showMessageBox("已复制到剪贴板");
}, },
//
exportCommandFile() { exportCommandFile() {
window.saveFile(JSON.stringify(this.commandInfo), { window.saveFile(JSON.stringify(this.commandInfo), {
title: "选择保存位置", title: "选择保存位置",
@ -243,7 +296,7 @@ export default {
} }
.matchTypesBox { .matchTypesBox {
height: 23px; height: 23px;
width: 60%; width: 80%;
overflow: hidden; overflow: hidden;
text-align: right; text-align: right;
} }
@ -251,8 +304,8 @@ export default {
transition: 0.5s; transition: 0.5s;
} }
.wrapper:hover { .wrapper:hover {
text-shadow: 1px 2px 4px #0000009e;
transition: 0.5s; transition: 0.5s;
transform: translateY(-4px); transform: translateY(-5px);
filter: drop-shadow(1px 1px 5px #0000008e);
} }
</style> </style>

View File

@ -37,28 +37,38 @@
vertical vertical
> >
<q-tab-panel <q-tab-panel
style="padding: 8px" style="padding: 0"
v-for="tag in allQuickCommandTags" v-for="tag in allQuickCommandTags"
:key="tag" :key="tag"
:name="tag" :name="tag"
> >
<div class="row center"> <q-scroll-area
<CommandCard style="height: 100%"
v-for="commandInfo in currentTagQuickCommands" :thumb-style="{
:key="commandInfo.features.code" background: 'grey',
:commandInfo="commandInfo" width: '6px',
:activated=" opacity: 0.5,
activatedQuickCommandFeatureCodes.includes( }"
commandInfo.features.code >
) <div class="row center q-pa-xs">
" <CommandCard
@commandChanged="commandChanged" v-for="commandInfo in currentTagQuickCommands"
:style="{ :key="commandInfo.features.code"
width: cmmandCardWidth, :commandInfo="commandInfo"
}" :activated="
class="relative-position q-pa-sm" activatedQuickCommandFeatureCodes.includes(
></CommandCard> commandInfo.features.code
</div> )
"
:cardStyle="commandCardStyleSheet[commandCardStyle]"
@commandChanged="commandChanged"
:style="{
width: commandCardStyleSheet[commandCardStyle].width,
}"
class="relative-position q-pa-sm"
></CommandCard>
</div>
</q-scroll-area>
</q-tab-panel> </q-tab-panel>
</q-tab-panels> </q-tab-panels>
<!-- 底栏 --> <!-- 底栏 -->
@ -85,10 +95,28 @@ export default {
activatedQuickCommandFeatureCodes: [], activatedQuickCommandFeatureCodes: [],
activatedQuickPanels: [], activatedQuickPanels: [],
allQuickCommands: [], allQuickCommands: [],
cmmandCardWidth: "33%",
tabBarWidth: "80px", tabBarWidth: "80px",
footerBarHeight: "35px", footerBarHeight: "35px",
barShadow: "2px 0 5px 2px #0000001f", barShadow: "2px 0 5px 2px #0000001f",
commandCardStyle: "normal",
commandCardStyleSheet: {
mini: {
width: "25%",
code: 1,
},
small: {
width: "33%",
code: 2,
},
normal: {
width: "50%",
code: 3,
},
large: {
width: "100%",
code: 4,
},
},
}; };
}, },
computed: { computed: {
@ -131,8 +159,7 @@ export default {
this.activatedQuickPanels = activatedFeatures.quickpanels; this.activatedQuickPanels = activatedFeatures.quickpanels;
// //
this.allQuickCommands = this.getAllQuickCommands(); this.allQuickCommands = this.getAllQuickCommands();
// tags console.log("ConfigurationPage", this);
console.log(this);
}, },
// features // features
getActivatedFeatures() { getActivatedFeatures() {