mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-09 23:16:18 +08:00
暗黑模式调整
This commit is contained in:
parent
3422a23087
commit
cee00fd3a7
@ -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">
|
||||
|
|
||||
<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>
|
||||
|
@ -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() {
|
||||
|
Loading…
x
Reference in New Issue
Block a user