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