暗黑模式调整

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

View File

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